orc-shared 5.10.1-dev.7 → 5.10.1-dev.9

package/dist/components/Routing/SegmentPage.js

@@ -3,11 +3,9 @@
 exports.__esModule = true;
 exports.default = exports.Wrapper = exports.SegmentItem = exports.List = exports.Item = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _reactRouterDom = require("react-router-dom");
+var _reactIntl = require("react-intl");
 var _urlPattern = _interopRequireDefault(require("url-pattern"));
-var _utils = require("../../utils");
-var _Text = _interopRequireDefault(require("../Text"));
 var _FullPage = _interopRequireDefault(require("./FullPage"));
 var _SubPage = _interopRequireDefault(require("./SubPage"));
 var _Segment = _interopRequireDefault(require("./Segment"));
@@ -19,8 +17,6 @@ var _TooltippedTypography = _interopRequireDefault(require("./../MaterialUI/Data
 var _urlHelper = require("./../../utils/urlHelper");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _excluded = ["active"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -75,31 +71,49 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       display: "flex"
     },
     wrapper: {
+      boxSizing: "border-box",
+      display: "flex",
+      borderTop: "1px solid ".concat(theme.palette.grey.borders),
+      flex: "0 1 100%",
+      height: "calc(100% - 90px)",
+      minHeight: 0,
       "div[class^='AppFrame__ViewPort'] > div&:nth-child(3)": {
         marginTop: function marginTop(props) {
           return props.isComponentNull ? null : theme.spacing(6);
         }
       }
+    },
+    list: {
+      flex: "0 0.1 15%",
+      borderRight: "1px solid ".concat(theme.palette.grey.borders),
+      display: "flex",
+      flexDirection: "column",
+      overflowY: "auto"
+    },
+    item: {
+      display: "block",
+      whiteSpace: "nowrap",
+      minWidth: "max-content",
+      padding: "15px 20px",
+      fontWeight: "bold",
+      fontSize: "13px",
+      textDecoration: "none",
+      cursor: "pointer",
+      color: theme.palette.text.primary,
+      "&:hover": {
+        backgroundColor: "#f7f7f7"
+      },
+      "&.active": {
+        backgroundColor: "#b4cfe3"
+      }
     }
   };
 });
-var Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
-  displayName: "SegmentPage__Wrapper",
-  componentId: "sc-1b2lq1m-0"
-})(["box-sizing:border-box;display:flex;border-top:1px solid ", ";flex:0 1 100%;height:calc(100% - 90px);min-height:0;"], (0, _utils.getThemeProp)(["colors", "borderLight"], "#cccccc"));
-var List = exports.List = _styledComponents.default.div.withConfig({
-  displayName: "SegmentPage__List",
-  componentId: "sc-1b2lq1m-1"
-})(["flex:0 0.1 15%;border-right:1px solid ", ";display:flex;flex-direction:column;overflow-y:auto;"], (0, _utils.getThemeProp)(["colors", "borderLight"], "#cccccc"));
 var FilteredLink = function FilteredLink(_ref) {
   var active = _ref.active,
     props = _objectWithoutProperties(_ref, _excluded);
   return props.to ? /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, props) : /*#__PURE__*/_react.default.createElement("div", props);
 };
