@jbrowse/plugin-config 1.7.10 → 2.0.1

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

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

package/dist/ConfigurationEditorWidget/components/CallbackEditor.js

@@ -1,123 +1,116 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _util = require("@jbrowse/core/util");
-
-var _jexlStrings = require("@jbrowse/core/util/jexlStrings");
-
-var _core = require("@material-ui/core");
-
-var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _mobxReact = require("mobx-react");
-
-var _reactSimpleCodeEditor = _interopRequireDefault(require("react-simple-code-editor"));
-
-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; }
-
-// 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, _core.makeStyles)(function (theme) {
-  return {
-    callbackEditor: {
-      marginTop: '16px',
-      borderBottom: "1px solid ".concat(theme.palette.divider),
-      fontFamily: fontFamily,
-      fontSize: fontSize
+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 CallbackEditor(_ref) {
-  var slot = _ref.slot;
-  var classes = useStyles();
-
-  var _useState = (0, _react.useState)(slot.value),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      code = _useState2[0],
-      setCode = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      error = _useState4[0],
-      setCodeError = _useState4[1];
-
-  var debouncedCode = (0, _util.useDebounce)(code, 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 {
-      var _getEnv$pluginManager;
-
-      var jexlDebouncedCode = debouncedCode.startsWith('jexl:') ? debouncedCode : "jexl:".concat(debouncedCode);
-      (0, _jexlStrings.stringToJexlExpression)(jexlDebouncedCode, (_getEnv$pluginManager = (0, _mobxStateTree.getEnv)(slot).pluginManager) === null || _getEnv$pluginManager === void 0 ? void 0 : _getEnv$pluginManager.jexl);
-      slot.set(jexlDebouncedCode);
-      setCodeError(null);
-    } catch (e) {
-      console.error({
-        e: e
-      });
-      setCodeError(e);
+        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; }
     }
-  }, [debouncedCode, slot]); // if default value is a callback, will have to remove jexl:
-  // do this last
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.FormControl, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, {
-    shrink: true,
-    htmlFor: "callback-editor"
-  }, slot.name), /*#__PURE__*/_react.default.createElement(_reactSimpleCodeEditor.default, {
-    className: classes.callbackEditor,
-    value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code,
-    onValueChange: function onValueChange(newCode) {
-      return setCode(newCode);
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var util_1 = require("@jbrowse/core/util");
+var jexlStrings_1 = require("@jbrowse/core/util/jexlStrings");
+var material_1 = require("@mui/material");
+var mui_1 = require("tss-react/mui");
+var Help_1 = __importDefault(require("@mui/icons-material/Help"));
+var mobx_state_tree_1 = require("mobx-state-tree");
+var mobx_react_1 = require("mobx-react");
+// 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 ({
+    callbackEditor: {
+        marginTop: '16px',
+        borderBottom: "1px solid ".concat(theme.palette.divider),
+        fontFamily: fontFamily,
     },
-    highlight: function highlight(newCode) {
-      return newCode;
+    textAreaFont: {
+        fontFamily: fontFamily,
     },
-    padding: 10,
-    style: {
-      background: error ? '#fdd' : undefined
-    }
-  }), error ? /*#__PURE__*/_react.default.createElement(_core.FormHelperText, {
-    style: {
-      color: '#f00'
-    }
-  }, "".concat(error)) : null, /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description)), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
-    title: /*#__PURE__*/_react.default.createElement("div", null, "Callbacks are written in Jexl format. Click to learn more.", /*#__PURE__*/_react.default.createElement("br", null), " Names of available context items: ", slot.contextVariable),
-    arrow: true
-  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    color: "primary",
-    onClick: function onClick() {
-      var newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
-
-      if (newWindow) {
-        newWindow.opener = null;
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Help.default, null))));
+}); });
+function CallbackEditor(_a) {
+    var slot = _a.slot;
+    var classes = useStyles().classes;
+    var _b = __read((0, react_1.useState)(slot.value), 2), code = _b[0], setCode = _b[1];
+    var _c = __read((0, react_1.useState)(), 2), error = _c[0], setCodeError = _c[1];
+    var debouncedCode = (0, util_1.useDebounce)(code, 400);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        try {
+            var jexlDebouncedCode = debouncedCode.startsWith('jexl:')
+                ? debouncedCode
+                : "jexl:".concat(debouncedCode);
+            if (jexlDebouncedCode === 'jexl:') {
+                throw new Error('Empty jexl expression is not valid');
+            }
+            (0, jexlStrings_1.stringToJexlExpression)(jexlDebouncedCode, (_a = (0, mobx_state_tree_1.getEnv)(slot).pluginManager) === null || _a === void 0 ? void 0 : _a.jexl);
+            slot.set(jexlDebouncedCode);
+            setCodeError(undefined);
+        }
+        catch (e) {
+            console.error({ e: e });
+            setCodeError(e);
+        }
+    }, [debouncedCode, slot]);
+    // if default value is a callback, will have to remove jexl:
+    // do this last
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.FormControl, null,
+            react_1.default.createElement(material_1.InputLabel, { shrink: true, htmlFor: "callback-editor" }, slot.name),
+            react_1.default.createElement(material_1.TextField, { multiline: true, className: classes.callbackEditor, value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code, onChange: function (event) { return setCode(event.target.value); }, style: { background: error ? '#fdd' : undefined }, InputProps: {
+                    classes: {
+                        input: classes.textAreaFont,
+                    },
+                } }),
+            error ? (react_1.default.createElement(material_1.FormHelperText, { style: { color: '#f00' } }, "".concat(error))) : null,
+            react_1.default.createElement(material_1.FormHelperText, null, slot.description)),
+        react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement("div", null,
+                "Callbacks are written in Jexl format. Click to learn more.",
+                react_1.default.createElement("br", null),
+                " Names of available context items: ",
+                slot.contextVariable), arrow: true },
+            react_1.default.createElement(material_1.IconButton, { color: "primary", onClick: function () {
+                    var newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
+                    if (newWindow) {
+                        newWindow.opener = null;
+                    }
+                } },
+                react_1.default.createElement(Help_1.default, null)))));
 }
