@jbrowse/core 5.0.0-beta.11 → 5.0.0-beta.14

package/esm/ui/ErrorMessage.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { Button } from '@mui/material';
+import { observer } from 'mobx-react';
 import RedErrorMessageBox from './RedErrorMessageBox.js';
 // chunk load failures usually mean a stale asset manifest (e.g. server
 // redeploy) or a network hiccup; a reload fetches the current chunks
@@ -14,8 +15,9 @@ function isChunkLoadError(error) {
         message.includes('failed to fetch dynamically imported module') ||
         message.includes('error loading dynamically imported module'));
 }
-export default function ErrorMessage({ error }) {
+const ErrorMessage = observer(function ErrorMessage({ error, }) {
     return isChunkLoadError(error) ? (_jsxs(RedErrorMessageBox, { children: [_jsx("div", { children: "Failed to load part of the application, likely due to a server update or network error. Refreshing the page usually fixes it." }), _jsx(Button, { variant: "contained", startIcon: _jsx(RefreshIcon, {}), onClick: () => {
                     window.location.reload();
                 }, style: { margin: 4 }, children: "Refresh page" }), _jsx("div", { children: `${error}` })] })) : (_jsx(RedErrorMessageBox, { children: `${error}` }));
-}
+});
+export default ErrorMessage;

package/esm/ui/ErrorMessageStackTraceContents.d.ts

