@jbrowse/core 4.3.0 → 5.0.0-beta.2

package/esm/ui/ColorPicker.d.ts

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

package/esm/ui/ColorPicker.js

@@ -1,62 +1,59 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { colord } from '@jbrowse/core/util/colord';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { MenuItem, Popover, Select, TextField } from '@mui/material';
-import * as paletteColors from "./colors.js";
-import { RgbaStringColorPicker } from "./react-colorful.js";
-import { useDebounce, useLocalStorage } from "../util/index.js";
+import { colord } from '../util/colord.js';
+import { useDebounce, useLocalStorage } from '../util/hooks.js';
+import { makeStyles } from '../util/tss-react/index.js';
+import { swatchStyle } from './colorSwatchStyle.js';
+import { paletteColors } from './colors.js';
+import { RgbaStringColorPicker } from './react-colorful.js';
+// note: we are using a vendored copy of react-colorful because the default
+// uses pure-ESM which is difficult to make pass with jest e.g.
+// https://stackoverflow.com/questions/58613492/how-to-resolve-cannot-use-import-statement-outside-a-module-in-jest
 const useStyles = makeStyles()({
-    picker: { position: 'relative' },
+    root: {
+        display: 'flex',
+        padding: 10,
+    },
+    column: {
+        width: 200,
+        margin: 5,
+    },
     swatches: {
         display: 'flex',
         padding: 12,
         flexWrap: 'wrap',
     },
-    swatch: {
-        width: 24,
-        height: 24,
-        margin: 4,
-        border: 'none',
-        padding: 0,
-        cursor: 'pointer',
-        outline: 'none',
-    },
+    swatch: swatchStyle,
 });