-
-CallbackEditor.propTypes = {
-  slot: _mobxReact.PropTypes.objectOrObservableObject.isRequired
-};
-
-var _default = (0, _mobxReact.observer)(CallbackEditor);
-
-exports.default = _default;
+exports.default = (0, mobx_react_1.observer)(CallbackEditor);
+//# sourceMappingURL=CallbackEditor.js.map

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

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

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

@@ -1,4 +1,5 @@
-export default function CodeEditor({ contents, setContents }: {
-    contents: any;
-    setContents: any;
+/// <reference types="react" />
+export default function CodeEditor({ contents, setContents, }: {
+    contents: string;
+    setContents: (arg: string) => void;
 }): JSX.Element;

package/dist/ConfigurationEditorWidget/components/CodeEditor.js

@@ -1,80 +1,85 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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.default = CodeEditor;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactSimpleCodeEditor = _interopRequireDefault(require("react-simple-code-editor"));
-
-var _reactSyntaxHighlighter = require("react-syntax-highlighter");
-
-var _json = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/hljs/json"));
-
-var _a11yDark = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/styles/hljs/a11y-dark"));
-
-var _a11yLight = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/styles/hljs/a11y-light"));
-
-var _core = require("@material-ui/core");
-
-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;
+};
+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");
 // 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 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, _core.makeStyles)(function (theme) {
-  return {
+var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
     callbackEditor: {
-      fontFamily: fontFamily,
-      fontSize: fontSize,
-      background: theme.palette.background.default,
-      overflowX: 'auto',
-      marginTop: '16px',
-      border: '1px solid rgba(0,0,0,0.42)'
+        fontFamily: fontFamily,
+        fontSize: fontSize,
+        background: theme.palette.background.default,
+        overflowX: 'auto',
+        marginTop: '16px',
+        border: '1px solid rgba(0,0,0,0.42)',
     },
-    syntaxHighlighter: {
-      margin: 0,
-      fontFamily: fontFamily,
-      fontSize: fontSize
-    }
-  };
-}); // eslint-disable-next-line react/prop-types
-
-function CodeEditor(_ref) {
-  var contents = _ref.contents,
-      setContents = _ref.setContents;
-  var classes = useStyles();
-  var theme = (0, _core.useTheme)();
-  (0, _react.useEffect)(function () {
-    _reactSyntaxHighlighter.Light.registerLanguage('json', _json.default);
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_reactSimpleCodeEditor.default, {
-    className: classes.callbackEditor,
-    value: contents,
-    onValueChange: setContents,
-    highlight: function highlight(newCode) {
-      return /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.Light, {
-        language: "json",
-        style: theme.palette.type === 'dark' ? _a11yDark.default : _a11yLight.default,
-        className: classes.syntaxHighlighter // override some inline style stuff that's higher specificity
-        // than className
-        ,
-        customStyle: {
-          background: 'none',
-          padding: 0
-        }
-      }, newCode);
+    textAreaFont: {
+        fontFamily: fontFamily,
     },
-    padding: 10,
-    style: {}
-  });
-}
+}); });
+function CodeEditor(_a) {
+    var contents = _a.contents, setContents = _a.setContents;
+    var classes = useStyles().classes;
+    var _b = __read((0, react_1.useState)(), 2), error = _b[0], setCodeError = _b[1];
+    var _c = __read((0, react_1.useState)(contents), 2), val = _c[0], setVal = _c[1];
+    (0, react_1.useEffect)(function () {
+        try {
+            JSON.parse(contents);
+            setCodeError(undefined);
+            setContents(val);
+        }
+        catch (e) {
+            console.error({ e: e });
+            setCodeError(e);
+        }
+    }, [val, contents, setContents]);
+    return (react_1.default.createElement(material_1.TextField, { className: classes.callbackEditor, value: contents, onChange: function (event) { return setVal(event.target.value); }, style: { background: error ? '#fdd' : undefined }, InputProps: {
+            classes: {
+                input: classes.textAreaFont,
+            },
+        } }));
+}
+exports.default = CodeEditor;
+//# sourceMappingURL=CodeEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/CodeEditor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAClD,0CAAyC;AACzC,qCAA0C;AAE1C,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,cAAc,EAAE;QACd,UAAU,YAAA;QACV,QAAQ,UAAA;QACR,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QAC5C,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,4BAA4B;KACrC;IACD,YAAY,EAAE;QACZ,UAAU,YAAA;KACX;CACF,CAAC,EAZsC,CAYtC,CAAC,CAAA;AAEH,SAAwB,UAAU,CAAC,EAMlC;QALC,QAAQ,cAAA,EACR,WAAW,iBAAA;IAKH,IAAA,OAAO,GAAK,SAAS,EAAE,QAAhB,CAAgB;IACzB,IAAA,KAAA,OAAwB,IAAA,gBAAQ,GAAW,IAAA,EAA1C,KAAK,QAAA,EAAE,YAAY,QAAuB,CAAA;IAC3C,IAAA,KAAA,OAAgB,IAAA,gBAAQ,EAAC,QAAQ,CAAC,IAAA,EAAjC,GAAG,QAAA,EAAE,MAAM,QAAsB,CAAA;IACxC,IAAA,iBAAS,EAAC;QACR,IAAI;YACF,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;YACpB,YAAY,CAAC,SAAS,CAAC,CAAA;YACvB,WAAW,CAAC,GAAG,CAAC,CAAA;SACjB;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAA,EAAE,CAAC,CAAA;YACpB,YAAY,CAAC,CAAC,CAAC,CAAA;SAChB;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,8BAAC,oBAAS,IACR,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAA1B,CAA0B,EAC7C,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,EACjD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,KAAK,EAAE,OAAO,CAAC,YAAY;aAC5B;SACF,GACD,CACH,CAAA;AACH,CAAC;AAlCD,6BAkCC"}

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

