@jbrowse/core 2.4.2 → 2.6.0

package/ui/AppLogo.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { AnyConfigurationModel } from '../configuration';
 declare const Logo: ({ session, }: {
     session: {
         configuration: AnyConfigurationModel;
     };
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Logo;

package/ui/AssemblySelector.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { InputProps as IIP, TextFieldProps as TFP } from '@mui/material';
 import { AbstractSessionModel } from '../util';
 declare const AssemblySelector: ({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText, }: {
@@ -9,5 +9,5 @@ declare const AssemblySelector: ({ session, onChange, selected, InputProps, Text
     localStorageKey?: string | undefined;
     InputProps?: IIP | undefined;
     TextFieldProps?: TFP | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default AssemblySelector;

package/ui/AssemblySelector.js

@@ -35,7 +35,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         minWidth: 180,
     },
 });
-const AssemblySelector = (0, mobx_react_1.observer)(({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText = 'Select assembly to view', }) => {
+const AssemblySelector = (0, mobx_react_1.observer)(function ({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText = 'Select assembly to view', }) {
     const { classes } = useStyles();
     const { assemblyNames, assemblyManager } = session;
     // constructs a localstorage key based on host/path/config to help

package/ui/CascadingMenu.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { MenuItem as JBMenuItem } from './Menu';
 import { PopupState } from 'material-ui-popup-state/hooks';
 declare function CascadingMenuChildren(props: {
     onMenuItemClick: Function;
     menuItems: JBMenuItem[];
     popupState: PopupState;
-}): JSX.Element;
+}): React.JSX.Element;
 export default CascadingMenuChildren;

package/ui/CascadingMenuButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MenuItem } from '@jbrowse/core/ui';
+declare const CascadingMenuButton: ({ children, menuItems, ...rest }: {
+    [key: string]: unknown;
+    children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    menuItems: MenuItem[];
+}) => React.JSX.Element;
+export default CascadingMenuButton;

package/ui/CascadingMenuButton.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const CascadingMenu_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenu"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const hooks_1 = require("material-ui-popup-state/hooks");
+const CascadingMenuButton = (0, mobx_react_1.observer)(function CascadingMenuButton({ children, menuItems, ...rest }) {
+    const popupState = (0, hooks_1.usePopupState)({
+        popupId: 'viewMenu',
+        variant: 'popover',
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.IconButton, { ...(0, hooks_1.bindTrigger)(popupState), ...rest, disabled: menuItems.length === 0 }, children),
+        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_, callback) => callback(), menuItems: menuItems, popupState: popupState })));
+});
+exports.default = CascadingMenuButton;

package/ui/ColorPicker.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const PopoverPicker: ({ color, onChange, }: {
     color: string;
     onChange: (color: string) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare function ColorPopover({ anchorEl, onChange, onClose, color, }: {
     color: string;
     anchorEl: HTMLElement | null;
     onChange: (val: string) => void;
     onClose: () => void;
-}): JSX.Element;
+}): React.JSX.Element;
 export declare function ColorPicker({ onChange, color, }: {
     color: string;
     onChange: (val: string) => void;
-}): JSX.Element;
+}): React.JSX.Element;
 export default PopoverPicker;

package/ui/Dialog.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { DialogProps } from '@mui/material';
-declare function JBrowseDialog(props: DialogProps & {
-    title: string;
-}): JSX.Element;
-declare const _default: typeof JBrowseDialog;
+interface Props extends DialogProps {
+    header?: React.ReactNode;
+}
+declare const _default: (props: Props) => React.JSX.Element;
 export default _default;

package/ui/Dialog.js

@@ -24,19 +24,31 @@ function DialogError({ error }) {
     return (react_1.default.createElement("div", { style: { width: 800, margin: 40 } },
         react_1.default.createElement(ErrorMessage_1.default, { error: error })));
 }
