@jbrowse/core 2.17.0 → 2.18.0

package/ui/AppLogo.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AnyConfigurationModel } from '../configuration';
+import type { AnyConfigurationModel } from '../configuration';
 declare const Logo: ({ session, }: {
     session: {
         configuration: AnyConfigurationModel;

package/ui/AppLogo.js

@@ -5,9 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
-// locals
 const configuration_1 = require("../configuration");
-// ui elements
 const Logo_1 = require("./Logo");
 const Logo = (0, mobx_react_1.observer)(function ({ session, }) {
     const { configuration } = session;

package/ui/AssemblySelector.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { InputProps as IIP, TextFieldProps as TFP } from '@mui/material';
-import { AbstractSessionModel } from '../util';
+import type { AbstractSessionModel } from '../util';
+import type { InputProps as IIP, TextFieldProps as TFP } from '@mui/material';
 declare const AssemblySelector: ({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText, }: {
     session: AbstractSessionModel;
     helperText?: string;

package/ui/AssemblySelector.js

@@ -27,7 +27,6 @@ const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-// locals
 const configuration_1 = require("../configuration");
 const util_1 = require("../util");
 const useStyles = (0, mui_1.makeStyles)()({
@@ -38,8 +37,6 @@ const useStyles = (0, mui_1.makeStyles)()({
 const AssemblySelector = (0, mobx_react_1.observer)(function ({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText = 'Select assembly to view', }) {
     const { classes } = useStyles();
     const { assemblyNames, assemblyManager } = session;
-    // constructs a localstorage key based on host/path/config to help
-    // remember. non-config assists usage with e.g. embedded apps
     const config = new URLSearchParams(window.location.search).get('config');
     const [lastSelected, setLastSelected] = typeof jest === 'undefined' && localStorageKey
         ? (0, util_1.useLocalStorage)(`lastAssembly-${[

package/ui/BaseTooltip.js

@@ -5,15 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = BaseTooltip;
 const react_1 = __importDefault(require("react"));
-const mui_1 = require("tss-react/mui");
-const material_1 = require("@mui/material");
 const react_2 = require("@floating-ui/react");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
 function round(value) {
     return Math.round(value * 1e5) / 1e5;
 }
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    // these styles come from
-    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
     tooltip: {
         position: 'absolute',
         pointerEvents: 'none',
@@ -43,8 +41,6 @@ function BaseTooltip({ clientPoint: clientPointCoords, children, placement = 'ri
         react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
                 ...floatingStyles,
                 zIndex: 100000,
-                // workaround for tooltips flashing at top left corner of screen
-                // when first appearing
                 visibility: floatingStyles.transform === 'translate(0px, 0px)'
                     ? 'hidden'
                     : undefined,

package/ui/CascadingMenu.d.ts

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

package/ui/CascadingMenu.js

@@ -26,13 +26,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-unsafe-function-type */
 const react_1 = __importStar(require("react"));
+const ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
 const material_1 = require("@mui/material");
-const Menu_1 = require("./Menu");
-const hooks_1 = require("material-ui-popup-state/hooks");
 const HoverMenu_1 = __importDefault(require("material-ui-popup-state/HoverMenu"));
-const ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
+const hooks_1 = require("material-ui-popup-state/hooks");
+const Menu_1 = require("./Menu");
 const CascadingContext = react_1.default.createContext({
     parentPopupState: null,
     rootPopupState: null,

package/ui/CascadingMenuButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuItem } from '@jbrowse/core/ui';
+import type { MenuItem } from '@jbrowse/core/ui';
 declare const CascadingMenuButton: ({ children, menuItems, closeAfterItemClick, stopPropagation, setOpen, onClick: onClickExtra, ...rest }: {
     children?: React.ReactElement;
     menuItems: MenuItem[];

package/ui/CascadingMenuButton.js

@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const CascadingMenu_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenu"));
 const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
 const hooks_1 = require("material-ui-popup-state/hooks");
+const mobx_react_1 = require("mobx-react");
 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',

package/ui/ColorPicker.js

@@ -30,12 +30,8 @@ const react_1 = __importStar(require("react"));
 const colord_1 = require("@jbrowse/core/util/colord");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-// locals
 const paletteColors = __importStar(require("./colors"));
 const util_1 = require("../util");
-// 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 react_colorful_1 = require("./react-colorful");
 const useStyles = (0, mui_1.makeStyles)()({
     picker: { position: 'relative' },
@@ -93,9 +89,7 @@ function ColorPicker({ onChange, color, }) {
                     const pal = event.target.value;
                     setVal(pal);
                 } }, palettes.map(p => (react_1.default.createElement(material_1.MenuItem, { value: p, key: p }, p)))),
-            react_1.default.createElement("div", { className: classes.swatches }, presetColors.map((presetColor, idx) => (react_1.default.createElement("button", { type: "button", 
-                /* biome-ignore lint/suspicious/noArrayIndexKey: */
-                key: `${presetColor}-${idx}`, className: classes.swatch, style: { background: presetColor }, onClick: () => {
+            react_1.default.createElement("div", { className: classes.swatches }, presetColors.map((presetColor, idx) => (react_1.default.createElement("button", { type: "button", key: `${presetColor}-${idx}`, className: classes.swatch, style: { background: presetColor }, onClick: () => {
                     handleChange(presetColor);
                 } })))),
             react_1.default.createElement(material_1.TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => {

package/ui/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DialogProps } from '@mui/material';
+import type { DialogProps } from '@mui/material';
 interface Props extends DialogProps {
     header?: React.ReactNode;
 }

package/ui/Dialog.js

@@ -4,13 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const ErrorBoundary_1 = require("@jbrowse/core/ui/ErrorBoundary");
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const ErrorBoundary_1 = require("@jbrowse/core/ui/ErrorBoundary");
-// icons
-const Close_1 = __importDefault(require("@mui/icons-material/Close"));
-// locals
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const SanitizedHTML_1 = __importDefault(require("./SanitizedHTML"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
@@ -34,7 +32,6 @@ const Dialog = (0, mobx_react_1.observer)(function (props) {
             react_1.default.isValidElement(header) ? (header) : (react_1.default.createElement(material_1.DialogTitle, null,
                 react_1.default.createElement(SanitizedHTML_1.default, { html: title || '' }),
                 onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
-                        // @ts-expect-error
                         onClose();
                     } },
                     react_1.default.createElement(Close_1.default, null))) : null)),
@@ -45,7 +42,6 @@ const Dialog = (0, mobx_react_1.observer)(function (props) {
                             MuiInputBase: {
                                 styleOverrides: {
                                     input: {
-                                        // xref https://github.com/GMOD/jbrowse-components/pull/3666
                                         boxSizing: 'content-box!important',
                                     },
                                 },

package/ui/DropDownMenu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuItem } from './Menu';
+import type { MenuItem } from './Menu';
 declare const DropDownMenu: ({ menuTitle, session, menuItems, }: {
     menuTitle: string;
     session: any;

package/ui/DropDownMenu.js

@@ -27,10 +27,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
 const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
-const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
+const mui_1 = require("tss-react/mui");
 const Menu_1 = __importDefault(require("./Menu"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     buttonRoot: {

package/ui/EditableTypography.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TypographyProps } from '@mui/material';
+import type { TypographyProps } from '@mui/material';
 type Variant = TypographyProps['variant'];
 type EditableTypographyClassKey = 'input' | 'inputBase' | 'inputRoot' | 'inputFocused';
 interface Props {

package/ui/EditableTypography.js

@@ -27,9 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const useMeasure_1 = __importDefault(require("@jbrowse/core/util/useMeasure"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-const useMeasure_1 = __importDefault(require("@jbrowse/core/util/useMeasure"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     input: {},
     inputBase: {},
@@ -48,7 +48,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         borderWidth: 2,
     },
 }));
-// using forwardRef so that MUI Tooltip can wrap this component
 const EditableTypography = react_1.default.forwardRef(function EditableTypography2(props, ref) {
     const { value, setValue, variant, ...other } = props;
     const [ref2, { width }] = (0, useMeasure_1.default)();
@@ -61,9 +60,6 @@ const EditableTypography = react_1.default.forwardRef(function EditableTypograph
             setBlur(false);
         }
     }, [blur, inputNode]);
-    // possibly tss-react does not understand the passing of props to
-    // useStyles, but it appears to work
-    // @ts-expect-error
     const { classes } = useStyles(props, { props });
     const theme = (0, material_1.useTheme)();
     const val = editedValue === undefined ? value : editedValue;

package/ui/ErrorBoundary.d.ts

@@ -1,4 +1,5 @@
-import React, { Component, ErrorInfo } from 'react';
+import type { ErrorInfo } from 'react';
+import React, { Component } from 'react';
 interface Props {
     children: React.ReactNode;
     FallbackComponent: React.FC<{

package/ui/ErrorMessage.js

@@ -27,14 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
+const Report_1 = __importDefault(require("@mui/icons-material/Report"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-// locals
 const RedErrorMessageBox_1 = __importDefault(require("./RedErrorMessageBox"));
-// icons
-const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
-const Report_1 = __importDefault(require("@mui/icons-material/Report"));
-// lazies
 const ErrorMessageStackTraceDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ErrorMessageStackTraceDialog'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     bg: {
@@ -53,15 +50,11 @@ function parseError(str) {
     const idx = str.indexOf(findStr);
     if (idx !== -1) {
         const trim = str.slice(0, idx + findStr.length);
-        // best effort to make a better error message than the default
-        // mobx-state-tree
-        // case 1. element has a path
         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];
         }
-        // case 2. element has no path
         const match2 = /.*snapshot `(.*)` is not assignable/.exec(trim);
         if (match2) {
             str = 'Failed to load element...Failed element had snapshot';

package/ui/ErrorMessageStackTraceDialog.js

@@ -29,10 +29,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ErrorMessageStackTraceDialog;
 const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-const source_map_js_1 = require("source-map-js");
 const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
-// locals
+const source_map_js_1 = require("source-map-js");
+const mui_1 = require("tss-react/mui");
 const Dialog_1 = __importDefault(require("./Dialog"));
 const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
 function Link2({ href, children, }) {
@@ -53,8 +52,6 @@ async function myfetchtext(uri) {
     const res = await myfetch(uri);
     return res.text();
 }
-// produce a source-map resolved stack trace
-// reference code https://stackoverflow.com/a/77158517/2129219
 const sourceMaps = {};
 async function getSourceMapFromUri(uri) {
     var _a;
@@ -97,11 +94,8 @@ async function mapStackTrace(stack) {
     return mappedStack.join('\n');
 }
 const MAX_ERR_LEN = 10000;
-// Chrome has the error message in the stacktrace, firefox doesn't
 function stripMessage(trace, error) {
     if (trace.startsWith('Error:')) {
-        // remove the error message, which can be very long due to mobx-state-tree
-        // stuff, to get just the stack trace
         const err = `${error}`;
         return trace.slice(err.length);
     }
@@ -151,7 +145,6 @@ function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
     const errorText = error ? `${error}` : '';
     const stackTrace = stripMessage(stackTracePreProcessed, errorText);
     (0, react_1.useEffect)(() => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         ;
         (async () => {
             try {
@@ -173,7 +166,6 @@ function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
             ? `${errorText.slice(0, MAX_ERR_LEN)}...`
             : errorText,
         mappedStackTrace || 'No stack trace available',
-        // @ts-expect-error add version info at bottom if we are in jbrowse-web
         window.JBrowseSession ? `JBrowse ${window.JBrowseSession.version}` : '',
     ]
         .filter(f => !!f)

package/ui/FactoryResetDialog.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = FactoryResetDialog;
 const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
 const Dialog_1 = __importDefault(require("@jbrowse/core/ui/Dialog"));
+const material_1 = require("@mui/material");
 function FactoryResetDialog({ onClose, open, onFactoryReset, }) {
     function handleDialogClose(action) {
         if (action === 'reset') {

package/ui/FatalErrorDialog.js

@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = FatalErrorDialog;
 const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
-const FactoryResetDialog_1 = __importDefault(require("./FactoryResetDialog"));
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
+const FactoryResetDialog_1 = __importDefault(require("./FactoryResetDialog"));
 const ResetComponent = ({ onFactoryReset, resetButtonText, }) => {
     const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/ui/FileSelector/FileSelector.d.ts

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

package/ui/FileSelector/FileSelector.js

@@ -27,15 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const mobx_react_1 = require("mobx-react");
+const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
 const material_1 = require("@mui/material");
-// locals
-const types_1 = require("../../util/types");
+const mobx_react_1 = require("mobx-react");
 const LocalFileChooser_1 = __importDefault(require("./LocalFileChooser"));
 const UrlChooser_1 = __importDefault(require("./UrlChooser"));
 const util_1 = require("../../util");
-// icons
-const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
+const types_1 = require("../../util/types");
 const NUM_SHOWN = 2;
 function ToggleButtonWithTooltip(props) {
     const { title, children, ...other } = props;
@@ -48,8 +46,19 @@ function shorten(str, len) {
     }
     return str;
 }
+function Inline({ children }) {
+    return react_1.default.createElement("div", { style: { display: 'flex', gap: 4 } }, children);
+}
+function Box2({ children }) {
+    return (react_1.default.createElement(material_1.Box, { display: "flex", flexDirection: "row" },
+        react_1.default.createElement(material_1.Box, null, children)));
+}
+function Input(props) {
+    const { setLocation, inline, toggleButtonValue, selectedAccount } = props;
+    return (react_1.default.createElement(react_1.default.Fragment, null, (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.SelectorComponent) ? (react_1.default.createElement(selectedAccount.SelectorComponent, { ...props, setLocation: setLocation })) : toggleButtonValue === 'url' ? (react_1.default.createElement(UrlChooser_1.default, { ...props, setLocation: setLocation, label: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.selectorLabel, style: inline ? { margin: 0 } : undefined })) : toggleButtonValue === 'file' ? (react_1.default.createElement(LocalFileChooser_1.default, { ...props })) : null));
+}
 const FileSelector = (0, mobx_react_1.observer)(function (props) {
-    const { location, name, description, rootModel, setLocation } = props;
+    const { inline, location, name, description, rootModel, setLocation } = props;
     const fileOrUrl = !location || (0, types_1.isUriLocation)(location) ? 'url' : 'file';
     const [toggleButtonValue, setToggleButtonValue] = (0, react_1.useState)(location && 'internetAccountId' in location && location.internetAccountId
         ? location.internetAccountId
@@ -74,27 +83,19 @@ const FileSelector = (0, mobx_react_1.observer)(function (props) {
         });
     }, [setLocation, selectedAccount]);
     (0, react_1.useEffect)(() => {
-        // if you swap account selection after inputting url
         if (selectedAccount &&
             (0, types_1.isUriLocation)(location) &&
             location.internetAccountId !== selectedAccount.internetAccountId) {
             setLocationWithAccount(location);
         }
     }, [location, selectedAccount, setLocationWithAccount]);
-    let locationInput = (react_1.default.createElement(UrlChooser_1.default, { ...props, setLocation: setLocationWithAccount, label: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.selectorLabel }));
-    if (toggleButtonValue === 'file') {
-        locationInput = react_1.default.createElement(LocalFileChooser_1.default, { ...props });
-    }
-    if (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.SelectorComponent) {
-        const { SelectorComponent } = selectedAccount;
-        locationInput = (react_1.default.createElement(SelectorComponent, { ...props, setLocation: setLocationWithAccount }));
-    }
+    const Wrapper = inline ? Inline : Box2;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Box, { display: "flex" },
             react_1.default.createElement(material_1.InputLabel, { shrink: true }, name)),
-        react_1.default.createElement(material_1.Box, { display: "flex", flexDirection: "row" },
-            react_1.default.createElement(material_1.Box, null,
-                react_1.default.createElement(material_1.ToggleButtonGroup, { value: toggleButtonValue, exclusive: true, onChange: (_event, newState) => {
+        react_1.default.createElement(material_1.FormGroup, null,
+            react_1.default.createElement(Wrapper, null,
+                react_1.default.createElement(material_1.ToggleButtonGroup, { value: toggleButtonValue, exclusive: true, size: "small", onChange: (_event, newState) => {
                         setRecentlyUsedInternetAccounts([
                             ...new Set([newState, ...recentlyUsedInternetAccounts].filter(util_1.notEmpty)),
                         ]);
@@ -105,37 +106,36 @@ const FileSelector = (0, mobx_react_1.observer)(function (props) {
                             setLocationWithAccount(location);
                         }
                     }, "aria-label": "file, url, or account picker" },
-                    new URLSearchParams(window.location.search).get('adminKey') ? null : (react_1.default.createElement(material_1.ToggleButton, { value: "file", "aria-label": "local file" }, "File")),
-                    react_1.default.createElement(material_1.ToggleButton, { value: "url", "aria-label": "url" }, "URL"),
+                    new URLSearchParams(window.location.search).get('adminKey') ? null : (react_1.default.createElement(material_1.ToggleButton, { size: "small", value: "file", "aria-label": "local file" }, "File")),
+                    react_1.default.createElement(material_1.ToggleButton, { size: "small", value: "url", "aria-label": "url" }, "URL"),
                     shownAccounts.map(id => {
                         const { internetAccountId, name, toggleContents } = map[id];
                         return (react_1.default.createElement(ToggleButtonWithTooltip, { key: id, value: internetAccountId, title: name }, typeof toggleContents === 'string'
                             ? shorten(toggleContents, 5)
                             : toggleContents || shorten(name, 5)));
                     }),
-                    hiddenAccounts.length > 0 ? (
-                    // @ts-expect-error
-                    react_1.default.createElement(material_1.ToggleButton, { onClick: event => {
+                    hiddenAccounts.length > 0 ? (react_1.default.createElement(material_1.ToggleButton, { onClick: event => {
                             setAnchorEl(event.target);
                         }, selected: false },
                         "More",
                         react_1.default.createElement(ArrowDropDown_1.default, null))) : null),
-                react_1.default.createElement(material_1.Menu, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => {
-                        setAnchorEl(null);
-                    }, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, hiddenAccounts.map(id => {
-                    const { internetAccountId, name } = map[id];
-                    return (react_1.default.createElement(material_1.MenuItem, { key: id, value: internetAccountId, onClick: () => {
-                            setRecentlyUsedInternetAccounts([
-                                ...new Set([
-                                    internetAccountId,
-                                    ...recentlyUsedInternetAccounts,
-                                ].filter(util_1.notEmpty)),
-                            ]);
-                            setToggleButtonValue(internetAccountId);
-                            setAnchorEl(null);
-                        } }, name));
-                })))),
-        locationInput,
-        react_1.default.createElement(material_1.FormHelperText, null, description)));
+                inline ? (react_1.default.createElement(Input, { ...props, toggleButtonValue: toggleButtonValue, selectedAccount: selectedAccount, setLocation: setLocationWithAccount })) : null),
+            !inline ? (react_1.default.createElement(Input, { ...props, toggleButtonValue: toggleButtonValue, selectedAccount: selectedAccount, setLocation: setLocationWithAccount })) : null),
+        react_1.default.createElement(material_1.FormHelperText, null, description),
+        anchorEl ? (react_1.default.createElement(material_1.Menu, { open: true, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, onClose: () => {
+                setAnchorEl(null);
+            } }, hiddenAccounts.map(id => {
+            const { internetAccountId, name } = map[id];
+            return (react_1.default.createElement(material_1.MenuItem, { key: id, value: internetAccountId, onClick: () => {
+                    setRecentlyUsedInternetAccounts([
+                        ...new Set([
+                            internetAccountId,
+                            ...recentlyUsedInternetAccounts,
+                        ].filter(util_1.notEmpty)),
+                    ]);
+                    setToggleButtonValue(internetAccountId);
+                    setAnchorEl(null);
+                } }, name));
+        }))) : null));
 });
 exports.default = FileSelector;

package/ui/FileSelector/LocalFileChooser.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FileLocation } from '../../util/types';
+import type { FileLocation } from '../../util/types';
 declare function LocalFileChooser({ location, setLocation, }: {
     location?: FileLocation;
     setLocation: (arg: FileLocation) => void;

package/ui/FileSelector/LocalFileChooser.js

@@ -42,7 +42,6 @@ function LocalFileChooser({ location, setLocation, }) {
                                     });
                                 }
                                 else {
-                                    // @ts-expect-error
                                     setLocation((0, tracks_1.storeBlobLocation)({ blob: file }));
                                 }
                             }

package/ui/FileSelector/UrlChooser.d.ts

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

package/ui/FileSelector/UrlChooser.js

@@ -7,14 +7,16 @@ const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const types_1 = require("../../util/types");
-const UrlChooser = (0, mobx_react_1.observer)(function ({ location, setLocation, label, }) {
-    return (react_1.default.createElement(material_1.TextField, { fullWidth: true, variant: "outlined", defaultValue: location && (0, types_1.isUriLocation)(location) ? location.uri : '', label: label || 'Enter URL', onChange: event => {
+const UrlChooser = (0, mobx_react_1.observer)(function ({ location, label, style, setLocation, }) {
+    return (react_1.default.createElement(material_1.TextField, { variant: "outlined", fullWidth: true, defaultValue: location && (0, types_1.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' },
+            htmlInput: {
+                'data-testid': 'urlInput',
+            },
         } }));
 });
 exports.default = UrlChooser;

package/ui/Icons.d.ts

@@ -1,5 +1,5 @@
-import { SvgIconProps } from '@mui/material/SvgIcon';
 import React from 'react';
+import type { SvgIconProps } from '@mui/material/SvgIcon';
 export declare function ContentCopy(props: SvgIconProps): React.JSX.Element;
 export declare function Indexing(props: SvgIconProps): React.JSX.Element;
 export declare function ContentCut(props: SvgIconProps): React.JSX.Element;

package/ui/Icons.js

@@ -12,14 +12,12 @@ exports.SaveAs = SaveAs;
 exports.Save = Save;
 exports.DNA = DNA;
 exports.Cable = Cable;
-const SvgIcon_1 = __importDefault(require("@mui/material/SvgIcon"));
 const react_1 = __importDefault(require("react"));
-// Icons below come from https://material.io/resources/icons/?icon=line_style&style=baseline
+const SvgIcon_1 = __importDefault(require("@mui/material/SvgIcon"));
 function ContentCopy(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("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" })));
 }
-// https://materialdesignicons.com/ text-search icon
 function Indexing(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("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" })));
@@ -32,22 +30,18 @@ function ContentPaste(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("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" })));
 }
-//  format-list-checkbox from https://materialdesignicons.com/
 function TrackSelector(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("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" })));
 }
-//  content-save-edit from https://materialdesignicons.com/
 function SaveAs(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("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" })));
 }
-//  content-save from https://materialdesignicons.com/
 function Save(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("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" })));
 }
-//  dna from https://materialdesignicons.com/
 function DNA(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("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/LoadingEllipses.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TypographyProps } from '@mui/material';
+import type { TypographyProps } from '@mui/material';
 interface Props extends TypographyProps {
     message?: string;
 }