-var Item = exports.Item = (0, _styledComponents.default)(FilteredLink).withConfig({
-  displayName: "SegmentPage__Item",
-  componentId: "sc-1b2lq1m-2"
-})(["display:block;white-space:nowrap;min-width:max-content;padding:15px 20px;font-weight:bold;font-size:13px;text-decoration:none;cursor:pointer;color:", ";", ";"], (0, _utils.getThemeProp)(["colors", "text"], "#333333"), (0, _utils.ifFlag)("active", (0, _styledComponents.css)(["background-color:#b4cfe3;"]), (0, _styledComponents.css)(["&:hover{background-color:#f7f7f7;}"])));
 var SegmentItem = exports.SegmentItem = function SegmentItem(_ref2) {
   var isModified = _ref2.isModified,
     isError = _ref2.isError,
@@ -120,14 +134,12 @@ var SegmentItem = exports.SegmentItem = function SegmentItem(_ref2) {
   if (config.labelValueSelector) {
     var values = config.labelValueSelector(params);
     if (typeof values === "function") {
-      config.label.values = values;
+      config.label.values = values();
     } else if (config.label.values) {
       delete config.label.values;
     }
   }
-  var text = /*#__PURE__*/_react.default.createElement(_Text.default, {
-    message: config.label
-  });
+  var text = typeof config.label === "string" ? config.label : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, config.label);
   var getSectionLabelClassName = function getSectionLabelClassName(isModified, isError, isDisabled) {
     var className = classes.label;
     if (isModified) className = "".concat(className, " ").concat(classes.modifiedLabel);
@@ -162,8 +174,8 @@ var SegmentItem = exports.SegmentItem = function SegmentItem(_ref2) {
     className: classes.labelComponent
   }, config.labelComponent));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isHide && isDisabled && /*#__PURE__*/_react.default.createElement(Item, null, finalLabel), !isHide && !isDisabled && /*#__PURE__*/_react.default.createElement(Item, {
-    to: baseHref + segpath,
-    active: isActive
+    active: isActive,
+    to: baseHref + segpath
   }, finalLabel));
 };
 __signature__(SegmentItem, "useStyles{classes}\nuseSelector{isHide}\nuseSelector{isDisabled}", function () {
@@ -172,9 +184,54 @@ __signature__(SegmentItem, "useStyles{classes}\nuseSelector{isHide}\nuseSelector
 __signature__(SegmentItem, "useStyles{classes}\nuseSelector{isHide}\nuseSelector{isDisabled}", function () {
   return [useStyles, _reactRedux.useSelector, _reactRedux.useSelector];
 });
-var defaultEntityIdResolver = function defaultEntityIdResolver(_ref3) {
-  var match = _ref3.match,
-    baseHref = _ref3.baseHref;
+var Wrapper = exports.Wrapper = function Wrapper(_ref3) {
+  var children = _ref3.children;
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.wrapper,
+    key: "Segments"
+  }, children);
+};
+__signature__(Wrapper, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(Wrapper, "useStyles{classes}", function () {
+  return [useStyles];
+});
+var List = exports.List = function List(_ref4) {
+  var children = _ref4.children;
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.list
+  }, children);
+};
+__signature__(List, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(List, "useStyles{classes}", function () {
+  return [useStyles];
+});
+var Item = exports.Item = function Item(_ref5) {
+  var active = _ref5.active,
+    to = _ref5.to,
+    children = _ref5.children,
+    onClick = _ref5.onClick;
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement(FilteredLink, {
+    className: (0, _classnames.default)(classes.item, active ? "active" : undefined),
+    to: to,
+    onClick: onClick
+  }, children);
+};
+__signature__(Item, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(Item, "useStyles{classes}", function () {
+  return [useStyles];
+});
+var defaultEntityIdResolver = function defaultEntityIdResolver(_ref6) {
+  var match = _ref6.match,
+    baseHref = _ref6.baseHref;
   var entityIdKey = Object.keys(match.params).find(function (p) {
     return p !== "scope";
   });
@@ -184,15 +241,15 @@ var defaultEntityIdResolver = function defaultEntityIdResolver(_ref3) {
   }
   return entityId;
 };
-var SegmentPage = function SegmentPage(_ref4) {
-  var path = _ref4.path,
-    View = _ref4.component,
-    componentProps = _ref4.componentProps,
-    segments = _ref4.segments,
-    location = _ref4.location,
-    match = _ref4.match,
-    modulePrependPath = _ref4.modulePrependPath,
-    entityIdResolver = _ref4.entityIdResolver;
+var SegmentPage = function SegmentPage(_ref7) {
+  var path = _ref7.path,
+    View = _ref7.component,
+    componentProps = _ref7.componentProps,
+    segments = _ref7.segments,
+    location = _ref7.location,
+    match = _ref7.match,
+    modulePrependPath = _ref7.modulePrependPath,
+    entityIdResolver = _ref7.entityIdResolver;
   var classes = useStyles({
     isComponentNull: !View
   });
@@ -209,15 +266,15 @@ var SegmentPage = function SegmentPage(_ref4) {
   var modifiedSections = (0, _reactRedux.useSelector)((0, _view.getModifiedSections)(entityId));
   var sectionsWithErrors = (0, _reactRedux.useSelector)((0, _view.getSectionsWithErrors)(entityId));
   var segmentEntries = Object.entries(segments);
-  var segmentElements = segmentEntries.map(function (_ref5) {
-    var _ref6 = _slicedToArray(_ref5, 2),
-      segpath = _ref6[0],
-      config = _ref6[1];
+  var segmentElements = segmentEntries.map(function (_ref8) {
+    var _ref9 = _slicedToArray(_ref8, 2),
+      segpath = _ref9[0],
+      config = _ref9[1];
     if (config.pages) {
-      pages.push.apply(pages, Object.entries(config.pages).map(function (_ref7) {
-        var _ref8 = _slicedToArray(_ref7, 2),
-          subpath = _ref8[0],
-          pageConfig = _ref8[1];
+      pages.push.apply(pages, Object.entries(config.pages).map(function (_ref10) {
+        var _ref11 = _slicedToArray(_ref10, 2),
+          subpath = _ref11[0],
+          pageConfig = _ref11[1];
         var pagePath = segpath + subpath;
         return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
           key: pagePath,
@@ -236,10 +293,10 @@ var SegmentPage = function SegmentPage(_ref4) {
     if (config.subpages) {
       var parentUrl = path + segpath;
       var parentUrlPattern = new _urlPattern.default(parentUrl);
-      subpages.push.apply(subpages, Object.entries(config.subpages).map(function (_ref9) {
-        var _ref10 = _slicedToArray(_ref9, 2),
-          subpath = _ref10[0],
-          config = _ref10[1];
+      subpages.push.apply(subpages, Object.entries(config.subpages).map(function (_ref12) {
+        var _ref13 = _slicedToArray(_ref12, 2),
+          subpath = _ref13[0],
+          config = _ref13[1];
         var pagePath = segpath + subpath;
         return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
           key: pagePath,
@@ -274,13 +331,15 @@ var SegmentPage = function SegmentPage(_ref4) {
     render: function render() {
       return [View ? /*#__PURE__*/_react.default.createElement(View, _extends({
         key: "View"
-      }, componentProps)) : null, /*#__PURE__*/_react.default.createElement(Wrapper, {
+      }, componentProps)) : null, /*#__PURE__*/_react.default.createElement("div", {
         className: classes.wrapper,
         key: "Segments"
-      }, /*#__PURE__*/_react.default.createElement(List, null, segmentEntries.map(function (_ref11) {
-        var _ref12 = _slicedToArray(_ref11, 2),
-          segpath = _ref12[0],
-          config = _ref12[1];
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.list
+      }, segmentEntries.map(function (_ref14) {
+        var _ref15 = _slicedToArray(_ref14, 2),
+          segpath = _ref15[0],
+          config = _ref15[1];
         var isModified = modifiedSections.includes(segpath.replace("/", ""));
         var isError = sectionsWithErrors.includes(segpath.replace("/", ""));
         var isActive = location.pathname === baseHref + segpath;
@@ -318,11 +377,11 @@ var _default3 = exports.default = _default2;
     return;
   }
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
+  reactHotLoader.register(FilteredLink, "FilteredLink", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
+  reactHotLoader.register(SegmentItem, "SegmentItem", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(Wrapper, "Wrapper", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(List, "List", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
-  reactHotLoader.register(FilteredLink, "FilteredLink", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(Item, "Item", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
-  reactHotLoader.register(SegmentItem, "SegmentItem", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(defaultEntityIdResolver, "defaultEntityIdResolver", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(SegmentPage, "SegmentPage", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
@@ -339,11 +398,11 @@ var _default3 = exports.default = _default2;
     return;
   }
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
+  reactHotLoader.register(FilteredLink, "FilteredLink", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
+  reactHotLoader.register(SegmentItem, "SegmentItem", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(Wrapper, "Wrapper", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(List, "List", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
-  reactHotLoader.register(FilteredLink, "FilteredLink", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(Item, "Item", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
-  reactHotLoader.register(SegmentItem, "SegmentItem", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(defaultEntityIdResolver, "defaultEntityIdResolver", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(SegmentPage, "SegmentPage", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/Routing/SegmentPage.js");

package/dist/components/Scope/ScopeNode.js

@@ -1,14 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.ScopeText = exports.ScopeNode = exports.ScopeIcon = exports.ContentLabel = void 0;
+exports.default = exports.ScopeNode = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _styles = require("@material-ui/core/styles");
 var _useScopeSelect3 = _interopRequireDefault(require("./useScopeSelect"));
-var _utils = require("../../utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _TreeItem = require("../MaterialUI/ScopeSelector/TreeItem");
+var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -24,58 +22,87 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var ScopeIcon = exports.ScopeIcon = (0, _styledComponents.default)(_Icon.default).attrs(function (props) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
-    id: (0, _utils.getThemeProp)(["icons", "scopeTypes", function (props) {
-      return props.type;
-    }], "cross")(props)
+    scopeIcon: {
+      fontSize: "20px",
+      verticalAlign: "middle",
+      paddingRight: "8px",
+      flexShrink: 0
+    },
+    scopeText: {
+      overflowWrap: "break-word"
+    },
+    contentLabel: function contentLabel(props) {
+      return _objectSpread({
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        padding: "10px",
+        width: "100%",
+        textTransform: props.isGlobal ? "uppercase" : "none"
+      }, props.isClickable ? {
+        "&:hover": {
+          backgroundColor: "#222"
+        }
+      } : {
+        color: theme.palette.error.main,
+        cursor: "default"
+      });
+    }
   };
-}).withConfig({
-  displayName: "ScopeNode__ScopeIcon",
-  componentId: "sc-1o0tt5j-0"
-})(["font-size:20px;vertical-align:middle;padding-right:8px;flex-shrink:0;color:", ";"], (0, _utils.getThemeProp)(["colors", "scopeTypes", function (props) {
-  return props.type;
-}], "inherit"));
-var ScopeText = exports.ScopeText = _styledComponents.default.div.withConfig({
-  displayName: "ScopeNode__ScopeText",
-  componentId: "sc-1o0tt5j-1"
-})(["overflow-wrap:break-word;"]);
-var ContentLabel = exports.ContentLabel = _styledComponents.default.div.withConfig({
-  displayName: "ScopeNode__ContentLabel",
-  componentId: "sc-1o0tt5j-2"
-})(["box-sizing:border-box;display:flex;align-items:center;padding:10px;width:100%;", ";", ";"], (0, _utils.ifFlag)("onClick", (0, _styledComponents.css)(["&:hover{background-color:#222;}"]), (0, _styledComponents.css)(["color:", ";cursor:default;"], (0, _utils.getThemeProp)(["colors", "textMedium"], "#999999"))), (0, _utils.ifFlag)("isGlobal", (0, _styledComponents.css)(["text-transform:uppercase;"])));
+});
 var ScopeNode = exports.ScopeNode = function ScopeNode(_ref) {
   var type = _ref.type,
     name = _ref.name,
     id = _ref.id,
     isAuthorizedScope = _ref.isAuthorizedScope,
-    closeSelector = _ref.closeSelector;
+    closeSelector = _ref.closeSelector,
+    contentLabelClassName = _ref.contentLabelClassName,
+    iconClassName = _ref.iconClassName,
+    onClick = _ref.onClick,
+    children = _ref.children;
   var _useScopeSelect = (0, _useScopeSelect3.default)(id),
     _useScopeSelect2 = _slicedToArray(_useScopeSelect, 1),
     navigate = _useScopeSelect2[0];
-  var onClick = isAuthorizedScope && type !== "Virtual" ? function (event) {
-    navigate(event);
-    closeSelector(event);
-  } : undefined;
-  return /*#__PURE__*/_react.default.createElement(ContentLabel, {
-    id: "selectorNode" + id,
+  if (!onClick && isAuthorizedScope && type !== "Virtual") {
+    onClick = function onClick(event) {
+      navigate(event);
+      closeSelector(event);
+    };
+  }
+  var classes = useStyles({
     isGlobal: type === "Global",
-    onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement(ScopeIcon, {
-    type: type
-  }), /*#__PURE__*/_react.default.createElement(ScopeText, null, name || id));
+    isClickable: onClick !== undefined
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "selectorNode" + id,
+    className: (0, _classnames.default)(classes.contentLabel, contentLabelClassName),
+    onClick: onClick,
+    "data-qa": "content-label"
+  }, /*#__PURE__*/_react.default.createElement(_TreeItem.ScopeIcon, {
+    type: type,
+    className: (0, _classnames.default)(classes.scopeIcon, iconClassName)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.scopeText
+  }, name || id), children);
 };
-__signature__(ScopeNode, "useScopeSelect{[navigate]}", function () {
-  return [_useScopeSelect3.default];
+__signature__(ScopeNode, "useScopeSelect{[navigate]}\nuseStyles{classes}", function () {
+  return [_useScopeSelect3.default, useStyles];
 });
-__signature__(ScopeNode, "useScopeSelect{[navigate]}", function () {
-  return [_useScopeSelect3.default];
+__signature__(ScopeNode, "useScopeSelect{[navigate]}\nuseStyles{classes}", function () {
+  return [_useScopeSelect3.default, useStyles];
 });
 var _default = ScopeNode;
 var _default2 = _default;
@@ -86,9 +113,7 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(ScopeIcon, "ScopeIcon", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
-  reactHotLoader.register(ScopeText, "ScopeText", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
-  reactHotLoader.register(ContentLabel, "ContentLabel", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
   reactHotLoader.register(ScopeNode, "ScopeNode", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
 })();
@@ -103,9 +128,7 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(ScopeIcon, "ScopeIcon", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
-  reactHotLoader.register(ScopeText, "ScopeText", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
-  reactHotLoader.register(ContentLabel, "ContentLabel", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
   reactHotLoader.register(ScopeNode, "ScopeNode", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/Scope/ScopeNode.js");
 })();

package/dist/components/Sidepanel.js

@@ -1,11 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.PanelDrawer = void 0;
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
-var _styledTransitionGroup = _interopRequireDefault(require("styled-transition-group"));
-var _templateObject;
+var _reactTransitionGroup = require("react-transition-group");
+var _styles = require("@material-ui/core/styles");
+var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -15,30 +16,67 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
 })();
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var getProp = function getProp(propName) {
-  return function (props) {
-    return props[propName];
-  };
-};
-var panelWidth = getProp("width");
 var getModalRoot = function getModalRoot() {
   return document.getElementById("modal");
 };
-var PanelDrawer = exports.PanelDrawer = _styledTransitionGroup.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\twidth: ", ";\n\n\ttransition: transform ", "ms ease-out;\n\n\t&:enter {\n\t\ttransform: translateX(", ");\n\t}\n\t&:enter-active {\n\t\ttransform: translateX(0);\n\t}\n\t&:exit {\n\t\ttransform: translateX(0);\n\t}\n\t&:exit-active {\n\t\ttransform: translateX(", ");\n\t}\n"])), panelWidth, getProp("timeout"), panelWidth, panelWidth);
-PanelDrawer.defaultProps = {
-  timeout: 1000,
-  unmountOnExit: true
-};
-var Sidepanel = function Sidepanel(props) {
-  return _reactDom.default.createPortal(/*#__PURE__*/_react.default.createElement(PanelDrawer, props), getModalRoot());
+var useStyles = (0, _styles.makeStyles)({
+  panel: function panel(props) {
+    return {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      right: 0,
+      width: props.width,
+      "&.enter": {
+        transform: "translateX(".concat(props.width, ")")
+      },
+      "&.enter-active": {
+        transform: "translateX(0)",
+        transition: "transform ".concat(props.timeout, "ms ease-out")
+      },
+      "&.exit": {
+        transform: "translateX(0)"
+      },
+      "&.exit-active": {
+        transform: "translateX(".concat(props.width, ")"),
+        transition: "transform ".concat(props.timeout, "ms ease-out")
+      }
+    };
+  }
+});
+var Sidepanel = function Sidepanel(_ref) {
+  var inProp = _ref.in,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "300px" : _ref$width,
+    _ref$timeout = _ref.timeout,
+    timeout = _ref$timeout === void 0 ? 1000 : _ref$timeout,
+    children = _ref.children,
+    className = _ref.className;
+  var classes = useStyles({
+    width: width,
+    timeout: timeout
+  });
+  var panel = /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    in: inProp,
+    timeout: timeout,
+    unmountOnExit: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.panel, className)
+  }, children));
+  return _reactDom.default.createPortal(panel, getModalRoot());
 };
+__signature__(Sidepanel, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(Sidepanel, "useStyles{classes}", function () {
+  return [useStyles];
+});
 var _default = Sidepanel;
 var _default2 = _default;
 var _default3 = exports.default = _default2;
@@ -48,10 +86,8 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(getProp, "getProp", "/home/vsts/work/1/s/src/components/Sidepanel.js");
-  reactHotLoader.register(panelWidth, "panelWidth", "/home/vsts/work/1/s/src/components/Sidepanel.js");
   reactHotLoader.register(getModalRoot, "getModalRoot", "/home/vsts/work/1/s/src/components/Sidepanel.js");
-  reactHotLoader.register(PanelDrawer, "PanelDrawer", "/home/vsts/work/1/s/src/components/Sidepanel.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Sidepanel.js");
   reactHotLoader.register(Sidepanel, "Sidepanel", "/home/vsts/work/1/s/src/components/Sidepanel.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/Sidepanel.js");
 })();
@@ -66,10 +102,8 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(getProp, "getProp", "/home/vsts/work/1/s/src/components/Sidepanel.js");
-  reactHotLoader.register(panelWidth, "panelWidth", "/home/vsts/work/1/s/src/components/Sidepanel.js");
   reactHotLoader.register(getModalRoot, "getModalRoot", "/home/vsts/work/1/s/src/components/Sidepanel.js");
-  reactHotLoader.register(PanelDrawer, "PanelDrawer", "/home/vsts/work/1/s/src/components/Sidepanel.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Sidepanel.js");
   reactHotLoader.register(Sidepanel, "Sidepanel", "/home/vsts/work/1/s/src/components/Sidepanel.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/Sidepanel.js");
 })();