@jbrowse/plugin-config 1.7.11 → 2.1.0

package/dist/ConfigurationEditorWidget/components/ConfigurationEditor.js

@@ -1,176 +1,133 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _configuration = require("@jbrowse/core/configuration");
-
-var _core = require("@material-ui/core");
-
-var _mobxReact = require("mobx-react");
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _pluralize = require("pluralize");
-
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
-
-var _SlotEditor = _interopRequireDefault(require("./SlotEditor"));
-
-var _TypeSelector = _interopRequireDefault(require("./TypeSelector"));
-
+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 __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var configuration_1 = require("@jbrowse/core/configuration");
+var material_1 = require("@mui/material");
+var mui_1 = require("tss-react/mui");
+var mobx_react_1 = require("mobx-react");
+var mobx_state_tree_1 = require("mobx-state-tree");
+var pluralize_1 = require("pluralize");
 // icons
+var ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 // locals
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  return {
+var SlotEditor_1 = __importDefault(require("./SlotEditor"));
+var TypeSelector_1 = __importDefault(require("./TypeSelector"));
+var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
     expandIcon: {
-      color: '#fff'
+        color: '#fff',
     },
     root: {
-      padding: theme.spacing(1, 3, 1, 1)
+        padding: theme.spacing(1, 3, 1, 1),
     },
     expansionPanelDetails: {
-      display: 'block',
-      padding: theme.spacing(1)
+        display: 'block',
+        padding: theme.spacing(1),
     },
     accordion: {
-      border: "1px solid ".concat(theme.palette.text.primary)
-    }
-  };
-});
-var Member = (0, _mobxReact.observer)(function (props) {
-  var classes = useStyles();
-  var slotName = props.slotName,
-      slotSchema = props.slotSchema,
-      schema = props.schema,
-      _props$slot = props.slot,
-      slot = _props$slot === void 0 ? schema[slotName] : _props$slot,
-      _props$path = props.path,
-      path = _props$path === void 0 ? [] : _props$path;
-  var typeSelector;
-
-  if ((0, _configuration.isConfigurationSchemaType)(slotSchema)) {
-    if (slot.length) {
-      return slot.map(function (subslot, slotIndex) {
-        var key = "".concat((0, _pluralize.singular)(slotName), " ").concat(slotIndex + 1);
-        return /*#__PURE__*/_react.default.createElement(Member, (0, _extends2.default)({}, props, {
-          key: key,
-          slot: subslot,
-          slotName: key
-        }));
-      });
-    } // if this is an explicitly typed schema, make a type-selecting dropdown
-    // that can be used to change its type
-
-
-    var typeNameChoices = (0, _configuration.getTypeNamesFromExplicitlyTypedUnion)(slotSchema);
-
-    if (typeNameChoices.length) {
-      typeSelector = /*#__PURE__*/_react.default.createElement(_TypeSelector.default, {
-        typeNameChoices: typeNameChoices,
-        slotName: slotName,
-        slot: slot,
-        onChange: function onChange(evt) {
-          if (evt.target.value !== slot.type) {
-            schema.setSubschema(slotName, {
-              type: evt.target.value
+        border: "1px solid ".concat(theme.palette.text.primary),
+    },
+    noOverflow: {
+        width: '100%',
+        overflowX: 'auto',
+    },
+}); });
+var Member = (0, mobx_react_1.observer)(function (props) {
+    var classes = useStyles().classes;
+    var slotName = props.slotName, slotSchema = props.slotSchema, schema = props.schema, _a = props.slot, slot = _a === void 0 ? schema[slotName] : _a, _b = props.path, path = _b === void 0 ? [] : _b;
+    var typeSelector;
+    if ((0, configuration_1.isConfigurationSchemaType)(slotSchema)) {
+        if (slot.length) {
+            return slot.map(function (subslot, slotIndex) {
+                var key = "".concat((0, pluralize_1.singular)(slotName), " ").concat(slotIndex + 1);
+                return react_1.default.createElement(Member, __assign({}, props, { key: key, slot: subslot, slotName: key }));
             });
-          }
         }
-      });
+        // if this is an explicitly typed schema, make a type-selecting dropdown
+        // that can be used to change its type
+        var typeNameChoices = (0, configuration_1.getTypeNamesFromExplicitlyTypedUnion)(slotSchema);
+        if (typeNameChoices.length) {
+            typeSelector = (react_1.default.createElement(TypeSelector_1.default, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: function (evt) {
+                    if (evt.target.value !== slot.type) {
+                        schema.setSubschema(slotName, { type: evt.target.value });
+                    }
+                } }));
+        }
+        return (react_1.default.createElement(material_1.Accordion, { defaultExpanded: true, className: classes.accordion },
+            react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
+                react_1.default.createElement(material_1.Typography, null, __spreadArray(__spreadArray([], __read(path), false), [slotName], false).join('🡒'))),
+            react_1.default.createElement(material_1.AccordionDetails, { className: classes.expansionPanelDetails },
+                typeSelector,
+                react_1.default.createElement(material_1.FormGroup, { className: classes.noOverflow },
+                    react_1.default.createElement(Schema, { schema: slot, path: __spreadArray(__spreadArray([], __read(path), false), [slotName], false) })))));
     }
-
-    return /*#__PURE__*/_react.default.createElement(_core.Accordion, {
-      defaultExpanded: true,
-      className: classes.accordion,
-      TransitionProps: {
-        unmountOnExit: true,
-        timeout: 150
-      }
-    }, /*#__PURE__*/_react.default.createElement(_core.AccordionSummary, {
-      expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, {
-        className: classes.expandIcon
-      })
-    }, /*#__PURE__*/_react.default.createElement(_core.Typography, null, [].concat((0, _toConsumableArray2.default)(path), [slotName]).join('🡒'))), /*#__PURE__*/_react.default.createElement(_core.AccordionDetails, {
-      className: classes.expansionPanelDetails
-    }, typeSelector, /*#__PURE__*/_react.default.createElement(_core.FormGroup, null, /*#__PURE__*/_react.default.createElement(Schema, {
-      schema: slot,
-      path: [].concat((0, _toConsumableArray2.default)(path), [slotName])
-    }))));
-  }
-
-  if ((0, _configuration.isConfigurationSlotType)(slotSchema)) {
-    // this is a regular config slot
-    return /*#__PURE__*/_react.default.createElement(_SlotEditor.default, {
-      key: slotName,
-      slot: slot,
-      slotSchema: slotSchema
-    });
-  }
-
-  return null;
+    if ((0, configuration_1.isConfigurationSlotType)(slotSchema)) {
+        // this is a regular config slot
+        return react_1.default.createElement(SlotEditor_1.default, { key: slotName, slot: slot, slotSchema: slotSchema });
+    }
+    return null;
 });
-var Schema = (0, _mobxReact.observer)(function (_ref) {
-  var schema = _ref.schema,
-      _ref$path = _ref.path,
-      path = _ref$path === void 0 ? [] : _ref$path;
-  var properties = (0, _mobxStateTree.getMembers)(schema).properties;
-  return Object.entries(properties).map(function (_ref2) {
-    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-        slotName = _ref3[0],
-        slotSchema = _ref3[1];
-
-    return /*#__PURE__*/_react.default.createElement(Member, {
-      key: slotName,
-      slotName: slotName,
-      slotSchema: slotSchema,
-      path: path,
-      schema: schema
-    });
-  });
+var Schema = (0, mobx_react_1.observer)(function (_a) {
+    var schema = _a.schema, _b = _a.path, path = _b === void 0 ? [] : _b;
+    var properties = (0, mobx_state_tree_1.getMembers)(schema).properties;
+    return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(properties).map(function (_a) {
+        var _b = __read(_a, 2), slotName = _b[0], slotSchema = _b[1];
+        return (react_1.default.createElement(Member, { key: slotName, slotName: slotName, slotSchema: slotSchema, path: path, schema: schema }));
+    })));
 });
-var ConfigurationEditor = (0, _mobxReact.observer)(function (_ref4) {
-  var model = _ref4.model;
-  var 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
-
-  var key = model.target && (0, _configuration.readConfObject)(model.target, 'trackId');
-  var name = model.target && (0, _configuration.readConfObject)(model.target, 'name');
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Accordion, {
-    key: key,
-    defaultExpanded: true,
-    className: classes.accordion,
-    TransitionProps: {
-      unmountOnExit: true,
-      timeout: 150
-    }
-  }, /*#__PURE__*/_react.default.createElement(_core.AccordionSummary, {
-    expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, {
-      className: classes.expandIcon
-    })
-  }, /*#__PURE__*/_react.default.createElement(_core.Typography, null, name ? name : 'Configuration')), /*#__PURE__*/_react.default.createElement(_core.AccordionDetails, {
-    className: classes.expansionPanelDetails,
-    "data-testid": "configEditor"
-  }, !model.target ? 'no target set' : /*#__PURE__*/_react.default.createElement(Schema, {
-    schema: model.target
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: 300
-    }
-  }));
+var ConfigurationEditor = (0, mobx_react_1.observer)(function (_a) {
+    var model = _a.model;
+    var classes = useStyles().classes;
+    // 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
+    var target = model.target;
+    var key = target && (0, configuration_1.readConfObject)(target, 'trackId');
+    var name = target && (0, configuration_1.readConfObject)(target, 'name');
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.Accordion, { key: key, defaultExpanded: true, className: classes.accordion },
+            react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
+                react_1.default.createElement(material_1.Typography, null, name !== null && name !== void 0 ? name : 'Configuration')),
+            react_1.default.createElement(material_1.AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor" }, !target ? 'no target set' : react_1.default.createElement(Schema, { schema: target }))),
+        react_1.default.createElement("div", { style: { height: 300 } })));
 });