@@ -1,27 +1,13 @@
 /// <reference types="react" />
-import ReactPropTypes from 'prop-types';
-export declare const ColorSlot: {
-    (props: {
-        value: string;
-        label: string;
-        TextFieldProps: {
-            helperText: string;
-            fullWidth: boolean;
-        };
-        onChange: (arg: string) => void;
-    }): JSX.Element;
-    propTypes: {
-        onChange: ReactPropTypes.Validator<(...args: any[]) => any>;
-        label: ReactPropTypes.Requireable<string>;
-        TextFieldProps: ReactPropTypes.Requireable<ReactPropTypes.InferProps<{}>>;
-        value: ReactPropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        label: string;
-        value: string;
-        TextFieldProps: {};
-    };
-};
+export declare const ColorSlot: (props: {
+    value: string;
+    label?: string | undefined;
+    TextFieldProps?: {
+        helperText: string;
+        fullWidth: boolean;
+    } | undefined;
+    onChange: (arg: string) => void;
+}) => JSX.Element;
 declare function ColorEditorSlot(props: {
     slot: {
         name: string;
@@ -30,15 +16,5 @@ declare function ColorEditorSlot(props: {
         set: (arg: string) => void;
     };
 }): JSX.Element;
-declare namespace ColorEditorSlot {
-    var propTypes: {
-        slot: ReactPropTypes.Validator<ReactPropTypes.InferProps<{
-            name: ReactPropTypes.Validator<string>;
-            description: ReactPropTypes.Requireable<string>;
-            value: ReactPropTypes.Validator<string>;
-            set: ReactPropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-    };
-}
 declare const _default: typeof ColorEditorSlot;
 export default _default;