@jbrowse/core 3.4.0 → 3.5.1

package/ui/CascadingMenu.d.ts

@@ -1,5 +1,5 @@
 import type { MenuItem as JBMenuItem } from './Menu';
-import type { PopupState } from 'material-ui-popup-state/hooks';
+import type { PopupState } from './hooks';
 declare function CascadingMenuChildren(props: {
     onMenuItemClick: Function;
     closeAfterItemClick?: boolean;

package/ui/CascadingMenu.js

@@ -7,15 +7,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
 const material_1 = require("@mui/material");
-const HoverMenu_1 = __importDefault(require("material-ui-popup-state/HoverMenu"));
-const hooks_1 = require("material-ui-popup-state/hooks");
+const HoverMenu_1 = __importDefault(require("./HoverMenu"));
 const Menu_1 = require("./Menu");
+const hooks_1 = require("./hooks");
 const CascadingContext = (0, react_1.createContext)({
-    parentPopupState: null,
-    rootPopupState: null,
+    parentPopupState: undefined,
+    rootPopupState: undefined,
 });
 function CascadingMenuItem({ onClick, closeAfterItemClick, ...props }) {
-    const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
+    const { rootPopupState, parentPopupState } = (0, react_1.useContext)(CascadingContext);
     if (!rootPopupState) {
         throw new Error('must be used inside a CascadingMenu');
     }
@@ -24,16 +24,25 @@ function CascadingMenuItem({ onClick, closeAfterItemClick, ...props }) {
                 rootPopupState.close();
             }
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }, onMouseOver: () => {
+            if (parentPopupState === null || parentPopupState === void 0 ? void 0 : parentPopupState.childHandle) {
+                parentPopupState.childHandle.close();
+                parentPopupState.setChildHandle(undefined);
+            }
         } }));
 }