-var _default = ConfigurationEditor;
-exports.default = _default;
+exports.default = ConfigurationEditor;
+//# sourceMappingURL=ConfigurationEditor.js.map

package/dist/ConfigurationEditorWidget/components/ConfigurationEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx"],"names":[],"mappings":"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"}

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

@@ -1,9 +1,11 @@
-declare function _default({ slot }: {
-    slot: any;
+/// <reference types="react" />
+declare function JsonEditor({ slot, }: {
+    slot: {
+        name: string;
+        description: string;
+        value: unknown;
+        set: (arg: unknown) => void;
+    };
 }): JSX.Element;
-declare namespace _default {
-    namespace propTypes {
-        const slot: import("prop-types").Validator<any>;
-    }
-}
+declare const _default: typeof JsonEditor;
 export default _default;

package/dist/ConfigurationEditorWidget/components/JsonEditor.js

@@ -1,82 +1,97 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _util = require("@jbrowse/core/util");
-
-var _core = require("@material-ui/core");
-
-var _mobxReact = require("mobx-react");
-
-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 || (0, _typeof2.default)(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 useStyles = (0, _core.makeStyles)({
-  error: {
-    color: 'red',
-    fontSize: '0.8em'
-  }
-});
-var CodeEditor = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./CodeEditor'));
-  });
+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;
 });
-
-function JsonEditor(_ref) {
-  var slot = _ref.slot;
-  var classes = useStyles();
-
-  var _useState = (0, _react.useState)(JSON.stringify(slot.value, null, '  ')),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      contents = _useState2[0],
-      setContents = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
-
-  var debouncedJson = (0, _util.useDebounce)(contents, 400);
-  (0, _react.useEffect)(function () {
+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 {
-      slot.set(JSON.parse(debouncedJson));
-      setError(undefined);
-    } catch (e) {
-      setError(e.message);
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
     }
-  }, [debouncedJson, slot]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, error ? /*#__PURE__*/_react.default.createElement("p", {
-    className: classes.error
-  }, error) : null, /*#__PURE__*/_react.default.createElement(_core.FormControl, {
-    error: error
-  }, /*#__PURE__*/_react.default.createElement(_core.InputLabel, {
-    shrink: true,
-    htmlFor: "callback-editor"
-  }, slot.name), /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
-    fallback: /*#__PURE__*/_react.default.createElement("div", null)
-  }, /*#__PURE__*/_react.default.createElement(CodeEditor, {
-    contents: contents,
-    setContents: setContents
-  })), /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description)));
-}
-
-JsonEditor.propTypes = {
-  slot: _mobxReact.PropTypes.objectOrObservableObject.isRequired
+    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 _default = (0, _mobxReact.observer)(JsonEditor);
-
-exports.default = _default;
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var material_1 = require("@mui/material");
+var mui_1 = require("tss-react/mui");
+var mobx_react_1 = require("mobx-react");
+// fontSize and fontFamily have to match between Editor and SyntaxHighlighter
+var fontSize = '12px';
+// Optimize by using system default fonts: https://css-tricks.com/snippets/css/font-stacks/
+var 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';
+var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+    callbackEditor: {
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        background: theme.palette.background.default,
+        width: 800,
+        marginTop: '16px',
+        border: '1px solid rgba(0,0,0,0.42)',
+    },
+    callbackContainer: {
+        width: '100%',
+        overflowX: 'auto',
+    },
+    textAreaFont: {
+        fontFamily: fontFamily,
+    },
+}); });
+function JsonEditor(_a) {
+    var slot = _a.slot;
+    var classes = useStyles().classes;
+    var _b = __read((0, react_1.useState)(JSON.stringify(slot.value, null, 2)), 2), contents = _b[0], setContents = _b[1];
+    var _c = __read((0, react_1.useState)(), 2), error = _c[0], setError = _c[1];
+    (0, react_1.useEffect)(function () {
+        try {
+            setError(undefined);
+            slot.set(JSON.parse(contents));
+        }
+        catch (e) {
+            console.error({ e: e });
+            setError(e);
+        }
+    }, [contents, slot]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        error ? react_1.default.createElement("p", { className: classes.error }, "".concat(error)) : null,
+        react_1.default.createElement("div", { className: classes.callbackContainer },
+            react_1.default.createElement(material_1.InputLabel, { shrink: true, htmlFor: "json-editor" }, slot.name),
+            react_1.default.createElement(material_1.TextField, { id: "json-editor", className: classes.callbackEditor, value: contents, helperText: slot.description, multiline: true, onChange: function (event) { return setContents(event.target.value); }, style: { background: error ? '#fdd' : undefined }, InputProps: {
+                    classes: {
+                        input: classes.textAreaFont,
+                    },
+                } }))));
+}
+exports.default = (0, mobx_react_1.observer)(JsonEditor);
+//# sourceMappingURL=JsonEditor.js.map

