@jbrowse/plugin-config 1.6.9 → 1.7.3

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

@@ -1,9 +1,9 @@
-declare function _default({ slot }: {
-    slot: any;
-}): JSX.Element;
-declare namespace _default {
-    export namespace propTypes {
-        export const slot: import("prop-types").Validator<any>;
-    }
-}
-export default _default;
+declare function _default({ slot }: {
+    slot: any;
+}): JSX.Element;
+declare namespace _default {
+    namespace propTypes {
+        const slot: import("prop-types").Validator<any>;
+    }
+}
+export default _default;

package/dist/ConfigurationEditorWidget/components/CallbackEditor.js

@@ -0,0 +1,123 @@
+"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
+    }
+  };
+});
+
+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 () {
+    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);
+    }
+  }, [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);
+    },
+    highlight: function highlight(newCode) {
+      return newCode;
+    },
+    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))));
+}
+
+CallbackEditor.propTypes = {
+  slot: _mobxReact.PropTypes.objectOrObservableObject.isRequired
+};
+
+var _default = (0, _mobxReact.observer)(CallbackEditor);
+
+exports["default"] = _default;

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

@@ -1,4 +1,4 @@
-export default function CodeEditor({ contents, setContents }: {
-    contents: any;
-    setContents: any;
-}): JSX.Element;
+export default function CodeEditor({ contents, setContents }: {
+    contents: any;
+    setContents: any;
+}): JSX.Element;

package/dist/ConfigurationEditorWidget/components/CodeEditor.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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; }
+
+// 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)({
+  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(_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);
+    },
+    padding: 10,
+    style: {}
+  });
+}

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

@@ -1,44 +1,44 @@
-/// <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: {};
-    };
-};
-declare function ColorEditorSlot(props: {
-    slot: {
-        name: string;
-        value: string;
-        description: string;
-        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;
+/// <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: {};
+    };
+};
+declare function ColorEditorSlot(props: {
+    slot: {
+        name: string;
+        value: string;
+        description: string;
+        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;

package/dist/ConfigurationEditorWidget/components/ColorEditor.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ColorSlot = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+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 ColorPicker = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./ColorPicker'));
+  });
+}); // 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) {
+  if (color instanceof Object) {
+    var _ref = color,
+        r = _ref.r,
+        g = _ref.g,
+        b = _ref.b,
+        a = _ref.a;
+    return a === undefined ? "rgb(".concat(r, ",").concat(g, ",").concat(b, ")") : "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
+  }
+
+  return color;
+}
+
+var ColorSlot = function ColorSlot(props) {
+  var value = props.value,
+      label = props.label,
+      TextFieldProps = props.TextFieldProps,
+      _onChange = props.onChange;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      displayed = _useState2[0],
+      setDisplayed = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+    value: value,
+    label: label,
+    InputProps: {
+      style: {
+        color: value,
+        borderRightWidth: '25px',
+        borderRightStyle: 'solid',
+        borderRightColor: value
+      }
+    },
+    onClick: function onClick() {
+      return setDisplayed(!displayed);
+    },
+    onChange: function onChange(event) {
+      _onChange(event.target.value);
+    }
+  }, 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);
+};
+
+exports.ColorSlot = ColorSlot;
+ColorSlot.propTypes = {
+  onChange: _propTypes["default"].func.isRequired,
+  label: _propTypes["default"].string,
+  TextFieldProps: _propTypes["default"].shape({}),
+  value: _propTypes["default"].string
+};
+ColorSlot.defaultProps = {
+  label: '',
+  value: '#000',
+  TextFieldProps: {}
+};
+
+function ColorEditorSlot(props) {
+  var slot = props.slot;
+  return /*#__PURE__*/_react["default"].createElement(ColorSlot, {
+    label: slot.name,
+    value: slot.value,
+    onChange: function onChange(color) {
+      slot.set(color);
+    },
+    TextFieldProps: {
+      helperText: slot.description,
+      fullWidth: true
+    }
+  });
+}
+
+ColorEditorSlot.propTypes = {
+  slot: _propTypes["default"].shape({
+    name: _propTypes["default"].string.isRequired,
+    description: _propTypes["default"].string,
+    value: _propTypes["default"].string.isRequired,
+    set: _propTypes["default"].func.isRequired
+  }).isRequired
+};
+
+var _default = (0, _mobxReact.observer)(ColorEditorSlot);
+
+exports["default"] = _default;

package/dist/ConfigurationEditorWidget/components/ColorEditor.test.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ColorEditor = require("./ColorEditor");
+
+describe('ColorPicker widget', function () {
+  it('can change value via the text field', function () {
+    var myfn = jest.fn();
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorEditor.ColorSlot, {
+      value: "green",
+      onChange: myfn
+    })),
+        getByDisplayValue = _render.getByDisplayValue;
+
+    var ret = getByDisplayValue('green');
+
+    _react2.fireEvent.change(ret, {
+      target: {
+        value: 'red'
+      }
+    });
+
+    expect(myfn).toHaveBeenCalledWith('red');
+  });
+});

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

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import ReactPropTypes from 'prop-types';
-import { Color, ColorResult } from 'react-color';
-export declare function ColorPicker(props: {
-    color: Color;
-    onChange: (color: ColorResult) => void;
-}): JSX.Element;
-export declare namespace ColorPicker {
-    var propTypes: {
-        color: ReactPropTypes.Validator<string>;
-        onChange: ReactPropTypes.Validator<(...args: any[]) => any>;
-    };
-}
-export default ColorPicker;
+/// <reference types="react" />
+import ReactPropTypes from 'prop-types';
+import { Color, ColorResult } from 'react-color';
+export declare function ColorPicker(props: {
+    color: Color;
+    onChange: (color: ColorResult) => void;
+}): JSX.Element;
+export declare namespace ColorPicker {
+    var propTypes: {
+        color: ReactPropTypes.Validator<string>;
+        onChange: ReactPropTypes.Validator<(...args: any[]) => any>;
+    };
+}
+export default ColorPicker;

package/dist/ConfigurationEditorWidget/components/ColorPicker.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorPicker = ColorPicker;
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactColor = require("react-color");
+
+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 useStyles = (0, _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();
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_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: _propTypes["default"].string.isRequired,
+  onChange: _propTypes["default"].func.isRequired
+};
+var _default = ColorPicker;
+exports["default"] = _default;

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

@@ -1,4 +1,4 @@
-export default ConfigurationEditor;
-declare function ConfigurationEditor({ model }: {
-    model: any;
-}): JSX.Element;
+export default ConfigurationEditor;
+declare function ConfigurationEditor({ model }: {
+    model: any;
+}): JSX.Element;