-function CascadingSubmenu({ title, Icon, inset, popupId, ...props }) {
+function CascadingSubmenu({ title, Icon, inset, ...props }) {
     const { parentPopupState } = (0, react_1.useContext)(CascadingContext);
     const popupState = (0, hooks_1.usePopupState)({
-        popupId,
-        variant: 'popover',
         parentPopupState,
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { ...(0, hooks_1.bindHover)(popupState), ...(0, hooks_1.bindFocus)(popupState), children: [Icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: title, inset: inset }), (0, jsx_runtime_1.jsx)(ChevronRight_1.default, {})] }), (0, jsx_runtime_1.jsx)(CascadingSubmenuHover, { ...props, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, popupState: popupState })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { ...(0, hooks_1.bindFocus)(popupState), onMouseOver: (event) => {
+                    if (parentPopupState === null || parentPopupState === void 0 ? void 0 : parentPopupState.childHandle) {
+                        parentPopupState.childHandle.close();
+                        parentPopupState.setChildHandle(undefined);
+                    }
+                    (0, hooks_1.bindHover)(popupState).onMouseOver(event);
+                }, children: [Icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: title, inset: inset }), (0, jsx_runtime_1.jsx)(ChevronRight_1.default, {})] }), (0, jsx_runtime_1.jsx)(CascadingSubmenuHover, { ...props, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, popupState: popupState })] }));
 }
 function CascadingSubmenuHover({ popupState, onMenuItemClick, menuItems, classes, ...props }) {
     const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
@@ -61,18 +70,20 @@ function EndDecoration({ item }) {
     return null;
 }
 function CascadingMenuList({ onMenuItemClick, closeAfterItemClick, menuItems, ...props }) {
-    function handleClick(callback) {
-        return (event) => {
-            onMenuItemClick(event, callback);
-        };
-    }
     const hasIcon = menuItems.some(m => 'icon' in m && m.icon);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: menuItems
-            .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+            .toSorted((a, b) => (b.priority || 0) - (a.priority || 0))
             .map((item, idx) => {
-            return 'subMenu' in item ? ((0, jsx_runtime_1.jsx)(CascadingSubmenu, { popupId: `subMenu-${item.label}`, title: item.label, Icon: item.icon, inset: hasIcon && !item.icon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu, children: (0, jsx_runtime_1.jsx)(CascadingMenuList, { ...props, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }) }, `subMenu-${item.label}-${idx}`)) : item.type === 'divider' ? ((0, jsx_runtime_1.jsx)(material_1.Divider, { component: "li" }, `divider-${JSON.stringify(item)}-${idx}`)) : item.type === 'subHeader' ? ((0, jsx_runtime_1.jsx)(material_1.ListSubheader, { children: item.label }, `subHeader-${item.label}-${idx}`)) : ((0, jsx_runtime_1.jsxs)(CascadingMenuItem, { closeAfterItemClick: closeAfterItemClick, onClick: 'onClick' in item ? handleClick(item.onClick) : undefined, disabled: Boolean(item.disabled), children: [item.icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(item.icon, {}) })) : null, ' ', (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: item.label, secondary: item.subLabel, inset: hasIcon && !item.icon }), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1, minWidth: 10 } }), (0, jsx_runtime_1.jsx)(EndDecoration, { item: item })] }, `${item.label}-${idx}`));
+            return 'subMenu' in item ? ((0, jsx_runtime_1.jsx)(CascadingSubmenu, { title: item.label, Icon: item.icon, inset: hasIcon && !item.icon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu, children: (0, jsx_runtime_1.jsx)(CascadingMenuList, { ...props, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }) }, `subMenu-${item.label}-${idx}`)) : item.type === 'divider' ? ((0, jsx_runtime_1.jsx)(material_1.Divider, { component: "li" }, `divider-${JSON.stringify(item)}-${idx}`)) : item.type === 'subHeader' ? ((0, jsx_runtime_1.jsx)(material_1.ListSubheader, { children: item.label }, `subHeader-${item.label}-${idx}`)) : ((0, jsx_runtime_1.jsxs)(CascadingMenuItem, { closeAfterItemClick: closeAfterItemClick, onClick: 'onClick' in item
+                    ? event => {
+                        onMenuItemClick(event, item.onClick);
+                    }
+                    : undefined, disabled: Boolean(item.disabled), children: [item.icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(item.icon, {}) })) : null, ' ', (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: item.label, secondary: item.subLabel, inset: hasIcon && !item.icon }), (0, jsx_runtime_1.jsx)(CascadingSpacer, {}), (0, jsx_runtime_1.jsx)(EndDecoration, { item: item })] }, `${item.label}-${idx}`));
         }) }));
 }
+function CascadingSpacer() {
+    return (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1, minWidth: 10 } });
+}
 function CascadingMenuChildren(props) {
     const { closeAfterItemClick = true, ...rest } = props;
     return ((0, jsx_runtime_1.jsx)(CascadingMenu, { ...rest, children: (0, jsx_runtime_1.jsx)(CascadingMenuList, { ...rest, closeAfterItemClick: closeAfterItemClick }) }));

package/ui/CascadingMenuButton.js

@@ -7,14 +7,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CascadingMenu_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenu"));
 const material_1 = require("@mui/material");
-const hooks_1 = require("material-ui-popup-state/hooks");
 const mobx_react_1 = require("mobx-react");
+const hooks_1 = require("./hooks");
 const CascadingMenuButton = (0, mobx_react_1.observer)(function CascadingMenuButton({ children, menuItems, closeAfterItemClick = true, stopPropagation, setOpen, onClick: onClickExtra, ...rest }) {
-    const popupState = (0, hooks_1.usePopupState)({
-        popupId: 'viewMenu',
-        variant: 'popover',
-    });
-    const { onClick, onTouchStart, ...rest2 } = (0, hooks_1.bindTrigger)(popupState);
+    const popupState = (0, hooks_1.usePopupState)();
+    const { onClick, ...rest2 } = (0, hooks_1.bindTrigger)(popupState);
     const { isOpen } = popupState;
     (0, react_1.useEffect)(() => {
         setOpen === null || setOpen === void 0 ? void 0 : setOpen(isOpen);
@@ -25,12 +22,6 @@ const CascadingMenuButton = (0, mobx_react_1.observer)(function CascadingMenuBut
                     }
                     onClick(event);
                     onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
-                }, onTouchStart: event => {
-                    if (stopPropagation) {
-                        event.stopPropagation();
-                    }
-                    onTouchStart(event);
-                    onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
                 }, ...rest2, ...rest, disabled: menuItems.length === 0, children: children }), (0, jsx_runtime_1.jsx)(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_, callback) => {
                     callback();
                 }, menuItems: menuItems, closeAfterItemClick: closeAfterItemClick, popupState: popupState })] }));