package/dist/ConfigurationEditorWidget/components/JsonEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/JsonEditor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAClD,0CAAqD;AACrD,qCAA0C;AAC1C,yCAAqC;AAErC,6EAA6E;AAC7E,IAAM,QAAQ,GAAG,MAAM,CAAA;AACvB,2FAA2F;AAC3F,IAAM,UAAU,GACd,sNAAsN,CAAA;AAExN,IAAM,SAAS,GAAG,IAAA,gBAAU,GAAE,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC;IACvC,KAAK,EAAE;QACL,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,OAAO;KAClB;IACD,cAAc,EAAE;QACd,UAAU,YAAA;QACV,QAAQ,UAAA;QACR,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QAC5C,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,4BAA4B;KACrC;IACD,iBAAiB,EAAE;QACjB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,MAAM;KAClB;IACD,YAAY,EAAE;QACZ,UAAU,YAAA;KACX;CACF,CAAC,EApBsC,CAoBtC,CAAC,CAAA;AAEH,SAAS,UAAU,CAAC,EASnB;QARC,IAAI,UAAA;IASI,IAAA,OAAO,GAAK,SAAS,EAAE,QAAhB,CAAgB;IACzB,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAA,EAAtE,QAAQ,QAAA,EAAE,WAAW,QAAiD,CAAA;IACvE,IAAA,KAAA,OAAoB,IAAA,gBAAQ,GAAW,IAAA,EAAtC,KAAK,QAAA,EAAE,QAAQ,QAAuB,CAAA;IAE7C,IAAA,iBAAS,EAAC;QACR,IAAI;YACF,QAAQ,CAAC,SAAS,CAAC,CAAA;YACnB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;SAC/B;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAA,EAAE,CAAC,CAAA;YACpB,QAAQ,CAAC,CAAC,CAAC,CAAA;SACZ;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAA;IAEpB,OAAO,CACL;QACG,KAAK,CAAC,CAAC,CAAC,qCAAG,SAAS,EAAE,OAAO,CAAC,KAAK,IAAG,UAAG,KAAK,CAAE,CAAK,CAAC,CAAC,CAAC,IAAI;QAC7D,uCAAK,SAAS,EAAE,OAAO,CAAC,iBAAiB;YACvC,8BAAC,qBAAU,IAAC,MAAM,QAAC,OAAO,EAAC,aAAa,IACrC,IAAI,CAAC,IAAI,CACC;YACb,8BAAC,oBAAS,IACR,EAAE,EAAC,aAAa,EAChB,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,KAAK,EAAE,QAAQ,EACf,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,QACT,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAA/B,CAA+B,EAClD,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,EACjD,UAAU,EAAE;oBACV,OAAO,EAAE;wBACP,KAAK,EAAE,OAAO,CAAC,YAAY;qBAC5B;iBACF,GACD,CACE,CACL,CACJ,CAAA;AACH,CAAC;AAED,kBAAe,IAAA,qBAAQ,EAAC,UAAU,CAAC,CAAA"}

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

@@ -1,6 +1,18 @@
-export const useSlotEditorStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"paper" | "paperContent" | "slotModeSwitch">;
-export default SlotEditor;
-declare function SlotEditor({ slot, slotSchema }: {
+/// <reference types="react" />
+import { IAnyType } from 'mobx-state-tree';
+export declare const useSlotEditorStyles: (params: void, styleOverrides?: {
+    props: {
+        classes?: Record<string, string> | undefined;
+    } & Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"paper" | "paperContent" | "slotModeSwitch", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react/types").Css;
+    cx: import("tss-react/types").Cx;
+};
+declare const SlotEditor: ({ slot, slotSchema }: {
     slot: any;
-    slotSchema: any;
-}): JSX.Element;
+    slotSchema: IAnyType;
+}) => JSX.Element;
+export default SlotEditor;