-function JBrowseDialog(props) {
+exports.default = (0, mobx_react_1.observer)(function JBrowseDialog(props) {
     const { classes } = useStyles();
-    const { title, children, onClose } = props;
+    const { title, header, children, onClose } = props;
+    const theme = (0, material_1.useTheme)();
     return (react_1.default.createElement(material_1.Dialog, { ...props },
         react_1.default.createElement(material_1.ScopedCssBaseline, null,
-            react_1.default.createElement(material_1.DialogTitle, null,
+            react_1.default.isValidElement(header) ? (react_1.default.createElement(react_1.default.Fragment, null, header)) : (react_1.default.createElement(material_1.DialogTitle, null,
                 title,
                 onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
                         // @ts-expect-error
                         onClose();
                     } },
-                    react_1.default.createElement(Close_1.default, null))) : null),
+                    react_1.default.createElement(Close_1.default, null))) : null)),
             react_1.default.createElement(material_1.Divider, null),
-            react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: DialogError }, children))));
-}
-exports.default = (0, mobx_react_1.observer)(JBrowseDialog);
+            react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: DialogError },
+                react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)(theme, {
+                        components: {
+                            MuiInputBase: {
+                                styleOverrides: {
+                                    input: {
+                                        // xref https://github.com/GMOD/jbrowse-components/pull/3666
+                                        boxSizing: 'content-box!important',
+                                    },
+                                },
+                            },
+                        },
+                    }) }, children)))));
+});

package/ui/DropDownMenu.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { MenuItem } from './Menu';
 declare function DropDownMenu({ menuTitle, session, menuItems, }: {
     menuTitle: string;
     session: any;
     menuItems: MenuItem[];
-}): JSX.Element;
+}): React.JSX.Element;
 declare const _default: typeof DropDownMenu;
 export default _default;

package/ui/EditableTypography.js

