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

package/esm/ui/BaseTooltip.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { autoUpdate, flip, offset, shift, useClientPoint, useFloating, useInteractions, } from '@floating-ui/react';
+import { observer } from 'mobx-react';
 import { createPortal } from 'react-dom';
 import { useStyleTheme } from './PaletteContext.js';
 import { alpha, grey } from './palette.js';
@@ -76,7 +77,7 @@ if (typeof window !== 'undefined') {
 // from a point the pointer happens to be at. 15px off a button reads as a
 // tooltip belonging to nothing in particular.
 const ANCHOR_GAP_PX = 6;
-export default function BaseTooltip({ clientPoint: clientPointCoords, anchor, id, children, placement = anchor ? 'top' : 'right', }) {
+const BaseTooltip = observer(function BaseTooltip({ clientPoint: clientPointCoords, anchor, id, children, placement = anchor ? 'top' : 'right', }) {
     // The style theme is read for two things and neither is a Material import:
     // the colors below, and the portal container a shadow-DOM embed configures
     // through `MuiPopper.defaultProps.container` — the same slot every other
@@ -156,4 +157,5 @@ export default function BaseTooltip({ clientPoint: clientPointCoords, anchor, id
                 ? 'hidden'
                 : undefined,
         }, ...getFloatingProps(), children: children }), target);
-}
+});
+export default BaseTooltip;