package/ui/Dialog.d.ts

@@ -1,6 +1,7 @@
 import type { DialogProps } from '@mui/material';
 interface Props extends DialogProps {
     header?: React.ReactNode;
+    titleNode?: React.ReactNode;
 }
 declare const Dialog: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Dialog;

package/ui/Dialog.js

@@ -19,15 +19,21 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         top: theme.spacing(1),
         color: theme.palette.grey[500],
     },
+    errorBox: {
+        width: 800,
+        margin: 40,
+    },
 }));
 function DialogError({ error }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { width: 800, margin: 40 }, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error }) }));
+    const { classes } = useStyles();
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes.errorBox, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error }) }));
 }
 const Dialog = (0, mobx_react_1.observer)(function (props) {
     const { classes } = useStyles();
-    const { title, header, children, onClose } = props;
+    const { titleNode, ...rest } = props;
+    const { title, header, children, onClose } = rest;
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { ...props, children: (0, jsx_runtime_1.jsxs)(material_1.ScopedCssBaseline, { children: [(0, react_1.isValidElement)(header) ? (header) : ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { children: [(0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: title || '' }), onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.closeButton, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { ...rest, children: (0, jsx_runtime_1.jsxs)(material_1.ScopedCssBaseline, { children: [(0, react_1.isValidElement)(header) ? (header) : ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { children: [titleNode || (0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: title || '' }), onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.closeButton, onClick: () => {
                                 onClose();
                             }, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: DialogError, children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: (0, material_1.createTheme)(theme, {
                             components: {

package/ui/DropDownMenu.d.ts

@@ -1,7 +1,8 @@
 import type { MenuItem } from './Menu';
+import type { AbstractSessionModel } from '../util';
 declare const DropDownMenu: ({ menuTitle, session, menuItems, }: {
     menuTitle: string;
-    session: any;
-    menuItems: MenuItem[];
+    session: AbstractSessionModel;
+    menuItems: MenuItem[] | (() => MenuItem[]);
 }) => import("react/jsx-runtime").JSX.Element;
 export default DropDownMenu;

package/ui/DropDownMenu.js

@@ -27,11 +27,11 @@ const DropDownMenu = (0, mobx_react_1.observer)(function ({ menuTitle, session,
     function handleClose() {
         setOpen(false);
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Button, { ref: anchorEl, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Button, { ref: anchorEl, color: "inherit", "data-testid": "dropDownMenuButton", classes: { root: classes.buttonRoot }, onClick: () => {
                     setOpen(!open);
-                }, color: "inherit", "data-testid": "dropDownMenuButton", classes: { root: classes.buttonRoot }, children: [menuTitle, (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {})] }), (0, jsx_runtime_1.jsx)(Menu_1.default, { anchorEl: anchorEl.current, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, onMenuItemClick: (_event, callback) => {
+                }, children: [menuTitle, (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {})] }), open ? ((0, jsx_runtime_1.jsx)(Menu_1.default, { open: true, anchorEl: anchorEl.current, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, onClose: handleClose, menuItems: typeof menuItems === 'function' ? menuItems() : menuItems, onMenuItemClick: (_event, callback) => {
                     callback(session);
                     handleClose();
-                }, open: open, onClose: handleClose, menuItems: menuItems })] }));
+                } })) : null] }));
 });
 exports.default = DropDownMenu;

package/ui/ErrorMessageStackTraceDialog.js

@@ -11,10 +11,8 @@ const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 const source_map_js_1 = require("source-map-js");
 const mui_1 = require("tss-react/mui");
 const Dialog_1 = __importDefault(require("./Dialog"));
+const ExternalLink_1 = __importDefault(require("./ExternalLink"));
 const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
-function Link2({ href, children, }) {
-    return ((0, jsx_runtime_1.jsx)(material_1.Link, { target: "_blank", href: href, children: children }));
-}
 async function myfetch(uri) {
     const res = await fetch(uri);
     if (!res.ok) {
@@ -106,7 +104,7 @@ function Contents({ text, extra }) {
     const email = 'jbrowse2@berkeley.edu';
     const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${err}`;
     const emailLink = `mailto:${email}?subject=JBrowse%202%20error&body=${err}`;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Post a new issue at ", (0, jsx_runtime_1.jsx)(Link2, { href: githubLink, children: "GitHub" }), " or send an email to ", (0, jsx_runtime_1.jsx)(Link2, { href: emailLink, children: email }), ' '] }), (0, jsx_runtime_1.jsx)("pre", { className: classes.pre, children: err2 })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Post a new issue at", ' ', (0, jsx_runtime_1.jsx)(ExternalLink_1.default, { href: githubLink, children: "GitHub" }), " or send an email to ", (0, jsx_runtime_1.jsx)(ExternalLink_1.default, { href: emailLink, children: email }), ' '] }), (0, jsx_runtime_1.jsx)("pre", { className: classes.pre, children: err2 })] }));
 }
 function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
     const [mappedStackTrace, setMappedStackTrace] = (0, react_1.useState)();

package/ui/ExternalLink.d.ts

@@ -0,0 +1,2 @@
+import type { LinkProps } from '@mui/material';
+export default function ExternalLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;

package/ui/ExternalLink.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ExternalLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const OpenInNew_1 = __importDefault(require("@mui/icons-material/OpenInNew"));
+const material_1 = require("@mui/material");
+function ExternalLink(props) {
+    const { children, ...rest } = props;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Link, { ...rest, target: "_blank", rel: "noopener noreferrer", children: [children, " ", (0, jsx_runtime_1.jsx)(OpenInNew_1.default, { fontSize: "small" })] }));
+}

package/ui/HoverMenu.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { MenuProps } from '@mui/material';
+declare const HoverMenu: React.ComponentType<MenuProps>;
+export default HoverMenu;

package/ui/HoverMenu.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const HoverMenu = React.forwardRef(function HoverMenu(props, ref) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Menu, { ...props, ref: ref, style: {
+            pointerEvents: 'none',
+            ...props.style,
+        }, slotProps: {
+            ...props.slotProps,
+            paper: {
+                style: { pointerEvents: 'auto' },
+            },
+        } }));
+});
+exports.default = HoverMenu;

package/ui/Icons.d.ts

@@ -1,10 +1,5 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-export declare function ContentCopy(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function Indexing(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function ContentCut(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function ContentPaste(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function TrackSelector(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function SaveAs(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function Save(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function DNA(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
 export declare function Cable(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/ui/Icons.js

@@ -3,38 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentCopy = ContentCopy;
 exports.Indexing = Indexing;
-exports.ContentCut = ContentCut;
-exports.ContentPaste = ContentPaste;
 exports.TrackSelector = TrackSelector;
-exports.SaveAs = SaveAs;
-exports.Save = Save;
 exports.DNA = DNA;
 exports.Cable = Cable;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SvgIcon_1 = __importDefault(require("@mui/material/SvgIcon"));
-function ContentCopy(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" }) }));
-}
 function Indexing(props) {
     return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.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" }) }));
 }
-function ContentCut(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M19,3L13,9L15,11L22,4V3M12,12.5A0.5,0.5 0 0,1 11.5,12A0.5,0.5 0 0,1 12,11.5A0.5,0.5 0 0,1 12.5,12A0.5,0.5 0 0,1 12,12.5M6,20A2,2 0 0,1 4,18C4,16.89 4.9,16 6,16A2,2 0 0,1 8,18C8,19.11 7.1,20 6,20M6,8A2,2 0 0,1 4,6C4,4.89 4.9,4 6,4A2,2 0 0,1 8,6C8,7.11 7.1,8 6,8M9.64,7.64C9.87,7.14 10,6.59 10,6A4,4 0 0,0 6,2A4,4 0 0,0 2,6A4,4 0 0,0 6,10C6.59,10 7.14,9.87 7.64,9.64L10,12L7.64,14.36C7.14,14.13 6.59,14 6,14A4,4 0 0,0 2,18A4,4 0 0,0 6,22A4,4 0 0,0 10,18C10,17.41 9.87,16.86 9.64,16.36L12,14L19,21H22V20L9.64,7.64Z" }) }));
-}
-function ContentPaste(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z" }) }));
-}
 function TrackSelector(props) {
     return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.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" }) }));
 }
-function SaveAs(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M10,19L10.14,18.86C8.9,18.5 8,17.36 8,16A3,3 0 0,1 11,13C12.36,13 13.5,13.9 13.86,15.14L20,9V7L16,3H4C2.89,3 2,3.9 2,5V19A2,2 0 0,0 4,21H10V19M4,5H14V9H4V5M20.04,12.13C19.9,12.13 19.76,12.19 19.65,12.3L18.65,13.3L20.7,15.35L21.7,14.35C21.92,14.14 21.92,13.79 21.7,13.58L20.42,12.3C20.31,12.19 20.18,12.13 20.04,12.13M18.07,13.88L12,19.94V22H14.06L20.12,15.93L18.07,13.88Z" }) }));
-}
-function Save(props) {
-    return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" }) }));
-}
 function DNA(props) {
     return ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.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" }) }));
 }

package/ui/hooks.d.ts

@@ -0,0 +1,66 @@
+import { type SyntheticEvent } from 'react';
+import * as React from 'react';
+export interface ChildHandle {
+    close: () => void;
+    popupId: string;
+}
+export interface PopupState {
+    open: (event?: React.MouseEvent | React.FocusEvent) => void;
+    close: (event?: React.MouseEvent) => void;
+    toggle: (event?: React.MouseEvent) => void;
+    setOpen: (open: boolean, eventOrAnchorEl?: SyntheticEvent | Element) => void;
+    isOpen: boolean;
+    anchorEl: Element | undefined;
+    setAnchorEl: (anchorEl: Element | undefined) => any;
+    setAnchorElUsed: boolean;
+    popupId: string | undefined;
+    hovered: boolean;
+    focused: boolean;
+    _openEventType?: string;
+    childHandle?: ChildHandle;
+    setChildHandle: (popupState?: ChildHandle) => void;
+}
+export interface CoreState {
+    isOpen: boolean;
+    setAnchorElUsed: boolean;
+    anchorEl: Element | undefined;
+    hovered: boolean;
+    focused: boolean;
+    _openEventType?: string;
+    _childHandle?: PopupState;
+}
+export declare function usePopupState(arg?: {
+    parentPopupState?: PopupState;
+    variant?: string;
+}): PopupState;
+export declare function bindTrigger(popupState: PopupState): {
+    onClick: (event?: React.MouseEvent | React.FocusEvent) => void;
+};
+export declare function bindToggle(popupState: PopupState): {
+    onClick: (event?: React.MouseEvent) => void;
+};
+export declare function bindHover(popupState: PopupState): {
+    onMouseOver: (event?: React.MouseEvent | React.FocusEvent) => void;
+};
+export declare function bindFocus(popupState: PopupState): {
+    onFocus: (event?: React.MouseEvent | React.FocusEvent) => void;
+};
+export declare function bindPopover({ isOpen, anchorEl, close, popupId }: PopupState): {
+    id: string | undefined;
+    anchorEl: Element | undefined;
+    anchorReference: "anchorEl";
+    open: boolean;
+    onClose: (event?: React.MouseEvent) => void;
+};
+export declare function bindMenu({ isOpen, anchorEl, close, popupId }: PopupState): {
+    id: string | undefined;
+    anchorEl: Element | undefined;
+    anchorReference: "anchorEl";
+    open: boolean;
+    onClose: (event?: React.MouseEvent) => void;
+};
+export declare function bindPopper({ isOpen, anchorEl, popupId }: PopupState): {
+    id: string | undefined;
+    anchorEl: Element | undefined;
+    open: boolean;
+};

package/ui/hooks.js

@@ -0,0 +1,185 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopupState = usePopupState;
+exports.bindTrigger = bindTrigger;
+exports.bindToggle = bindToggle;
+exports.bindHover = bindHover;
+exports.bindFocus = bindFocus;
+exports.bindPopover = bindPopover;
+exports.bindMenu = bindMenu;
+exports.bindPopper = bindPopper;
+const react_1 = require("react");
+const React = __importStar(require("react"));
+function usePopupState(arg) {
+    const { parentPopupState } = arg || {};
+    const popupId = React.useId();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [setAnchorElUsed, setSetAnchorElUsed] = (0, react_1.useState)(false);
+    const [anchorEl, _setAnchorEl] = (0, react_1.useState)();
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const [openEventType, setOpenEventType] = (0, react_1.useState)();
+    const [childHandle, setChildHandle] = (0, react_1.useState)();
+    const setAnchorEl = (0, react_1.useCallback)((el) => {
+        setSetAnchorElUsed(true);
+        _setAnchorEl(el);
+    }, []);
+    const toggle = (eventOrAnchorEl) => {
+        if (isOpen) {
+            close(eventOrAnchorEl);
+        }
+        else {
+            open(eventOrAnchorEl);
+        }
+    };
+    const open = (eventOrAnchorEl) => {
+        const event = eventOrAnchorEl instanceof Element ? undefined : eventOrAnchorEl;
+        const element = eventOrAnchorEl instanceof Element
+            ? eventOrAnchorEl
+            : (eventOrAnchorEl === null || eventOrAnchorEl === void 0 ? void 0 : eventOrAnchorEl.currentTarget) instanceof Element
+                ? eventOrAnchorEl.currentTarget
+                : undefined;
+        if ((event === null || event === void 0 ? void 0 : event.type) === 'touchstart') {
+            return;
+        }
+        if (parentPopupState) {
+            if (!parentPopupState.isOpen) {
+                return;
+            }
+            parentPopupState.setChildHandle(undefined);
+            setTimeout(() => {
+                parentPopupState.setChildHandle({
+                    popupId,
+                    close,
+                });
+            });
+        }
+        setIsOpen(true);
+        setHovered(prev => (event === null || event === void 0 ? void 0 : event.type) === 'mouseover' || prev);
+        setFocused(prev => (event === null || event === void 0 ? void 0 : event.type) === 'focus' || prev);
+        setOpenEventType(event === null || event === void 0 ? void 0 : event.type);
+        if (!setAnchorElUsed) {
+            if (event === null || event === void 0 ? void 0 : event.currentTarget) {
+                _setAnchorEl(event.currentTarget);
+            }
+            else if (element) {
+                _setAnchorEl(element);
+            }
+        }
+    };
+    const close = (eventOrAnchorEl) => {
+        const event = eventOrAnchorEl instanceof Element ? undefined : eventOrAnchorEl;
+        if ((event === null || event === void 0 ? void 0 : event.type) === 'touchstart') {
+            return;
+        }
+        childHandle === null || childHandle === void 0 ? void 0 : childHandle.close();
+        parentPopupState === null || parentPopupState === void 0 ? void 0 : parentPopupState.setChildHandle(undefined);
+        setIsOpen(false);
+        setHovered(false);
+        setFocused(false);
+    };
+    const setOpen = (nextOpen, eventOrAnchorEl) => {
+        if (nextOpen) {
+            open(eventOrAnchorEl);
+        }
+        else {
+            close(eventOrAnchorEl);
+        }
+    };
+    return {
+        isOpen,
+        anchorEl,
+        setAnchorElUsed,
+        setAnchorEl,
+        popupId,
+        open,
+        close,
+        toggle,
+        setOpen,
+        hovered,
+        focused,
+        _openEventType: openEventType,
+        childHandle,
+        setChildHandle,
+    };
+}
+function bindTrigger(popupState) {
+    return {
+        onClick: popupState.open,
+    };
+}
+function bindToggle(popupState) {
+    return {
+        onClick: popupState.toggle,
+    };
+}
+function bindHover(popupState) {
+    const { open } = popupState;
+    return {
+        onMouseOver: open,
+    };
+}
+function bindFocus(popupState) {
+    const { open } = popupState;
+    return {
+        onFocus: open,
+    };
+}
+function bindPopover({ isOpen, anchorEl, close, popupId }) {
+    return {
+        id: popupId,
+        anchorEl,
+        anchorReference: 'anchorEl',
+        open: isOpen,
+        onClose: close,
+    };
+}
+function bindMenu({ isOpen, anchorEl, close, popupId }) {
+    return {
+        id: popupId,
+        anchorEl,
+        anchorReference: 'anchorEl',
+        open: isOpen,
+        onClose: close,
+    };
+}
+function bindPopper({ isOpen, anchorEl, popupId }) {
+    return {
+        id: popupId,
+        anchorEl,
+        open: isOpen,
+    };
+}

package/ui/index.d.ts

@@ -12,6 +12,7 @@ export { default as LoadingEllipses } from './LoadingEllipses';
 export { default as Menu } from './Menu';
 export { default as PrerenderedCanvas } from './PrerenderedCanvas';
 export { default as ResizeHandle } from './ResizeHandle';
+export { default as ExternalLink } from './ExternalLink';
 export { default as SanitizedHTML } from './SanitizedHTML';
 export { default as BaseTooltip } from './BaseTooltip';
 export * from './Menu';

package/ui/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VIEW_HEADER_HEIGHT = exports.BaseTooltip = exports.SanitizedHTML = exports.ResizeHandle = exports.PrerenderedCanvas = exports.Menu = exports.LoadingEllipses = exports.FileSelector = exports.FatalErrorDialog = exports.ErrorMessage = exports.EditableTypography = exports.Dialog = exports.CascadingMenuButton = exports.CascadingMenu = exports.AssemblySelector = exports.Logomark = exports.LogoFull = void 0;
+exports.VIEW_HEADER_HEIGHT = exports.BaseTooltip = exports.SanitizedHTML = exports.ExternalLink = exports.ResizeHandle = exports.PrerenderedCanvas = exports.Menu = exports.LoadingEllipses = exports.FileSelector = exports.FatalErrorDialog = exports.ErrorMessage = exports.EditableTypography = exports.Dialog = exports.CascadingMenuButton = exports.CascadingMenu = exports.AssemblySelector = exports.Logomark = exports.LogoFull = void 0;
 __exportStar(require("./theme"), exports);
 var Logo_1 = require("./Logo");
 Object.defineProperty(exports, "LogoFull", { enumerable: true, get: function () { return Logo_1.LogoFull; } });
@@ -46,6 +46,8 @@ var PrerenderedCanvas_1 = require("./PrerenderedCanvas");
 Object.defineProperty(exports, "PrerenderedCanvas", { enumerable: true, get: function () { return __importDefault(PrerenderedCanvas_1).default; } });
 var ResizeHandle_1 = require("./ResizeHandle");
 Object.defineProperty(exports, "ResizeHandle", { enumerable: true, get: function () { return __importDefault(ResizeHandle_1).default; } });
+var ExternalLink_1 = require("./ExternalLink");
+Object.defineProperty(exports, "ExternalLink", { enumerable: true, get: function () { return __importDefault(ExternalLink_1).default; } });
 var SanitizedHTML_1 = require("./SanitizedHTML");
 Object.defineProperty(exports, "SanitizedHTML", { enumerable: true, get: function () { return __importDefault(SanitizedHTML_1).default; } });
 var BaseTooltip_1 = require("./BaseTooltip");

package/ui/useEvent.d.ts

@@ -0,0 +1 @@
+export declare function useEvent<Fn extends (...args: any[]) => any>(handler: Fn): Fn;