@jbrowse/core 3.7.0 → 4.0.0

package/esm/ui/DraggableDialog.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import CloseIcon from '@mui/icons-material/Close';
+import { Dialog, DialogTitle, Divider, IconButton, Paper, ScopedCssBaseline, } from '@mui/material';
+import { observer } from 'mobx-react';
+import Draggable from 'react-draggable';
+const useStyles = makeStyles()(theme => ({
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+}));
+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 }) }));
+}
+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] }) }));
+});
+export default DraggableDialog;

package/esm/ui/DropDownMenu.d.ts

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

package/esm/ui/DropDownMenu.js

@@ -0,0 +1,24 @@
+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";
+const useStyles = makeStyles()(theme => ({
+    buttonRoot: {
+        '&:hover': {
+            backgroundColor: alpha(theme.palette.primary.contrastText, theme.palette.action.hoverOpacity),
+            '@media (hover: none)': {
+                backgroundColor: 'transparent',
+            },
+        },
+    },
+}));
+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, children: [menuTitle, _jsx(ArrowDropDown, {})] }));
+});
+export default DropDownMenu;

package/esm/ui/EditableTypography.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import useMeasure from '@jbrowse/core/util/useMeasure';
+import { InputBase, Typography, useTheme } from '@mui/material';
+import { makeStyles } from "../util/tss-react/index.js";
+const useStyles = makeStyles()(theme => ({
+    input: {},
+    inputBase: {},
+    typography: {
+        top: 6,
+        left: 2,
+        position: 'absolute',
+        whiteSpace: 'nowrap',
+        visibility: 'hidden',
+    },
+    inputRoot: {
+        padding: theme.spacing(0.5),
+    },
+    inputFocused: {
+        borderStyle: 'solid',
+        borderWidth: 2,
+    },
+}));
+const EditableTypography = forwardRef(function EditableTypography2(props, ref) {
+    const { value, setValue, variant, ...other } = props;
+    const [ref2, { width }] = useMeasure();
+    const [editedValue, setEditedValue] = useState();
+    const [inputNode, setInputNode] = useState(null);
+    const { classes } = useStyles(props, { props });
+    const theme = useTheme();
+    const val = editedValue === undefined ? value : editedValue;
+    return (_jsxs("div", { ...other, ref: ref, children: [_jsx("div", { style: { position: 'relative' }, children: _jsx(Typography, { ref: ref2, component: "span", variant: variant, className: classes.typography, children: val }) }), _jsx(InputBase, { inputRef: node => {
+                    setInputNode(node);
+                }, className: classes.inputBase, inputProps: {
+                    style: {
+                        width,
+                        ...(variant && variant !== 'inherit'
+                            ? theme.typography[variant]
+                            : {}),
+                    },
+                }, classes: {
+                    input: classes.input,
+                    root: classes.inputRoot,
+                    focused: classes.inputFocused,
+                }, value: val, onChange: event => {
+                    setEditedValue(event.target.value);
+                }, onKeyDown: event => {
+                    if (event.key === 'Enter') {
+                        inputNode?.blur();
+                    }
+                    else if (event.key === 'Escape') {
+                        setEditedValue(undefined);
+                        inputNode?.blur();
+                    }
+                }, onBlur: () => {
+                    setValue(editedValue || value || '');
+                    setEditedValue(undefined);
+                } })] }));
+});
+export default EditableTypography;

package/esm/ui/ErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import type { ErrorInfo } from 'react';
+import { Component } from 'react';
+interface Props {
+    children: React.ReactNode;
+    FallbackComponent: React.FC<{
+        error: unknown;
+    }>;
+}
+interface State {
+    error: unknown;
+}
+declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+}
+export { ErrorBoundary };

package/esm/ui/ErrorBoundary.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: undefined };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('ErrorBoundary caught an error:', error, errorInfo);
+        this.setState({ error });
+    }
+    render() {
+        return this.state.error ? (_jsx(this.props.FallbackComponent, { error: this.state.error })) : (this.props.children);
+    }
+}
+export { ErrorBoundary };

