@jbrowse/plugin-config 1.7.9 → 2.0.0

package/dist/ConfigurationEditorWidget/components/SlotEditor.js

@@ -1,451 +1,256 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports.useSlotEditorStyles = exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _mobxReact = require("mobx-react");
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _ui = require("@jbrowse/core/ui");
-
-var _mstReflection = require("@jbrowse/core/util/mst-reflection");
-
-var _core = require("@material-ui/core");
-
-var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
-
-var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
-
-var _RadioButtonUnchecked = _interopRequireDefault(require("@material-ui/icons/RadioButtonUnchecked"));
-
-var _CallbackEditor = _interopRequireDefault(require("./CallbackEditor"));
-
-var _ColorEditor = _interopRequireDefault(require("./ColorEditor"));
-
-var _JsonEditor = _interopRequireDefault(require("./JsonEditor"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSlotEditorStyles = void 0;
+var react_1 = __importStar(require("react"));
+var mobx_react_1 = require("mobx-react");
+var mobx_state_tree_1 = require("mobx-state-tree");
+var ui_1 = require("@jbrowse/core/ui");
+var mst_reflection_1 = require("@jbrowse/core/util/mst-reflection");
+var material_1 = require("@mui/material");
+var mui_1 = require("tss-react/mui");
 // icons
+var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+var Add_1 = __importDefault(require("@mui/icons-material/Add"));
+var RadioButtonUnchecked_1 = __importDefault(require("@mui/icons-material/RadioButtonUnchecked"));
 // locals
+var StringArrayEditor_1 = __importDefault(require("./StringArrayEditor"));
+var CallbackEditor_1 = __importDefault(require("./CallbackEditor"));
+var ColorEditor_1 = __importDefault(require("./ColorEditor"));
+var JsonEditor_1 = __importDefault(require("./JsonEditor"));
 // adds ability to have html in helperText. note that FormHelperTextProps is
 // div because the default is p which does not like div children
-var MyTextField = function MyTextField(props) {
-  // eslint-disable-next-line react/prop-types
-  var helperText = props.helperText;
-  return /*#__PURE__*/_react.default.createElement(_core.TextField, (0, _extends2.default)({}, props, {
-    helperText: /*#__PURE__*/_react.default.createElement(_ui.SanitizedHTML, {
-      html: helperText
-    }),
-    FormHelperTextProps: {
-      component: 'div'
-    },
-    fullWidth: true
-  }));
+var MyTextField = function (props) {
+    var helperText = props.helperText;
+    return (react_1.default.createElement(material_1.TextField, __assign({}, props, { helperText: react_1.default.createElement(ui_1.SanitizedHTML, { html: helperText }), FormHelperTextProps: {
+            component: 'div',
+        }, fullWidth: true })));
 };
-
-var StringEditor = (0, _mobxReact.observer)(function (_ref) {
-  var slot = _ref.slot;
-  return /*#__PURE__*/_react.default.createElement(MyTextField, {
-    label: slot.name,
-    helperText: slot.description,
-    value: slot.value,
-    onChange: function onChange(evt) {
-      return slot.set(evt.target.value);
-    }
-  });
+var StringEditor = (0, mobx_react_1.observer)(function (_a) {
+    var slot = _a.slot;
+    return (react_1.default.createElement(MyTextField, { label: slot.name, helperText: slot.description, value: slot.value, onChange: function (evt) { return slot.set(evt.target.value); } }));
 });
-var TextEditor = (0, _mobxReact.observer)(function (_ref2) {
-  var slot = _ref2.slot;
-  return /*#__PURE__*/_react.default.createElement(_core.TextField, {
-    label: slot.name,
-    helperText: slot.description,
-    multiline: true,
-    value: slot.value,
-    onChange: function onChange(evt) {
-      return slot.set(evt.target.value);
-    }
-  });
-}); // checked checkbox, looks like a styled (x)
-
-var SvgCheckbox = function SvgCheckbox() {
-  return /*#__PURE__*/_react.default.createElement(_core.SvgIcon, null, /*#__PURE__*/_react.default.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"
-  }));
-};
-
-var StringArrayEditor = (0, _mobxReact.observer)(function (_ref3) {
-  var slot = _ref3.slot;
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, slot.name ? /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name) : null, /*#__PURE__*/_react.default.createElement(_core.List, {
-    disablePadding: true
-  }, slot.value.map(function (val, idx) {
-    return /*#__PURE__*/_react.default.createElement(_core.ListItem, {
-      key: idx,
-      disableGutters: true
-    }, /*#__PURE__*/_react.default.createElement(_core.TextField, {
-      value: val,
-      onChange: function onChange(evt) {
-        return slot.setAtIndex(idx, evt.target.value);
-      },
-      InputProps: {
-        endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
-          position: "end"
-        }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-          color: "secondary",
-          onClick: function onClick() {
-            return slot.removeAtIndex(idx);
-          }
-        }, /*#__PURE__*/_react.default.createElement(_Delete.default, null)))
-      }
-    }));
-  }), /*#__PURE__*/_react.default.createElement(_core.ListItem, {
-    disableGutters: true
-  }, /*#__PURE__*/_react.default.createElement(_core.TextField, {
-    value: value,
-    placeholder: "add new",
-    onChange: function onChange(event) {
-      return setValue(event.target.value);
-    },
-    InputProps: {
-      endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
-        position: "end"
-      }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-        onClick: function onClick() {
-          slot.add(value);
-          setValue('');
-        },
-        disabled: value === '',
-        color: "secondary",
-        "data-testid": "stringArrayAdd-".concat(slot.name)
-      }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
+var TextEditor = (0, mobx_react_1.observer)(function (_a) {
+    var slot = _a.slot;
+    return (react_1.default.createElement(material_1.TextField, { label: slot.name, helperText: slot.description, multiline: true, value: slot.value, onChange: function (evt) { return slot.set(evt.target.value); } }));
 });
-var useMapEditorStyles = (0, _core.makeStyles)(function (theme) {
-  return {
+// checked checkbox, looks like a styled (x)
+var SvgCheckbox = function () { return (react_1.default.createElement(material_1.SvgIcon, null,
+    react_1.default.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" }))); };
+var useMapEditorStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
     card: {
-      marginTop: theme.spacing(1)
-    }
-  };
+        marginTop: theme.spacing(1),
+    },
+}); });
+var StringArrayMapEditor = (0, mobx_react_1.observer)(function (_a) {
+    var slot = _a.slot;
+    var classes = useMapEditorStyles().classes;
+    var _b = __read((0, react_1.useState)(''), 2), value = _b[0], setValue = _b[1];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.InputLabel, null, slot.name),
+        Array.from(slot.value, function (_a) {
+            var _b = __read(_a, 2), key = _b[0], val = _b[1];
+            return (react_1.default.createElement(material_1.Card, { raised: true, key: key, className: classes.card },
+                react_1.default.createElement(material_1.CardHeader, { title: key, action: react_1.default.createElement(material_1.IconButton, { color: "secondary", onClick: function () { return slot.remove(key); } },
+                        react_1.default.createElement(Delete_1.default, null)) }),
+                react_1.default.createElement(material_1.CardContent, null,
+                    react_1.default.createElement(StringArrayEditor_1.default, { slot: {
+                            value: val,
+                            description: "Values associated with entry ".concat(key),
+                            setAtIndex: function (idx, strValue) {
+                                slot.setAtKeyIndex(key, idx, strValue);
+                            },
+                            removeAtIndex: function (idx) {
+                                slot.removeAtKeyIndex(key, idx);
+                            },
+                            add: function (strValue) {
+                                slot.addToKey(key, strValue);
+                            },
+                        } }))));
+        }),
+        react_1.default.createElement(material_1.Card, { raised: true, className: classes.card },
+            react_1.default.createElement(material_1.CardHeader, { disableTypography: true, title: react_1.default.createElement(material_1.TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: function (event) { return setValue(event.target.value); }, InputProps: {
+                        endAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "end" },
+                            react_1.default.createElement(material_1.IconButton, { disabled: value === '', onClick: function () {
+                                    slot.add(value, []);
+                                    setValue('');
+                                }, color: "secondary" },
+                                react_1.default.createElement(Add_1.default, null)))),
+                    } }) })),
+        react_1.default.createElement(material_1.FormHelperText, null, slot.description)));
 });