package/esm/ui/CascadingMenu.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, memo, use, useEffect, useMemo, useState } from 'react';
+import { createContext, use, useEffect, useMemo, useState } from 'react';
 import { Divider, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem, Tooltip, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
@@ -8,6 +8,7 @@ import { MenuItemTrailing } from './MenuItemTrailing.js';
 import { resolveSubMenu, staysOpenOnClick } from './MenuTypes.js';
 import { hasMenuItemAdornment } from './menuItemAdornment.js';
 import { isAimedAtPanel } from './submenuAim.js';
+import { usePlacedMenuFocus } from './usePlacedMenuFocus.js';
 // Compact section headers so tall menus (e.g. a display's flat "Show..."
 // settings list with several subHeader-separated radio groups) stay short.
 // Row heights are left at the MUI default.
@@ -266,9 +267,9 @@ function makeTestId(kind, label) {
 }
 // Leading icon slot shared by submenu rows and clickable rows; renders nothing
 // when the item has no icon (the row insets instead to stay column-aligned).
-function MenuItemLeadingIcon({ Icon, }) {
+const MenuItemLeadingIcon = observer(function MenuItemLeadingIcon({ Icon, }) {
     return Icon ? (_jsx(ListItemIcon, { children: _jsx(Icon, {}) })) : null;
-}
+});
 // Which decoration columns the menu needs, computed menu-wide (true if ANY row
 // needs it) so every row reserves matching slots and the decorations stack into
 // aligned columns down the menu. Per list, so a submenu's own rows answer it for
@@ -322,7 +323,7 @@ function getMenuColumnFlags(menuItems) {
 // Escape is the exception, and has to be: MUI's Modal reads it off the same
 // React tree, so a row that swallowed every key left the menu with no way out
 // for anyone whose focus was inside the slider.
-function CustomMenuRow({ item, onHover, }) {
+const CustomMenuRow = observer(function CustomMenuRow({ item, onHover, }) {
     const { onCloseRoot } = useCascadingMenu();
     return (_jsx("li", { style: { padding: '4px 16px' }, onMouseEnter: onHover, onMouseDown: e => {
             e.stopPropagation();
@@ -331,15 +332,15 @@ function CustomMenuRow({ item, onHover, }) {
                 e.stopPropagation();
             }
         }, children: item.render(onCloseRoot) }));
-}
+});
 // A disabled MenuItem has pointer-events:none, so a Tooltip placed directly on
 // it never fires; the span wrapper (per MUI guidance) restores hover. Disabled
 // rows aren't keyboard-focusable, so the extra wrapper doesn't affect menu
 // navigation. Renders children untouched unless the item is disabled and has
 // disabledHelpText.
-function DisabledTooltip({ item, children, }) {
+const DisabledTooltip = observer(function DisabledTooltip({ item, children, }) {
     return item.disabled && item.disabledHelpText ? (_jsx(Tooltip, { title: item.disabledHelpText, placement: "left", children: _jsx("span", { children: children }) })) : (children);
-}
+});
 // One submenu row: label (with optional leading icon), the same trailing
 // decorations a clickable row draws, and the panel it opens.
 //
@@ -349,7 +350,7 @@ function DisabledTooltip({ item, children, }) {
 // toggle), whose content stops its own click so using it doesn't also open the
 // submenu. Both go through `MenuItemTrailing`, so they land in the columns the
 // clickable rows reserve rather than in a hand-assembled copy of them.
-const CascadingSubmenu = memo(function CascadingSubmenu({ item, itemKey, inset, columns, open, hover, onNavigateBack, }) {
+const CascadingSubmenu = observer(function CascadingSubmenu({ item, itemKey, inset, columns, open, hover, onNavigateBack, }) {
     const { zIndex } = useCascadingMenu();
     const [anchorEl, setAnchorEl] = useState(null);
     // a rebuild can disable the row while its panel is up, and a disabled row has
@@ -392,7 +393,7 @@ const SubMenuList = observer(function SubMenuList({ item, onNavigateBack, }) {
 // One clickable menu row: label (with optional leading icon) plus its trailing
 // value/help/adornment decorations. The menu-wide `columns` flags let every row
 // reserve matching decoration slots so the columns line up down the menu.
-const CascadingMenuItem = memo(function CascadingMenuItem({ item, inset, columns, onNavigateBack, onHover, }) {
+const CascadingMenuItem = observer(function CascadingMenuItem({ item, inset, columns, onNavigateBack, onHover, }) {
     const { closeAfterItemClick, onMenuItemClick, onCloseRoot } = useCascadingMenu();
     return (_jsx(DisabledTooltip, { item: item, children: _jsxs(MenuItem, { "data-testid": makeTestId('menuitem', item.label), disabled: item.disabled, 
             // A checkbox or radio row states its own value. The glyph
@@ -422,7 +423,7 @@ const CascadingMenuItem = memo(function CascadingMenuItem({ item, inset, columns
                 }
             }, children: [_jsx(MenuItemLeadingIcon, { Icon: item.icon }), _jsx(ListItemText, { primary: item.label, secondary: item.subLabel, inset: inset }), _jsx(MenuItemTrailing, { item: item, columns: columns })] }) }));
 });
-function CascadingMenuList({ menuItems, onNavigateBack, }) {
+const CascadingMenuList = observer(function CascadingMenuList({ menuItems, onNavigateBack, }) {
     const { classes, cx } = useStyles();
     const { openSubmenu, hover } = useSubmenuHover();
     const { closeOnHover } = hover;
@@ -447,10 +448,11 @@ function CascadingMenuList({ menuItems, onNavigateBack, }) {
             }
             return (_jsx(CascadingMenuItem, { item: item, inset: hasIcon && !item.icon, columns: columns, onNavigateBack: onNavigateBack, onHover: closeOnHover }, key));
         }) }));
-}
+});
 const CascadingMenu = observer(function CascadingMenu({ onMenuItemClick, closeAfterItemClick = true, menuItems, open, onClose, anchorEl, anchorOrigin, transformOrigin, anchorReference, anchorPosition, style, }) {
     const items = Array.isArray(menuItems) ? menuItems : menuItems();
-    return (_jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, anchorReference: anchorReference, anchorPosition: anchorPosition, style: style, children: _jsx(CascadingMenuContext, { value: {
+    const { onEntering, ...focus } = usePlacedMenuFocus();
+    return (_jsx(Menu, { ...focus, anchorEl: anchorEl, open: open, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, anchorReference: anchorReference, anchorPosition: anchorPosition, style: style, slotProps: { transition: { onEntering } }, children: _jsx(CascadingMenuContext, { value: {
                 closeAfterItemClick,
                 onMenuItemClick,
                 onCloseRoot: onClose,

package/esm/ui/CascadingMenuButton.d.ts

@@ -1,7 +1,7 @@
 import type { MenuItemsGetter } from './CascadingMenu.tsx';
 import type { MenuItemClickHandler } from './MenuTypes.ts';
 import type { PopoverOrigin } from '@mui/material';
-declare function CascadingMenuButton({ children, menuItems, closeAfterItemClick, stopPropagation, disabled, setOpen, ButtonComponent, onClick: onClickExtra, onMenuItemClick, anchorOrigin, transformOrigin, tooltip, ...rest }: {
+declare const CascadingMenuButton: ({ children, menuItems, closeAfterItemClick, stopPropagation, disabled, setOpen, ButtonComponent, onClick: onClickExtra, onMenuItemClick, anchorOrigin, transformOrigin, tooltip, ...rest }: {
     children?: React.ReactNode;
     menuItems: MenuItemsGetter;
     closeAfterItemClick?: boolean;
@@ -20,5 +20,5 @@ declare function CascadingMenuButton({ children, menuItems, closeAfterItemClick,
     transformOrigin?: PopoverOrigin;
     tooltip?: string;
     [key: string]: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
 export default CascadingMenuButton;

package/esm/ui/CascadingMenuButton.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import { observer } from 'mobx-react';
 import CascadingMenu from './CascadingMenu.js';
 // drop the menu below the trigger icon rather than overlapping it (MUI's
 // default top/left anchor)
@@ -10,10 +11,10 @@ const dropdownTransformOrigin = { vertical: 'top', horizontal: 'left' };
 // A disabled button has pointer-events:none, so a Tooltip placed directly on it
 // never fires; wrap it in a span (per MUI guidance) to restore the hover. The
 // wrapper is only added when disabled, so enabled buttons keep their layout.
-function MaybeTooltip({ title, disabled, children, }) {
+const MaybeTooltip = observer(function MaybeTooltip({ title, disabled, children, }) {
     return title ? (_jsx(Tooltip, { title: title, children: disabled ? _jsx("span", { children: children }) : children })) : (children);
-}
-function CascadingMenuButton({ children, menuItems, closeAfterItemClick = true, stopPropagation, disabled, setOpen, ButtonComponent = IconButton, onClick: onClickExtra, onMenuItemClick = callback => {
+});
+const CascadingMenuButton = observer(function CascadingMenuButton({ children, menuItems, closeAfterItemClick = true, stopPropagation, disabled, setOpen, ButtonComponent = IconButton, onClick: onClickExtra, onMenuItemClick = callback => {
     callback();
 }, anchorOrigin = dropdownAnchorOrigin, transformOrigin = dropdownTransformOrigin, tooltip, ...rest }) {
     const [anchorEl, setAnchorEl] = useState(null);
@@ -38,5 +39,5 @@ function CascadingMenuButton({ children, menuItems, closeAfterItemClick = true,
                     setAnchorEl(null);
                     setOpen?.(false);
                 }, anchorEl: anchorEl, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, menuItems: menuItems, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick })) : null] }));
-}
+});
 export default CascadingMenuButton;

package/esm/ui/CascadingMenuHelpDialog.d.ts

@@ -1,5 +1,6 @@
-export default function CascadingMenuHelpDialog({ onClose, helpText, label, }: {
+declare const CascadingMenuHelpDialog: ({ onClose, helpText, label, }: {
     onClose: () => void;
     helpText: React.ReactNode;
     label?: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default CascadingMenuHelpDialog;

package/esm/ui/CascadingMenuHelpDialog.js

@@ -1,9 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import InfoDialog from './InfoDialog.js';
-export default function CascadingMenuHelpDialog({ onClose, helpText, label, }) {
+const CascadingMenuHelpDialog = observer(function CascadingMenuHelpDialog({ onClose, helpText, label, }) {
     return (_jsx(InfoDialog, { open: true, onClose: onClose, title: "Help", titleNode: label ? _jsxs(_Fragment, { children: ["Help: ", label] }) : undefined, onClick: e => {
             e.stopPropagation();
         }, onMouseDown: e => {
             e.stopPropagation();
         }, children: helpText }));
-}
+});
+export default CascadingMenuHelpDialog;

package/esm/ui/CascadingMenuHelpIconButton.d.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
-export declare function CascadingMenuHelpIconSpacer(): React.JSX.Element;
-export default function CascadingMenuHelpIconButton({ helpText, label, }: {
+export declare const CascadingMenuHelpIconSpacer: () => React.JSX.Element;
+declare const CascadingMenuHelpIconButton: ({ helpText, label, }: {
     helpText: string;
     label?: React.ReactNode;
-}): React.JSX.Element;
+}) => React.JSX.Element;
+export default CascadingMenuHelpIconButton;

package/esm/ui/CascadingMenuHelpIconButton.js

@@ -2,17 +2,20 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import HelpOutlined from '@mui/icons-material/HelpOutlined';
 import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
 import CascadingMenuHelpDialog from './CascadingMenuHelpDialog.js';
 const buttonStyle = { marginLeft: 4, padding: 4 };
 // Invisible button that reserves the exact same footprint as the help icon, so
 // rows without help text keep their end decoration (radio/checkbox) aligned
 // with rows that have one
-export function CascadingMenuHelpIconSpacer() {
+export const CascadingMenuHelpIconSpacer = observer(function CascadingMenuHelpIconSpacer() {
     return (_jsx(IconButton, { size: "small", disabled: true, style: { ...buttonStyle, visibility: 'hidden' }, children: _jsx(HelpOutlined, { fontSize: "small" }) }));
-}
-export default function CascadingMenuHelpIconButton({ helpText, label, }) {
+});
+const CascadingMenuHelpIconButton = observer(function CascadingMenuHelpIconButton({ helpText, label, }) {
     const [helpDialogOpen, setHelpDialogOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", "aria-label": typeof label === 'string' ? `Help for ${label}` : 'Help for this item', onClick: event => {
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", "aria-label": typeof label === 'string'
+                    ? `Help for ${label}`
+                    : 'Help for this item', onClick: event => {
                     event.stopPropagation();
                     setHelpDialogOpen(true);
                 }, style: buttonStyle, children: _jsx(HelpOutlined, { fontSize: "small" }) }), helpDialogOpen ? (_jsx(CascadingMenuHelpDialog, { helpText: helpText, label: label, 
@@ -21,4 +24,5 @@ export default function CascadingMenuHelpIconButton({ helpText, label, }) {
                 onClose: () => {
                     setHelpDialogOpen(false);
                 } })) : null] }));
-}
+});
+export default CascadingMenuHelpIconButton;

package/esm/ui/ColorPicker.d.ts

@@ -1,12 +1,13 @@
-export declare function ColorPopover({ anchorEl, onChange, onClose, color, presetAlpha, }: {
+export declare const ColorPopover: ({ anchorEl, onChange, onClose, color, presetAlpha, }: {
     color: string;
     anchorEl: HTMLElement | null;
     onChange: (val: string) => void;
     onClose: () => void;
     presetAlpha?: number;
-}): import("react").JSX.Element;
-export default function ColorPicker({ onChange, color, presetAlpha, }: {
+}) => import("react").JSX.Element;
+declare const ColorPicker: ({ onChange, color, presetAlpha, }: {
     color: string;
     onChange: (val: string) => void;
     presetAlpha?: number;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ColorPicker;

package/esm/ui/ColorPicker.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { MenuItem, Popover, Select, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
 import { colord } from '../util/colord.js';
 import { useDebounce, useLocalStorage } from '../util/hooks.js';
 import { makeStyles } from '../util/tss-react/index.js';
@@ -30,10 +31,10 @@ const palettes = Object.keys(paletteColors);
 function isPaletteType(s) {
     return Object.hasOwn(paletteColors, s);
 }
-export function ColorPopover({ anchorEl, onChange, onClose, color, presetAlpha, }) {
+export const ColorPopover = observer(function ColorPopover({ anchorEl, onChange, onClose, color, presetAlpha, }) {
     return (_jsx(Popover, { open: !!anchorEl, anchorEl: anchorEl, onClose: onClose, children: _jsx(ColorPicker, { color: color, onChange: onChange, presetAlpha: presetAlpha }) }));
-}
-export default function ColorPicker({ onChange, color, presetAlpha, }) {
+});
+const ColorPicker = observer(function ColorPicker({ onChange, color, presetAlpha, }) {
     const { classes } = useStyles();
     const [storedPalette, setStoredPalette] = useLocalStorage('colorPickerPalette', 'set1');
     // a stale localStorage value (e.g. a palette since renamed/removed) would
@@ -56,4 +57,5 @@ export default function ColorPicker({ onChange, color, presetAlpha, }) {
                             } }, `${presetColor}-${idx}`))) }), _jsx(TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => {
                             handleChange(event.target.value);
                         } })] })] }));
-}
+});
+export default ColorPicker;

package/esm/ui/ContextMenu.d.ts

@@ -22,7 +22,7 @@ export interface ContextMenuAnchor {
  *
  * Its events do not stop at the portal — React bubbles them through the
  * component tree to whatever rendered the menu, which on a display is the
- * element that hit-tests the pointer. `DisplayStatusChromeBase` is where that
+ * element that hit-tests the pointer. `DisplayChromeBase` is where that
  * element refuses the events that did not happen over it, for every portalled
  * overlay rather than for menus alone.
  *

package/esm/ui/ContextMenu.js

@@ -20,7 +20,7 @@ const DEFAULT_OFFSET = { x: 12, y: 0 };
  *
  * Its events do not stop at the portal — React bubbles them through the
  * component tree to whatever rendered the menu, which on a display is the
- * element that hit-tests the pointer. `DisplayStatusChromeBase` is where that
+ * element that hit-tests the pointer. `DisplayChromeBase` is where that
  * element refuses the events that did not happen over it, for every portalled
  * overlay rather than for menus alone.
  *

package/esm/ui/CopyToClipboardButton.d.ts

@@ -4,7 +4,8 @@ import type { ButtonProps } from '@mui/material';
  * `copiedLabel` as feedback. `value` may be a function so callers can defer
  * computing large strings (e.g. JSON.stringify) until the click happens.
  */
-export default function CopyToClipboardButton({ value, children, copiedLabel, ...rest }: {
+declare const CopyToClipboardButton: ({ value, children, copiedLabel, ...rest }: {
     value: string | (() => string);
     copiedLabel?: string;
-} & Omit<ButtonProps, 'value'>): import("react").JSX.Element;
+} & Omit<ButtonProps, 'value'>) => import("react").JSX.Element;
+export default CopyToClipboardButton;

package/esm/ui/CopyToClipboardButton.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
+import { observer } from 'mobx-react';
 import { useCopyToClipboard } from './useCopyToClipboard.js';
 /**
  * A Button that copies `value` to the clipboard and briefly swaps its label to
  * `copiedLabel` as feedback. `value` may be a function so callers can defer
  * computing large strings (e.g. JSON.stringify) until the click happens.
  */
-export default function CopyToClipboardButton({ value, children, copiedLabel = 'Copied to clipboard!', ...rest }) {
+const CopyToClipboardButton = observer(function CopyToClipboardButton({ value, children, copiedLabel = 'Copied to clipboard!', ...rest }) {
     const { copied, copy } = useCopyToClipboard();
     return (_jsx(Button, { ...rest, onClick: () => {
             void copy(typeof value === 'function' ? value() : value);
         }, children: copied ? copiedLabel : children }));
-}
+});
+export default CopyToClipboardButton;

package/esm/ui/Crosshairs.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Crosshairs = ({ width, height, mouseX, mouseY, top = 0, zIndex, 
+import { observer } from 'mobx-react';
+const Crosshairs = observer(function Crosshairs({ width, height, mouseX, mouseY, top = 0, zIndex, 
 // The vertical (genomic-position) guide is dropped when the cursor is left of
 // this, e.g. over a tree sidebar where it has no meaning and clutters the
 // resize handle. The horizontal row guide is kept.
-minLeft = 0, }) => (_jsxs("svg", { style: {
-        position: 'absolute',
-        top,
-        left: 0,
-        width,
-        height,
-        pointerEvents: 'none',
-        zIndex,
-    }, children: [mouseY === undefined ? null : (_jsx("line", { x1: 0, x2: width, y1: mouseY, y2: mouseY, stroke: "currentColor" })), mouseX >= minLeft ? (_jsx("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: "currentColor" })) : null] }));
+minLeft = 0, }) {
+    return (_jsxs("svg", { style: {
+            position: 'absolute',
+            top,
+            left: 0,
+            width,
+            height,
+            pointerEvents: 'none',
+            zIndex,
+        }, children: [mouseY === undefined ? null : (_jsx("line", { x1: 0, x2: width, y1: mouseY, y2: mouseY, stroke: "currentColor" })), mouseX >= minLeft ? (_jsx("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: "currentColor" })) : null] }));
+});
 export default Crosshairs;

package/esm/ui/DOMPurifySanitizedHTML.d.ts

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

package/esm/ui/DOMPurifySanitizedHTML.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from 'react';
 import dompurify from 'dompurify';
+import { observer } from 'mobx-react';
 import { rewriteExternalAnchors } from './rewriteExternalAnchors.js';
-export default function DOMPurifySanitizedHTML({ value, className, }) {
+const DOMPurifySanitizedHTML = observer(function DOMPurifySanitizedHTML({ value, className, }) {
     const spanRef = useRef(null);
     useLayoutEffect(() => {
         const el = spanRef.current;
@@ -13,4 +14,5 @@ export default function DOMPurifySanitizedHTML({ value, className, }) {
     return (_jsx("span", { ref: spanRef, className: className, 
         // eslint-disable-next-line @eslint-react/dom-no-dangerously-set-innerhtml
         dangerouslySetInnerHTML: { __html: dompurify.sanitize(value) } }));
-}
+});
+export default DOMPurifySanitizedHTML;

package/esm/ui/DataGridFlexContainer.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-export default function DataGridFlexContainer({ children, className, style, }: {
+declare const DataGridFlexContainer: ({ children, className, style, }: {
     children: React.ReactNode;
     /**
      * merged with the flex-column base. A caller that wants the grid to FILL its
@@ -9,4 +9,5 @@ export default function DataGridFlexContainer({ children, className, style, }: {
      */
     className?: string;
     style?: CSSProperties;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default DataGridFlexContainer;

package/esm/ui/DataGridFlexContainer.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { cx, makeStyles } from '../util/tss-react/index.js';
 const useStyles = makeStyles()({
     flexContainer: {
@@ -7,7 +8,8 @@ const useStyles = makeStyles()({
     },
 });
 // https://mui.com/x/react-data-grid/layout/#flex-parent-container
-export default function DataGridFlexContainer({ children, className, style, }) {
+const DataGridFlexContainer = observer(function DataGridFlexContainer({ children, className, style, }) {
     const { classes } = useStyles();
     return (_jsx("div", { className: cx(classes.flexContainer, className), style: style, children: children }));
-}
+});
+export default DataGridFlexContainer;

package/esm/ui/Dialog.d.ts

@@ -6,5 +6,5 @@ export interface Props extends Omit<DialogProps, 'onClose'> {
         bivarianceHack(event: object, reason: 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick'): void;
     }['bivarianceHack'] | undefined;
 }
-declare function Dialog(props: Props): import("react").JSX.Element;
+declare const Dialog: (props: Props) => import("react").JSX.Element;
 export default Dialog;

package/esm/ui/Dialog.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import { DialogTitle, Divider, IconButton, Dialog as MUIDialog, ScopedCssBaseline, ThemeProvider, createTheme, useTheme, } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import ErrorBanner from './ErrorBanner.js';
 import { ErrorBoundary } from './ErrorBoundary.js';
@@ -18,11 +19,11 @@ const useStyles = makeStyles()(theme => ({
         margin: theme.spacing(5),
     },
 }));
-function DialogError({ error }) {
+const DialogError = observer(function DialogError({ error, }) {
     const { classes } = useStyles();
     return (_jsx("div", { className: classes.errorBox, children: _jsx(ErrorBanner, { error: error }) }));
-}
-function Dialog(props) {
+});
+const Dialog = observer(function Dialog(props) {
     const { classes } = useStyles();
     const { titleNode, header, title, ...rest } = props;
     const { children, onClose } = rest;
@@ -49,5 +50,5 @@ function Dialog(props) {
                         , { "data-testid": "dialog-close", className: classes.closeButton, onClick: event => {
                                 onClose(event, 'closeButtonClick');
                             }, children: _jsx(CloseIcon, {}) })) : null] })), _jsx(Divider, {}), _jsx(ErrorBoundary, { FallbackComponent: DialogError, children: _jsx(ThemeProvider, { theme: dialogTheme, children: children }) })] }) }));
-}
+});
 export default Dialog;

package/esm/ui/DropDownMenu.js

@@ -15,10 +15,10 @@ const useStyles = makeStyles()(theme => ({
         },
     },
 }));
-function ButtonComponent(props) {
+const ButtonComponent = observer(function ButtonComponent(props) {
     const { classes } = useStyles();
     return (_jsx(Button, { ...props, className: classes.buttonRoot, children: props.children }));
-}
+});
 const DropDownMenu = observer(function DropDownMenu({ menuTitle, menuItems, onMenuItemClick, }) {
     return (_jsxs(CascadingMenuButton, { menuItems: menuItems, onMenuItemClick: onMenuItemClick, color: "inherit", ButtonComponent: ButtonComponent, children: [menuTitle, _jsx(ArrowDropDown, {})] }));
 });

package/esm/ui/EditableTypography.d.ts

@@ -9,5 +9,5 @@ interface Props {
     classes?: Partial<Record<EditableTypographyClassKey, string>>;
     ref?: Ref<HTMLDivElement>;
 }
-declare function EditableTypography(props: Props): import("react").JSX.Element;
+declare const EditableTypography: (props: Props) => import("react").JSX.Element;
 export default EditableTypography;

package/esm/ui/EditableTypography.js

@@ -4,6 +4,7 @@ import { useRef, useState } from 'react';
 // that exact string. See the note in `util/hooks.ts`.
 import useMeasure from '@jbrowse/core/util/useMeasure';
 import { InputBase, Typography, useTheme } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     typography: {
@@ -21,7 +22,7 @@ const useStyles = makeStyles()(theme => ({
         borderWidth: 2,
     },
 }));
-function EditableTypography(props) {
+const EditableTypography = observer(function EditableTypography(props) {
     const { value, setValue, variant, ref, classes: overrides, ...other } = props;
     const [ref2, { width }] = useMeasure('width');
     const [editedValue, setEditedValue] = useState();
@@ -64,5 +65,5 @@ function EditableTypography(props) {
                     }
                     setEditedValue(undefined);
                 } })] }));
-}
+});
 export default EditableTypography;

package/esm/ui/ErrorActions.d.ts

@@ -11,7 +11,7 @@ import type { ReactNode } from 'react';
  * the environment block and the prefilled issue link — the whole of what that
  * dialog is for — from anyone whose failure arrived as a string.
  */
-export default function ErrorActions({ error, onRetry, extraAction, color, }: {
+declare const ErrorActions: ({ error, onRetry, extraAction, color, }: {
     error: unknown;
     /** omitted by a presentation with nothing to retry */
     onRetry?: () => void;
@@ -21,4 +21,5 @@ export default function ErrorActions({ error, onRetry, extraAction, color, }: {
      */
     extraAction?: ReactNode;
     color?: IconButtonProps['color'];
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorActions;

package/esm/ui/ErrorActions.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 import StackTraceButton from './StackTraceButton.js';
 /**
  * What both error presentations offer, in one order: the remedy specific to
@@ -13,8 +14,9 @@ import StackTraceButton from './StackTraceButton.js';
  * the environment block and the prefilled issue link — the whole of what that
  * dialog is for — from anyone whose failure arrived as a string.
  */
-export default function ErrorActions({ error, onRetry, extraAction, color, }) {
+const ErrorActions = observer(function ErrorActions({ error, onRetry, extraAction, color, }) {
     return (_jsxs(_Fragment, { children: [extraAction, _jsx(StackTraceButton, { error: error, color: color }), onRetry ? (_jsx(Tooltip, { title: "Retry", children: _jsx(IconButton, { "data-testid": "reload_button", onClick: () => {
                         onRetry();
                     }, color: color, children: _jsx(RefreshIcon, {}) }) })) : null] }));
-}
+});
+export default ErrorActions;

package/esm/ui/ErrorBanner.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-declare function ErrorBanner({ error, onReset, extraAction, }: {
+declare const ErrorBanner: ({ error, onReset, extraAction, }: {
     error: unknown;
     onReset?: () => void;
     extraAction?: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
 export default ErrorBanner;

package/esm/ui/ErrorBanner.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import ErrorActions from './ErrorActions.js';
 import RedErrorMessageBox from './RedErrorMessageBox.js';
@@ -22,7 +23,7 @@ const useStyles = makeStyles()(theme => ({
         marginLeft: 100,
     },
 }));
-function ErrorBanner({ error, onReset, extraAction, }) {
+const ErrorBanner = observer(function ErrorBanner({ error, onReset, extraAction, }) {
     const { classes } = useStyles();
     const errorText = `${error}`;
     // trim "expected an instance of ..." tail — still generated by MST for
@@ -31,5 +32,5 @@ function ErrorBanner({ error, onReset, extraAction, }) {
     const displayText = instanceIdx === -1 ? errorText : errorText.slice(0, instanceIdx);
     const { snapshotValue, message } = parseError(errorText);
     return (_jsxs(RedErrorMessageBox, { children: [displayText.slice(0, 10000), _jsx("div", { className: classes.iconFloat, children: _jsx(ErrorActions, { error: error, onRetry: onReset, extraAction: extraAction, color: "primary" }) }), snapshotValue !== undefined ? (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.message, children: message }), _jsx("pre", { className: classes.bg, children: JSON.stringify(snapshotValue, null, 2) })] })) : null] }));
-}
+});
 export default ErrorBanner;

package/esm/ui/ErrorBar.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
-export default function ErrorBar({ error, onRetry, extraAction, }: {
+declare const ErrorBar: ({ error, onRetry, extraAction, }: {
     error: unknown;
     onRetry: () => void;
     extraAction?: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorBar;

package/esm/ui/ErrorBar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import ErrorActions from './ErrorActions.js';
 const useStyles = makeStyles()({
@@ -12,7 +13,7 @@ const useStyles = makeStyles()({
         userSelect: 'text',
     },
 });
-export default function ErrorBar({ error, onRetry, extraAction, }) {
+const ErrorBar = observer(function ErrorBar({ error, onRetry, extraAction, }) {
     const { classes } = useStyles();
     const message = `${error}`;
     return (_jsx("div", { style: {
@@ -32,4 +33,5 @@ export default function ErrorBar({ error, onRetry, extraAction, }) {
         }, onClick: e => {
             e.stopPropagation();
         }, children: _jsx(Alert, { severity: "error", action: _jsx(ErrorActions, { error: error, onRetry: onRetry, extraAction: extraAction }), children: _jsx(Tooltip, { title: message, children: _jsx("div", { className: classes.content, children: message }) }) }) }));
-}
+});
+export default ErrorBar;

package/esm/ui/ErrorMessage.d.ts

@@ -1,3 +1,4 @@
-export default function ErrorMessage({ error }: {
+declare const ErrorMessage: ({ error, }: {
     error: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorMessage;