@jbrowse/plugin-config 1.4.4 → 1.5.0

package/dist/plugin-config.cjs.development.js

@@ -19,10 +19,7 @@ var rxjs = require('@jbrowse/core/util/rxjs');
 var operators = require('rxjs/operators');
 var io = require('@jbrowse/core/util/io');
 var util = require('@jbrowse/core/util');
-var FormControl = _interopDefault(require('@material-ui/core/FormControl'));
-var FormHelperText = _interopDefault(require('@material-ui/core/FormHelperText'));
-var InputLabel = _interopDefault(require('@material-ui/core/InputLabel'));
-var styles = require('@material-ui/core/styles');
+var core = require('@material-ui/core');
 var Editor = _interopDefault(require('react-simple-code-editor'));
 var reactSyntaxHighlighter = require('react-syntax-highlighter');
 var json = _interopDefault(require('react-syntax-highlighter/dist/cjs/languages/hljs/json'));
@@ -30,22 +27,25 @@ var a11yDark = _interopDefault(require('react-syntax-highlighter/dist/cjs/styles
 var a11yLight = _interopDefault(require('react-syntax-highlighter/dist/cjs/styles/hljs/a11y-light'));
 var FormGroup = _interopDefault(require('@material-ui/core/FormGroup'));
 var FormLabel = _interopDefault(require('@material-ui/core/FormLabel'));
+var styles = require('@material-ui/core/styles');
 var pluralize = require('pluralize');
 var ui = require('@jbrowse/core/ui');
 var mstReflection = require('@jbrowse/core/util/mst-reflection');
-var core = require('@material-ui/core');
 var DeleteIcon = _interopDefault(require('@material-ui/icons/Delete'));
 var AddIcon = _interopDefault(require('@material-ui/icons/Add'));
 var RadioButtonUncheckedIcon = _interopDefault(require('@material-ui/icons/RadioButtonUnchecked'));
 var jexlStrings = require('@jbrowse/core/util/jexlStrings');
+var FormControl = _interopDefault(require('@material-ui/core/FormControl'));
+var FormHelperText = _interopDefault(require('@material-ui/core/FormHelperText'));
+var InputLabel = _interopDefault(require('@material-ui/core/InputLabel'));
 var Tooltip = _interopDefault(require('@material-ui/core/Tooltip'));
 var IconButton = _interopDefault(require('@material-ui/core/IconButton'));
 var HelpIcon = _interopDefault(require('@material-ui/icons/Help'));
 var ReactPropTypes = _interopDefault(require('prop-types'));
 var TextField = _interopDefault(require('@material-ui/core/TextField'));
-var reactColor = require('react-color');
 var MenuItem = _interopDefault(require('@material-ui/core/MenuItem'));
 var Paper = _interopDefault(require('@material-ui/core/Paper'));
+var reactColor = require('react-color');
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -231,6 +231,8 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -555,11 +557,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
 
 
     var IteratorPrototype = {};
-
-    IteratorPrototype[iteratorSymbol] = function () {
+    define(IteratorPrototype, iteratorSymbol, function () {
       return this;
-    };
-
+    });
     var getProto = Object.getPrototypeOf;
     var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
 
@@ -570,8 +570,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-    GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
-    GeneratorFunctionPrototype.constructor = GeneratorFunction;
+    GeneratorFunction.prototype = GeneratorFunctionPrototype;
+    define(Gp, "constructor", GeneratorFunctionPrototype);
+    define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
     GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"); // Helper for defining the .next, .throw, and .return methods of the
     // Iterator interface in terms of a single ._invoke method.
 
@@ -676,11 +677,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     defineIteratorMethods(AsyncIterator.prototype);
-
-    AsyncIterator.prototype[asyncIteratorSymbol] = function () {
+    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
       return this;
-    };
-
+    });
     exports.AsyncIterator = AsyncIterator; // Note that simple async functions are implemented on top of
     // AsyncIterator objects; they just return a Promise for the value of
     // the final result produced by the iterator.
@@ -857,13 +856,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     // object to not be returned from this call. This ensures that doesn't happen.
     // See https://github.com/facebook/regenerator/issues/274 for more details.
 
-    Gp[iteratorSymbol] = function () {
+    define(Gp, iteratorSymbol, function () {
       return this;
-    };
-
-    Gp.toString = function () {
+    });
+    define(Gp, "toString", function () {
       return "[object Generator]";
-    };
+    });
 
     function pushTryEntry(locs) {
       var entry = {
@@ -1175,14 +1173,19 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   } catch (accidentalStrictMode) {
     // This module should not be running in strict mode, so the above
     // assignment should always work unless something is misconfigured. Just
-    // in case runtime.js accidentally runs in strict mode, we can escape
+    // in case runtime.js accidentally runs in strict mode, in modern engines
+    // we can explicitly access globalThis. In older engines we can escape
     // strict mode using a global Function call. This could conceivably fail
     // if a Content Security Policy forbids using Function, but in that case
     // the proper solution is to fix the accidental strict mode problem. If
     // you've misconfigured your bundler to force strict mode and applied a
     // CSP to forbid Function, and you're not willing to fix either of those
     // problems, please detail your unique predicament in a GitHub issue.
-    Function("r", "regeneratorRuntime = r")(runtime);
+    if (typeof globalThis === "object") {
+      globalThis.regeneratorRuntime = runtime;
+    } else {
+      Function("r", "regeneratorRuntime = r")(runtime);
+    }
   }
 });
 
@@ -1197,12 +1200,12 @@ var FromConfigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
 
   var _super = /*#__PURE__*/_createSuper(FromConfigAdapter);
 
-  function FromConfigAdapter(conf) {
+  function FromConfigAdapter(conf, getSubAdapter, pluginManager) {
     var _this;
 
     _classCallCheck(this, FromConfigAdapter);
 
-    _this = _super.call(this, conf);
+    _this = _super.call(this, conf, getSubAdapter, pluginManager);
     var feats = configuration.readConfObject(conf, 'features');
     _this.features = FromConfigAdapter.makeFeatures(feats || []);
     return _this;
@@ -1303,9 +1306,7 @@ var FromConfigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
     }
   }, {
     key: "freeResources",
-    value: function freeResources()
-    /* { region } */
-    {}
+    value: function freeResources() {}
   }], [{
     key: "makeFeatures",
     value: function makeFeatures(fdata) {
@@ -1366,12 +1367,12 @@ var FromConfigRegionsAdapter = /*#__PURE__*/function (_BaseAdapter) {
 
   var _super = /*#__PURE__*/_createSuper(FromConfigRegionsAdapter);
 
-  function FromConfigRegionsAdapter(config) {
+  function FromConfigRegionsAdapter(config, getSubAdapter, pluginManager) {
     var _this;
 
     _classCallCheck(this, FromConfigRegionsAdapter);
 
-    _this = _super.call(this, config);
+    _this = _super.call(this, config, getSubAdapter, pluginManager);
     var features = configuration.readConfObject(config, 'features');
     _this.features = FromConfigAdapter.makeFeatures(features || []);
     return _this;
@@ -1457,26 +1458,24 @@ var FromConfigRegionsAdapter = /*#__PURE__*/function (_BaseAdapter) {
     }()
   }, {
     key: "freeResources",
-    value: function freeResources()
-    /* { region } */
-    {}
+    value: function freeResources() {}
   }]);
 
   return FromConfigRegionsAdapter;
 }(BaseAdapter.BaseAdapter);
 
-var FromSequenceConfigAdapter = /*#__PURE__*/function (_FromConfigAdapter) {
-  _inherits(FromSequenceConfigAdapter, _FromConfigAdapter);
+var FromConfigSequenceAdapter = /*#__PURE__*/function (_FromConfigAdapter) {
+  _inherits(FromConfigSequenceAdapter, _FromConfigAdapter);
 
-  var _super = /*#__PURE__*/_createSuper(FromSequenceConfigAdapter);
+  var _super = /*#__PURE__*/_createSuper(FromConfigSequenceAdapter);
 
-  function FromSequenceConfigAdapter() {
-    _classCallCheck(this, FromSequenceConfigAdapter);
+  function FromConfigSequenceAdapter() {
+    _classCallCheck(this, FromConfigSequenceAdapter);
 
     return _super.apply(this, arguments);
   }
 
-  _createClass(FromSequenceConfigAdapter, [{
+  _createClass(FromConfigSequenceAdapter, [{
     key: "getFeatures",
     value:
     /**
@@ -1491,7 +1490,7 @@ var FromSequenceConfigAdapter = /*#__PURE__*/function (_FromConfigAdapter) {
       // xref: https://github.com/rollup/rollup/blob/master/CHANGELOG.md#bug-fixes-45
       // return ObservableCreate<Feature>(async observer => {
       //   const feats = await super.getFeatures(region).pipe(toArray()).toPromise()
-      var superGetFeatures = _get(_getPrototypeOf(FromSequenceConfigAdapter.prototype), "getFeatures", this);
+      var superGetFeatures = _get(_getPrototypeOf(FromConfigSequenceAdapter.prototype), "getFeatures", this);
 
       return rxjs.ObservableCreate( /*#__PURE__*/function () {
         var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(observer) {
@@ -1578,20 +1577,16 @@ var FromSequenceConfigAdapter = /*#__PURE__*/function (_FromConfigAdapter) {
                     if (currentRegion) {
                       regions.push(currentRegion);
                     }
-                  } // sort the regions by refName
-
+                  }
                 } catch (err) {
                   _iterator.e(err);
                 } finally {
                   _iterator.f();
                 }
 
-                regions.sort(function (a, b) {
-                  return a.refName.localeCompare(b.refName);
-                });
                 return _context2.abrupt("return", regions);
 
-              case 5:
+              case 4:
               case "end":
                 return _context2.stop();
             }
@@ -1613,12 +1608,10 @@ var FromSequenceConfigAdapter = /*#__PURE__*/function (_FromConfigAdapter) {
 
   }, {
     key: "freeResources",
-    value: function freeResources()
-    /* { region } */
-    {}
+    value: function freeResources() {}
   }]);
 
-  return FromSequenceConfigAdapter;
+  return FromConfigSequenceAdapter;
 }(FromConfigAdapter);
 
 var configSchema$1 = /*#__PURE__*/configuration.ConfigurationSchema('FromConfigAdapter', {
@@ -1666,13 +1659,13 @@ var RefNameAliasAdapter = /*#__PURE__*/function (_BaseAdapter) {
 
   var _super = /*#__PURE__*/_createSuper(RefNameAliasAdapter);
 
-  function RefNameAliasAdapter(config) {
+  function RefNameAliasAdapter(config, getSubAdapter, pluginManager) {
     var _this;
 
     _classCallCheck(this, RefNameAliasAdapter);
 
-    _this = _super.call(this, config);
-    _this.location = io.openLocation(configuration.readConfObject(config, 'location'));
+    _this = _super.call(this, config, getSubAdapter, pluginManager);
+    _this.location = io.openLocation(configuration.readConfObject(config, 'location'), _this.pluginManager);
     _this.promise = _this.downloadResults();
     return _this;
   }
@@ -1752,41 +1745,27 @@ var refNameAliasAdapterConfigSchema = /*#__PURE__*/configuration.ConfigurationSc
   location: {
     type: 'fileLocation',
     defaultValue: {
-      uri: '/path/to/my/aliases.txt'
+      uri: '/path/to/my/aliases.txt',
+      locationType: 'UriLocation'
     }
   }
 }, {
   explicitlyTyped: true
 });
 
-reactSyntaxHighlighter.Light.registerLanguage('json', json); // 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 = /*#__PURE__*/styles.makeStyles({
-  callbackEditor: {
-    fontFamily: fontFamily,
-    fontSize: fontSize,
-    overflowX: 'auto',
-    marginTop: '16px',
-    borderBottom: '1px solid rgba(0,0,0,0.42)'
-  },
-  syntaxHighlighter: {
-    margin: 0,
-    fontFamily: fontFamily,
-    fontSize: fontSize
-  },
+var useStyles = /*#__PURE__*/core.makeStyles({
   error: {
     color: 'red',
     fontSize: '0.8em'
   }
 });
+var CodeEditor = /*#__PURE__*/React.lazy(function () {
+  return Promise.resolve().then(function () { return CodeEditor$2; });
+});
 
 function JsonEditor(_ref) {
   var slot = _ref.slot;
   var classes = useStyles();
-  var theme = styles.useTheme();
 
   var _useState = React.useState(JSON.stringify(slot.value, null, '  ')),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1810,31 +1789,17 @@ function JsonEditor(_ref) {
   }, [debouncedJson]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, error ? /*#__PURE__*/React__default.createElement("p", {
     className: classes.error
-  }, error) : null, /*#__PURE__*/React__default.createElement(FormControl, {
+  }, error) : null, /*#__PURE__*/React__default.createElement(core.FormControl, {
     error: error
-  }, /*#__PURE__*/React__default.createElement(InputLabel, {
+  }, /*#__PURE__*/React__default.createElement(core.InputLabel, {
     shrink: true,
     htmlFor: "callback-editor"
-  }, slot.name), /*#__PURE__*/React__default.createElement(Editor, {
-    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 : a11yLight,
-        className: classes.syntaxHighlighter // override some inline style stuff that's higher specificity
-        // than className
-        ,
-        customStyle: {
-          background: 'none',
-          padding: 0
-        }
-      }, newCode);
-    },
-    padding: 10,
-    style: {}
-  }), /*#__PURE__*/React__default.createElement(FormHelperText, null, slot.description)));
+  }, 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 = {
@@ -1882,7 +1847,7 @@ var _default = /*#__PURE__*/function (_Plugin) {
         return new AdapterType({
           name: 'FromConfigSequenceAdapter',
           configSchema: sequenceConfigSchema,
-          AdapterClass: FromSequenceConfigAdapter
+          AdapterClass: FromConfigSequenceAdapter
         });
       });
       pluginManager.addAdapterType(function () {
@@ -1907,11 +1872,64 @@ var _default = /*#__PURE__*/function (_Plugin) {
   return _default;
 }(Plugin);
 
+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$1 = /*#__PURE__*/core.makeStyles({
+  callbackEditor: {
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    overflowX: 'auto',
+    marginTop: '16px',
+    borderBottom: '1px solid rgba(0,0,0,0.42)'
+  },
+  syntaxHighlighter: {
+    margin: 0,
+    fontFamily: fontFamily,
+    fontSize: fontSize
+  }
+}); // eslint-disable-next-line react/prop-types
+
+function CodeEditor$1(_ref) {
+  var contents = _ref.contents,
+      setContents = _ref.setContents;
+  var classes = useStyles$1();
+  var theme = core.useTheme();
+  React.useEffect(function () {
+    reactSyntaxHighlighter.Light.registerLanguage('json', json);
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Editor, {
+    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 : a11yLight,
+        className: classes.syntaxHighlighter // override some inline style stuff that's higher specificity
+        // than className
+        ,
+        customStyle: {
+          background: 'none',
+          padding: 0
+        }
+      }, newCode);
+    },
+    padding: 10,
+    style: {}
+  });
+}
+
+var CodeEditor$2 = {
+  __proto__: null,
+  'default': CodeEditor$1
+};
+
 var fontSize$1 = '12px'; // Optimize by using system default fonts:
 // https://css-tricks.com/snippets/css/font-stacks/
 
 var fontFamily$1 = '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$1 = /*#__PURE__*/styles.makeStyles(function (theme) {
+var useStyles$2 = /*#__PURE__*/styles.makeStyles(function (theme) {
   return {
     callbackEditor: {
       marginTop: '16px',
@@ -1924,7 +1942,7 @@ var useStyles$1 = /*#__PURE__*/styles.makeStyles(function (theme) {
 
 function CallbackEditor(_ref) {
   var slot = _ref.slot;
-  var classes = useStyles$1();
+  var classes = useStyles$2();
 
   var _useState = React.useState(slot.value),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1988,6 +2006,9 @@ CallbackEditor.propTypes = {
 };
 var CallbackEditor$1 = /*#__PURE__*/mobxReact.observer(CallbackEditor);
 
+var ColorPicker = /*#__PURE__*/React.lazy(function () {
+  return Promise.resolve().then(function () { return ColorPicker$2; });
+}); // this is needed because passing a entire color object into the react-color
 // for alpha, can't pass in an rgba string for example
 
 function serializeColor(color) {
@@ -2002,58 +2023,16 @@ function serializeColor(color) {
   return color;
 }
 
-var useStyles$2 = /*#__PURE__*/styles.makeStyles({
-  popover: {
-    position: 'absolute',
-    zIndex: 2
-  },
-  cover: {
-    position: 'fixed',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  }
-});
-function ColorPicker(props) {
-  var color = props.color,
-      onChange = props.onChange;
-  var classes = useStyles$2();
-
-  var _useState = React.useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      displayColorPicker = _useState2[0],
-      setDisplayColorPicker = _useState2[1];
-
-  var handleClose = function handleClose() {
-    setDisplayColorPicker(false);
-  };
-
-  return /*#__PURE__*/React__default.createElement("div", null, displayColorPicker ? /*#__PURE__*/React__default.createElement("div", {
-    className: classes.popover
-  }, /*#__PURE__*/React__default.createElement("div", {
-    role: "presentation",
-    className: classes.cover,
-    onClick: handleClose
-  }), /*#__PURE__*/React__default.createElement(reactColor.ChromePicker, {
-    color: color,
-    onChange: onChange
-  })) : null);
-}
-ColorPicker.propTypes = {
-  color: ReactPropTypes.string.isRequired,
-  onChange: ReactPropTypes.func.isRequired
-};
 var ColorSlot = function ColorSlot(props) {
   var value = props.value,
       label = props.label,
       TextFieldProps = props.TextFieldProps,
       _onChange = props.onChange;
 
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      displayed = _useState4[0],
-      setDisplayed = _useState4[1];
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      displayed = _useState2[0],
+      setDisplayed = _useState2[1];
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TextField, Object.assign({
     value: value,
@@ -2072,12 +2051,14 @@ var ColorSlot = function ColorSlot(props) {
     onChange: function onChange(event) {
       _onChange(event.target.value);
     }
-  }, TextFieldProps)), displayed ? /*#__PURE__*/React__default.createElement(ColorPicker, {
+  }, TextFieldProps)), displayed ? /*#__PURE__*/React__default.createElement(React__default.Suspense, {
+    fallback: /*#__PURE__*/React__default.createElement("div", null)
+  }, /*#__PURE__*/React__default.createElement(ColorPicker, {
     color: value,
     onChange: function onChange(event) {
       _onChange(serializeColor(event.rgb));
     }
-  }) : null);
+  })) : null);
 };
 ColorSlot.propTypes = {
   onChange: ReactPropTypes.func.isRequired,
@@ -2427,6 +2408,8 @@ var stringEnumEditor = /*#__PURE__*/mobxReact.observer(function (_ref13) {
   }));
 });
 var FileSelectorWrapper = /*#__PURE__*/mobxReact.observer(function (_ref14) {
+  var _getEnv$pluginManager;
+
   var slot = _ref14.slot;
   return /*#__PURE__*/React__default.createElement(ui.FileSelector, {
     location: slot.value,
@@ -2434,7 +2417,8 @@ var FileSelectorWrapper = /*#__PURE__*/mobxReact.observer(function (_ref14) {
       return slot.set(location);
     },
     name: slot.name,
-    description: slot.description
+    description: slot.description,
+    rootModel: (_getEnv$pluginManager = mobxStateTree.getEnv(slot).pluginManager) === null || _getEnv$pluginManager === void 0 ? void 0 : _getEnv$pluginManager.rootModel
   });
 });
 var valueComponents = {
@@ -2644,6 +2628,55 @@ var ConfigurationEditor$1 = {
   'default': ConfigurationEditor
 };
 
+var useStyles$4 = /*#__PURE__*/styles.makeStyles({
+  popover: {
+    position: 'absolute',
+    zIndex: 2
+  },
+  cover: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  }
+});
+function ColorPicker$1(props) {
+  var color = props.color,
+      onChange = props.onChange;
+  var classes = useStyles$4();
+
+  var _useState = React.useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      displayColorPicker = _useState2[0],
+      setDisplayColorPicker = _useState2[1];
+
+  var handleClose = function handleClose() {
+    setDisplayColorPicker(false);
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", null, displayColorPicker ? /*#__PURE__*/React__default.createElement("div", {
+    className: classes.popover
+  }, /*#__PURE__*/React__default.createElement("div", {
+    role: "presentation",
+    className: classes.cover,
+    onClick: handleClose
+  }), /*#__PURE__*/React__default.createElement(reactColor.ChromePicker, {
+    color: color,
+    onChange: onChange
+  })) : null);
+}
+ColorPicker$1.propTypes = {
+  color: ReactPropTypes.string.isRequired,
+  onChange: ReactPropTypes.func.isRequired
+};
+
+var ColorPicker$2 = {
+  __proto__: null,
+  ColorPicker: ColorPicker$1,
+  'default': ColorPicker$1
+};
+
 exports.ConfigurationEditor = ConfigurationEditorComponent;
 exports.JsonEditor = JsonEditor$1;
 exports.default = _default;