-var StringArrayMapEditor = (0, _mobxReact.observer)(function (_ref4) {
-  var slot = _ref4.slot;
-  var classes = useMapEditorStyles();
-
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref5) {
-    var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-        key = _ref6[0],
-        val = _ref6[1];
-
-    return /*#__PURE__*/_react.default.createElement(_core.Card, {
-      raised: true,
-      key: key,
-      className: classes.card
-    }, /*#__PURE__*/_react.default.createElement(_core.CardHeader, {
-      title: key,
-      action: /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-        color: "secondary",
-        onClick: function onClick() {
-          return slot.remove(key);
-        }
-      }, /*#__PURE__*/_react.default.createElement(_Delete.default, null))
-    }), /*#__PURE__*/_react.default.createElement(_core.CardContent, null, /*#__PURE__*/_react.default.createElement(StringArrayEditor, {
-      slot: {
-        value: val,
-        description: "Values associated with entry ".concat(key),
-        setAtIndex: function setAtIndex(idx, strValue) {
-          slot.setAtKeyIndex(key, idx, strValue);
-        },
-        removeAtIndex: function removeAtIndex(idx) {
-          slot.removeAtKeyIndex(key, idx);
-        },
-        add: function add(strValue) {
-          slot.addToKey(key, strValue);
-        }
-      }
-    })));
-  }), /*#__PURE__*/_react.default.createElement(_core.Card, {
-    raised: true,
-    className: classes.card
-  }, /*#__PURE__*/_react.default.createElement(_core.CardHeader, {
-    disableTypography: true,
-    title: /*#__PURE__*/_react.default.createElement(_core.TextField, {
-      fullWidth: true,
-      value: value,
-      placeholder: "add new",
-      onChange: function onChange(event) {
-        return setValue(event.target.value);
-      },
-      InputProps: {
-        endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
-          position: "end"
-        }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-          disabled: value === '',
-          onClick: function onClick() {
-            slot.add(value, []);
-            setValue('');
-          },
-          color: "secondary"
-        }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))
-      }
-    })
-  })), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
+var NumberMapEditor = (0, mobx_react_1.observer)(function (_a) {
+    var slot = _a.slot;
+    var classes = useMapEditorStyles().classes;
+    var _b = __read((0, react_1.useState)(''), 2), value = _b[0], setValue = _b[1];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.InputLabel, null, slot.name),
+        Array.from(slot.value, function (_a) {
+            var _b = __read(_a, 2), key = _b[0], val = _b[1];
+            return (react_1.default.createElement(material_1.Card, { raised: true, key: key, className: classes.card },
+                react_1.default.createElement(material_1.CardHeader, { title: key, action: react_1.default.createElement(material_1.IconButton, { color: "secondary", onClick: function () { return slot.remove(key); } },
+                        react_1.default.createElement(Delete_1.default, null)) }),
+                react_1.default.createElement(material_1.CardContent, null,
+                    react_1.default.createElement(NumberEditor, { slot: {
+                            value: val,
+                            set: function (numValue) { return slot.add(key, numValue); },
+                        } }))));
+        }),
+        react_1.default.createElement(material_1.Card, { raised: true, className: classes.card },
+            react_1.default.createElement(material_1.CardHeader, { disableTypography: true, title: react_1.default.createElement(material_1.TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: function (event) { return setValue(event.target.value); }, InputProps: {
+                        endAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "end" },
+                            react_1.default.createElement(material_1.IconButton, { disabled: value === '', onClick: function () {
+                                    slot.add(value, 0);
+                                    setValue('');
+                                }, color: "secondary" },
+                                react_1.default.createElement(Add_1.default, null)))),
+                    } }) })),
+        react_1.default.createElement(material_1.FormHelperText, null, slot.description)));
 });