package/esm/ui/ErrorMessage.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from 'react';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import ReportIcon from '@mui/icons-material/Report';
+import { IconButton, Tooltip } from '@mui/material';
+import RedErrorMessageBox from "./RedErrorMessageBox.js";
+import { makeStyles } from "../util/tss-react/index.js";
+const ErrorMessageStackTraceDialog = lazy(() => import("./ErrorMessageStackTraceDialog.js"));
+const useStyles = makeStyles()(theme => ({
+    bg: {
+        background: theme.palette.divider,
+        border: '1px solid black',
+        margin: 20,
+    },
+    iconFloat: {
+        float: 'right',
+        marginLeft: 100,
+    },
+}));
+function parseError(str) {
+    let snapshotError = '';
+    const findStr = 'is not assignable';
+    const idx = str.indexOf(findStr);
+    if (idx !== -1) {
+        const trim = str.slice(0, idx + findStr.length);
+        const match = /.*at path "(.*)" snapshot `(.*)` is not assignable/m.exec(trim);
+        if (match) {
+            str = `Failed to load element at ${match[1]}...Failed element had snapshot`;
+            snapshotError = match[2];
+        }
+        const match2 = /.*snapshot `(.*)` is not assignable/.exec(trim);
+        if (match2) {
+            str = 'Failed to load element...Failed element had snapshot';
+            snapshotError = match2[1];
+        }
+    }
+    return snapshotError;
+}
+function ErrorButtons({ error, onReset, }) {
+    const { classes } = useStyles();
+    const [showStack, setShowStack] = useState(false);
+    return (_jsxs("div", { className: classes.iconFloat, children: [typeof error === 'object' && error && 'stack' in error ? (_jsx(Tooltip, { title: "Get stack trace", children: _jsx(IconButton, { onClick: () => {
+                        setShowStack(true);
+                    }, color: "primary", children: _jsx(ReportIcon, {}) }) })) : null, onReset ? (_jsx(Tooltip, { title: "Retry", children: _jsx(IconButton, { onClick: onReset, color: "primary", children: _jsx(RefreshIcon, {}) }) })) : null, showStack ? (_jsx(Suspense, { fallback: null, children: _jsx(ErrorMessageStackTraceDialog, { error: error, onClose: () => {
+                        setShowStack(false);
+                    } }) })) : null] }));
+}
+function ErrorMessage({ error, onReset, }) {
+    const { classes } = useStyles();
+    const str = `${error}`;
+    const str2 = str.indexOf('expected an instance of');
+    const str3 = str2 !== -1 ? str.slice(0, str2) : str;
+    const snapshotError = parseError(str);
+    return (_jsxs(RedErrorMessageBox, { children: [str3.slice(0, 10000), _jsx(ErrorButtons, { error: error, onReset: onReset }), snapshotError ? (_jsx("pre", { className: classes.bg, children: JSON.stringify(JSON.parse(snapshotError), null, 2) })) : null] }));
+}
+export default ErrorMessage;

package/esm/ui/ErrorMessageStackTraceContents.d.ts