-export const PopoverPicker = ({ color, onChange, }) => {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const { classes } = useStyles();
-    return (_jsxs("div", { className: classes.picker, children: [_jsx("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: event => {
-                    setAnchorEl(event.currentTarget);
-                } }), _jsx(ColorPopover, { anchorEl: anchorEl, onClose: () => {
-                    setAnchorEl(null);
-                }, color: color, onChange: onChange })] }));
-};
-export function ColorPopover({ anchorEl, onChange, onClose, color, }) {
-    return (_jsx(Popover, { open: !!anchorEl, anchorEl: anchorEl, onClose: onClose, children: _jsx(ColorPicker, { color: color, onChange: onChange }) }));
+const palettes = Object.keys(paletteColors);
+function isPaletteType(s) {
+    return Object.hasOwn(paletteColors, s);
+}
+export 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 function ColorPicker({ onChange, color, }) {
+export default function ColorPicker({ onChange, color, presetAlpha, }) {
     const { classes } = useStyles();
-    const [val, setVal] = useLocalStorage('colorPickerPalette', 'set1');
-    const presetColors = paletteColors[val];
-    const palettes = Object.keys(paletteColors);
+    const [storedPalette, setStoredPalette] = useLocalStorage('colorPickerPalette', 'set1');
+    // a stale localStorage value (e.g. a palette since renamed/removed) would
+    // index to undefined and crash the swatch map below
+    const palette = isPaletteType(storedPalette) ? storedPalette : 'set1';
+    const presetColors = paletteColors[palette];
     const [text, setText] = useState(color);
     const rgb = colord(color).toRgbString();
     const rgbDebounced = useDebounce(rgb, 1000);
     const handleChange = (val) => {
         setText(val);
-        try {
-            onChange(colord(val).toRgbString());
-        }
-        catch (e) { }
+        onChange(colord(val).toRgbString());
     };
-    return (_jsxs("div", { style: { display: 'flex', padding: 10 }, children: [_jsx("div", { style: { width: 200, margin: 5 }, children: _jsx(RgbaStringColorPicker, { color: rgbDebounced, onChange: handleChange }) }), _jsxs("div", { style: { width: 200, margin: 5 }, children: [_jsx(Select, { value: val, onChange: event => {
-                            const pal = event.target.value;
-                            setVal(pal);
+    return (_jsxs("div", { className: classes.root, children: [_jsx("div", { className: classes.column, children: _jsx(RgbaStringColorPicker, { color: rgbDebounced, onChange: handleChange }) }), _jsxs("div", { className: classes.column, children: [_jsx(Select, { value: palette, onChange: event => {
+                            setStoredPalette(event.target.value);
                         }, children: palettes.map(p => (_jsx(MenuItem, { value: p, children: p }, p))) }), _jsx("div", { className: classes.swatches, children: presetColors.map((presetColor, idx) => (_jsx("button", { type: "button", className: classes.swatch, style: { background: presetColor }, onClick: () => {
-                                handleChange(presetColor);
+                                handleChange(presetAlpha === undefined
+                                    ? presetColor
+                                    : colord(presetColor).alpha(presetAlpha).toRgbString());
                             } }, `${presetColor}-${idx}`))) }), _jsx(TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => {
                             handleChange(event.target.value);
                         } })] })] }));
 }
-export default PopoverPicker;

package/esm/ui/ConfirmDialog.d.ts

@@ -1,10 +1,3 @@
-import type { DialogProps } from '@mui/material';
-interface Props extends DialogProps {
-    header?: React.ReactNode;
-    onCancel: () => void;
-    onSubmit: () => void;
-    cancelText?: string;
-    submitText?: string;
-}
-declare const ConfirmDialog: (props: Props) => import("react/jsx-runtime").JSX.Element;
+import type { SubmitDialogProps } from './SubmitDialog.tsx';
+declare const ConfirmDialog: (props: SubmitDialogProps) => import("react").JSX.Element;
 export default ConfirmDialog;

package/esm/ui/ConfirmDialog.js

@@ -1,13 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, DialogActions, DialogContent } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import Dialog from "./Dialog.js";
+import SubmitDialog from './SubmitDialog.js';
+// ConfirmDialog is a SubmitDialog framed as a yes/no confirmation: the action
+// button defaults to "OK" instead of "Submit". Enter submits, Escape/Cancel
+// dismisses.
 const ConfirmDialog = observer(function ConfirmDialog(props) {
-    const { onSubmit, onCancel, cancelText = 'Cancel', submitText = 'OK', children, } = props;
-    return (_jsxs(Dialog, { onClose: onCancel, ...props, children: [_jsx(DialogContent, { children: children }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
-                            onCancel();
-                        }, children: cancelText }), _jsx(Button, { color: "primary", variant: "contained", onClick: () => {
-                            onSubmit();
-                        }, children: submitText })] })] }));
+    return _jsx(SubmitDialog, { submitText: "OK", ...props });
 });
 export default ConfirmDialog;

package/esm/ui/ContextMenu.d.ts

@@ -0,0 +1,50 @@
+import type { MenuItemsGetter } from './MenuTypes.ts';
+/**
+ * Where the menu opens, in viewport coordinates — i.e. an event's
+ * `clientX`/`clientY`, whatever produced it (a right-click, the release of a
+ * drag-selection). `undefined` is the closed state: displays keep the click
+ * point and the menu's open-ness as one value rather than two that can
+ * disagree.
+ */
+export interface ContextMenuAnchor {
+    clientX: number;
+    clientY: number;
+}
+/**
+ * The popup menu every display raises from a click point: right-click menus,
+ * and the dotplot's drag-release menu.
+ *
+ * Its own observer, and the one place `menuItems` is resolved: a display passes
+ * the getter rather than a built array, so rebuilding the items re-renders this
+ * component alone. Built inline in a display body instead, the per-mousemove
+ * coordinate state there re-ran the whole menu build — with fresh item
+ * identities — on every move while a menu was open.
+ *
+ * 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 refuses the events that did not happen over it, for every portalled
+ * overlay rather than for menus alone.
+ *
+ * Mounts only while open, and only with something to show: MUI keeps a Paper
+ * that fades out on close, so an anchored-but-empty menu flashes an empty box
+ * at the cursor. `onClose` is the single close path — Menu's
+ * `closeAfterItemClick` default already fires it ahead of the clicked item's
+ * callback, so an item's `onClick` must not read state that closing clears
+ * (capture it when the items are built).
+ *
+ * Being the single close path is also why the display's tracked pointer is
+ * dropped here rather than by each display: this menu is portalled, so the
+ * display under it is never sent the `mouseleave` its overlays clear on. See
+ * `useClearTrackedPointer`.
+ */
+declare const ContextMenu: ({ anchor, menuItems, onClose, offset, }: {
+    anchor: ContextMenuAnchor | undefined;
+    menuItems: MenuItemsGetter;
+    onClose: () => void;
+    offset?: {
+        x: number;
+        y: number;
+    };
+}) => import("react").JSX.Element | null;
+export default ContextMenu;

package/esm/ui/ContextMenu.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import Menu from './CascadingMenu.js';
+import { useClearTrackedPointer } from './useMouseTracking.js';
+import { CONTEXT_MENU_Z_INDEX } from './zIndexes.js';
+/**
+ * Nudge off the click point, so the pixel that was right-clicked — a mismatch
+ * column, a variant cell — stays visible beside the menu instead of under it.
+ */
+const DEFAULT_OFFSET = { x: 12, y: 0 };
+/**
+ * The popup menu every display raises from a click point: right-click menus,
+ * and the dotplot's drag-release menu.
+ *
+ * Its own observer, and the one place `menuItems` is resolved: a display passes
+ * the getter rather than a built array, so rebuilding the items re-renders this
+ * component alone. Built inline in a display body instead, the per-mousemove
+ * coordinate state there re-ran the whole menu build — with fresh item
+ * identities — on every move while a menu was open.
+ *
+ * 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 refuses the events that did not happen over it, for every portalled
+ * overlay rather than for menus alone.
+ *
+ * Mounts only while open, and only with something to show: MUI keeps a Paper
+ * that fades out on close, so an anchored-but-empty menu flashes an empty box
+ * at the cursor. `onClose` is the single close path — Menu's
+ * `closeAfterItemClick` default already fires it ahead of the clicked item's
+ * callback, so an item's `onClick` must not read state that closing clears
+ * (capture it when the items are built).
+ *
+ * Being the single close path is also why the display's tracked pointer is
+ * dropped here rather than by each display: this menu is portalled, so the
+ * display under it is never sent the `mouseleave` its overlays clear on. See
+ * `useClearTrackedPointer`.
+ */
+const ContextMenu = observer(function ContextMenu({ anchor, menuItems, onClose, offset = DEFAULT_OFFSET, }) {
+    const clearTrackedPointer = useClearTrackedPointer();
+    if (!anchor) {
+        return null;
+    }
+    const items = Array.isArray(menuItems) ? menuItems : menuItems();
+    return items.length > 0 ? (_jsx(Menu, { open: true, onMenuItemClick: callback => {
+            callback();
+        }, onClose: () => {
+            clearTrackedPointer();
+            onClose();
+        }, anchorReference: "anchorPosition", anchorPosition: {
+            top: anchor.clientY + offset.y,
+            left: anchor.clientX + offset.x,
+        }, style: { zIndex: CONTEXT_MENU_Z_INDEX }, menuItems: items })) : null;
+});
+export default ContextMenu;

package/esm/ui/CopyToClipboardButton.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonProps } from '@mui/material';
+/**
+ * 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, ...rest }: {
+    value: string | (() => string);
+    copiedLabel?: string;
+} & Omit<ButtonProps, 'value'>): import("react").JSX.Element;

package/esm/ui/CopyToClipboardButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@mui/material';
+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 { copied, copy } = useCopyToClipboard();
+    return (_jsx(Button, { ...rest, onClick: () => {
+            void copy(typeof value === 'function' ? value() : value);
+        }, children: copied ? copiedLabel : children }));
+}

package/esm/ui/Crosshairs.d.ts

@@ -0,0 +1,10 @@
+declare const Crosshairs: ({ width, height, mouseX, mouseY, top, zIndex, minLeft, }: {
+    width: number;
+    height: number;
+    mouseX: number;
+    mouseY?: number;
+    top?: number;
+    zIndex?: number;
+    minLeft?: number;
+}) => import("react").JSX.Element;
+export default Crosshairs;

package/esm/ui/Crosshairs.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const 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] }));
+export default Crosshairs;

package/esm/ui/DOMPurifySanitizedHTML.d.ts

@@ -1,4 +1,4 @@
 export default function DOMPurifySanitizedHTML({ value, className, }: {
     value: string;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/DOMPurifySanitizedHTML.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from 'react';
 import dompurify from 'dompurify';
+import { rewriteExternalAnchors } from './rewriteExternalAnchors.js';
 export default function DOMPurifySanitizedHTML({ value, className, }) {
     const spanRef = useRef(null);
     useLayoutEffect(() => {
         const el = spanRef.current;
         if (el) {
-            for (const a of el.querySelectorAll('a')) {
-                a.setAttribute('rel', 'noopener noreferrer');
-                a.setAttribute('target', '_blank');
-            }
+            rewriteExternalAnchors(el);
         }
     }, [value]);
-    return (_jsx("span", { ref: spanRef, className: className, dangerouslySetInnerHTML: { __html: dompurify.sanitize(value) } }));
+    return (_jsx("span", { ref: spanRef, className: className, 
+        // eslint-disable-next-line @eslint-react/dom-no-dangerously-set-innerhtml
+        dangerouslySetInnerHTML: { __html: dompurify.sanitize(value) } }));
 }

package/esm/ui/DataGridFlexContainer.d.ts

@@ -1,5 +1,12 @@
 import type { CSSProperties } from 'react';
-export default function DataGridFlexContainer({ children, style, }: {
+export default function DataGridFlexContainer({ children, className, style, }: {
     children: React.ReactNode;
+    /**
+     * merged with the flex-column base. A caller that wants the grid to FILL its
+     * parent rather than size to its rows passes `flex: 1; min-height: 0` here —
+     * worth doing, because a content-sized DataGrid draws its horizontal
+     * scrollbar as an overlay on top of its own last row.
+     */
+    className?: string;
     style?: CSSProperties;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/DataGridFlexContainer.js

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

package/esm/ui/Dialog.d.ts

@@ -1,7 +1,10 @@
 import type { DialogProps } from '@mui/material';
-export interface Props extends DialogProps {
+export interface Props extends Omit<DialogProps, 'onClose'> {
     header?: React.ReactNode;
     titleNode?: React.ReactNode;
+    onClose?: {
+        bivarianceHack(event: object, reason: 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick'): void;
+    }['bivarianceHack'] | undefined;
 }
-declare const Dialog: (props: Props) => import("react/jsx-runtime").JSX.Element;
+declare function Dialog(props: Props): import("react").JSX.Element;
 export default Dialog;

package/esm/ui/Dialog.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isValidElement } from 'react';
+import { useMemo } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
-import { Dialog as MUIDialog, DialogTitle, Divider, IconButton, ScopedCssBaseline, ThemeProvider, createTheme, useTheme, } from '@mui/material';
-import { observer } from 'mobx-react';
-import { ErrorBoundary } from "./ErrorBoundary.js";
-import ErrorMessage from "./ErrorMessage.js";
-import SanitizedHTML from "./SanitizedHTML.js";
-import { makeStyles } from "../util/tss-react/index.js";
+import { DialogTitle, Divider, IconButton, Dialog as MUIDialog, ScopedCssBaseline, ThemeProvider, createTheme, useTheme, } from '@mui/material';
+import { makeStyles } from '../util/tss-react/index.js';
+import ErrorBanner from './ErrorBanner.js';
+import { ErrorBoundary } from './ErrorBoundary.js';
+import SanitizedHTML from './SanitizedHTML.js';
 const useStyles = makeStyles()(theme => ({
     closeButton: {
         position: 'absolute',
@@ -15,31 +14,40 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.grey[500],
     },
     errorBox: {
-        width: 800,
-        margin: 40,
+        maxWidth: 800,
+        margin: theme.spacing(5),
     },
 }));
 function DialogError({ error }) {
     const { classes } = useStyles();
-    return (_jsx("div", { className: classes.errorBox, children: _jsx(ErrorMessage, { error: error }) }));
+    return (_jsx("div", { className: classes.errorBox, children: _jsx(ErrorBanner, { error: error }) }));
 }
-const Dialog = observer(function Dialog(props) {
+function Dialog(props) {
     const { classes } = useStyles();
-    const { titleNode, ...rest } = props;
-    const { title, header, children, onClose } = rest;
+    const { titleNode, header, title, ...rest } = props;
+    const { children, onClose } = rest;
     const theme = useTheme();
-    return (_jsx(MUIDialog, { ...rest, children: _jsxs(ScopedCssBaseline, { children: [isValidElement(header) ? (header) : (_jsxs(DialogTitle, { children: [titleNode || _jsx(SanitizedHTML, { html: title || '' }), onClose ? (_jsx(IconButton, { className: classes.closeButton, onClick: event => {
-                                onClose(event, 'backdropClick');
-                            }, children: _jsx(CloseIcon, {}) })) : null] })), _jsx(Divider, {}), _jsx(ErrorBoundary, { FallbackComponent: DialogError, children: _jsx(ThemeProvider, { theme: createTheme(theme, {
-                            components: {
-                                MuiInputBase: {
-                                    styleOverrides: {
-                                        input: {
-                                            boxSizing: 'content-box!important',
-                                        },
-                                    },
-                                },
-                            },
-                        }), children: children }) })] }) }));
-});
+    // content-box override xref https://github.com/GMOD/jbrowse-components/pull/3666
+    const dialogTheme = useMemo(() => createTheme(theme, {
+        components: {
+            MuiInputBase: {
+                styleOverrides: {
+                    input: {
+                        boxSizing: 'content-box!important',
+                    },
+                },
+            },
+        },
+    }), [theme]);
+    return (_jsx(MUIDialog, { ...rest, children: _jsxs(ScopedCssBaseline, { children: [header ? (header) : (_jsxs(DialogTitle, { children: [titleNode ?? _jsx(SanitizedHTML, { html: title ?? '' }), onClose ? (_jsx(IconButton
+                        // The one handle on a dialog's (×), for a driver that cannot use
+                        // Escape: MUI delivers Escape through the modal, so a press
+                        // while focus sits on the body — where clicking an action button
+                        // that then disables itself leaves it — closes nothing, and a
+                        // screenshot spec's later actions all keep succeeding under the
+                        // panel they were meant to dismiss
+                        , { "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/DraggableDialog.d.ts

@@ -1,5 +1,5 @@
-import type { DialogProps } from '@mui/material';
-declare const DraggableDialog: (props: DialogProps & {
+import type { Props as DialogProps } from './Dialog.tsx';
+declare const DraggableDialog: (props: Omit<DialogProps, 'slotProps'> & {
     title: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DraggableDialog;

package/esm/ui/DraggableDialog.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { useEffect, useRef, useState } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
-import { Dialog, DialogTitle, Divider, IconButton, Paper, ScopedCssBaseline, } from '@mui/material';
+import { DialogTitle, IconButton } from '@mui/material';
 import { observer } from 'mobx-react';
-import Draggable from 'react-draggable';
+import { makeStyles } from '../util/tss-react/index.js';
+import Dialog from './Dialog.js';
 const useStyles = makeStyles()(theme => ({
     closeButton: {
         position: 'absolute',
@@ -12,16 +12,54 @@ const useStyles = makeStyles()(theme => ({
         top: theme.spacing(1),
         color: theme.palette.grey[500],
     },
+    title: {
+        cursor: 'move',
+    },
 }));
-function PaperComponent(props) {
-    const ref = useRef(null);
-    return (_jsx(Draggable, { nodeRef: ref, cancel: '[class*="MuiDialogContent-root"]', onStart: arg => `${arg.target?.className}`.includes('MuiDialogTitle'), children: _jsx(Paper, { ref: ref, ...props }) }));
-}
+// A drag-repositionable dialog. Renders the shared Dialog so it inherits the
+// content-box input fix and the error boundary, and supplies a draggable title
+// bar as Dialog's `header`. `slotProps` is not offered: the paper slot carries
+// the drag transform, so a caller's would be dropped rather than merged.
 const DraggableDialog = observer(function DraggableDialog(props) {
     const { classes } = useStyles();
-    const { title, children, onClose } = props;
-    return (_jsx(Dialog, { ...props, PaperComponent: PaperComponent, children: _jsxs(ScopedCssBaseline, { children: [_jsxs(DialogTitle, { style: { cursor: 'move' }, children: [title, onClose ? (_jsx(IconButton, { className: classes.closeButton, onClick: () => {
-                                onClose();
-                            }, children: _jsx(CloseIcon, {}) })) : null] }), _jsx(Divider, {}), children] }) }));
+    const { title, children, onClose, ...rest } = props;
+    const [pos, setPos] = useState({ x: 0, y: 0 });
+    const [dragging, setDragging] = useState(false);
+    const originRef = useRef({ mouseX: 0, mouseY: 0, x: 0, y: 0 });
+    useEffect(() => {
+        if (dragging) {
+            function move(event) {
+                event.preventDefault();
+                const { mouseX, mouseY, x, y } = originRef.current;
+                setPos({
+                    x: x + event.clientX - mouseX,
+                    y: y + event.clientY - mouseY,
+                });
+            }
+            function up() {
+                setDragging(false);
+            }
+            window.addEventListener('mousemove', move);
+            window.addEventListener('mouseup', up);
+            return () => {
+                window.removeEventListener('mousemove', move);
+                window.removeEventListener('mouseup', up);
+            };
+        }
+        return undefined;
+    }, [dragging]);
+    return (_jsx(Dialog, { ...rest, onClose: onClose, slotProps: {
+            paper: { style: { transform: `translate(${pos.x}px, ${pos.y}px)` } },
+        }, header: _jsxs(DialogTitle, { className: classes.title, onMouseDown: event => {
+                originRef.current = {
+                    mouseX: event.clientX,
+                    mouseY: event.clientY,
+                    x: pos.x,
+                    y: pos.y,
+                };
+                setDragging(true);
+            }, children: [title, onClose ? (_jsx(IconButton, { className: classes.closeButton, onClick: event => {
+                        onClose(event, 'closeButtonClick');
+                    }, children: _jsx(CloseIcon, {}) })) : null] }), children: children }));
 });
 export default DraggableDialog;

package/esm/ui/DropDownMenu.d.ts

@@ -1,6 +1,8 @@
 import type { MenuItem } from './Menu.tsx';
-declare const DropDownMenu: ({ menuTitle, menuItems, }: {
+import type { MenuItemClickHandler } from './MenuTypes.ts';
+declare const DropDownMenu: ({ menuTitle, menuItems, onMenuItemClick, }: {
     menuTitle: string;
     menuItems: MenuItem[] | (() => MenuItem[]);
-}) => import("react/jsx-runtime").JSX.Element;
+    onMenuItemClick?: (callback: MenuItemClickHandler) => void;
+}) => import("react").JSX.Element;
 export default DropDownMenu;

package/esm/ui/DropDownMenu.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 import { Button, alpha } from '@mui/material';
 import { observer } from 'mobx-react';
-import CascadingMenuButton from "./CascadingMenuButton.js";
+import { makeStyles } from '../util/tss-react/index.js';
+import CascadingMenuButton from './CascadingMenuButton.js';
 const useStyles = makeStyles()(theme => ({
     buttonRoot: {
         '&:hover': {
@@ -18,7 +18,7 @@ function ButtonComponent(props) {
     const { classes } = useStyles();
     return (_jsx(Button, { ...props, className: classes.buttonRoot, children: props.children }));
 }
-const DropDownMenu = observer(function DropDownMenu({ menuTitle, menuItems, }) {
-    return (_jsxs(CascadingMenuButton, { menuItems: menuItems, color: "inherit", ButtonComponent: ButtonComponent, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, children: [menuTitle, _jsx(ArrowDropDown, {})] }));
+const DropDownMenu = observer(function DropDownMenu({ menuTitle, menuItems, onMenuItemClick, }) {
+    return (_jsxs(CascadingMenuButton, { menuItems: menuItems, onMenuItemClick: onMenuItemClick, color: "inherit", ButtonComponent: ButtonComponent, children: [menuTitle, _jsx(ArrowDropDown, {})] }));
 });
 export default DropDownMenu;

package/esm/ui/EditableTypography.d.ts

@@ -1,4 +1,5 @@
 import type { TypographyProps } from '@mui/material';
+import type { Ref } from 'react';
 type Variant = TypographyProps['variant'];
 type EditableTypographyClassKey = 'input' | 'inputBase' | 'inputRoot' | 'inputFocused';
 interface Props {
@@ -6,6 +7,7 @@ interface Props {
     setValue: (value: string) => void;
     variant: Variant;
     classes?: Partial<Record<EditableTypographyClassKey, string>>;
+    ref?: Ref<HTMLDivElement>;
 }
-declare const EditableTypography: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+declare function EditableTypography(props: Props): import("react").JSX.Element;
 export default EditableTypography;