@jbrowse/core 2.16.1 → 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-${[
@@ -57,9 +54,12 @@ const AssemblySelector = (0, mobx_react_1.observer)(function ({ session, onChang
         }
     }, [selection, onChange, selected]);
     const error = assemblyNames.length ? '' : 'No configured assemblies';
-    return (react_1.default.createElement(material_1.TextField, { select: true, label: "Assembly", variant: "outlined", helperText: error || helperText, value: selection || '', inputProps: { 'data-testid': 'assembly-selector' }, onChange: event => {
+    return (react_1.default.createElement(material_1.TextField, { select: true, label: "Assembly", variant: "outlined", helperText: error || helperText, value: selection || '', onChange: event => {
             setLastSelected(event.target.value);
-        }, error: !!error, InputProps: InputProps, disabled: !!error, className: classes.importFormEntry, ...TextFieldProps }, assemblyNames.map(name => {
+        }, error: !!error, disabled: !!error, className: classes.importFormEntry, ...TextFieldProps, slotProps: {
+            input: InputProps,
+            htmlInput: { 'data-testid': 'assembly-selector' },
+        } }, assemblyNames.map(name => {
         const assembly = assemblyManager.get(name);
         const displayName = assembly ? (0, configuration_1.getConf)(assembly, 'displayName') : '';
         return (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, displayName || name));

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,12 +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", inputProps: { 'data-testid': 'urlInput' }, 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',
+            },
         } }));
 });
 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;