@@ -1,4 +1,5 @@
-export default function ErrorMessageStackTraceContents({ text, extra, }: {
+declare const ErrorMessageStackTraceContents: ({ text, extra, }: {
     text: string;
     extra?: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorMessageStackTraceContents;

package/esm/ui/ErrorMessageStackTraceContents.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import ExternalLink from './ExternalLink.js';
 import { alpha } from './palette.js';
@@ -13,7 +14,7 @@ const useStyles = makeStyles()(theme => ({
         maxHeight: 300,
     },
 }));
-export default function ErrorMessageStackTraceContents({ text, extra, }) {
+const ErrorMessageStackTraceContents = observer(function ErrorMessageStackTraceContents({ text, extra, }) {
     const { classes } = useStyles();
     const extraStr = extra
         ? `supporting data: ${JSON.stringify(extra, null, 2)}`
@@ -23,4 +24,5 @@ export default function ErrorMessageStackTraceContents({ text, extra, }) {
     const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${issueBody}`;
     const emailLink = `mailto:${EMAIL}?subject=JBrowse%202%20error&body=${issueBody}`;
     return (_jsxs(_Fragment, { children: [_jsxs(Typography, { children: ["Post a new issue at", ' ', _jsx(ExternalLink, { href: githubLink, children: "GitHub" }), " or send an email to ", _jsx(ExternalLink, { href: emailLink, children: EMAIL })] }), _jsx("pre", { className: classes.pre, children: displayText })] }));
-}
+});
+export default ErrorMessageStackTraceContents;

package/esm/ui/ErrorMessageStackTraceDialog.d.ts

@@ -1,5 +1,6 @@
-export default function ErrorMessageStackTraceDialog({ error, onClose, extra, }: {
+declare const ErrorMessageStackTraceDialog: ({ error, onClose, extra, }: {
     onClose: () => void;
     error: unknown;
     extra?: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorMessageStackTraceDialog;

package/esm/ui/ErrorMessageStackTraceDialog.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { effectiveRenderer } from '@jbrowse/render-core/graphicsCapabilities';
 import { useGraphicsCapabilities } from '@jbrowse/render-core/useGraphicsCapabilities';
+import { observer } from 'mobx-react';
 import { useFetch } from '../util/useFetch.js';
 import CopyToClipboardButton from './CopyToClipboardButton.js';
 import ErrorMessageStackTraceContents from './ErrorMessageStackTraceContents.js';
@@ -9,7 +10,7 @@ import LoadingEllipses from './LoadingEllipses.js';
 import { formatErrorStack } from './formatErrorStack.js';
 import { mapStackTrace } from './mapStackTrace.js';
 const MAX_ERR_LEN = 10_000;
-export default function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
+const ErrorMessageStackTraceDialog = observer(function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
     const graphicsCapabilities = useGraphicsCapabilities();
     const errorText = error ? `${error}` : '';
     const stackTrace = formatErrorStack(error);
@@ -60,4 +61,5 @@ export default function ErrorMessageStackTraceDialog({ error, onClose, extra, })
     return (_jsx(InfoDialog, { open: true, onClose: () => {
             onClose();
         }, maxWidth: "xl", title: "Stack trace", actions: _jsx(CopyToClipboardButton, { variant: "contained", color: "secondary", value: errorBoxText, copiedLabel: "Copied!", children: "Copy stack trace to clipboard" }), children: isLoading ? (_jsx(LoadingEllipses, { variant: "h6" })) : (_jsx(ErrorMessageStackTraceContents, { text: errorBoxText, extra: extra })) }));
-}
+});
+export default ErrorMessageStackTraceDialog;

package/esm/ui/ErrorOverlay.d.ts

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
-export default function ErrorOverlay({ error, onRetry, width, height, extraAction, }: {
+declare const ErrorOverlay: ({ error, onRetry, width, height, extraAction, }: {
     error: unknown;
     onRetry: () => void;
     width: number | string;
     height: number | string;
     extraAction?: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorOverlay;

package/esm/ui/ErrorOverlay.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import ErrorBar from './ErrorBar.js';
-export default function ErrorOverlay({ error, onRetry, width, height, extraAction, }) {
+const ErrorOverlay = observer(function ErrorOverlay({ error, onRetry, width, height, extraAction, }) {
     return (_jsx("div", { style: { position: 'relative', width, height }, children: _jsx(ErrorBar, { error: error, onRetry: onRetry, extraAction: extraAction }) }));
-}
+});
+export default ErrorOverlay;

package/esm/ui/ExportSvgDialog.d.ts

@@ -1,7 +1,8 @@
 import type { BaseExportSvgOptions } from './BaseExportSvgDialog.tsx';
-export default function ExportSvgDialog({ model, handleClose, }: {
+declare const ExportSvgDialog: ({ model, handleClose, }: {
     model: {
         exportSvg(opts: BaseExportSvgOptions): Promise<unknown>;
     };
     handleClose: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ExportSvgDialog;

package/esm/ui/ExportSvgDialog.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import BaseExportSvgDialog from './BaseExportSvgDialog.js';
 // The export dialog for a view whose `exportSvg` takes nothing beyond the
 // shared options: the dotplot and circular views both lazy-import this. A view
 // with extra controls wraps `BaseExportSvgDialog` itself and threads them
 // through `exportSvg` (the LGV family's track labels and gridlines).
-export default function ExportSvgDialog({ model, handleClose, }) {
+const ExportSvgDialog = observer(function ExportSvgDialog({ model, handleClose, }) {
     return (_jsx(BaseExportSvgDialog, { model: model, handleClose: handleClose, exportSvg: opts => model.exportSvg(opts) }));
-}
+});
+export default ExportSvgDialog;

package/esm/ui/ExternalLink.d.ts

@@ -1,2 +1,3 @@
 import type { LinkProps } from '@mui/material';
-export default function ExternalLink(props: LinkProps): import("react").JSX.Element;
+declare const ExternalLink: (props: LinkProps) => import("react").JSX.Element;
+export default ExternalLink;

package/esm/ui/ExternalLink.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Link } from '@mui/material';
-export default function ExternalLink(props) {
+import { observer } from 'mobx-react';
+const ExternalLink = observer(function ExternalLink(props) {
     const { children, ...rest } = props;
     return (_jsxs(Link, { ...rest, target: "_blank", rel: "noopener noreferrer", children: [children, " ", _jsx(OpenInNewIcon, { fontSize: "small" })] }));
-}
+});
+export default ExternalLink;

package/esm/ui/FactoryResetDialog.d.ts

@@ -1,5 +1,6 @@
-export default function FactoryResetDialog({ onClose, open, onFactoryReset, }: {
+declare const FactoryResetDialog: ({ onClose, open, onFactoryReset, }: {
     onClose: () => void;
     open: boolean;
     onFactoryReset: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default FactoryResetDialog;

package/esm/ui/FactoryResetDialog.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DialogContentText } from '@mui/material';
+import { observer } from 'mobx-react';
 import ConfirmDialog from './ConfirmDialog.js';
-export default function FactoryResetDialog({ onClose, open, onFactoryReset, }) {
+const FactoryResetDialog = observer(function FactoryResetDialog({ onClose, open, onFactoryReset, }) {
     return (_jsx(ConfirmDialog, { open: open, title: "Reset", submitText: "Reset", onCancel: onClose, onSubmit: () => {
             onFactoryReset();
             onClose();
         }, children: _jsx(DialogContentText, { children: "Are you sure you want to reset? This will restore the default configuration." }) }));
-}
+});
+export default FactoryResetDialog;

package/esm/ui/FatalErrorDialog.d.ts

@@ -1,7 +1,8 @@
-export default function FatalErrorDialog({ componentStack, error, onFactoryReset, resetButtonText, extraActions, }: {
+declare const FatalErrorDialog: ({ componentStack, error, onFactoryReset, resetButtonText, extraActions, }: {
     componentStack?: string;
     error?: unknown;
     onFactoryReset: () => void;
     resetButtonText?: string;
     extraActions?: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default FatalErrorDialog;

package/esm/ui/FatalErrorDialog.js

@@ -1,19 +1,21 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, } from '@mui/material';
+import { observer } from 'mobx-react';
 import ErrorBanner from './ErrorBanner.js';
 import ErrorMessageStackTraceContents from './ErrorMessageStackTraceContents.js';
 import FactoryResetDialog from './FactoryResetDialog.js';
-const ResetComponent = ({ onFactoryReset, resetButtonText, }) => {
+const ResetComponent = observer(function ResetComponent({ onFactoryReset, resetButtonText, }) {
     const [dialogOpen, setDialogOpen] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsx(Button, { "data-testid": "fatal-error", color: "primary", variant: "contained", onClick: () => {
                     setDialogOpen(true);
                 }, children: resetButtonText }), _jsx(FactoryResetDialog, { onClose: () => {
                     setDialogOpen(false);
                 }, open: dialogOpen, onFactoryReset: onFactoryReset })] }));
-};
-export default function FatalErrorDialog({ componentStack, error = 'No error message provided', onFactoryReset, resetButtonText = 'Factory Reset', extraActions, }) {
+});
+const FatalErrorDialog = observer(function FatalErrorDialog({ componentStack, error = 'No error message provided', onFactoryReset, resetButtonText = 'Factory Reset', extraActions, }) {
     return (_jsxs(Dialog, { maxWidth: "xl", open: true, children: [_jsx(DialogTitle, { children: "Fatal error" }), _jsxs(DialogContent, { children: [_jsx(ErrorBanner, { error: error }), componentStack ? (_jsx(ErrorMessageStackTraceContents, { text: componentStack })) : null] }), _jsxs(DialogActions, { children: [extraActions, _jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
                             window.location.reload();
                         }, children: "Refresh" }), _jsx(ResetComponent, { onFactoryReset: onFactoryReset, resetButtonText: resetButtonText })] })] }));
-}
+});
+export default FatalErrorDialog;

package/esm/ui/FileDropZone.d.ts

@@ -14,7 +14,7 @@ export interface FileRejection {
  * set, rejected files with their validation errors. Pass `message` to replace
  * the default prompt and `children` for extra content (e.g. a Browse button).
  */
-export default function FileDropZone({ onDrop, accept, maxSize, multiple, message, children, className, }: {
+declare const FileDropZone: ({ onDrop, accept, maxSize, multiple, message, children, className, }: {
     onDrop: (accepted: File[], rejected: FileRejection[]) => void;
     accept?: Accept;
     maxSize?: number;
@@ -22,4 +22,5 @@ export default function FileDropZone({ onDrop, accept, maxSize, multiple, messag
     message?: ReactNode;
     children?: ReactNode;
     className?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default FileDropZone;

package/esm/ui/FileDropZone.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import { alpha } from './palette.js';
 const useStyles = makeStyles()(theme => ({
@@ -67,7 +68,7 @@ function validate(file, accept, maxSize) {
  * set, rejected files with their validation errors. Pass `message` to replace
  * the default prompt and `children` for extra content (e.g. a Browse button).
  */
-export default function FileDropZone({ onDrop, accept, maxSize, multiple = true, message, children, className, }) {
+const FileDropZone = observer(function FileDropZone({ onDrop, accept, maxSize, multiple = true, message, children, className, }) {
     const { classes, cx } = useStyles();
     const inputRef = useRef(null);
     // dragenter/dragleave fire for child elements too; ref-count them so
@@ -126,4 +127,5 @@ export default function FileDropZone({ onDrop, accept, maxSize, multiple = true,
                     // reset so selecting the same file again still fires onChange
                     event.target.value = '';
                 } }), _jsx(CloudUploadIcon, { className: classes.uploadIcon, fontSize: "large" }), _jsx(Typography, { color: "text.secondary", align: "center", children: message ?? 'Drag and drop files here, or click to browse' }), children] }));
-}
+});
+export default FileDropZone;

package/esm/ui/FileSelector/LocalFileChooser.js

@@ -58,7 +58,7 @@ async function pickFileHandleLocation() {
         throw e;
     }
 }
-function FilePickerButton({ setLocation, }) {
+const FilePickerButton = observer(function FilePickerButton({ setLocation, }) {
     if (supportsFileSystemAccess) {
         return (_jsx(Button, { variant: "outlined", onClick: async () => {
                 const loc = await pickFileHandleLocation();
@@ -91,8 +91,8 @@ function FilePickerButton({ setLocation, }) {
                         }
                     }
                 } })] }));
-}
-function ReloadPrompt({ location, setLocation, }) {
+});
+const ReloadPrompt = observer(function ReloadPrompt({ location, setLocation, }) {
     const handleReopen = async () => {
         if (isFileHandleLocation(location)) {
             try {
@@ -108,7 +108,7 @@ function ReloadPrompt({ location, setLocation, }) {
         }
     };
     return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { color: "error", children: "(need to reload)" }), isFileHandleLocation(location) && (_jsx(Button, { size: "small", variant: "text", color: "primary", onClick: handleReopen, children: "Reopen" }))] }));
-}
+});
 const LocalFileChooser = observer(function LocalFileChooser({ location, setLocation, }) {
     const { classes } = useStyles();
     const filename = getFilename(location);

package/esm/ui/FileSelector/LocationInput.d.ts

@@ -1,9 +1,10 @@
 import type { BaseInternetAccountModel } from '../../pluggableElementTypes/index.ts';
 import type { FileLocation } from '../../util/types/index.ts';
-export default function LocationInput({ toggleButtonValue, selectedAccount, location, inline, setLocation, }: {
+declare const LocationInput: ({ toggleButtonValue, selectedAccount, location, inline, setLocation, }: {
     toggleButtonValue: string;
     selectedAccount?: BaseInternetAccountModel;
     location?: FileLocation;
     inline?: boolean;
     setLocation: (arg: FileLocation) => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default LocationInput;

package/esm/ui/FileSelector/LocationInput.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import LocalFileChooser from './LocalFileChooser.js';
 import UrlChooser from './UrlChooser.js';
-export default function LocationInput({ toggleButtonValue, selectedAccount, location, inline, setLocation, }) {
+const LocationInput = observer(function LocationInput({ toggleButtonValue, selectedAccount, location, inline, setLocation, }) {
     // `file` is the only toggle with an input of its own — URL and every account
     // toggle share the URL box, which is what `selectorLabel` names. Anything
     // else falling through to `null` drew a field label and a toggle group with
     // nothing under them: picking Dropbox did it, and so did a location arriving
     // already stamped with an `internetAccountId`.
     return toggleButtonValue === 'file' ? (_jsx(LocalFileChooser, { location: location, setLocation: setLocation })) : (_jsx(UrlChooser, { location: location, setLocation: setLocation, label: selectedAccount?.selectorLabel, style: inline ? { margin: 0 } : undefined }));
-}
+});
+export default LocationInput;

package/esm/ui/FileSelector/SourceTypeSelector.d.ts

@@ -1,9 +1,10 @@
 import type { BaseInternetAccountModel } from '../../pluggableElementTypes/index.ts';
-export default function SourceTypeSelector({ value, sourceTypes, shownAccounts, hiddenAccounts, onChange, onHiddenAccountSelect, }: {
+declare const SourceTypeSelector: ({ value, sourceTypes, shownAccounts, hiddenAccounts, onChange, onHiddenAccountSelect, }: {
     value: string;
     sourceTypes: string[];
     shownAccounts: BaseInternetAccountModel[];
     hiddenAccounts: BaseInternetAccountModel[];
     onChange: (event: React.MouseEvent, newValue: string | null) => void;
     onHiddenAccountSelect: (id: string) => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default SourceTypeSelector;

package/esm/ui/FileSelector/SourceTypeSelector.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 import CascadingMenuButton from '../CascadingMenuButton.js';
 import { getAccountLabel } from './util.js';
-function AccountToggleButton({ account, }) {
+const AccountToggleButton = observer(function AccountToggleButton({ account, }) {
     return (_jsx(Tooltip, { title: account.name, children: _jsx(ToggleButton, { value: account.internetAccountId, children: getAccountLabel(account) }) }));
-}
-function MoreButton({ onClick, disabled, children, }) {
+});
+const MoreButton = observer(function MoreButton({ onClick, disabled, children, }) {
     return (_jsx(ToggleButton, { value: "more", selected: false, disabled: disabled, 
         // ToggleButton types its target as HTMLElement, but it always renders a
         // <button>, so narrowing to HTMLButtonElement for CascadingMenuButton's
@@ -14,12 +15,13 @@ function MoreButton({ onClick, disabled, children, }) {
         onClick: e => {
             onClick(e);
         }, children: children }));
-}
-export default function SourceTypeSelector({ value, sourceTypes, shownAccounts, hiddenAccounts, onChange, onHiddenAccountSelect, }) {
+});
+const SourceTypeSelector = observer(function SourceTypeSelector({ value, sourceTypes, shownAccounts, hiddenAccounts, onChange, onHiddenAccountSelect, }) {
     return (_jsxs(ToggleButtonGroup, { value: value, exclusive: true, size: "small", onChange: onChange, "aria-label": "file, url, or account picker", children: [sourceTypes.includes('file') && (_jsx(ToggleButton, { value: "file", "aria-label": "local file", children: "File" })), _jsx(ToggleButton, { value: "url", "aria-label": "url", children: "URL" }), shownAccounts.map(account => (_jsx(AccountToggleButton, { account: account }, account.internetAccountId))), hiddenAccounts.length > 0 && (_jsxs(CascadingMenuButton, { menuItems: hiddenAccounts.map(account => ({
                     label: account.name,
                     onClick: () => {
                         onHiddenAccountSelect(account.internetAccountId);
                     },
                 })), ButtonComponent: MoreButton, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, children: ["More", _jsx(ArrowDropDownIcon, {})] }))] }));
-}
+});
+export default SourceTypeSelector;

package/esm/ui/GpuFallbackButton.d.ts

@@ -6,7 +6,8 @@
  * predicate. Every place that repeated it is a place that could forget it, and
  * two already had.
  */
-export default function GpuFallbackButton({ error, onRetry, }: {
+declare const GpuFallbackButton: ({ error, onRetry, }: {
     error: unknown;
     onRetry: () => void;
-}): import("react").JSX.Element | null;
+}) => import("react").JSX.Element | null;
+export default GpuFallbackButton;

package/esm/ui/GpuFallbackButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 import { GPU_FALLBACK_LABEL, GPU_FALLBACK_TOOLTIP, disableGpuRendering, shouldOfferGpuFallback, } from './gpuFallback.js';
 /**
  * The "Use Canvas2D" remedy on a GPU error banner, for the MUI chrome.
@@ -9,7 +10,7 @@ import { GPU_FALLBACK_LABEL, GPU_FALLBACK_TOOLTIP, disableGpuRendering, shouldOf
  * predicate. Every place that repeated it is a place that could forget it, and
  * two already had.
  */
-export default function GpuFallbackButton({ error, onRetry, }) {
+const GpuFallbackButton = observer(function GpuFallbackButton({ error, onRetry, }) {
     if (!shouldOfferGpuFallback(error)) {
         return null;
     }
@@ -17,4 +18,5 @@ export default function GpuFallbackButton({ error, onRetry, }) {
                 disableGpuRendering();
                 onRetry();
             }, children: GPU_FALLBACK_LABEL }) }));
-}
+});
+export default GpuFallbackButton;

package/esm/ui/HoverMenu.d.ts

@@ -1,5 +1,5 @@
 import type { PopoverOrigin } from '@mui/material';
-declare function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }: {
+declare const HoverMenu: ({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }: {
     anchorEl: HTMLElement | null;
     onClose: () => void;
     onMouseEnter?: () => void;
@@ -8,5 +8,5 @@ declare function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOr
     transformOrigin: PopoverOrigin;
     zIndex?: React.CSSProperties['zIndex'];
     children: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
 export default HoverMenu;

package/esm/ui/HoverMenu.js

@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 //  this code adapted from material-ui-popup-state by Andy Edwards, MIT license
 //  https://github.com/jcoreio/material-ui-popup-state/blob/9dba66241a0c25b172c93ae7d9e45a9745f138e8/LICENSE.md
 import { Menu } from '@mui/material';
+import { observer } from 'mobx-react';
+import { usePlacedMenuFocus } from './usePlacedMenuFocus.js';
 // A Menu a hovering pointer can cross into: the root (which spans the viewport)
 // is click-through so the gap between the opener row and the panel doesn't
 // swallow the pointer, while the paper itself stays interactive. That root can
@@ -18,13 +20,15 @@ import { Menu } from '@mui/material';
 // and `onMouseEnter`, which fires on the paper rather than the click-through
 // root and so means "the pointer arrived here", not "the pointer is somewhere
 // over the viewport".
-function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }) {
-    return (_jsx(Menu, { open: true, anchorEl: anchorEl, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, style: { pointerEvents: 'none', zIndex }, hideBackdrop: true, slotProps: {
+const HoverMenu = observer(function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }) {
+    const { onEntering, ...focus } = usePlacedMenuFocus();
+    return (_jsx(Menu, { ...focus, open: true, anchorEl: anchorEl, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, style: { pointerEvents: 'none', zIndex }, hideBackdrop: true, slotProps: {
             paper: {
                 style: { pointerEvents: 'auto' },
                 onMouseEnter,
                 ref: paperRef,
             },
+            transition: { onEntering },
         }, 
         // A submenu is portaled in the DOM but is still a React *descendant* of
         // the parent menu's list, so React replays its key events into the parent
@@ -36,5 +40,5 @@ function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, tr
         onKeyDown: e => {
             e.stopPropagation();
         }, children: children }));
-}
+});
 export default HoverMenu;

package/esm/ui/HoverTooltip.d.ts

@@ -19,9 +19,10 @@ import type React from 'react';
  * `BaseTooltip` is: it reaches @floating-ui (~266KB) and that barrel is on the
  * eager plugin-entry path.
  */
-export default function HoverTooltip({ hit, mouseState, children, }: {
+declare const HoverTooltip: ({ hit, mouseState, children, }: {
     /** The display's hover. Nothing is drawn when it is absent. */
     hit: unknown;
     mouseState: MouseState | undefined;
     children: React.ReactNode;
-}): React.JSX.Element | null;
+}) => React.JSX.Element | null;
+export default HoverTooltip;

package/esm/ui/HoverTooltip.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import BaseTooltip from './BaseTooltip.js';
 /**
  * `BaseTooltip` anchored to the chrome's pointer measurement, drawn only when
@@ -19,6 +20,7 @@ import BaseTooltip from './BaseTooltip.js';
  * `BaseTooltip` is: it reaches @floating-ui (~266KB) and that barrel is on the
  * eager plugin-entry path.
  */
-export default function HoverTooltip({ hit, mouseState, children, }) {
+const HoverTooltip = observer(function HoverTooltip({ hit, mouseState, children, }) {
     return hit && mouseState ? (_jsx(BaseTooltip, { clientPoint: { x: mouseState.clientX, y: mouseState.clientY }, children: children })) : null;
-}
+});
+export default HoverTooltip;

package/esm/ui/Icons.d.ts

@@ -1,7 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
 export { default as InfoIcon } from '@mui/icons-material/Info';
-export declare function Indexing(props: SvgIconProps): import("react").JSX.Element;
-export declare function TrackSelector(props: SvgIconProps): import("react").JSX.Element;
-export declare function DNA(props: SvgIconProps): import("react").JSX.Element;
-export declare function Highlighter(props: SvgIconProps): import("react").JSX.Element;
-export declare function Cable(props: SvgIconProps): import("react").JSX.Element;
+export declare const Indexing: (props: SvgIconProps) => import("react").JSX.Element;
+export declare const TrackSelector: (props: SvgIconProps) => import("react").JSX.Element;
+export declare const DNA: (props: SvgIconProps) => import("react").JSX.Element;
+export declare const Highlighter: (props: SvgIconProps) => import("react").JSX.Element;
+export declare const Cable: (props: SvgIconProps) => import("react").JSX.Element;

package/esm/ui/Icons.js

@@ -1,23 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import SvgIcon from '@mui/material/SvgIcon';
+import { observer } from 'mobx-react';
 export { default as InfoIcon } from '@mui/icons-material/Info';
 // https://materialdesignicons.com/ text-search icon
-export function Indexing(props) {
+export const Indexing = observer(function Indexing(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M19.31 18.9L22.39 22L21 23.39L17.88 20.32C17.19 20.75 16.37 21 15.5 21C13 21 11 19 11 16.5C11 14 13 12 15.5 12C18 12 20 14 20 16.5C20 17.38 19.75 18.21 19.31 18.9M15.5 19C16.88 19 18 17.88 18 16.5C18 15.12 16.88 14 15.5 14C14.12 14 13 15.12 13 16.5C13 17.88 14.12 19 15.5 19M21 4V6H3V4H21M3 16V14H9V16H3M3 11V9H21V11H18.97C17.96 10.37 16.77 10 15.5 10C14.23 10 13.04 10.37 12.03 11H3Z" }) }));
-}
+});
 //  format-list-checkbox from https://materialdesignicons.com/
-export function TrackSelector(props) {
+export const TrackSelector = observer(function TrackSelector(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" }) }));
-}
+});
 //  dna from https://materialdesignicons.com/
-export function DNA(props) {
+export const DNA = observer(function DNA(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { fill: "currentColor", d: "M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z" }) }));
-}
+});
 // bx-highlight from https://boxicons.com/ (MIT License, Copyright (c) Aniket
 // Suvarna) — https://github.com/atisawd/boxicons/blob/master/svg/regular/bx-highlight.svg
-export function Highlighter(props) {
+export const Highlighter = observer(function Highlighter(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "m20.707 5.826-3.535-3.533a.999.999 0 0 0-1.408-.006L7.096 10.82a1.01 1.01 0 0 0-.273.488l-1.024 4.437L4 18h2.828l1.142-1.129 3.588-.828c.18-.042.345-.133.477-.262l8.667-8.535a1 1 0 0 0 .005-1.42zm-9.369 7.833-2.121-2.12 7.243-7.131 2.12 2.12-7.242 7.131zM4 20h16v2H4z" }) }));
-}
-export function Cable(props) {
+});
+export const Cable = observer(function Cable(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z" }) }));
-}
+});

package/esm/ui/InlineMenuControls.d.ts

@@ -1,6 +1,6 @@
 export { INLINE_MENU_ROW_WIDTH } from './inlineMenuRowWidth.ts';
-export declare function ResetToDefaultButton({ disabled, title, onClick, }: {
+export declare const ResetToDefaultButton: ({ disabled, title, onClick, }: {
     disabled: boolean;
     title?: string;
     onClick: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;

package/esm/ui/InlineMenuControls.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable react-refresh/only-export-components -- the shared row width belongs with these leaf menu-row primitives; no component state to fast-refresh */
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import { IconButton, Tooltip } from '@mui/material';
+/* eslint-disable react-refresh/only-export-components -- the shared row width belongs with these leaf menu-row primitives; no component state to fast-refresh */
+import { observer } from 'mobx-react';
 // Shared width for inline track-menu control rows (the size sliders and the
 // wiggle resolution stepper), so the rows line up when they stack in one menu
 // and can't drift apart.
@@ -10,8 +11,8 @@ export { INLINE_MENU_ROW_WIDTH } from './inlineMenuRowWidth.js';
 // a span so its Tooltip still shows while disabled at the default. Kept in one
 // place so the icon/size/padding and the disabled-at-default behavior stay
 // identical across the sibling controls.
-export function ResetToDefaultButton({ disabled, title = 'Reset to default', onClick, }) {
+export const ResetToDefaultButton = observer(function ResetToDefaultButton({ disabled, title = 'Reset to default', onClick, }) {
     return (_jsx(Tooltip, { title: title, children: _jsx("span", { children: _jsx(IconButton, { size: "small", sx: { p: 0.25 }, disabled: disabled, onClick: () => {
                     onClick();
                 }, children: _jsx(RestartAltIcon, { fontSize: "small" }) }) }) }));
-}
+});

package/esm/ui/JexlFilterRowEditors.d.ts

@@ -1,15 +1,15 @@
 import type { ConditionRow, FieldChoice, TextRow } from '../util/jexlFilterRows.ts';
 import type { Jexl } from '@jbrowse/jexl';
 export declare function compileError(line: string, jexl: Pick<Jexl, 'compile'>): string | undefined;
-export declare function ConditionRowEditor({ row, choices, onChange, onRemove, }: {
+export declare const ConditionRowEditor: ({ row, choices, onChange, onRemove, }: {
     row: ConditionRow;
     choices: FieldChoice[];
     onChange: (row: ConditionRow) => void;
     onRemove: () => void;
-}): import("react").JSX.Element;
-export declare function TextRowEditor({ row, jexl, onChange, onRemove, }: {
+}) => import("react").JSX.Element;
+export declare const TextRowEditor: ({ row, jexl, onChange, onRemove, }: {
     row: TextRow;
     jexl: Pick<Jexl, 'compile'>;
     onChange: (row: TextRow) => void;
     onRemove: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;