@@ -45,7 +45,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 // using forwardRef so that MUI Tooltip can wrap this component
-const EditableTypography = react_1.default.forwardRef((props, ref) => {
+const EditableTypography = react_1.default.forwardRef(function (props, ref) {
     const { value, setValue, variant, ...other } = props;
     const [editedValue, setEditedValue] = (0, react_1.useState)();
     const [sizerNode, setSizerNode] = (0, react_1.useState)(null);

package/ui/ErrorMessage.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 declare const ErrorMessage: ({ error }: {
     error: unknown;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default ErrorMessage;

package/ui/ErrorMessage.js

@@ -4,9 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const ErrorMessage = ({ error }) => {
+function parseError(str) {
     let snapshotError = '';
-    let str = `${error}`;
     const findStr = 'is not assignable';
     const idx = str.indexOf(findStr);
     if (idx !== -1) {
@@ -26,6 +25,11 @@ const ErrorMessage = ({ error }) => {
             snapshotError = match2[1];
         }
     }
+    return snapshotError;
+}
+const ErrorMessage = ({ error }) => {
+    const str = `${error}`;
+    const snapshotError = parseError(str);
     return (react_1.default.createElement("div", { style: {
             padding: 4,
             margin: 4,

package/ui/FactoryResetDialog.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 declare const _default: ({ onClose, open, onFactoryReset, }: {
     onClose: Function;
     open: boolean;
     onFactoryReset: Function;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/ui/FatalErrorDialog.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-declare const FatalErrorDialog: ({ componentStack, error, onFactoryReset, resetButtonText, }: {
-    componentStack?: string | undefined;
+import React from 'react';
+export default function FatalErrorDialog({ componentStack, error, onFactoryReset, resetButtonText, }: {
+    componentStack?: string;
     error?: unknown;
-    onFactoryReset: Function;
-    resetButtonText?: string | undefined;
-}) => JSX.Element;
-export default FatalErrorDialog;
+    onFactoryReset: () => void;
+    resetButtonText?: string;
+}): React.JSX.Element;

package/ui/FatalErrorDialog.js

@@ -29,21 +29,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const FactoryResetDialog_1 = __importDefault(require("./FactoryResetDialog"));
+const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const ResetComponent = ({ onFactoryReset, resetButtonText, }) => {
     const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Button, { "data-testid": "fatal-error", color: "primary", variant: "contained", onClick: () => setDialogOpen(true) }, resetButtonText),
         react_1.default.createElement(FactoryResetDialog_1.default, { onClose: () => setDialogOpen(false), open: dialogOpen, onFactoryReset: onFactoryReset })));
 };
-const FatalErrorDialog = ({ componentStack, error = 'No error message provided', onFactoryReset, resetButtonText = 'Factory Reset', }) => {
-    return (react_1.default.createElement(material_1.Dialog, { open: true },
-        react_1.default.createElement(material_1.DialogTitle, { style: { background: '#e88' } }, "Fatal error"),
+function FatalErrorDialog({ componentStack, error = 'No error message provided', onFactoryReset, resetButtonText = 'Factory Reset', }) {
+    return (react_1.default.createElement(material_1.Dialog, { maxWidth: "xl", open: true },
+        react_1.default.createElement(material_1.DialogTitle, null, "Fatal error"),
         react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement("pre", null,
-                `${error}`,
-                componentStack)),
+            react_1.default.createElement(ErrorMessage_1.default, { error: error }),
+            react_1.default.createElement("pre", null, componentStack)),
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { color: "secondary", variant: "contained", onClick: () => window.location.reload() }, "Refresh"),
             react_1.default.createElement(ResetComponent, { onFactoryReset: onFactoryReset, resetButtonText: resetButtonText }))));
-};
+}
 exports.default = FatalErrorDialog;

package/ui/FileSelector/FileSelector.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FileLocation, AbstractRootModel } from '../../util/types';
 declare const _default: (props: {
     location?: FileLocation | undefined;
@@ -7,5 +7,5 @@ declare const _default: (props: {
     name?: string | undefined;
     description?: string | undefined;
     rootModel?: AbstractRootModel | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/ui/FileSelector/FileSelector.js

@@ -35,6 +35,7 @@ const LocalFileChooser_1 = __importDefault(require("./LocalFileChooser"));
 const UrlChooser_1 = __importDefault(require("./UrlChooser"));
 // icons
 const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
+const util_1 = require("../../util");
 function ToggleButtonWithTooltip(props) {
     const { title, children, ...other } = props;
     return (react_1.default.createElement(material_1.Tooltip, { title: title || '' },
@@ -106,13 +107,13 @@ exports.default = (0, mobx_react_1.observer)(function (props) {
                         "More",
                         react_1.default.createElement(ArrowDropDown_1.default, null))) : null),
                 react_1.default.createElement(material_1.Menu, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, hiddenAccts === null || hiddenAccts === void 0 ? void 0 : hiddenAccts.map((acct, idx) => (react_1.default.createElement(material_1.MenuItem, { key: acct.internetAccountId, value: acct.internetAccountId, onClick: () => {
-                        const prev = shownAccts[shownAccts.length - 1];
+                        const prev = shownAccts.at(-1);
                         setShownAccts([...shownAccts.slice(0, -1), acct]);
                         setHiddenAccts([
                             prev,
                             ...hiddenAccts.slice(0, idx),
                             ...hiddenAccts.slice(idx + 1),
-                        ]);
+                        ].filter(util_1.notEmpty));
                         setToggleButtonValue(acct.internetAccountId);
                         setAnchorEl(null);
                     } }, acct.name)))))),

package/ui/FileSelector/LocalFileChooser.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { FileLocation } from '../../util/types';
 declare function LocalFileChooser(props: {
     location?: FileLocation;
     setLocation: Function;
-}): JSX.Element;
+}): React.JSX.Element;
 export default LocalFileChooser;

package/ui/FileSelector/UrlChooser.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { FileLocation } from '../../util/types';
-declare function UrlChooser(props: {
+declare const _default: (props: {
     location?: FileLocation;
     setLocation: Function;
     label?: string;
-}): JSX.Element;
-declare const _default: typeof UrlChooser;
+}) => React.JSX.Element;
 export default _default;

package/ui/FileSelector/UrlChooser.js

@@ -7,14 +7,12 @@ const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const types_1 = require("../../util/types");
-function UrlChooser(props) {
+exports.default = (0, mobx_react_1.observer)(function UrlChooser(props) {
     const { location, setLocation, label } = props;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.TextField, { fullWidth: true, variant: "outlined", inputProps: { 'data-testid': 'urlInput' }, defaultValue: location && (0, types_1.isUriLocation)(location) ? location.uri : '', label: label || 'Enter URL', onChange: event => {
-                setLocation({
-                    uri: event.target.value.trim(),
-                    locationType: 'UriLocation',
-                });
-            } })));
-}
-exports.default = (0, mobx_react_1.observer)(UrlChooser);
+    return (react_1.default.createElement(material_1.TextField, { fullWidth: true, variant: "outlined", inputProps: { 'data-testid': 'urlInput' }, defaultValue: location && (0, types_1.isUriLocation)(location) ? location.uri : '', label: label || 'Enter URL', onChange: event => {
+            setLocation({
+                uri: event.target.value.trim(),
+                locationType: 'UriLocation',
+            });
+        } }));
+});

package/ui/Icons.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
 import { SvgIconProps } from '@mui/material/SvgIcon';
-export declare function ContentCopy(props: SvgIconProps): JSX.Element;
-export declare function Indexing(props: SvgIconProps): JSX.Element;
-export declare function ContentCut(props: SvgIconProps): JSX.Element;
-export declare function ContentPaste(props: SvgIconProps): JSX.Element;
-export declare function TrackSelector(props: SvgIconProps): JSX.Element;
-export declare function SaveAs(props: SvgIconProps): JSX.Element;
-export declare function Save(props: SvgIconProps): JSX.Element;
-export declare function DNA(props: SvgIconProps): JSX.Element;
-export declare function Cable(props: SvgIconProps): JSX.Element;
+import React from 'react';
+export declare function ContentCopy(props: SvgIconProps): React.JSX.Element;
+export declare function Indexing(props: SvgIconProps): React.JSX.Element;
+export declare function ContentCut(props: SvgIconProps): React.JSX.Element;
+export declare function ContentPaste(props: SvgIconProps): React.JSX.Element;
+export declare function TrackSelector(props: SvgIconProps): React.JSX.Element;
+export declare function SaveAs(props: SvgIconProps): React.JSX.Element;
+export declare function Save(props: SvgIconProps): React.JSX.Element;
+export declare function DNA(props: SvgIconProps): React.JSX.Element;
+export declare function Cable(props: SvgIconProps): React.JSX.Element;

package/ui/LoadingEllipses.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { TypographyProps } from '@mui/material';
 interface Props extends TypographyProps {
     message?: string;
 }
-export default function LoadingEllipses({ message, variant, ...rest }: Props): JSX.Element;
+export default function LoadingEllipses({ message, variant, ...rest }: Props): React.JSX.Element;
 export {};

package/ui/Logo.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 type LogoVariant = 'color' | 'black' | 'white';
 interface LogoProps {
     variant?: LogoVariant;
 }
-export declare function Logomark({ variant }: LogoProps): JSX.Element;
-export declare function LogoFull({ variant }: LogoProps): JSX.Element;
+export declare function Logomark({ variant }: LogoProps): React.JSX.Element;
+export declare function LogoFull({ variant }: LogoProps): React.JSX.Element;
 export {};

package/ui/Menu.d.ts

@@ -9,7 +9,7 @@ interface MenuItemEndDecorationSelectorProps {
     disabled?: boolean;
 }
 type MenuItemEndDecorationProps = MenuItemEndDecorationSubMenuProps | MenuItemEndDecorationSelectorProps;
-export declare function MenuItemEndDecoration(props: MenuItemEndDecorationProps): JSX.Element;
+export declare function MenuItemEndDecoration(props: MenuItemEndDecorationProps): React.JSX.Element;
 export interface MenuDivider {
     priority?: number;
     type: 'divider';
@@ -49,5 +49,5 @@ interface MenuProps extends PopoverProps {
     menuItems: MenuItem[];
     onMenuItemClick: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, callback: Function) => void;
 }
-declare function Menu(props: MenuProps): JSX.Element;
+declare function Menu(props: MenuProps): React.JSX.Element;
 export default Menu;

package/ui/PrerenderedCanvas.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 declare function PrerenderedCanvas(props: {
     width: number;
     height: number;
@@ -7,5 +7,5 @@ declare function PrerenderedCanvas(props: {
     imageData?: any;
     showSoftClip?: boolean;
     blockKey?: string;
-}): JSX.Element;
+}): React.JSX.Element;
 export default PrerenderedCanvas;

package/ui/ResizeBar.d.ts

@@ -8,4 +8,4 @@ export default function ResizeBar({ widths, setWidths, checkbox, scrollLeft, }:
     setWidths: (arg: number[]) => void;
     checkbox?: boolean;
     scrollLeft?: number;
-}): JSX.Element;
+}): React.JSX.Element;

package/ui/ResizeBar.js

@@ -42,7 +42,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         position: 'absolute',
         height: '100%',
         pointerEvents: 'none',
-        background: theme.palette.divider,
+        background: theme.palette.action.disabled,
         width: 1,
     },
     hiddenTick: {

package/ui/ResizeHandle.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 declare function ResizeHandle({ onDrag, vertical, flexbox, className: originalClassName, ...props }: {
     onDrag: (arg: number) => number | void;
     vertical?: boolean;
     flexbox?: boolean;
     className?: string;
     [props: string]: unknown;
-}): JSX.Element;
+}): React.JSX.Element;
 export default ResizeHandle;

