@jbrowse/plugin-config 2.17.0 → 3.0.0

package/esm/ConfigurationEditorWidget/components/CallbackEditor.js

@@ -1,14 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { Tooltip, IconButton, TextField } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { useDebounce } from '@jbrowse/core/util';
 import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
-import { getEnv } from 'mobx-state-tree';
+import HelpIcon from '@mui/icons-material/Help';
+import { IconButton, TextField, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
+import { getEnv } from 'mobx-state-tree';
 import { makeStyles } from 'tss-react/mui';
-// icons
-import HelpIcon from '@mui/icons-material/Help';
-// Optimize by using system default fonts:
-// https://css-tricks.com/snippets/css/font-stacks/
 const fontFamily = 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace';
 const useStyles = makeStyles()(theme => ({
     callbackEditor: {
@@ -52,32 +50,19 @@ const CallbackEditor = observer(function ({ slot, }) {
             setCodeError(e);
         }
     }, [debouncedCode, slot]);
-    // if default value is a callback, will have to remove jexl:
-    // do this last
-    return (React.createElement(React.Fragment, null,
-        error ? React.createElement("p", { className: classes.error }, `${error}`) : null,
-        React.createElement("div", { className: classes.callbackContainer },
-            React.createElement(TextField, { multiline: true, className: classes.callbackEditor, value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code, onChange: event => {
-                    setCode(event.target.value);
-                }, style: { background: error ? '#fdd' : undefined }, slotProps: {
-                    input: {
-                        classes: {
-                            input: classes.textAreaFont,
-                        },
-                    },
-                } }),
-            React.createElement("p", null, slot.description),
-            React.createElement(Tooltip, { title: React.createElement("div", null,
-                    "Callbacks are written in Jexl format. Click to learn more.",
-                    React.createElement("br", null),
-                    " Names of available context items: ",
-                    slot.contextVariable), arrow: true },
-                React.createElement(IconButton, { color: "primary", onClick: () => {
-                        const newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
-                        if (newWindow) {
-                            newWindow.opener = null;
-                        }
-                    } },
-                    React.createElement(HelpIcon, null))))));
+    return (_jsxs(_Fragment, { children: [error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsxs("div", { className: classes.callbackContainer, children: [_jsx(TextField, { multiline: true, className: classes.callbackEditor, value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code, onChange: event => {
+                            setCode(event.target.value);
+                        }, style: { background: error ? '#fdd' : undefined }, slotProps: {
+                            input: {
+                                classes: {
+                                    input: classes.textAreaFont,
+                                },
+                            },
+                        } }), _jsx("p", { children: slot.description }), _jsx(Tooltip, { title: _jsxs("div", { children: ["Callbacks are written in Jexl format. Click to learn more.", _jsx("br", {}), " Names of available context items: ", slot.contextVariable] }), arrow: true, children: _jsx(IconButton, { color: "primary", onClick: () => {
+                                const newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
+                                if (newWindow) {
+                                    newWindow.opener = null;
+                                }
+                            }, children: _jsx(HelpIcon, {}) }) })] })] }));
 });
 export default CallbackEditor;

package/esm/ConfigurationEditorWidget/components/ColorEditor.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export declare const ColorSlot: (props: {
     value: string;
     label?: string;
@@ -7,7 +6,7 @@ export declare const ColorSlot: (props: {
         fullWidth: boolean;
     };
     onChange: (arg: string) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 declare const ColorEditor: (props: {
     slot: {
         name: string;
@@ -15,5 +14,5 @@ declare const ColorEditor: (props: {
         description: string;
         set: (arg: string) => void;
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ColorEditor;

package/esm/ConfigurationEditorWidget/components/ColorEditor.js

@@ -1,25 +1,22 @@
-import React, { useState } from 'react';
-import { observer } from 'mobx-react';
-import { TextField } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useState } from 'react';
 import ColorPicker from '@jbrowse/core/ui/ColorPicker';
+import { TextField } from '@mui/material';
+import { observer } from 'mobx-react';
 export const ColorSlot = (props) => {
     const { value = '#000', label = '', TextFieldProps = {}, onChange } = props;
     const [displayed, setDisplayed] = useState(false);
-    return (React.createElement("div", { style: { display: 'flex' } },
-        React.createElement(TextField, { value: value, label: label, onClick: () => {
-                setDisplayed(!displayed);
-            }, onChange: event => {
-                onChange(event.target.value);
-            }, ...TextFieldProps }),
-        React.createElement("div", { style: { marginTop: 10 } },
-            React.createElement(React.Suspense, { fallback: null },
-                React.createElement(ColorPicker, { color: value, onChange: event => {
-                        onChange(event);
-                    } })))));
+    return (_jsxs("div", { style: { display: 'flex' }, children: [_jsx(TextField, { value: value, label: label, onClick: () => {
+                    setDisplayed(!displayed);
+                }, onChange: event => {
+                    onChange(event.target.value);
+                }, ...TextFieldProps }), _jsx("div", { style: { marginTop: 10 }, children: _jsx(Suspense, { fallback: null, children: _jsx(ColorPicker, { color: value, onChange: event => {
+                            onChange(event);
+                        } }) }) })] }));
 };
 const ColorEditor = observer(function (props) {
     const { slot } = props;
-    return (React.createElement(ColorSlot, { label: slot.name, value: slot.value, onChange: color => {
+    return (_jsx(ColorSlot, { label: slot.name, value: slot.value, onChange: color => {
             slot.set(color);
         }, TextFieldProps: {
             helperText: slot.description,

package/esm/ConfigurationEditorWidget/components/ConfigurationEditor.d.ts

@@ -1,10 +1,9 @@
-import React from 'react';
-import { AbstractSessionModel } from '@jbrowse/core/util';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { AbstractSessionModel } from '@jbrowse/core/util';
 declare const ConfigurationEditor: ({ model, }: {
     model: {
         target: AnyConfigurationModel;
     };
     session?: AbstractSessionModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ConfigurationEditor;

package/esm/ConfigurationEditorWidget/components/ConfigurationEditor.js

@@ -1,14 +1,12 @@
-import React from 'react';
-import { FormGroup, Accordion, AccordionDetails, AccordionSummary, Typography, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getTypeNamesFromExplicitlyTypedUnion, isConfigurationSchemaType, isConfigurationSlotType, readConfObject, } from '@jbrowse/core/configuration';
+import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Accordion, AccordionDetails, AccordionSummary, FormGroup, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { getMembers } from 'mobx-state-tree';
 import { singular } from 'pluralize';
-import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
-import { readConfObject, getTypeNamesFromExplicitlyTypedUnion, isConfigurationSchemaType, isConfigurationSlotType, } from '@jbrowse/core/configuration';
-// icons
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-// locals
+import { makeStyles } from 'tss-react/mui';
 import SlotEditor from './SlotEditor';
 import TypeSelector from './TypeSelector';
 const useStyles = makeStyles()(theme => ({
@@ -36,26 +34,18 @@ const Member = observer(function (props) {
                 const key = subslot.type
                     ? `${singular(slotName)} ${subslot.type}`
                     : `${singular(slotName)} ${slotIndex + 1}`;
-                return React.createElement(Member, { key: key, ...props, slot: subslot, slotName: key });
+                return _jsx(Member, { ...props, slot: subslot, slotName: key }, key);
             });
         }
-        // if this is an explicitly typed schema, make a type-selecting dropdown
-        // that can be used to change its type
         const typeNameChoices = getTypeNamesFromExplicitlyTypedUnion(slotSchema);
-        return (React.createElement(Accordion, { defaultExpanded: true, className: classes.accordion },
-            React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.icon }) },
-                React.createElement(Typography, null, [...path, slotName].join('➔'))),
-            React.createElement(AccordionDetails, { className: classes.expansionPanelDetails },
-                typeNameChoices.length ? (React.createElement(TypeSelector, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
-                        if (evt.target.value !== slot.type) {
-                            schema.setSubschema(slotName, { type: evt.target.value });
-                        }
-                    } })) : null,
-                React.createElement(FormGroup, { className: classes.noOverflow },
-                    React.createElement(Schema, { schema: slot, path: [...path, slotName] })))));
+        return (_jsxs(Accordion, { defaultExpanded: true, className: classes.accordion, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: [...path, slotName].join('➔') }) }), _jsxs(AccordionDetails, { className: classes.expansionPanelDetails, children: [typeNameChoices.length ? (_jsx(TypeSelector, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
+                                if (evt.target.value !== slot.type) {
+                                    schema.setSubschema(slotName, { type: evt.target.value });
+                                }
+                            } })) : null, _jsx(FormGroup, { className: classes.noOverflow, children: _jsx(Schema, { schema: slot, path: [...path, slotName] }) })] })] }));
     }
     else if (isConfigurationSlotType(slotSchema)) {
-        return React.createElement(SlotEditor, { key: slotName, slot: slot, slotSchema: slotSchema });
+        return _jsx(SlotEditor, { slot: slot, slotSchema: slotSchema }, slotName);
     }
     else {
         return null;
@@ -63,21 +53,13 @@ const Member = observer(function (props) {
 });
 const Schema = observer(function ({ schema, path = [], }) {
     const properties = getMembers(schema).properties;
-    return (React.createElement(React.Fragment, null, Object.entries(properties).map(([slotName, slotSchema]) => (React.createElement(Member, { key: slotName, slotName: slotName, slotSchema: slotSchema, path: path, schema: schema })))));
+    return (_jsx(_Fragment, { children: Object.entries(properties).map(([slotName, slotSchema]) => (_jsx(Member, { slotName: slotName, slotSchema: slotSchema, path: path, schema: schema }, slotName))) }));
 });
 const ConfigurationEditor = observer(function ({ model, }) {
     const { classes } = useStyles();
-    // key forces a re-render, otherwise the same field can end up being used for
-    // different tracks since only the backing model changes for example see pr
-    // #804
     const { target } = model;
     const key = readConfObject(target, 'trackId');
     const name = readConfObject(target, 'name');
-    return (React.createElement(Accordion, { key: key, defaultExpanded: true, className: classes.accordion },
-        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.icon }) },
-            React.createElement(Typography, null,
-                React.createElement(SanitizedHTML, { html: name !== null && name !== void 0 ? name : 'Configuration' }))),
-        React.createElement(AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor" },
-            React.createElement(Schema, { schema: target }))));
+    return (_jsxs(Accordion, { defaultExpanded: true, className: classes.accordion, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: _jsx(SanitizedHTML, { html: name !== null && name !== void 0 ? name : 'Configuration' }) }) }), _jsx(AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor", children: _jsx(Schema, { schema: target }) })] }, key));
 });
 export default ConfigurationEditor;

package/esm/ConfigurationEditorWidget/components/ConfigurationTextField.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { TextFieldProps } from '@mui/material';
+import type { TextFieldProps } from '@mui/material';
 export default function ConfigurationTextField(props: {
     helperText?: string;
-} & TextFieldProps): React.JSX.Element;
+} & TextFieldProps): import("react/jsx-runtime").JSX.Element;

package/esm/ConfigurationEditorWidget/components/ConfigurationTextField.js

@@ -1,11 +1,9 @@
-import React from 'react';
-import { TextField } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SanitizedHTML } from '@jbrowse/core/ui';
-// adds ability to have html in helperText. note that FormHelperTextProps is
-// div because the default is p which does not like div children
+import { TextField } from '@mui/material';
 export default function ConfigurationTextField(props) {
     const { helperText } = props;
-    return (React.createElement(TextField, { ...props, helperText: React.createElement(SanitizedHTML, { html: helperText || '' }), fullWidth: true, slotProps: {
+    return (_jsx(TextField, { ...props, helperText: _jsx(SanitizedHTML, { html: helperText || '' }), fullWidth: true, slotProps: {
             formHelperText: {
                 component: 'div',
             },

package/esm/ConfigurationEditorWidget/components/HeadingComponent.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 declare const HeadingComponent: ({ model, }: {
     model?: {
         target: {
             type: string;
         };
     };
-}) => string | React.JSX.Element;
+}) => string | import("react/jsx-runtime").JSX.Element;
 export default HeadingComponent;

package/esm/ConfigurationEditorWidget/components/HeadingComponent.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import { isStateTreeNode, getType } from 'mobx-state-tree';
+import { getType, isStateTreeNode } from 'mobx-state-tree';
 const HeadingComponent = observer(function ({ model, }) {
     if (model === null || model === void 0 ? void 0 : model.target) {
         if (model.target.type) {
@@ -13,6 +13,6 @@ const HeadingComponent = observer(function ({ model, }) {
             }
         }
     }
-    return React.createElement(React.Fragment, null, "Settings");
+    return _jsx(_Fragment, { children: "Settings" });
 });
 export default HeadingComponent;

package/esm/ConfigurationEditorWidget/components/JsonEditor.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare const JsonEditor: ({ slot, }: {
     slot: {
         name: string;
@@ -6,5 +5,5 @@ declare const JsonEditor: ({ slot, }: {
         value: unknown;
         set: (arg: unknown) => void;
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default JsonEditor;

package/esm/ConfigurationEditorWidget/components/JsonEditor.js

@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { InputLabel, TextField } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
-// fontSize and fontFamily have to match between Editor and SyntaxHighlighter
+import { makeStyles } from 'tss-react/mui';
 const fontSize = '12px';
-// Optimize by using system default fonts: https://css-tricks.com/snippets/css/font-stacks/
 const fontFamily = 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace';
 const useStyles = makeStyles()(theme => ({
     error: {
@@ -41,18 +40,14 @@ const JsonEditor = observer(function JsonEditor({ slot, }) {
             setError(e);
         }
     }, [contents, slot]);
-    return (React.createElement(React.Fragment, null,
-        error ? React.createElement("p", { className: classes.error }, `${error}`) : null,
-        React.createElement("div", { className: classes.callbackContainer },
-            React.createElement(InputLabel, { shrink: true, htmlFor: "json-editor" }, slot.name),
-            React.createElement(TextField, { id: "json-editor", className: classes.callbackEditor, value: contents, helperText: slot.description, multiline: true, onChange: event => {
-                    setContents(event.target.value);
-                }, style: { background: error ? '#fdd' : undefined }, slotProps: {
-                    input: {
-                        classes: {
-                            input: classes.textAreaFont,
-                        },
-                    },
-                } }))));
+    return (_jsxs(_Fragment, { children: [error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsxs("div", { className: classes.callbackContainer, children: [_jsx(InputLabel, { shrink: true, htmlFor: "json-editor", children: slot.name }), _jsx(TextField, { id: "json-editor", className: classes.callbackEditor, value: contents, helperText: slot.description, multiline: true, onChange: event => {
+                            setContents(event.target.value);
+                        }, style: { background: error ? '#fdd' : undefined }, slotProps: {
+                            input: {
+                                classes: {
+                                    input: classes.textAreaFont,
+                                },
+                            },
+                        } })] })] }));
 });
 export default JsonEditor;

package/esm/ConfigurationEditorWidget/components/NumberEditor.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare const NumberEditor: ({ slot, }: {
     slot: {
         name?: string;
@@ -7,5 +6,5 @@ declare const NumberEditor: ({ slot, }: {
         set: (val: number) => void;
         reset?: () => void;
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default NumberEditor;

package/esm/ConfigurationEditorWidget/components/NumberEditor.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
 import ConfigurationTextField from './ConfigurationTextField';
 const NumberEditor = observer(function ({ slot, }) {
@@ -13,7 +14,7 @@ const NumberEditor = observer(function ({ slot, }) {
             slot.set(num);
         }
     }, [slot, val]);
-    return (React.createElement(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => {
+    return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => {
             setVal(evt.target.value);
         } }));
 });

package/esm/ConfigurationEditorWidget/components/NumberMapEditor.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare const NumberMapEditor: ({ slot, }: {
     slot: {
         name: string;
@@ -7,5 +6,5 @@ declare const NumberMapEditor: ({ slot, }: {
         add: (key: string, val: number) => void;
         description: string;
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default NumberMapEditor;

package/esm/ConfigurationEditorWidget/components/NumberMapEditor.js

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { Card, CardContent, CardHeader, FormHelperText, IconButton, InputAdornment, InputLabel, TextField, } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-// icons
-import DeleteIcon from '@mui/icons-material/Delete';
-import AddIcon from '@mui/icons-material/Add';
 import NumberEditor from './NumberEditor';
 const useStyles = makeStyles()(theme => ({
     card: {
@@ -14,33 +14,22 @@ const useStyles = makeStyles()(theme => ({
 const NumberMapEditor = observer(function ({ slot, }) {
     const { classes } = useStyles();
     const [value, setValue] = useState('');
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InputLabel, null, slot.name),
-        [...slot.value].map(([key, val]) => (React.createElement(Card, { raised: true, key: key, className: classes.card },
-            React.createElement(CardHeader, { title: key, action: React.createElement(IconButton, { onClick: () => {
-                        slot.remove(key);
-                    } },
-                    React.createElement(DeleteIcon, null)) }),
-            React.createElement(CardContent, null,
-                React.createElement(NumberEditor, { slot: {
-                        value: val,
-                        set: (val) => {
-                            slot.add(key, val);
-                        },
-                    } }))))),
-        React.createElement(Card, { raised: true, className: classes.card },
-            React.createElement(CardHeader, { disableTypography: true, title: React.createElement(TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: event => {
-                        setValue(event.target.value);
-                    }, slotProps: {
-                        input: {
-                            endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                                React.createElement(IconButton, { disabled: value === '', onClick: () => {
-                                        slot.add(value, 0);
-                                        setValue('');
-                                    } },
-                                    React.createElement(AddIcon, null)))),
-                        },
-                    } }) })),
-        React.createElement(FormHelperText, null, slot.description)));
+    return (_jsxs(_Fragment, { children: [_jsx(InputLabel, { children: slot.name }), [...slot.value].map(([key, val]) => (_jsxs(Card, { raised: true, className: classes.card, children: [_jsx(CardHeader, { title: key, action: _jsx(IconButton, { onClick: () => {
+                                slot.remove(key);
+                            }, children: _jsx(DeleteIcon, {}) }) }), _jsx(CardContent, { children: _jsx(NumberEditor, { slot: {
+                                value: val,
+                                set: (val) => {
+                                    slot.add(key, val);
+                                },
+                            } }) })] }, key))), _jsx(Card, { raised: true, className: classes.card, children: _jsx(CardHeader, { disableTypography: true, title: _jsx(TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: event => {
+                            setValue(event.target.value);
+                        }, slotProps: {
+                            input: {
+                                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { disabled: value === '', onClick: () => {
+                                            slot.add(value, 0);
+                                            setValue('');
+                                        }, children: _jsx(AddIcon, {}) }) })),
+                            },
+                        } }) }) }), _jsx(FormHelperText, { children: slot.description })] }));
 });
 export default NumberMapEditor;

package/esm/ConfigurationEditorWidget/components/SlotEditor.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import { IAnyType } from 'mobx-state-tree';
+import type { IAnyType } from 'mobx-state-tree';
 declare const SlotEditor: ({ slot, slotSchema, }: {
     slot: any;
     slotSchema: IAnyType;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SlotEditor;

package/esm/ConfigurationEditorWidget/components/SlotEditor.js

@@ -1,36 +1,33 @@
-import React, { useEffect, useState } from 'react';
-import { observer } from 'mobx-react';
-import { getPropertyMembers } from 'mobx-state-tree';
-import { getEnv } from '@jbrowse/core/util';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { FileSelector } from '@jbrowse/core/ui';
-import { getSubType, getUnionSubTypes, } from '@jbrowse/core/util/mst-reflection';
-import { IconButton, MenuItem, Paper, SvgIcon, TextField } from '@mui/material';
-// icons
+import { getEnv } from '@jbrowse/core/util';
+import { getSubType, getUnionSubTypes } from '@jbrowse/core/util/mst-reflection';
 import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
-// locals
-import StringArrayEditor from './StringArrayEditor';
+import { IconButton, MenuItem, Paper, SvgIcon, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { getPropertyMembers } from 'mobx-state-tree';
+import BooleanEditor from './BooleanEditor';
 import CallbackEditor from './CallbackEditor';
 import ColorEditor from './ColorEditor';
-import JsonEditor from './JsonEditor';
-import StringArrayMapEditor from './StringArrayMapEditor';
 import ConfigurationTextField from './ConfigurationTextField';
-import NumberMapEditor from './NumberMapEditor';
+import JsonEditor from './JsonEditor';
 import NumberEditor from './NumberEditor';
-import BooleanEditor from './BooleanEditor';
+import NumberMapEditor from './NumberMapEditor';
+import StringArrayEditor from './StringArrayEditor';
+import StringArrayMapEditor from './StringArrayMapEditor';
 import { useSlotEditorStyles } from './useSlotEditorStyles';
 const StringEditor = observer(function ({ slot, }) {
-    return (React.createElement(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: slot.value, onChange: evt => {
+    return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: slot.value, onChange: evt => {
             slot.set(evt.target.value);
         } }));
 });
 const TextEditor = observer(function ({ slot, }) {
-    return (React.createElement(TextField, { label: slot.name, helperText: slot.description, multiline: true, value: slot.value, onChange: evt => {
+    return (_jsx(TextField, { label: slot.name, helperText: slot.description, multiline: true, value: slot.value, onChange: evt => {
             slot.set(evt.target.value);
         } }));
 });
-// checked checkbox, looks like a styled (x)
-const SvgCheckbox = () => (React.createElement(SvgIcon, null,
-    React.createElement("path", { d: "M20.41,3C21.8,5.71 22.35,8.84 22,12C21.8,15.16 20.7,18.29 18.83,21L17.3,20C18.91,17.57 19.85,14.8 20,12C20.34,9.2 19.89,6.43 18.7,4L20.41,3M5.17,3L6.7,4C5.09,6.43 4.15,9.2 4,12C3.66,14.8 4.12,17.57 5.3,20L3.61,21C2.21,18.29 1.65,15.17 2,12C2.2,8.84 3.3,5.71 5.17,3M12.08,10.68L14.4,7.45H16.93L13.15,12.45L15.35,17.37H13.09L11.71,14L9.28,17.33H6.76L10.66,12.21L8.53,7.45H10.8L12.08,10.68Z" })));
+const SvgCheckbox = () => (_jsx(SvgIcon, { children: _jsx("path", { d: "M20.41,3C21.8,5.71 22.35,8.84 22,12C21.8,15.16 20.7,18.29 18.83,21L17.3,20C18.91,17.57 19.85,14.8 20,12C20.34,9.2 19.89,6.43 18.7,4L20.41,3M5.17,3L6.7,4C5.09,6.43 4.15,9.2 4,12C3.66,14.8 4.12,17.57 5.3,20L3.61,21C2.21,18.29 1.65,15.17 2,12C2.2,8.84 3.3,5.71 5.17,3M12.08,10.68L14.4,7.45H16.93L13.15,12.45L15.35,17.37H13.09L11.71,14L9.28,17.33H6.76L10.66,12.21L8.53,7.45H10.8L12.08,10.68Z" }) }));
 const IntegerEditor = observer(function ({ slot, }) {
     const [val, setVal] = useState(slot.value);
     useEffect(() => {
@@ -39,24 +36,22 @@ const IntegerEditor = observer(function ({ slot, }) {
             slot.set(num);
         }
     }, [slot, val]);
-    return (React.createElement(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => {
+    return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => {
             setVal(evt.target.value);
         } }));
 });
 const StringEnumEditor = observer(function ({ slot, slotSchema, }) {
     const p = getPropertyMembers(getSubType(slotSchema));
     const choices = getUnionSubTypes(getUnionSubTypes(getSubType(p.properties.value))[1]).map(t => t.value);
-    return (React.createElement(ConfigurationTextField, { value: slot.value, label: slot.name, select: true, helperText: slot.description, onChange: evt => {
+    return (_jsx(ConfigurationTextField, { value: slot.value, label: slot.name, select: true, helperText: slot.description, onChange: evt => {
             slot.set(evt.target.value);
-        } }, choices.map(str => (React.createElement(MenuItem, { key: str, value: str }, str)))));
+        }, children: choices.map(str => (_jsx(MenuItem, { value: str, children: str }, str))) }));
 });
 const FileSelectorWrapper = observer(function ({ slot, }) {
     var _a;
-    return (React.createElement(FileSelector, { location: slot.value, setLocation: location => {
+    return (_jsx(FileSelector, { location: slot.value, setLocation: location => {
             slot.set(location);
-        }, name: slot.name, description: slot.description, 
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        rootModel: (_a = getEnv(slot).pluginManager) === null || _a === void 0 ? void 0 : _a.rootModel }));
+        }, name: slot.name, description: slot.description, rootModel: (_a = getEnv(slot).pluginManager) === null || _a === void 0 ? void 0 : _a.rootModel }));
 });
 const valueComponents = {
     string: StringEditor,
@@ -78,7 +73,7 @@ const SlotEditor = observer(function ({ slot, slotSchema, }) {
     const { type } = slot;
     let ValueComponent = slot.isCallback
         ? CallbackEditor
-        : // @ts-expect-error
+        :
             valueComponents[type];
     if (!ValueComponent) {
         console.warn(`no slot editor defined for ${type}, editing as string`);
@@ -87,9 +82,6 @@ const SlotEditor = observer(function ({ slot, slotSchema, }) {
     if (!(type in valueComponents)) {
         console.warn(`SlotEditor needs to implement ${type}`);
     }
-    return (React.createElement(Paper, { className: classes.paper },
-        React.createElement("div", { className: classes.paperContent },
-            React.createElement(ValueComponent, { slot: slot, slotSchema: slotSchema })),
-        React.createElement("div", { className: classes.slotModeSwitch }, slot.contextVariable.length ? (React.createElement(IconButton, { onClick: () => slot.isCallback ? slot.convertToValue() : slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}` }, slot.isCallback ? React.createElement(SvgCheckbox, null) : React.createElement(RadioButtonUncheckedIcon, null))) : null)));
+    return (_jsxs(Paper, { className: classes.paper, children: [_jsx("div", { className: classes.paperContent, children: _jsx(ValueComponent, { slot: slot, slotSchema: slotSchema }) }), _jsx("div", { className: classes.slotModeSwitch, children: slot.contextVariable.length ? (_jsx(IconButton, { onClick: () => slot.isCallback ? slot.convertToValue() : slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}`, children: slot.isCallback ? _jsx(SvgCheckbox, {}) : _jsx(RadioButtonUncheckedIcon, {}) })) : null })] }));
 });
 export default SlotEditor;

package/esm/ConfigurationEditorWidget/components/StringArrayEditor.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare const StringArrayEditor: ({ slot, }: {
     slot: {
         name: string;
@@ -8,5 +7,5 @@ declare const StringArrayEditor: ({ slot, }: {
         add: (arg: string) => void;
         description: string;
     };
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default StringArrayEditor;