@jbrowse/app-core 3.7.0 → 4.0.1

package/esm/ui/App/DockviewRightHeaderActions.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import CloseIcon from '@mui/icons-material/Close';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import TableRowsIcon from '@mui/icons-material/TableRows';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import { IconButton, Tooltip } from '@mui/material';
+import { useDockview } from "./DockviewContext.js";
+import { rearrangePanelsWithDirection } from "./dockviewUtils.js";
+const useStyles = makeStyles()(theme => ({
+    headerActions: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+    },
+    headerButton: {
+        padding: 4,
+        color: theme.palette.primary.contrastText,
+    },
+    headerIcon: {
+        fontSize: 16,
+    },
+}));
+export default function DockviewRightHeaderActions({ containerApi, group, }) {
+    const { classes } = useStyles();
+    const { rearrangePanels } = useDockview();
+    const tileHorizontally = () => {
+        rearrangePanels(api => {
+            rearrangePanelsWithDirection(api, (idx, states) => idx === 0
+                ? undefined
+                : { referencePanel: states[0].id, direction: 'right' });
+        });
+    };
+    const tileVertically = () => {
+        rearrangePanels(api => {
+            rearrangePanelsWithDirection(api, (idx, states) => idx === 0
+                ? undefined
+                : { referencePanel: states[0].id, direction: 'below' });
+        });
+    };
+    const tileGrid = () => {
+        rearrangePanels(api => {
+            const panels = api.panels;
+            if (panels.length <= 1) {
+                return;
+            }
+            const cols = Math.ceil(Math.sqrt(panels.length));
+            rearrangePanelsWithDirection(api, (idx, states) => {
+                if (idx === 0) {
+                    return undefined;
+                }
+                const col = idx % cols;
+                const row = Math.floor(idx / cols);
+                if (col === 0) {
+                    const refIdx = (row - 1) * cols;
+                    return { referencePanel: states[refIdx].id, direction: 'below' };
+                }
+                return { referencePanel: states[idx - 1].id, direction: 'right' };
+            });
+        });
+    };
+    const stackAll = () => {
+        rearrangePanels(api => {
+            rearrangePanelsWithDirection(api, (idx, states) => idx === 0
+                ? undefined
+                : { referencePanel: states[0].id, direction: 'within' });
+        });
+    };
+    const showLayoutOptions = containerApi.panels.length > 1;
+    const showCloseGroup = containerApi.groups.length > 1;
+    return (_jsxs("div", { className: classes.headerActions, children: [showLayoutOptions && (_jsx(CascadingMenuButton, { menuItems: [
+                    {
+                        label: 'Global: change layout into set of tabs',
+                        icon: DynamicFeedIcon,
+                        onClick: stackAll,
+                    },
+                    {
+                        label: 'Global: tile horizontally',
+                        icon: ViewColumnIcon,
+                        onClick: tileHorizontally,
+                    },
+                    {
+                        label: 'Global: tile vertically',
+                        icon: TableRowsIcon,
+                        onClick: tileVertically,
+                    },
+                    {
+                        label: 'Global: tile grid',
+                        icon: ViewModuleIcon,
+                        onClick: tileGrid,
+                    },
+                ], size: "small", className: classes.headerButton, children: _jsx(MoreHorizIcon, { className: classes.headerIcon }) })), showCloseGroup && (_jsx(Tooltip, { title: "Close group", children: _jsx(IconButton, { size: "small", onClick: () => {
+                        for (const panel of group.panels) {
+                            panel.api.close();
+                        }
+                    }, className: classes.headerButton, children: _jsx(CloseIcon, { className: classes.headerIcon }) }) }))] }));
+}

package/esm/ui/App/Drawer.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import ResizeHandle from '@jbrowse/core/ui/ResizeHandle';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     paper: {
         overflowY: 'auto',
@@ -20,15 +20,14 @@ const useStyles = makeStyles()(theme => ({
         zIndex: theme.zIndex.drawer + 1,
     },
 }));