package/ui/ReturnToImportFormDialog.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 declare function ReturnToImportFormDialog({ model, handleClose, }: {
     model: {
         clearView: Function;
     };
     handleClose: () => void;
-}): JSX.Element;
+}): React.JSX.Element;
 declare const _default: typeof ReturnToImportFormDialog;
 export default _default;

package/ui/SanitizedHTML.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 export declare function isHTML(str: string): boolean;
 export default function SanitizedHTML({ html }: {
     html: string;
-}): JSX.Element;
+}): React.JSX.Element;

package/ui/SanitizedHTML.js

@@ -53,6 +53,12 @@ function isHTML(str) {
     return full.test(str);
 }
 exports.isHTML = isHTML;
+// note this is mocked during testing, see
+// packages/__mocks__/@jbrowse/core/ui/SanitizedHTML something about dompurify
+// behavior causes errors during tests, was seen in
+// products/jbrowse-web/src/tests/Connection.test.tsx test (can delete mock to
+// see)
+//
 function SanitizedHTML({ html }) {
     const value = isHTML(html) ? html : (0, escape_html_1.default)(html);
     if (!added) {

package/ui/Snackbar.d.ts

@@ -1,13 +1,11 @@
-/// <reference types="react" />
-import { IAnyStateTreeNode } from 'mobx-state-tree';
-import { AbstractSessionModel, NotificationLevel, SnackAction } from '../util';
-type SnackbarMessage = [string, NotificationLevel, SnackAction];
+import React from 'react';
+import { AbstractSessionModel } from '../util';
+import { SnackbarMessage } from './SnackbarModel';
 interface SnackbarSession extends AbstractSessionModel {
     snackbarMessages: SnackbarMessage[];
-    popSnackbarMessage: () => unknown;
+    popSnackbarMessage: () => void;
 }
-declare function MessageSnackbar({ session, }: {
-    session: SnackbarSession & IAnyStateTreeNode;
-}): JSX.Element;
-declare const _default: typeof MessageSnackbar;
+declare const _default: ({ session, }: {
+    session: SnackbarSession;
+}) => React.JSX.Element | null;
 export default _default;

package/ui/Snackbar.js

@@ -8,26 +8,21 @@ const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 // icons
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
-function MessageSnackbar({ session, }) {
-    const { popSnackbarMessage, snackbarMessages } = session;
-    const latestMessage = snackbarMessages.length
-        ? snackbarMessages[snackbarMessages.length - 1]
-        : null;
+exports.default = (0, mobx_react_1.observer)(function MessageSnackbar({ session, }) {
+    const { snackbarMessages } = session;
+    const latestMessage = snackbarMessages.at(-1);
     const handleClose = (_event, reason) => {
-        if (reason === 'clickaway') {
-            return;
+        if (reason !== 'clickaway') {
+            session.popSnackbarMessage();
         }
-        popSnackbarMessage();
     };
-    const open = !!latestMessage;
-    const [message, level, action] = latestMessage || [];
-    return (react_1.default.createElement(material_1.Snackbar, { open: open, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' } },
-        react_1.default.createElement(material_1.Alert, { onClose: handleClose, action: action ? (react_1.default.createElement(react_1.default.Fragment, null,
+    return !!latestMessage ? (react_1.default.createElement(material_1.Snackbar, { open: true, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' } },
+        react_1.default.createElement(material_1.Alert, { onClose: handleClose, action: latestMessage.action ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(material_1.Button, { color: "inherit", onClick: e => {
-                        action.onClick();
+                        var _a;
+                        (_a = latestMessage.action) === null || _a === void 0 ? void 0 : _a.onClick();
                         handleClose(e);
-                    } }, action.name),
+                    } }, latestMessage.action.name),
                 react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: handleClose },
-                    react_1.default.createElement(Close_1.default, null)))) : null, severity: level || 'warning' }, message)));
-}
-exports.default = (0, mobx_react_1.observer)(MessageSnackbar);
+                    react_1.default.createElement(Close_1.default, null)))) : null, severity: latestMessage.level || 'warning' }, latestMessage.message))) : null;
+});