-var NumberMapEditor = (0, _mobxReact.observer)(function (_ref7) {
-  var slot = _ref7.slot;
-  var classes = useMapEditorStyles();
-
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      value = _useState6[0],
-      setValue = _useState6[1];
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref8) {
-    var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
-        key = _ref9[0],
-        val = _ref9[1];
-
-    return /*#__PURE__*/_react.default.createElement(_core.Card, {
-      raised: true,
-      key: key,
-      className: classes.card
-    }, /*#__PURE__*/_react.default.createElement(_core.CardHeader, {
-      title: key,
-      action: /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-        color: "secondary",
-        onClick: function onClick() {
-          return slot.remove(key);
+var NumberEditor = (0, mobx_react_1.observer)(function (_a) {
+    var slot = _a.slot;
+    var _b = __read((0, react_1.useState)(slot.value), 2), val = _b[0], setVal = _b[1];
+    (0, react_1.useEffect)(function () {
+        var num = parseFloat(val, 10);
+        if (!Number.isNaN(num)) {
+            slot.set(num);
         }
-      }, /*#__PURE__*/_react.default.createElement(_Delete.default, null))
-    }), /*#__PURE__*/_react.default.createElement(_core.CardContent, null, /*#__PURE__*/_react.default.createElement(NumberEditor, {
-      slot: {
-        value: val,
-        set: function set(numValue) {
-          return slot.add(key, numValue);
+        else {
+            slot.reset();
         }
-      }
-    })));
-  }), /*#__PURE__*/_react.default.createElement(_core.Card, {
-    raised: true,
-    className: classes.card
-  }, /*#__PURE__*/_react.default.createElement(_core.CardHeader, {
-    disableTypography: true,
-    title: /*#__PURE__*/_react.default.createElement(_core.TextField, {
-      fullWidth: true,
-      value: value,
-      placeholder: "add new",
-      onChange: function onChange(event) {
-        return setValue(event.target.value);
-      },
-      InputProps: {
-        endAdornment: /*#__PURE__*/_react.default.createElement(_core.InputAdornment, {
-          position: "end"
-        }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-          disabled: value === '',
-          onClick: function onClick() {
-            slot.add(value, 0);
-            setValue('');
-          },
-          color: "secondary"
-        }, /*#__PURE__*/_react.default.createElement(_Add.default, null)))
-      }
-    })
-  })), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
-});
-var NumberEditor = (0, _mobxReact.observer)(function (_ref10) {
-  var slot = _ref10.slot;
-
-  var _useState7 = (0, _react.useState)(slot.value),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      val = _useState8[0],
-      setVal = _useState8[1];
-
-  (0, _react.useEffect)(function () {
-    var num = parseFloat(val, 10);
-
-    if (!Number.isNaN(num)) {
-      slot.set(num);
-    } else {
-      slot.reset();
-    }
-  }, [slot, val]);
-  return /*#__PURE__*/_react.default.createElement(MyTextField, {
-    label: slot.name,
-    helperText: slot.description,
-    value: val,
-    type: "number",
-    onChange: function onChange(evt) {
-      return setVal(evt.target.value);
-    }
-  });
+    }, [slot, val]);
+    return (react_1.default.createElement(MyTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: function (evt) { return setVal(evt.target.value); } }));
 });