@@ -0,0 +1,4 @@
+export default function ErrorMessageStackTraceContents({ text, extra, }: {
+    text: string;
+    extra?: unknown;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/ui/ErrorMessageStackTraceContents.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Typography, alpha } from '@mui/material';
+import ExternalLink from "./ExternalLink.js";
+import { makeStyles } from "../util/tss-react/index.js";
+const EMAIL = 'jbrowse2@berkeley.edu';
+const useStyles = makeStyles()(theme => ({
+    pre: {
+        background: alpha(theme.palette.error.main, 0.2),
+        border: `1px solid ${theme.palette.divider}`,
+        overflow: 'auto',
+        margin: 20,
+        maxHeight: 300,
+    },
+}));
+export default function ErrorMessageStackTraceContents({ text, extra, }) {
+    const { classes } = useStyles();
+    const extraStr = extra
+        ? `supporting data: ${JSON.stringify(extra, null, 2)}`
+        : '';
+    const displayText = [text, extraStr].filter(Boolean).join('\n');
+    const issueBody = encodeURIComponent(`I got this error from JBrowse, here is the stack trace:\n\n\`\`\`\n${text}\n\`\`\`\n${extraStr}\n`);
+    const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${issueBody}`;
+    const emailLink = `mailto:${EMAIL}?subject=JBrowse%202%20error&body=${issueBody}`;
+    return (_jsxs(_Fragment, { children: [_jsxs(Typography, { children: ["Post a new issue at", ' ', _jsx(ExternalLink, { href: githubLink, children: "GitHub" }), " or send an email to ", _jsx(ExternalLink, { href: emailLink, children: EMAIL })] }), _jsx("pre", { className: classes.pre, children: displayText })] }));
+}

package/esm/ui/ErrorMessageStackTraceDialog.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, } from '@mui/material';
+import { SourceMapConsumer } from 'source-map-js';
+import ErrorMessageStackTraceContents from "./ErrorMessageStackTraceContents.js";
+import LoadingEllipses from "./LoadingEllipses.js";
+async function myfetchtext(uri) {
+    const res = await fetch(uri);
+    if (!res.ok) {
+        throw new Error(`HTTP ${res.status} fetching ${uri}: ${await res.text()}`);
+    }
+    return res.text();
+}
+async function myfetchjson(uri) {
+    return JSON.parse(await myfetchtext(uri));
+}
+const sourceMaps = {};
+const sourceMappingUrlRe = /\/\/# sourceMappingURL=(.*)/;
+const stackLineRe = /(.*)((?:https?|file):\/\/.*):(\d+):(\d+)/;
+async function getSourceMapFromUri(uri) {
+    if (sourceMaps[uri]) {
+        return sourceMaps[uri];
+    }
+    const uriQuery = new URL(uri).search;
+    const currentScriptContent = await myfetchtext(uri);
+    const mapUri = sourceMappingUrlRe.exec(currentScriptContent)?.[1] ?? '';
+    const data = await myfetchjson(new URL(mapUri, uri).href + uriQuery);
+    const map = new SourceMapConsumer(data);
+    sourceMaps[uri] = map;
+    return map;
+}
+async function mapStackTrace(stack) {
+    const mappedStack = [];
+    for (const line of stack.split('\n')) {
+        const match = stackLineRe.exec(line);
+        if (!match) {
+            mappedStack.push(line);
+            continue;
+        }
+        const uri = match[2];
+        const consumer = await getSourceMapFromUri(uri);
+        const pos = consumer.originalPositionFor({
+            line: +match[3],
+            column: +match[4],
+        });
+        if (!pos.source || !pos.line || !pos.column) {
+            mappedStack.push(line);
+            continue;
+        }
+        mappedStack.push(`${pos.source}:${pos.line}:${pos.column + 1} (${match[1].trim()})`);
+    }
+    return mappedStack.join('\n');
+}
+const MAX_ERR_LEN = 10_000;
+function stripMessage(trace, error) {
+    return trace.startsWith('Error:') ? trace.slice(`${error}`.length) : trace;
+}
+function getStackTrace(error) {
+    return typeof error === 'object' && error !== null && 'stack' in error
+        ? `${error.stack}`
+        : '';
+}
+export default function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
+    const [mappedStackTrace, setMappedStackTrace] = useState();
+    const [secondaryError, setSecondaryError] = useState();
+    const [clicked, setClicked] = useState(false);
+    const errorText = error ? `${error}` : '';
+    const stackTrace = stripMessage(getStackTrace(error), errorText);
+    useEffect(() => {
+        ;
+        (async () => {
+            try {
+                setMappedStackTrace(await mapStackTrace(stackTrace));
+            }
+            catch (e) {
+                console.error(e);
+                setMappedStackTrace(stackTrace);
+                setSecondaryError(e);
+            }
+        })();
+    }, [stackTrace]);
+    const version = window.JBrowseSession?.version;
+    const errorBoxText = [
+        secondaryError
+            ? 'Error loading source map, showing raw stack trace below:'
+            : '',
+        errorText.length > MAX_ERR_LEN
+            ? `${errorText.slice(0, MAX_ERR_LEN)}...`
+            : errorText,
+        mappedStackTrace || 'No stack trace available',
+        version ? `JBrowse ${version}` : '',
+    ]
+        .filter(Boolean)
+        .join('\n');
+    return (_jsxs(Dialog, { open: true, onClose: onClose, maxWidth: "xl", children: [_jsxs(DialogTitle, { children: ["Stack trace", _jsx(IconButton, { onClick: onClose, sx: {
+                            position: 'absolute',
+                            right: 8,
+                            top: 8,
+                        }, children: _jsx(CloseIcon, {}) })] }), _jsx(DialogContent, { children: mappedStackTrace === undefined ? (_jsx(LoadingEllipses, { variant: "h6" })) : (_jsx(ErrorMessageStackTraceContents, { text: errorBoxText, extra: extra })) }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: async () => {
+                            const { default: copy } = await import('copy-to-clipboard');
+                            copy(errorBoxText);
+                            setClicked(true);
+                            setTimeout(() => {
+                                setClicked(false);
+                            }, 1000);
+                        }, children: clicked ? 'Copied!' : 'Copy stack trace to clipboard' }), _jsx(Button, { variant: "contained", color: "primary", onClick: onClose, children: "Close" })] })] }));
+}

package/esm/ui/ExternalLink.js

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

package/esm/ui/FactoryResetDialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogActions, DialogContent, DialogContentText, } from '@mui/material';
+import Dialog from "./Dialog.js";
+export default function FactoryResetDialog({ onClose, open, onFactoryReset, }) {
+    function handleDialogClose(action) {
+        if (action === 'reset') {
+            onFactoryReset();
+        }
+        onClose();
+    }
+    return (_jsxs(Dialog, { title: "Reset", onClose: () => {
+            handleDialogClose();
+        }, open: open, children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: "Are you sure you want to reset? This will restore the default configuration." }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
+                            handleDialogClose();
+                        }, color: "primary", children: "Cancel" }), _jsx(Button, { onClick: () => {
+                            handleDialogClose('reset');
+                        }, color: "primary", variant: "contained", children: "OK" })] })] }));
+}

package/esm/ui/FatalErrorDialog.js

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

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

@@ -0,0 +1,11 @@
+import type { AbstractRootModel, FileLocation } from '../../util/types/index.ts';
+declare const FileSelector: ({ inline, location, name, description, rootModel, setLocation, }: {
+    location?: FileLocation;
+    name?: string;
+    description?: string;
+    inline?: boolean;
+    rootModel?: AbstractRootModel;
+    setLocation: (param: FileLocation) => void;
+    setName?: (str: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FileSelector;

package/esm/ui/FileSelector/FileSelector.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Box, FormGroup, FormHelperText, InputLabel } from '@mui/material';
+import { observer } from 'mobx-react';
+import LocationInput from "./LocationInput.js";
+import SourceTypeSelector from "./SourceTypeSelector.js";
+import useInternetAccounts from "./useInternetAccounts.js";
+import { notEmpty } from "../../util/index.js";
+import { isUriLocation } from "../../util/types/index.js";
+function getInitialToggleValue(location) {
+    if (location &&
+        'internetAccountId' in location &&
+        location.internetAccountId) {
+        return location.internetAccountId;
+    }
+    return !location || isUriLocation(location) ? 'url' : 'file';
+}
+const FileSelector = observer(function FileSelector({ inline, location, name, description, rootModel, setLocation, }) {
+    const [toggleButtonValue, setToggleButtonValue] = useState(() => getInitialToggleValue(location));
+    const { accountMap, shownAccountIds, hiddenAccountIds, recentlyUsed, setRecentlyUsed, } = useInternetAccounts(rootModel);
+    const selectedAccount = accountMap[toggleButtonValue];
+    const setLocationWithAccount = useCallback((loc) => {
+        setLocation({
+            ...loc,
+            ...(selectedAccount && isUriLocation(loc)
+                ? { internetAccountId: selectedAccount.internetAccountId }
+                : {}),
+        });
+    }, [setLocation, selectedAccount]);
+    useEffect(() => {
+        if (selectedAccount &&
+            isUriLocation(location) &&
+            location.internetAccountId !== selectedAccount.internetAccountId) {
+            setLocationWithAccount(location);
+        }
+    }, [location, selectedAccount, setLocationWithAccount]);
+    const selectSourceType = useCallback((newValue) => {
+        setRecentlyUsed([
+            ...new Set([newValue, ...recentlyUsed].filter(notEmpty)),
+        ]);
+        if (newValue) {
+            setToggleButtonValue(newValue);
+        }
+        if (isUriLocation(location)) {
+            setLocationWithAccount(location);
+        }
+    }, [location, recentlyUsed, setRecentlyUsed, setLocationWithAccount]);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", children: _jsx(InputLabel, { shrink: true, children: name }) }), _jsx(FormGroup, { children: _jsxs(Box, { display: "flex", flexDirection: inline ? 'row' : 'column', gap: 0.5, children: [_jsx(SourceTypeSelector, { value: toggleButtonValue, shownAccountIds: shownAccountIds, hiddenAccountIds: hiddenAccountIds, accountMap: accountMap, onChange: (_event, newValue) => {
+                                selectSourceType(newValue);
+                            }, onHiddenAccountSelect: selectSourceType }), _jsx(LocationInput, { toggleButtonValue: toggleButtonValue, selectedAccount: selectedAccount, location: location, inline: inline, setLocation: setLocationWithAccount })] }) }), _jsx(FormHelperText, { children: description })] }));
+});
+export default FileSelector;

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

@@ -0,0 +1,6 @@
+import type { FileLocation } from '../../util/types/index.ts';
+declare function LocalFileChooser({ location, setLocation, }: {
+    location?: FileLocation;
+    setLocation: (arg: FileLocation) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export default LocalFileChooser;

package/esm/ui/FileSelector/LocalFileChooser.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, FormControl, Typography } from '@mui/material';
+import { isElectron } from "../../util/index.js";
+import { getBlob, storeBlobLocation } from "../../util/tracks.js";
+import { makeStyles } from "../../util/tss-react/index.js";
+function isLocalPathLocation(loc) {
+    return 'localPath' in loc;
+}
+function isBlobLocation(loc) {
+    return 'blobId' in loc;
+}
+const useStyles = makeStyles()(theme => ({
+    filename: {
+        marginLeft: theme.spacing(1),
+    },
+}));
+function LocalFileChooser({ location, setLocation, }) {
+    const { classes } = useStyles();
+    const filename = location &&
+        ((isBlobLocation(location) && location.name) ||
+            (isLocalPathLocation(location) && location.localPath));
+    const needToReload = location && isBlobLocation(location) && !getBlob(location.blobId);
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Box, { children: _jsx(FormControl, { fullWidth: true, children: _jsxs(Button, { variant: "outlined", component: "label", children: ["Choose File", _jsx("input", { type: "file", hidden: true, onChange: ({ target }) => {
+                                    const file = target.files?.[0];
+                                    if (file) {
+                                        if (isElectron) {
+                                            const { webUtils } = window.require('electron');
+                                            setLocation({
+                                                localPath: webUtils.getPathForFile(file),
+                                                locationType: 'LocalPathLocation',
+                                            });
+                                        }
+                                        else {
+                                            setLocation(storeBlobLocation({ blob: file }));
+                                        }
+                                    }
+                                } })] }) }) }), _jsxs(Box, { children: [_jsx(Typography, { component: "span", className: classes.filename, color: filename ? 'initial' : 'textSecondary', children: filename || 'No file chosen' }), needToReload ? (_jsx(Typography, { color: "error", children: "(need to reload)" })) : null] })] }));
+}
+export default LocalFileChooser;

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

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

package/esm/ui/FileSelector/LocationInput.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import LocalFileChooser from "./LocalFileChooser.js";
+import UrlChooser from "./UrlChooser.js";
+export default function LocationInput({ toggleButtonValue, selectedAccount, location, inline, setLocation, }) {
+    if (selectedAccount?.SelectorComponent) {
+        return (_jsx(selectedAccount.SelectorComponent, { setLocation: setLocation, selectedAccount: selectedAccount }));
+    }
+    if (toggleButtonValue === 'url') {
+        return (_jsx(UrlChooser, { location: location, setLocation: setLocation, label: selectedAccount?.selectorLabel, style: inline ? { margin: 0 } : undefined }));
+    }
+    if (toggleButtonValue === 'file') {
+        return _jsx(LocalFileChooser, { location: location, setLocation: setLocation });
+    }
+    return null;
+}

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

@@ -0,0 +1,9 @@
+import type { BaseInternetAccountModel } from '../../pluggableElementTypes/index.ts';
+export default function SourceTypeSelector({ value, shownAccountIds, hiddenAccountIds, accountMap, onChange, onHiddenAccountSelect, }: {
+    value: string;
+    shownAccountIds: string[];
+    hiddenAccountIds: string[];
+    accountMap: Record<string, BaseInternetAccountModel>;
+    onChange: (event: React.MouseEvent, newValue: string | null) => void;
+    onHiddenAccountSelect: (id: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/ui/FileSelector/SourceTypeSelector.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { Menu, MenuItem, ToggleButton, ToggleButtonGroup, Tooltip, } from '@mui/material';
+function shorten(str, len) {
+    return str.length > len ? `${str.slice(0, len)}…` : str;
+}
+function ToggleButtonWithTooltip(props) {
+    const { title, children, ...other } = props;
+    return (_jsx(Tooltip, { title: title || '', children: _jsx(ToggleButton, { ...other, children: children }) }));
+}
+const isAdminMode = () => new URLSearchParams(window.location.search).get('adminKey') !== null;
+function HiddenAccountsMenu({ anchorEl, hiddenAccountIds, accountMap, onClose, onSelect, }) {
+    if (!anchorEl) {
+        return null;
+    }
+    return (_jsx(Menu, { open: true, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, onClose: onClose, children: hiddenAccountIds.map(id => (_jsx(MenuItem, { value: id, onClick: () => {
+                onSelect(id);
+            }, children: accountMap[id].name }, id))) }));
+}
+export default function SourceTypeSelector({ value, shownAccountIds, hiddenAccountIds, accountMap, onChange, onHiddenAccountSelect, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    return (_jsxs(_Fragment, { children: [_jsxs(ToggleButtonGroup, { value: value, exclusive: true, size: "small", onChange: onChange, "aria-label": "file, url, or account picker", children: [isAdminMode() ? null : (_jsx(ToggleButton, { size: "small", value: "file", "aria-label": "local file", children: "File" })), _jsx(ToggleButton, { size: "small", value: "url", "aria-label": "url", children: "URL" }), shownAccountIds.map(id => {
+                        const account = accountMap[id];
+                        const { toggleContents, name: accountName } = account;
+                        const label = typeof toggleContents === 'string'
+                            ? shorten(toggleContents, 5)
+                            : toggleContents || shorten(accountName, 5);
+                        return (_jsx(ToggleButtonWithTooltip, { value: id, title: accountName, children: label }, id));
+                    }), hiddenAccountIds.length > 0 ? (_jsxs(ToggleButton, { value: "more", onClick: event => {
+                            setAnchorEl(event.target);
+                        }, selected: false, children: ["More", _jsx(ArrowDropDownIcon, {})] })) : null] }), _jsx(HiddenAccountsMenu, { anchorEl: anchorEl, hiddenAccountIds: hiddenAccountIds, accountMap: accountMap, onClose: () => {
+                    setAnchorEl(null);
+                }, onSelect: id => {
+                    onHiddenAccountSelect(id);
+                    setAnchorEl(null);
+                } })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { FileLocation } from '../../util/types/index.ts';
+declare const UrlChooser: ({ location, label, style, setLocation, }: {
+    location?: FileLocation;
+    label?: string;
+    style?: Record<string, unknown>;
+    setLocation: (arg: FileLocation) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default UrlChooser;

package/esm/ui/FileSelector/UrlChooser.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { isUriLocation } from "../../util/types/index.js";
+const UrlChooser = observer(function UrlChooser({ location, label, style, setLocation, }) {
+    return (_jsx(TextField, { variant: "outlined", fullWidth: true, defaultValue: location && isUriLocation(location) ? location.uri : '', label: label || 'Enter URL', style: style, onChange: event => {
+            setLocation({
+                uri: event.target.value.trim(),
+                locationType: 'UriLocation',
+            });
+        }, slotProps: {
+            htmlInput: {
+                'data-testid': 'urlInput',
+            },
+        } }));
+});
+export default UrlChooser;

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

@@ -0,0 +1 @@
+export { default } from './FileSelector.tsx';

package/esm/ui/FileSelector/index.js

@@ -0,0 +1 @@
+export { default } from "./FileSelector.js";