package/ui/SnackbarModel.d.ts

@@ -1,15 +1,21 @@
 import { IModelType, ModelProperties } from 'mobx-state-tree';
 import { IObservableArray } from 'mobx';
 import { NotificationLevel, SnackAction } from '../util/types';
+export interface SnackbarMessage {
+    message: string;
+    level?: NotificationLevel;
+    action?: SnackAction;
+}
 /**
  * #stateModel SnackbarModel
+ * #category session
  */
-declare function makeExtension(snackbarMessages: IObservableArray<any>): {
+declare function makeExtension(snackbarMessages: IObservableArray<SnackbarMessage>): {
     views: {
         /**
          * #getter
          */
-        readonly snackbarMessages: IObservableArray<any>;
+        readonly snackbarMessages: IObservableArray<SnackbarMessage>;
     };
     actions: {
         /**
@@ -23,7 +29,7 @@ declare function makeExtension(snackbarMessages: IObservableArray<any>): {
         /**
          * #action
          */
-        popSnackbarMessage(): any;
+        popSnackbarMessage(): SnackbarMessage | undefined;
         /**
          * #action
          */

package/ui/SnackbarModel.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const mobx_1 = require("mobx");
 /**
  * #stateModel SnackbarModel
+ * #category session
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function makeExtension(snackbarMessages) {
     return {
         views: {
@@ -31,7 +31,7 @@ function makeExtension(snackbarMessages) {
              * #action
              */
             pushSnackbarMessage(message, level, action) {
-                return snackbarMessages.push([message, level, action]);
+                return snackbarMessages.push({ message, level, action });
             },
             /**
              * #action
@@ -43,7 +43,7 @@ function makeExtension(snackbarMessages) {
              * #action
              */
             removeSnackbarMessage(message) {
-                const element = snackbarMessages.find(f => f[0] === message);
+                const element = snackbarMessages.find(f => f.message === message);
                 if (element) {
                     snackbarMessages.remove(element);
                 }