@dexteel/mesf-core 7.1.0 → 7.2.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "7.1.0"
+  ".": "7.2.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [7.2.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.1.0...@dexteel/mesf-core-v7.2.0) (2025-11-05)
+
+
+### Features
+
+* **MESFModal:** Add subtitle prop to Modal for enhanced title display ([e64b4f2](https://github.com/dexteel/mesf-core-frontend/commit/e64b4f2a7833cc470e7e9cd5d2bc7c21bdd92905))
+
+
+### Bug Fixes
+
+* **Alert:** Import Alert for `mui/material` and use forwardRef for improved ref handling ([34868c8](https://github.com/dexteel/mesf-core-frontend/commit/34868c8e0b95d601aaabd60d35434695c64b2401))
+* **Context Menu:** Change width of context menu to auto for better responsiveness ([287b20a](https://github.com/dexteel/mesf-core-frontend/commit/287b20ab377a03bbfd5668edbb9f3d97baff153a))
+* **Trending:** Replace TextFields for DateTimePickers, Fix style of TagTree & Fix save of views ([0bfb906](https://github.com/dexteel/mesf-core-frontend/commit/0bfb9064ebcce0ee0336afc594743d344d78b09d))
+
 ## [7.1.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.0.2...@dexteel/mesf-core-v7.1.0) (2025-10-31)
 
 

package/dist/components/modals/modal.mesf.d.ts

@@ -1,14 +1,16 @@
 import { DialogActionsProps, DialogContentProps } from "@mui/material";
+import { DialogProps } from "@mui/material/Dialog";
 import React, { ComponentType, ReactNode } from "react";
-interface MESFModalProps {
+interface MESFModalProps extends Omit<DialogProps, "onClose" | "open"> {
     handleClose: (shouldUpdate?: boolean) => void;
     open: boolean;
     id?: string;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
     children: ReactNode;
     title?: string;
+    subtitle?: string;
 }
-declare function Modal({ children, title, handleClose, open, id, maxWidth, }: MESFModalProps): React.JSX.Element;
+declare function Modal({ children, title, subtitle, handleClose, open, id, maxWidth, }: MESFModalProps): React.JSX.Element;
 export declare const MesfModal: typeof Modal & {
     Content: ComponentType<DialogContentProps>;
     Actions: ComponentType<DialogActionsProps>;

package/dist/controls/alert.d.ts

@@ -1,3 +1,3 @@
 import { type AlertProps } from "@mui/lab/Alert";
 import React from "react";
-export declare const Alert: (props: AlertProps) => React.JSX.Element;
+export declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/index.esm.js

@@ -1,12 +1,12 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 export * from '@microsoft/signalr';
 export { LicenseManager } from 'ag-grid-enterprise';
-import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, alpha, Dialog as Dialog$1, TextField, Paper, List, ListItem, ListItemIcon, ListItemText, Box, Chip, SvgIcon, Typography as Typography$1, Checkbox, InputAdornment, IconButton as IconButton$1, MenuItem, Card, CardContent, CardActions, Collapse, createTheme, CircularProgress, Snackbar, FormControlLabel, Switch, InputLabel, Select, DialogContentText, useTheme, Popover, MenuList, FormControl, FormHelperText, Badge, Tooltip, Input, Divider, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, useMediaQuery, ListSubheader, ListItemButton, Autocomplete as Autocomplete$1, Alert as Alert$4, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, debounce, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
+import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, alpha, Dialog as Dialog$1, TextField, Paper, List, ListItem, ListItemIcon, ListItemText, Box, Chip, SvgIcon, Typography as Typography$1, Checkbox, InputAdornment, IconButton as IconButton$1, MenuItem, Card, CardContent, CardActions, Collapse, createTheme, CircularProgress, Snackbar, FormControlLabel, Switch, InputLabel, Select, Alert as Alert$3, DialogContentText, useTheme, Popover, MenuList, FormControl, FormHelperText, Badge, Tooltip, Input, Divider, CssBaseline, AppBar, Toolbar, Container, Menu, Hidden, Drawer, useMediaQuery, ListSubheader, ListItemButton, Autocomplete as Autocomplete$1, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, debounce, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
 import { useMutation, useQueryClient, useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useRef, useEffect, useMemo, Component, useCallback, lazy, Suspense } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
-import Alert$3 from '@mui/lab/Alert';
+import Alert$4 from '@mui/lab/Alert';
 import IconButton from '@mui/material/IconButton';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Cloud, Timeline, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, ViewList, Build, Settings as Settings$2, FastRewind, FastForward, ZoomIn, Restore, Lock, Create, Delete, Folder, InsertChart, Search, PlaylistAdd, DragIndicator, Save, AttachFile, CloudUpload, GetApp } from '@mui/icons-material';
@@ -47,6 +47,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import Settings$1 from '@mui/icons-material/Settings';
 import ShowChartIcon from '@mui/icons-material/ShowChart';
 import axios from 'axios';
+import { LocalizationProvider as LocalizationProvider$1 } from '@mui/x-date-pickers/LocalizationProvider';
 import { DataGrid, GridOverlay } from '@mui/x-data-grid';
 import { isAncestor, Tree, DndProvider as DndProvider$1 } from '@minoru/react-dnd-treeview';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -230,9 +231,11 @@ var DialogActions = styled(DialogActions$1)(function (_a) {
     });
 });
 function Modal(_a) {
-    var children = _a.children, title = _a.title, handleClose = _a.handleClose, open = _a.open, _b = _a.id, id = _b === void 0 ? "mesf-modal" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "lg" : _c;
+    var children = _a.children, title = _a.title, subtitle = _a.subtitle, handleClose = _a.handleClose, open = _a.open, _b = _a.id, id = _b === void 0 ? "mesf-modal" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "lg" : _c;
     return (React__default.createElement(Dialog, { onClose: function () { return handleClose(); }, "aria-labelledby": id, open: open, maxWidth: maxWidth, style: { minWidth: 320 } },
-        React__default.createElement(DialogTitle, { id: id, onClose: function () { return handleClose(); } }, title),
+        React__default.createElement(DialogTitle, { id: id, onClose: function () { return handleClose(); } },
+            title,
+            subtitle ? (React__default.createElement(Typography, { variant: "caption", color: "text.secondary", display: "block" }, subtitle)) : null),
         children));
 }
 var MesfModal = Object.assign(Modal, {
@@ -2633,9 +2636,9 @@ var LogsPage = function (props) {
     return React.createElement(Logs, null);
 };
 
-var Alert = function (props) {
-    return React__default.createElement(Alert$3, __assign({ elevation: 6, variant: "filled" }, props));
-};
+var Alert = React__default.forwardRef(function Alert(props, ref) {
+    return React__default.createElement(Alert$3, __assign({ elevation: 6, variant: "filled", ref: ref }, props));
+});
 
 var INITIAL_VALUES$3 = {
     ProfileId: null,
@@ -4872,7 +4875,6 @@ var AssetSearchInput = function (_a) {
 };
 
 var buildTreeAssets$1 = function (nodes) {
-    debugger;
     //tree build functions
     var idMapping = nodes.reduce(function (acc, el, i) {
         // console.log(acc)
@@ -5058,7 +5060,7 @@ var CreateNewAssetDialog = function (_a) {
                             React__default.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React__default.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React__default.createElement(Snackbar, { open: assetCreatedSuccess, autoHideDuration: 2500, onClose: handleClose },
-            React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created successfully"))));
+            React__default.createElement(Alert$4, { severity: "info", onClose: handleClose }, "Document created successfully"))));
 };
 
 var EditAssetDialog = function (_a) {
@@ -5250,7 +5252,7 @@ var RemoveAssetDialog = function (_a) {
                 React__default.createElement(Button, { autoFocus: true, color: "secondary", startIcon: isSubmitLoading && React__default.createElement(CircularProgress, { size: "1rem" }), onClick: handleRemoveAsset }, "Delete"))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React__default.createElement(Snackbar, { open: assetRemovedSuccess, autoHideDuration: 2500, onClose: handleClose },
-            React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
+            React__default.createElement(Alert$4, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
 };
 
 var ViewerAssetDialog = function (_a) {
@@ -7490,7 +7492,7 @@ var ContextMenu$1 = function () {
             backgroundColor: "#fff",
             borderRadius: "2px",
             padding: "5px 0",
-            width: "180px",
+            width: "auto",
             height: "auto",
             margin: "0",
             zIndex: 1,
@@ -9143,7 +9145,7 @@ function ChangePassword(props) {
         React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, "Change Password"),
         React__default.createElement(DialogContent$1, { dividers: true },
             React__default.createElement(Collapse, { in: showError },
-                React__default.createElement(Alert$3, { severity: "error", action: React__default.createElement(IconButton, { "aria-label": "close", color: "inherit", size: "small", onClick: function () {
+                React__default.createElement(Alert$4, { severity: "error", action: React__default.createElement(IconButton, { "aria-label": "close", color: "inherit", size: "small", onClick: function () {
                             setShowError(false);
                             setError(undefined);
                         } },
@@ -11908,7 +11910,7 @@ var SaveUpdateDeleteViewModalV2 = function (_a) {
                                     : "Save")))))),
         React__default.createElement(ConfirmationDialogRaw, { title: "Confirmation", message: "Are you sure you want to delete permanently the view: ".concat((_d = (view || viewSelected)) === null || _d === void 0 ? void 0 : _d.ViewName, "?"), open: openDeleteDialog, onClose: deleteViewAction }),
         React__default.createElement(Snackbar, { open: snackbarOpen, autoHideDuration: 2500, onClose: handleSnackbarClose },
-            React__default.createElement(Alert$3, { elevation: 6, variant: "filled", severity: "success", onClose: handleSnackbarClose }, snackbarMessage)),
+            React__default.createElement(Alert$4, { elevation: 6, variant: "filled", severity: "success", onClose: handleSnackbarClose }, snackbarMessage)),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
@@ -12119,13 +12121,18 @@ var HeaderSectionV2 = React__default.memo(function (_a) {
                             React__default.createElement(IconButton$1, { onClick: function () { return handlePartialDateNavigator("subtract"); }, size: "small" },
                                 React__default.createElement(FastRewind, { fontSize: "medium", sx: { color: "black" } })))),
                     React__default.createElement(Grid2, { size: { md: 3.5 } },
-                        React__default.createElement(TextField, { label: "Start", variant: "outlined", fullWidth: true, value: moment$8(timeScopeStart).format("MM-DD-YY HH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
-                                shrink: true,
-                            }, InputProps: {
-                                max: timeScopeEnd,
-                                endAdornment: (React__default.createElement(InputAdornment, { position: "end" },
-                                    React__default.createElement(CalendarIcon, { fontSize: "small" }))),
-                            } })),
+                        React__default.createElement(LocalizationProvider$1, { dateAdapter: AdapterMoment },
+                            React__default.createElement(DateTimePicker, { label: "Start", format: "MM/DD/YYYY HH:mm:ss", value: moment$8(timeScopeStart), onChange: function (newValue) {
+                                    if (newValue) {
+                                        handleDateChange(newValue.toDate(), "start");
+                                    }
+                                }, minutesStep: 1, slotProps: {
+                                    textField: {
+                                        size: "small",
+                                        variant: "outlined",
+                                        fullWidth: true,
+                                    },
+                                } }))),
                     React__default.createElement(Grid2, { size: { md: 2 }, marginTop: 0.5 },
                         React__default.createElement(FormControl, { variant: "outlined", fullWidth: true, size: "small" },
                             React__default.createElement(Select, { value: scope, onChange: function (e) {
@@ -12139,14 +12146,18 @@ var HeaderSectionV2 = React__default.memo(function (_a) {
                                 React__default.createElement(MenuItem, { value: "10 days" }, "10 days"),
                                 React__default.createElement(MenuItem, { value: "custom" }, "Custom")))),
                     React__default.createElement(Grid2, { size: { md: 3.5 } },
-                        React__default.createElement(TextField, { label: "End", variant: "outlined", fullWidth: true, value: autoRefresh
-                                ? ""
-                                : moment$8(timeScopeEnd).format("MM-DD-YY HH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
-                                shrink: true,
-                            }, InputProps: {
-                                endAdornment: (React__default.createElement(InputAdornment, { position: "end" },
-                                    React__default.createElement(CalendarIcon, { fontSize: "small" }))),
-                            } })),
+                        React__default.createElement(LocalizationProvider$1, { dateAdapter: AdapterMoment },
+                            React__default.createElement(DateTimePicker, { label: "End", format: "MM/DD/YYYY HH:mm:ss", value: autoRefresh ? null : moment$8(timeScopeEnd), onChange: function (newValue) {
+                                    if (newValue) {
+                                        handleDateChange(newValue.toDate(), "end");
+                                    }
+                                }, minutesStep: 1, slotProps: {
+                                    textField: {
+                                        size: "small",
+                                        variant: "outlined",
+                                        fullWidth: true,
+                                    },
+                                }, disabled: autoRefresh }))),
                     React__default.createElement(Grid2, null,
                         React__default.createElement(Tooltip, { title: "Navigate forward 20%", arrow: true },
                             React__default.createElement(IconButton$1, { onClick: function () { return handlePartialDateNavigator("add"); }, size: "small" },
@@ -12235,7 +12246,9 @@ var HeaderSectionV2 = React__default.memo(function (_a) {
                         backgroundColor: "white",
                         width: "100%",
                     } },
-                    React__default.createElement(Autocomplete$1, { size: "small", id: "view-selector", options: views, getOptionLabel: function (option) { return option.ViewName; }, value: viewSelected, onChange: handleViewChange, noOptionsText: "No views available", renderOption: function (props, option) { return (React__default.createElement(Box, __assign({}, props, { component: "li", style: {
+                    React__default.createElement(Autocomplete$1, { size: "small", id: "view-selector", options: views, getOptionLabel: function (option) { return option.ViewName; }, value: viewSelected, isOptionEqualToValue: function (option, value) {
+                            return option.ViewId === (value === null || value === void 0 ? void 0 : value.ViewId);
+                        }, onChange: handleViewChange, noOptionsText: "No views available", renderOption: function (props, option) { return (React__default.createElement(Box, __assign({}, props, { component: "li", style: {
                                 display: "flex",
                                 justifyContent: "space-between",
                                 width: "100%",
@@ -12588,11 +12601,8 @@ var TagFolderCustomNodeV2 = function (_a) {
         };
     }, []);
     return (React__default.createElement(Box, { onClick: onClickHandler, sx: {
-            paddingLeft: depth * 20,
+            paddingInlineStart: depth * 2,
             cursor: "pointer",
-            listStyleType: "none",
-            margin: 0,
-            padding: 0,
             alignItems: "center",
             display: "flex",
             height: "32px",
@@ -12615,7 +12625,6 @@ var TagFolderCustomNodeV2 = function (_a) {
                     alignItems: "center",
                     fontSize: "10px",
                     fontWeight: "bold",
-                    margin: "0 5px",
                     borderRadius: "3px",
                     border: "1px solid rgba(0, 0, 0, 0.2)",
                     backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === "A" ? "#AD48C4" : "#C46F48",
@@ -13511,7 +13520,7 @@ var TagsTableV2 = function () {
                 key: "saveView",
                 name: "Save View",
                 onClick: function () {
-                    handleSaveView();
+                    handleSaveViewRef.current();
                 },
             },
             {
@@ -13652,12 +13661,16 @@ var TagsTableV2 = function () {
     // This prevents closure issues with the context menu registration
     var viewTagsRef = React__default.useRef(viewTags);
     var handleDeleteTagRef = React__default.useRef(handleDeleteTag);
-    React__default.useEffect(function () {
+    var handleSaveViewRef = React__default.useRef(handleSaveView);
+    useEffect(function () {
         viewTagsRef.current = viewTags;
     }, [viewTags]);
-    React__default.useEffect(function () {
+    useEffect(function () {
         handleDeleteTagRef.current = handleDeleteTag;
     }, [handleDeleteTag]);
+    useEffect(function () {
+        handleSaveViewRef.current = handleSaveView;
+    }, [handleSaveView, viewSelected]);
     var handleColorChange = useCallback(function (tagId, newColor) {
         var _a;
         var currentViewTags = viewTagsRef.current;
@@ -14043,7 +14056,7 @@ var TagsTableV2 = function () {
         React__default.createElement(LoadViewModalV2, { open: loadViewOpen, handleClose: function () { return setLoadViewOpen(false); } }),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React__default.createElement(Snackbar, { open: !!snackbarMessage, autoHideDuration: 3000, onClose: handleCloseSnackbar, anchorOrigin: { vertical: "bottom", horizontal: "center" } },
-            React__default.createElement(Alert$4, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
+            React__default.createElement(Alert$3, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
 };
 
 /**
@@ -19173,7 +19186,7 @@ var NotificationSnackBar = function (_a) {
         setOpen(!!message);
     }, [message]);
     return (React__default.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
-        React__default.createElement(Alert$3, { elevation: 6, variant: "filled", severity: severity, onClose: handleClose }, message)));
+        React__default.createElement(Alert$4, { elevation: 6, variant: "filled", severity: severity, onClose: handleClose }, message)));
 };
 
 var useEntrySubmission = function (_a) {