-const Drawer = observer(function ({ children, session, }) {
+const Drawer = observer(function Drawer({ children, session, }) {
     const { drawerPosition, drawerWidth } = session;
     const { classes } = useStyles();
     const ref = useRef(null);
     useEffect(() => {
         function handleSelectView(e) {
-            var _a, _b, _c;
-            if (e.target instanceof Element && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                const visibleWidgetId = (_c = (_b = session.visibleWidget) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.id;
+            if (e.target instanceof Element && ref.current?.contains(e.target)) {
+                const visibleWidgetId = session.visibleWidget?.view?.id;
                 if (visibleWidgetId) {
                     session.setFocusedViewId(visibleWidgetId);
                 }

package/esm/ui/App/DrawerControls.js

@@ -5,7 +5,7 @@ import MinimizeIcon from '@mui/icons-material/Minimize';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-const DrawerControls = observer(function ({ session, }) {
+const DrawerControls = observer(function DrawerControls({ session, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const { drawerPosition, visibleWidget } = session;
     return (_jsxs(_Fragment, { children: [_jsx(IconButton, { color: "inherit", onClick: event => {

package/esm/ui/App/DrawerHeader.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+import { getEnv } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import LaunchIcon from '@mui/icons-material/Launch';
 import { AppBar, IconButton, Toolbar, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import DrawerControls from './DrawerControls';
-import DrawerWidgetSelector from './DrawerWidgetSelector';
+import DrawerControls from "./DrawerControls.js";
+import DrawerWidgetSelector from "./DrawerWidgetSelector.js";
+const DrawerHeaderHelpButton = lazy(() => import("./DrawerHeaderHelpButton.js"));
 const useStyles = makeStyles()(theme => ({
     spacer: {
         flexGrow: 1,
@@ -16,17 +19,22 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.secondary.dark,
     },
 }));
-const DrawerHeader = observer(function ({ session, setToolbarHeight, onPopoutDrawer, }) {
-    var _a, _b;
+const DrawerHeader = observer(function DrawerHeader({ session, setToolbarHeight, onPopoutDrawer, }) {
     const { classes } = useStyles();
     const focusedViewId = session.focusedViewId;
-    const viewWidgetId = (_b = (_a = session.visibleWidget) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.id;
+    const { visibleWidget } = session;
+    const viewWidgetId = visibleWidget?.view?.id;
+    const { pluginManager } = getEnv(session);
+    const widgetType = visibleWidget
+        ? pluginManager.getWidgetType(visibleWidget.type)
+        : undefined;
+    const { helpText } = widgetType || {};
     return (_jsx(AppBar, { position: "sticky", className: focusedViewId === viewWidgetId
             ? classes.headerFocused
             : classes.headerUnfocused, ref: ref => {
-            setToolbarHeight((ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().height) || 0);
+            setToolbarHeight(ref?.getBoundingClientRect().height || 0);
         }, children: _jsxs(Toolbar, { disableGutters: true, children: [_jsx(DrawerWidgetSelector, { session: session }), _jsx(Tooltip, { title: "Open drawer in dialog", children: _jsx(IconButton, { color: "inherit", onClick: () => {
                             onPopoutDrawer();
-                        }, children: _jsx(LaunchIcon, {}) }) }), _jsx("div", { className: classes.spacer }), _jsx(DrawerControls, { session: session })] }) }));
+                        }, children: _jsx(LaunchIcon, {}) }) }), helpText ? (_jsx(Suspense, { fallback: null, children: _jsx(DrawerHeaderHelpButton, { helpText: helpText, session: session }) })) : null, _jsx("div", { className: classes.spacer }), _jsx(DrawerControls, { session: session })] }) }));
 });
 export default DrawerHeader;

package/{dist/ui/App/Drawer.d.ts → esm/ui/App/DrawerHeaderHelpButton.d.ts}

@@ -1,6 +1,6 @@
 import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
-declare const Drawer: ({ children, session, }: {
-    children: React.ReactNode;
+declare const DrawerHeaderHelpButton: ({ session, helpText, }: {
     session: SessionWithFocusedViewAndDrawerWidgets;
+    helpText: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
-export default Drawer;
+export default DrawerHeaderHelpButton;

package/esm/ui/App/DrawerHeaderHelpButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { lazy } from 'react';
+import HelpOutline from '@mui/icons-material/HelpOutline';
+import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+const DrawerHeaderHelpDialog = lazy(() => import("./DrawerHeaderHelpDialog.js"));
+const DrawerHeaderHelpButton = observer(function DrawerHeaderHelpButton({ session, helpText, }) {
+    return (_jsx(Tooltip, { title: "Help", children: _jsx(IconButton, { color: "inherit", onClick: () => {
+                session.queueDialog(handleClose => [
+                    DrawerHeaderHelpDialog,
+                    {
+                        onClose: handleClose,
+                        helpText,
+                    },
+                ]);
+            }, children: _jsx(HelpOutline, {}) }) }));
+});
+export default DrawerHeaderHelpButton;

package/esm/ui/App/DrawerHeaderHelpDialog.d.ts

@@ -0,0 +1,4 @@
+export default function DrawerHeaderHelpDialog({ onClose, helpText, }: {
+    onClose: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    helpText: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/ui/App/DrawerHeaderHelpDialog.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Dialog from '@jbrowse/core/ui/Dialog';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { DialogContent } from '@mui/material';
+const useStyles = makeStyles()({
+    max: {
+        minWidth: '40em',
+    },
+});
+export default function DrawerHeaderHelpDialog({ onClose, helpText, }) {
+    const { classes } = useStyles();
+    return (_jsx(Dialog, { open: true, onClose: onClose, title: "Help", maxWidth: "xl", onClick: e => {
+            e.stopPropagation();
+        }, children: _jsx(DialogContent, { className: classes.max, children: helpText }) }));
+}

package/esm/ui/App/DrawerWidget.js

@@ -4,10 +4,10 @@ import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
 import { getEnv } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import Drawer from './Drawer';
-import DrawerHeader from './DrawerHeader';
-const ModalWidget = lazy(() => import('./ModalWidget'));
-const DrawerWidget = observer(function ({ session, }) {
+import Drawer from "./Drawer.js";
+import DrawerHeader from "./DrawerHeader.js";
+const ModalWidget = lazy(() => import("./ModalWidget.js"));
+const DrawerWidget = observer(function DrawerWidget({ session, }) {
     const { visibleWidget } = session;
     const { pluginManager } = getEnv(session);
     const DrawerComponent = visibleWidget

package/esm/ui/App/DrawerWidgetSelector.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getEnv } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { FormControl, IconButton, MenuItem, Select, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     formControl: {
         margin: 0,
@@ -16,11 +16,11 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.secondary.contrastText,
     },
 }));
-const DrawerWidgetSelector = observer(function ({ session, }) {
+const DrawerWidgetSelector = observer(function DrawerWidgetSelector({ session, }) {
     const { visibleWidget, activeWidgets } = session;
     const { classes } = useStyles();
     const { pluginManager } = getEnv(session);
-    return (_jsx(FormControl, { className: classes.formControl, children: _jsx(Select, { value: visibleWidget === null || visibleWidget === void 0 ? void 0 : visibleWidget.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
+    return (_jsx(FormControl, { className: classes.formControl, children: _jsx(Select, { value: visibleWidget?.id, "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
                 const widget = session.activeWidgets.get(widgetId);
                 if (!widget) {
                     return (_jsx(Typography, { variant: "h6", color: "inherit", children: "Unknown widget" }));

package/esm/ui/App/JBrowseTabMenu.d.ts

@@ -0,0 +1,5 @@
+export default function JBrowseTabMenu({ isHovered, onRename, onClose, }: {
+    isHovered: boolean;
+    onRename: () => void;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/ui/App/JBrowseTabMenu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import CloseIcon from '@mui/icons-material/Close';
+import EditIcon from '@mui/icons-material/Edit';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+const useStyles = makeStyles()({
+    tabIcons: {
+        display: 'flex',
+        alignItems: 'center',
+        visibility: 'hidden',
+    },
+    tabIconsVisible: {
+        visibility: 'visible',
+    },
+    tabIcon: {
+        padding: 2,
+        marginLeft: 2,
+        color: 'inherit',
+    },
+    smallIcon: {
+        fontSize: 14,
+    },
+});
+export default function JBrowseTabMenu({ isHovered, onRename, onClose, }) {
+    const { classes } = useStyles();
+    return (_jsx("div", { className: `${classes.tabIcons} ${isHovered ? classes.tabIconsVisible : ''}`, children: _jsx(CascadingMenuButton, { menuItems: [
+                {
+                    label: 'Rename tab',
+                    icon: EditIcon,
+                    onClick: onRename,
+                },
+                {
+                    label: 'Close tab',
+                    icon: CloseIcon,
+                    onClick: onClose,
+                },
+            ], size: "small", className: classes.tabIcon, stopPropagation: true, children: _jsx(MoreVertIcon, { className: classes.smallIcon }) }) }));
+}

package/esm/ui/App/JBrowseViewPanel.d.ts

@@ -0,0 +1,8 @@
+import type { DockviewSessionType } from './types.ts';
+import type { IDockviewPanelProps } from 'dockview-react';
+export interface JBrowseViewPanelParams {
+    panelId: string;
+    session?: DockviewSessionType;
+}
+declare const JBrowseViewPanel: ({ params, }: IDockviewPanelProps<JBrowseViewPanelParams>) => import("react/jsx-runtime").JSX.Element;
+export default JBrowseViewPanel;

package/esm/ui/App/JBrowseViewPanel.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+import ViewContainer from "./ViewContainer.js";
+import { isSessionWithDockviewLayout } from "../../DockviewLayout/index.js";
+const ViewLauncher = lazy(() => import("./ViewLauncher.js"));
+const useStyles = makeStyles()(theme => ({
+    container: {
+        height: '100%',
+        overflowY: 'auto',
+        background: theme.palette.background.default,
+    },
+    viewStack: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    spacer: {
+        height: 300,
+    },
+    emptyPanel: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+    },
+}));
+function getViewsForPanel(panelId, session) {
+    if (!session || !isSessionWithDockviewLayout(session)) {
+        return [];
+    }
+    const viewIds = session.getViewIdsForPanel(panelId);
+    return [...viewIds]
+        .map(id => session.views.find(v => v.id === id))
+        .filter((v) => v !== undefined);
+}
+const JBrowseViewPanel = observer(function JBrowseViewPanel({ params, }) {
+    const { panelId, session } = params;
+    const { classes } = useStyles();
+    if (!session) {
+        return _jsx("div", { className: classes.container, children: "Loading..." });
+    }
+    const views = getViewsForPanel(panelId, session);
+    if (views.length === 0) {
+        return (_jsx("div", { className: classes.container, children: _jsx("div", { className: classes.emptyPanel, children: _jsx(Suspense, { fallback: null, children: _jsx(ViewLauncher, { session: session }) }) }) }));
+    }
+    return (_jsx("div", { className: classes.container, children: _jsxs("div", { className: classes.viewStack, children: [views.map(view => (_jsx(ViewContainer, { view: view, session: session }, view.id))), _jsx("div", { className: classes.spacer })] }) }));
+});
+export default JBrowseViewPanel;

package/esm/ui/App/JBrowseViewTab.d.ts

@@ -0,0 +1,8 @@
+import type { DockviewSessionType } from './types.ts';
+import type { IDockviewPanelHeaderProps } from 'dockview-react';
+export interface JBrowseViewPanelParams {
+    panelId: string;
+    session?: DockviewSessionType;
+}
+declare const JBrowseViewTab: ({ params, api, }: IDockviewPanelHeaderProps<JBrowseViewPanelParams>) => import("react/jsx-runtime").JSX.Element;
+export default JBrowseViewTab;

package/esm/ui/App/JBrowseViewTab.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { InputBase, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import JBrowseTabMenu from "./JBrowseTabMenu.js";
+import { isSessionWithDockviewLayout } from "../../DockviewLayout/index.js";
+const useStyles = makeStyles()(theme => ({
+    tabContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        padding: '0 4px',
+        gap: 4,
+    },
+    tabTitle: {
+        display: 'flex',
+        alignItems: 'center',
+        flex: 1,
+        overflow: 'hidden',
+        minWidth: 0,
+    },
+    tabTitleText: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        fontSize: '0.8rem',
+    },
+    editInput: {
+        fontSize: '0.8rem',
+        padding: '2px 4px',
+        color: 'inherit',
+        backgroundColor: theme.palette.action.selected,
+        borderRadius: theme.shape.borderRadius,
+        flex: 1,
+    },
+}));
+function stopEvent(e) {
+    e.stopPropagation();
+    e.preventDefault();
+}
+function getViewsForPanel(panelId, session) {
+    if (!session || !isSessionWithDockviewLayout(session)) {
+        return [];
+    }
+    const viewIds = session.getViewIdsForPanel(panelId);
+    return [...viewIds]
+        .map(id => session.views.find(v => v.id === id))
+        .filter((v) => v !== undefined);
+}
+function getTabDisplayName(views, session) {
+    if (views.length === 0) {
+        return 'Empty';
+    }
+    if (views.length === 1) {
+        const view = views[0];
+        return (view.displayName ||
+            view.assemblyNames
+                ?.map(r => session.assemblyManager.get(r)?.displayName)
+                .join(',') ||
+            'View');
+    }
+    return `${views.length} views`;
+}
+const JBrowseViewTab = observer(function JBrowseViewTab({ params, api, }) {
+    const { panelId, session } = params;
+    const { classes } = useStyles();
+    const [isEditing, setIsEditing] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [editValue, setEditValue] = useState('');
+    if (!session) {
+        return (_jsx("div", { className: classes.tabContainer, children: _jsx("span", { className: classes.tabTitleText, children: "Loading..." }) }));
+    }
+    const views = getViewsForPanel(panelId, session);
+    const displayValue = getTabDisplayName(views, session);
+    const handleStartEdit = () => {
+        setEditValue(api.title || displayValue);
+        setIsEditing(true);
+    };
+    const handleSave = () => {
+        if (editValue.trim()) {
+            api.setTitle(editValue.trim());
+        }
+        setIsEditing(false);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            handleSave();
+        }
+        else if (e.key === 'Escape') {
+            setIsEditing(false);
+        }
+    };
+    return (_jsx("div", { className: classes.tabContainer, onMouseEnter: () => {
+            setIsHovered(true);
+        }, onMouseLeave: () => {
+            setIsHovered(false);
+        }, children: _jsx("div", { className: classes.tabTitle, children: isEditing ? (_jsx(InputBase, { autoFocus: true, className: classes.editInput, value: editValue, onChange: e => {
+                    setEditValue(e.target.value);
+                }, onFocus: e => {
+                    e.target.select();
+                }, onBlur: handleSave, onKeyDown: handleKeyDown, onClick: stopEvent })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { className: classes.tabTitleText, variant: "body2", onDoubleClick: handleStartEdit, children: api.title || displayValue }), _jsx(JBrowseTabMenu, { isHovered: isHovered, onRename: handleStartEdit, onClose: () => {
+                            api.close();
+                        } })] })) }) }));
+});
+export default JBrowseViewTab;

package/esm/ui/App/ModalWidget.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { getEnv } from '@jbrowse/mobx-state-tree';
 import CloseIcon from '@mui/icons-material/Close';
 import { AppBar, IconButton, Paper, Toolbar, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { getEnv } from 'mobx-state-tree';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     paper: {
         overflow: 'auto',
@@ -28,7 +28,7 @@ const DrawerAppBar = observer(function DrawerAppBar({ session, onClose, }) {
     const { HeadingComponent, heading } = pluginManager.getWidgetType(visibleWidget.type);
     return (_jsxs(AppBar, { position: "static", children: [_jsx(Toolbar, { children: HeadingComponent ? (_jsx(HeadingComponent, { model: visibleWidget })) : (_jsx(Typography, { variant: "h6", children: heading })) }), _jsx(IconButton, { className: classes.closeButton, onClick: onClose, children: _jsx(CloseIcon, {}) })] }));
 });
-const ModalWidget = observer(function ({ session, onClose, }) {
+const ModalWidget = observer(function ModalWidget({ session, onClose, }) {
     const { classes } = useStyles();
     const { visibleWidget } = session;
     const { pluginManager } = getEnv(session);

package/esm/ui/App/TiledViewsContainer.d.ts

@@ -0,0 +1,7 @@
+import type { DockviewSessionType } from './types.ts';
+import 'dockview-react/dist/styles/dockview.css';
+interface Props {
+    session: DockviewSessionType;
+}
+declare const TiledViewsContainer: ({ session, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default TiledViewsContainer;