-var IntegerEditor = (0, _mobxReact.observer)(function (_ref11) {
-  var slot = _ref11.slot;
-
-  var _useState9 = (0, _react.useState)(slot.value),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      val = _useState10[0],
-      setVal = _useState10[1];
-
-  (0, _react.useEffect)(function () {
-    var num = parseInt(val, 10);
-
-    if (!Number.isNaN(num)) {
-      slot.set(num);
-    }
-  }, [slot, val]);
-  return /*#__PURE__*/_react.default.createElement(MyTextField, {
-    label: slot.name,
-    helperText: slot.description,
-    value: val,
-    type: "number",
-    onChange: function onChange(evt) {
-      return setVal(evt.target.value);
-    }
-  });
+var IntegerEditor = (0, mobx_react_1.observer)(function (_a) {
+    var slot = _a.slot;
+    var _b = __read((0, react_1.useState)(slot.value), 2), val = _b[0], setVal = _b[1];
+    (0, react_1.useEffect)(function () {
+        var num = parseInt(val, 10);
+        if (!Number.isNaN(num)) {
+            slot.set(num);
+        }
+    }, [slot, val]);
+    return (react_1.default.createElement(MyTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: function (evt) { return setVal(evt.target.value); } }));
 });
-var BooleanEditor = (0, _mobxReact.observer)(function (_ref12) {
-  var slot = _ref12.slot;
-  return /*#__PURE__*/_react.default.createElement(_core.FormControl, null, /*#__PURE__*/_react.default.createElement(_core.FormControlLabel, {
-    label: slot.name,
-    control: /*#__PURE__*/_react.default.createElement(_core.Checkbox, {
-      checked: slot.value,
-      onChange: function onChange(evt) {
-        return slot.set(evt.target.checked);
-      }
-    })
-  }), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description));
+var BooleanEditor = (0, mobx_react_1.observer)(function (_a) {
+    var slot = _a.slot;
+    return (react_1.default.createElement(material_1.FormControl, null,
+        react_1.default.createElement(material_1.FormControlLabel, { label: slot.name, control: react_1.default.createElement(material_1.Checkbox, { checked: slot.value, onChange: function (evt) { return slot.set(evt.target.checked); } }) }),
+        react_1.default.createElement(material_1.FormHelperText, null, slot.description)));
 });
-var StringEnumEditor = (0, _mobxReact.observer)(function (_ref13) {
-  var slot = _ref13.slot,
-      slotSchema = _ref13.slotSchema;
-  var p = (0, _mobxStateTree.getPropertyMembers)((0, _mstReflection.getSubType)(slotSchema));
-  var choices = (0, _mstReflection.getUnionSubTypes)((0, _mstReflection.getUnionSubTypes)((0, _mstReflection.getSubType)((0, _mstReflection.getPropertyType)(p, 'value')))[1]).map(function (t) {
-    return t.value;
-  });
-  return /*#__PURE__*/_react.default.createElement(MyTextField, {
-    value: slot.value,
-    label: slot.name,
-    select: true,
-    helperText: slot.description,
-    onChange: function onChange(evt) {
-      return slot.set(evt.target.value);
-    }
-  }, choices.map(function (str) {
-    return /*#__PURE__*/_react.default.createElement(_core.MenuItem, {
-      key: str,
-      value: str
-    }, str);
-  }));
+var StringEnumEditor = (0, mobx_react_1.observer)(function (_a) {
+    var slot = _a.slot, slotSchema = _a.slotSchema;
+    var p = (0, mobx_state_tree_1.getPropertyMembers)((0, mst_reflection_1.getSubType)(slotSchema));
+    var choices = (0, mst_reflection_1.getUnionSubTypes)((0, mst_reflection_1.getUnionSubTypes)((0, mst_reflection_1.getSubType)((0, mst_reflection_1.getPropertyType)(p, 'value')))[1]).map(function (t) { return t.value; });
+    return (react_1.default.createElement(MyTextField, { value: slot.value, label: slot.name, select: true, helperText: slot.description, onChange: function (evt) { return slot.set(evt.target.value); } }, choices.map(function (str) { return (react_1.default.createElement(material_1.MenuItem, { key: str, value: str }, str)); })));
 });
-var FileSelectorWrapper = (0, _mobxReact.observer)(function (_ref14) {
-  var _getEnv$pluginManager;
-
-  var slot = _ref14.slot;
-  return /*#__PURE__*/_react.default.createElement(_ui.FileSelector, {
-    location: slot.value,
-    setLocation: function setLocation(location) {
-      return slot.set(location);
-    },
-    name: slot.name,
-    description: slot.description,
-    rootModel: (_getEnv$pluginManager = (0, _mobxStateTree.getEnv)(slot).pluginManager) === null || _getEnv$pluginManager === void 0 ? void 0 : _getEnv$pluginManager.rootModel
-  });
+var FileSelectorWrapper = (0, mobx_react_1.observer)(function (_a) {
+    var _b;
+    var slot = _a.slot;
+    return (react_1.default.createElement(ui_1.FileSelector, { location: slot.value, setLocation: function (location) { return slot.set(location); }, name: slot.name, description: slot.description, rootModel: (_b = (0, mobx_state_tree_1.getEnv)(slot).pluginManager) === null || _b === void 0 ? void 0 : _b.rootModel }));
 });
 var valueComponents = {
-  string: StringEditor,
-  text: TextEditor,
-  fileLocation: FileSelectorWrapper,
-  stringArray: StringArrayEditor,
-  stringArrayMap: StringArrayMapEditor,
-  numberMap: NumberMapEditor,
-  number: NumberEditor,
-  integer: IntegerEditor,
-  color: _ColorEditor.default,
-  stringEnum: StringEnumEditor,
-  boolean: BooleanEditor,
-  frozen: _JsonEditor.default,
-  configRelationships: _JsonEditor.default
+    string: StringEditor,
+    text: TextEditor,
+    fileLocation: FileSelectorWrapper,
+    stringArray: StringArrayEditor_1.default,
+    stringArrayMap: StringArrayMapEditor,
+    numberMap: NumberMapEditor,
+    number: NumberEditor,
+    integer: IntegerEditor,
+    color: ColorEditor_1.default,
+    stringEnum: StringEnumEditor,
+    boolean: BooleanEditor,
+    frozen: JsonEditor_1.default,
+    configRelationships: JsonEditor_1.default,
 };
-var useSlotEditorStyles = (0, _core.makeStyles)(function (theme) {
-  return {
+exports.useSlotEditorStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
     paper: {
-      display: 'flex',
-      marginBottom: theme.spacing(2),
-      position: 'relative'
+        display: 'flex',
+        marginBottom: theme.spacing(2),
+        position: 'relative',
     },
     paperContent: {
-      width: '100%'
+        width: '100%',
     },
     slotModeSwitch: {
-      width: 24,
-      background: theme.palette.secondary.light,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  };
-});
-exports.useSlotEditorStyles = useSlotEditorStyles;
-var SlotEditor = (0, _mobxReact.observer)(function (_ref15) {
-  var slot = _ref15.slot,
-      slotSchema = _ref15.slotSchema;
-  var classes = useSlotEditorStyles();
-  var type = slot.type;
-  var ValueComponent = slot.isCallback ? _CallbackEditor.default : valueComponents[type];
-
-  if (!ValueComponent) {
-    console.warn("no slot editor defined for ".concat(type, ", editing as string"));
-    ValueComponent = StringEditor;
-  }
-
-  if (!(type in valueComponents)) {
-    console.warn("SlotEditor needs to implement ".concat(type));
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_core.Paper, {
-    className: classes.paper
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.paperContent
-  }, /*#__PURE__*/_react.default.createElement(ValueComponent, {
-    slot: slot,
-    slotSchema: slotSchema
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.slotModeSwitch
-  }, slot.contextVariable.length ? /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    className: classes.slotModeIcon,
-    onClick: function onClick() {
-      return slot.isCallback ? slot.convertToValue() : slot.convertToCallback();
+        width: 24,
+        background: theme.palette.secondary.light,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
     },
-    title: "convert to ".concat(slot.isCallback ? 'regular value' : 'callback'),
-    color: "secondary"
-  }, !slot.isCallback ? /*#__PURE__*/_react.default.createElement(_RadioButtonUnchecked.default, null) : /*#__PURE__*/_react.default.createElement(SvgCheckbox, null)) : null));
+}); });
+var SlotEditor = (0, mobx_react_1.observer)(function (_a) {
+    var slot = _a.slot, slotSchema = _a.slotSchema;
+    var classes = (0, exports.useSlotEditorStyles)().classes;
+    var type = slot.type;
+    var ValueComponent = slot.isCallback ? CallbackEditor_1.default : valueComponents[type];
+    if (!ValueComponent) {
+        console.warn("no slot editor defined for ".concat(type, ", editing as string"));
+        ValueComponent = StringEditor;
+    }
+    if (!(type in valueComponents)) {
+        console.warn("SlotEditor needs to implement ".concat(type));
+    }
+    return (react_1.default.createElement(material_1.Paper, { className: classes.paper },
+        react_1.default.createElement("div", { className: classes.paperContent },
+            react_1.default.createElement(ValueComponent, { slot: slot, slotSchema: slotSchema })),
+        react_1.default.createElement("div", { className: classes.slotModeSwitch }, slot.contextVariable.length ? (react_1.default.createElement(material_1.IconButton, { className: classes.slotModeIcon, onClick: function () {
+                return slot.isCallback ? slot.convertToValue() : slot.convertToCallback();
+            }, title: "convert to ".concat(slot.isCallback ? 'regular value' : 'callback'), color: "secondary" }, !slot.isCallback ? react_1.default.createElement(RadioButtonUnchecked_1.default, null) : react_1.default.createElement(SvgCheckbox, null))) : null)));
 });
-var _default = SlotEditor;
-exports.default = _default;
+exports.default = SlotEditor;
+//# sourceMappingURL=SlotEditor.js.map