orc-shared 5.10.2-dev.4 → 5.99.0-dev.2

package/dist/components/Treeview/Label.js

@@ -2,13 +2,12 @@
 
 exports.__esModule = true;
 exports.NonIndicator = exports.Label = exports.Indicator = exports.BeforeIndicator = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _utils = require("../../utils");
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@material-ui/core/styles");
+var _Icon = _interopRequireDefault(require("../MaterialUI/DataDisplay/Icon"));
 var _settings = require("./settings");
+var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -23,44 +22,121 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var Indicator = exports.Indicator = (0, _styledComponents.default)(_Icon.default).attrs(function (props) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
-    id: (0, _utils.ifFlag)("open", (0, _utils.getThemeProp)(["icons", "indicators", "down"], "chevron-down"), (0, _utils.getThemeProp)(["icons", "indicators", "right"], "chevron-right"))(props)
+    beforeIndicator: {
+      backgroundColor: "#666",
+      marginLeft: "-".concat(theme.spacing(_settings.branchLengthSpacing + 0.1)),
+      width: "".concat(theme.spacing(_settings.branchLengthSpacing + 0.1)),
+      height: theme.spacing(0.1),
+      zIndex: 99,
+      position: "absolute"
+    },
+    nonIndicator: {
+      height: theme.spacing(0.1),
+      width: "".concat(theme.spacing(_settings.branchLengthSpacing + 2.1)),
+      margin: "auto 0 auto -".concat(theme.spacing(_settings.branchLengthSpacing + 0.1)),
+      backgroundColor: "#666",
+      alignSelf: "stretch",
+      flex: "0 0 auto",
+      zIndex: 99
+    },
+    label: function label(props) {
+      return {
+        cursor: "pointer",
+        flexGrow: 1,
+        width: "100%",
+        backgroundColor: props.isSelectedNode ? "#222" : undefined,
+        border: props.isSelectedNode ? "1px solid ".concat(theme.palette.grey.borders) : undefined
+      };
+    },
+    indicator: function indicator(props) {
+      return {
+        fontSize: theme.spacing(1),
+        padding: theme.spacing(1, 0, 1, 1),
+        cursor: "pointer",
+        flex: "0 0 auto",
+        color: props.open ? props.dark ? theme.palette.primary.light : theme.palette.text.primary : theme.palette.primary.main
+      };
+    }
   };
-}).withConfig({
-  displayName: "Label__Indicator",
-  componentId: "sc-eaonh1-0"
-})(["font-size:10px;padding:10px 0 10px 10px;cursor:pointer;flex:0 0 auto;color:", ";"], (0, _utils.ifFlag)("open", (0, _utils.ifFlag)("dark", (0, _utils.getThemeProp)(["colors", "textLight"], "#cccccc"), (0, _utils.getThemeProp)(["colors", "text"], "#333333")), (0, _utils.getThemeProp)(["colors", "application", "base"], "#ffffff")));
-var BeforeIndicator = exports.BeforeIndicator = _styledComponents.default.div.withConfig({
-  displayName: "Label__BeforeIndicator",
-  componentId: "sc-eaonh1-1"
-})(["background-color:#666;margin-left:-", "px;width:", "px;height:1px;z-index:99;position:absolute;"], function (props) {
-  return (0, _settings.branchLength)(props) + 1;
-}, function (props) {
-  return (0, _settings.branchLength)(props) + 1;
 });
-var NonIndicator = exports.NonIndicator = _styledComponents.default.div.withConfig({
-  displayName: "Label__NonIndicator",
-  componentId: "sc-eaonh1-2"
-})(["height:1px;width:", "px;margin:auto 0 auto -", "px;background-color:#666;align-self:stretch;flex:0 0 auto;z-index:99;"], function (props) {
-  return (0, _settings.branchLength)(props) + 21;
-}, function (props) {
-  return (0, _settings.branchLength)(props) + 1;
+var BeforeIndicator = exports.BeforeIndicator = function BeforeIndicator(_ref) {
+  var children = _ref.children;
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.beforeIndicator
+  }, children);
+};
+__signature__(BeforeIndicator, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(BeforeIndicator, "useStyles{classes}", function () {
+  return [useStyles];
+});
+var NonIndicator = exports.NonIndicator = function NonIndicator(_ref2) {
+  var children = _ref2.children;
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.nonIndicator
+  }, children);
+};
+__signature__(NonIndicator, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(NonIndicator, "useStyles{classes}", function () {
+  return [useStyles];
+});
+var Label = exports.Label = function Label(_ref3) {
+  var isSelectedNode = _ref3.isSelectedNode,
+    labelClassName = _ref3.labelClassName,
+    children = _ref3.children;
+  var classes = useStyles({
+    isSelectedNode: isSelectedNode
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.label, labelClassName)
+  }, children);
+};
+__signature__(Label, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(Label, "useStyles{classes}", function () {
+  return [useStyles];
+});
+var Indicator = exports.Indicator = function Indicator(_ref4) {
+  var open = _ref4.open,
+    dark = _ref4.dark,
+    onClick = _ref4.onClick;
+  var classes = useStyles({
+    open: open,
+    dark: dark
+  });
+  var iconId = open ? "dropdown-chevron-down" : "dropdown-chevron-right";
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: iconId,
+    className: classes.indicator,
+    onClick: onClick,
+    "data-qa": "indicator"
+  });
+};
+__signature__(Indicator, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(Indicator, "useStyles{classes}", function () {
+  return [useStyles];
 });
-var Label = exports.Label = _styledComponents.default.div.withConfig({
-  displayName: "Label",
-  componentId: "sc-eaonh1-3"
-})(["cursor:pointer;flex-grow:1;width:100%;", ";"], (0, _utils.ifFlag)("isSelectedNode", (0, _styledComponents.css)(["background-color:#222;border:1px solid ", ";"], (0, _utils.getThemeProp)(["colors", "application", "base"], "#0F4E66"))));
 ;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Indicator, "Indicator", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
   reactHotLoader.register(BeforeIndicator, "BeforeIndicator", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
   reactHotLoader.register(NonIndicator, "NonIndicator", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
   reactHotLoader.register(Label, "Label", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
+  reactHotLoader.register(Indicator, "Indicator", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
 })();
 ;
 (function () {
@@ -73,10 +149,11 @@ var Label = exports.Label = _styledComponents.default.div.withConfig({
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Indicator, "Indicator", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
   reactHotLoader.register(BeforeIndicator, "BeforeIndicator", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
   reactHotLoader.register(NonIndicator, "NonIndicator", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
   reactHotLoader.register(Label, "Label", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
+  reactHotLoader.register(Indicator, "Indicator", "/home/vsts/work/1/s/src/components/Treeview/Label.js");
 })();
 ;
 (function () {

package/dist/components/Treeview/Leaf.js

@@ -2,9 +2,10 @@
 
 exports.__esModule = true;
 exports.Root = exports.Leaf = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _utils = require("../../utils");
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@material-ui/core/styles");
 var _settings = require("./settings");
+var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -20,22 +21,64 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var Root = exports.Root = _styledComponents.default.li.withConfig({
-  displayName: "Leaf__Root",
-  componentId: "sc-1vcyrj3-0"
-})(["position:relative;display:flex;align-items:center;"]);
-var Leaf = exports.Leaf = (0, _styledComponents.default)(Root).withConfig({
-  displayName: "Leaf",
-  componentId: "sc-1vcyrj3-1"
-})(["&:last-child::after{content:\" \";background-color:", ";position:absolute;top:calc(50%);left:-", "px;bottom:0;height:", "px;width:1px;height:50%;}"], (0, _utils.ifFlag)("dark", (0, _utils.getThemeProp)(["colors", "bgDark"], "#333333"), "#fff"), function (props) {
-  return (0, _settings.branchLength)(props) + 1;
-}, _settings.branchHeight);
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center"
+    },
+    leaf: function leaf(props) {
+      return {
+        "&:last-child::after": {
+          /* blocker - hides lowest part of vertical branch */
+          content: '""',
+          backgroundColor: props.dark ? theme.palette.grey.dark : "#fff",
+          position: "absolute",
+          top: "calc(50%)",
+          left: "-".concat(theme.spacing(_settings.branchLengthSpacing + 0.1)),
+          bottom: 0,
+          width: theme.spacing(0.1),
+          height: "50%"
+        }
+      };
+    }
+  };
+});
+var Root = exports.Root = function Root(_ref) {
+  var dark = _ref.dark,
+    leafClassName = _ref.leafClassName,
+    children = _ref.children;
+  var classes = useStyles({
+    dark: dark
+  });
+  return /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _classnames.default)(classes.root, classes.leaf, leafClassName),
+    "data-qa": "leaf"
+  }, children);
+};
+__signature__(Root, "useStyles{classes}", function () {
+  return [useStyles];
+});
+__signature__(Root, "useStyles{classes}", function () {
+  return [useStyles];
+});
+var Leaf = exports.Leaf = function Leaf(_ref2) {
+  var dark = _ref2.dark,
+    leafClassName = _ref2.leafClassName,
+    children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    leafClassName: leafClassName,
+    dark: dark
+  }, children);
+};
 ;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
   if (!reactHotLoader) {
     return;
   }
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Treeview/Leaf.js");
   reactHotLoader.register(Root, "Root", "/home/vsts/work/1/s/src/components/Treeview/Leaf.js");
   reactHotLoader.register(Leaf, "Leaf", "/home/vsts/work/1/s/src/components/Treeview/Leaf.js");
 })();
@@ -50,6 +93,7 @@ var Leaf = exports.Leaf = (0, _styledComponents.default)(Root).withConfig({
   if (!reactHotLoader) {
     return;
   }
+  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/Treeview/Leaf.js");
   reactHotLoader.register(Root, "Root", "/home/vsts/work/1/s/src/components/Treeview/Leaf.js");
   reactHotLoader.register(Leaf, "Leaf", "/home/vsts/work/1/s/src/components/Treeview/Leaf.js");
 })();

package/dist/components/Treeview/Node.js

@@ -7,8 +7,8 @@ var _Branch = require("./Branch");
 var _Leaf = require("./Leaf");
 var _Label = require("./Label");
 var _utils = require("../../utils");
-var _excluded = ["dark", "isSelectedNode"],
-  _excluded2 = ["isSelectedNode"];
+var _excluded = ["dark", "isSelectedNode", "labelClassName", "leafClassName"],
+  _excluded2 = ["isSelectedNode", "labelClassName"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
@@ -36,9 +36,12 @@ var TreeContext = exports.TreeContext = _react.default.createContext();
 var LeafNode = exports.LeafNode = function LeafNode(_ref) {
   var dark = _ref.dark,
     isSelectedNode = _ref.isSelectedNode,
+    labelClassName = _ref.labelClassName,
+    leafClassName = _ref.leafClassName,
     nodeData = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Leaf.Leaf, {
-    dark: dark
+    dark: dark,
+    leafClassName: leafClassName
   }, /*#__PURE__*/_react.default.createElement(TreeContext.Consumer, null, function (_ref2) {
     var Content = _ref2.Content,
       nodeState = _ref2.nodeState,
@@ -56,16 +59,19 @@ var LeafNode = exports.LeafNode = function LeafNode(_ref) {
       onClick: toggle,
       dark: dark
     })] : /*#__PURE__*/_react.default.createElement(_Label.NonIndicator, null), /*#__PURE__*/_react.default.createElement(_Label.Label, {
-      isSelectedNode: isSelectedNode
+      isSelectedNode: isSelectedNode,
+      labelClassName: labelClassName
     }, /*#__PURE__*/_react.default.createElement(Content, _extends({}, (0, _utils.stripKey)("children", nodeData), otherProps))));
   }));
 };
 LeafNode.displayName = "LeafNode";
 var RootNode = exports.RootNode = function RootNode(_ref3) {
   var isSelectedNode = _ref3.isSelectedNode,
+    labelClassName = _ref3.labelClassName,
     nodeData = _objectWithoutProperties(_ref3, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_Leaf.Root, null, /*#__PURE__*/_react.default.createElement(_Label.Label, {
-    isSelectedNode: isSelectedNode
+    isSelectedNode: isSelectedNode,
+    labelClassName: labelClassName
   }, /*#__PURE__*/_react.default.createElement(TreeContext.Consumer, null, function (_ref4) {
     var Content = _ref4.Content,
       otherProps = _ref4.otherProps;
@@ -81,19 +87,26 @@ var _Node = exports.Node = function Node(_ref5) {
       getNode = _ref6.getNode,
       selectedNodeId = _ref6.selectedNodeId,
       nodeState = _ref6.nodeState,
-      dark = _ref6.dark;
+      dark = _ref6.dark,
+      labelClassName = _ref6.labelClassName,
+      leafClassName = _ref6.leafClassName,
+      branchClassName = _ref6.branchClassName;
     var nodeData = getNode(id);
     if (!nodeData) return null;
     var isSelectedNode = selectedNodeId === id;
     var open = root || openAll || nodeState[id] || false;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, root ? /*#__PURE__*/_react.default.createElement(RootNode, _extends({}, nodeData, {
-      isSelectedNode: isSelectedNode
+      isSelectedNode: isSelectedNode,
+      labelClassName: labelClassName
     })) : /*#__PURE__*/_react.default.createElement(LeafNode, _extends({}, nodeData, {
       open: open,
       dark: dark,
-      isSelectedNode: isSelectedNode
+      isSelectedNode: isSelectedNode,
+      labelClassName: labelClassName,
+      leafClassName: leafClassName
     })), open && (0, _utils.safeGet)(nodeData, "children", "length") ? /*#__PURE__*/_react.default.createElement(_Branch.Branch, {
-      dark: dark
+      dark: dark,
+      branchClassName: branchClassName
     }, nodeData.children.map(function (id) {
       return /*#__PURE__*/_react.default.createElement(_Node, {
         key: id,

package/dist/components/Treeview/index.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 var _useViewState3 = _interopRequireDefault(require("../../hooks/useViewState"));
 var _Branch = require("./Branch");
 var _Node = _interopRequireWildcard(require("./Node"));
-var _excluded = ["dark", "Content", "rootId", "selectedNodeId", "getNode", "openAll", "name", "defaultNodeState"];
+var _excluded = ["dark", "Content", "rootId", "selectedNodeId", "getNode", "openAll", "name", "defaultNodeState", "labelClassName", "leafClassName", "branchClassName"];
 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 }; }
@@ -55,6 +55,9 @@ var Treeview = exports.Treeview = function Treeview(_ref) {
     name = _ref.name,
     _ref$defaultNodeState = _ref.defaultNodeState,
     defaultNodeState = _ref$defaultNodeState === void 0 ? {} : _ref$defaultNodeState,
+    labelClassName = _ref.labelClassName,
+    leafClassName = _ref.leafClassName,
+    branchClassName = _ref.branchClassName,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var _useViewState = (0, _useViewState3.default)(name),
     _useViewState2 = _slicedToArray(_useViewState, 2),
@@ -73,6 +76,9 @@ var Treeview = exports.Treeview = function Treeview(_ref) {
       selectedNodeId: selectedNodeId,
       nodeState: nodeState,
       updateNodeState: updateNodeState,
+      labelClassName: labelClassName,
+      leafClassName: leafClassName,
+      branchClassName: branchClassName,
       otherProps: otherProps
     }
   }, /*#__PURE__*/_react.default.createElement(_Node.default, {

package/dist/components/Treeview/settings.js

@@ -1,8 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.branchLength = exports.branchIndent = exports.branchHeight = void 0;
-var _utils = require("../../utils");
+exports.branchLengthSpacing = exports.branchLength = exports.branchIndentSpacing = exports.branchIndent = exports.branchHeightSpacing = exports.branchHeight = void 0;
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -17,10 +16,16 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-// Functions to easily get the tree settings from theme, or sensible defaults
-var branchIndent = exports.branchIndent = (0, _utils.getThemeProp)(["treeSettings", "branchIndent"], 14);
-var branchLength = exports.branchLength = (0, _utils.getThemeProp)(["treeSettings", "branchLength"], 15);
-var branchHeight = exports.branchHeight = (0, _utils.getThemeProp)(["treeSettings", "branchHeight"], 18);
+// in px
+// How far from parent left edge to vertical branch under it
+var branchIndent = exports.branchIndent = 14;
+var branchIndentSpacing = exports.branchIndentSpacing = 1.4;
+// How far from vertical branch to children's left edge
+var branchLength = exports.branchLength = 15;
+var branchLengthSpacing = exports.branchLengthSpacing = 1.5;
+// How far up from bottom edge of node should horizontal branch sit
+var branchHeight = exports.branchHeight = 20;
+var branchHeightSpacing = exports.branchHeightSpacing = 2;
 ;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
@@ -28,8 +33,11 @@ var branchHeight = exports.branchHeight = (0, _utils.getThemeProp)(["treeSetting
     return;
   }
   reactHotLoader.register(branchIndent, "branchIndent", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchIndentSpacing, "branchIndentSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
   reactHotLoader.register(branchLength, "branchLength", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchLengthSpacing, "branchLengthSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
   reactHotLoader.register(branchHeight, "branchHeight", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchHeightSpacing, "branchHeightSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
 })();
 ;
 (function () {
@@ -43,8 +51,11 @@ var branchHeight = exports.branchHeight = (0, _utils.getThemeProp)(["treeSetting
     return;
   }
   reactHotLoader.register(branchIndent, "branchIndent", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchIndentSpacing, "branchIndentSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
   reactHotLoader.register(branchLength, "branchLength", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchLengthSpacing, "branchLengthSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
   reactHotLoader.register(branchHeight, "branchHeight", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
+  reactHotLoader.register(branchHeightSpacing, "branchHeightSpacing", "/home/vsts/work/1/s/src/components/Treeview/settings.js");
 })();
 ;
 (function () {

package/dist/utils/index.js

@@ -3,10 +3,6 @@
 exports.__esModule = true;
 var _safeGet = _interopRequireDefault(require("./safeGet"));
 exports.safeGet = _safeGet.default;
-var _styledPropFuncs = require("./styledPropFuncs");
-exports.getThemeProp = _styledPropFuncs.getThemeProp;
-exports.ifFlag = _styledPropFuncs.ifFlag;
-exports.switchEnum = _styledPropFuncs.switchEnum;
 var _unwrapImmutable = _interopRequireDefault(require("./unwrapImmutable"));
 exports.unwrapImmutable = _unwrapImmutable.default;
 var _logPass = _interopRequireDefault(require("./logPass"));

package/dist/utils/testUtils.js

@@ -3,9 +3,8 @@
 exports.__esModule = true;
 exports.createMuiTheme = exports.TestWrapper = exports.PropStruct = void 0;
 exports.extractMessages = extractMessages;
-exports.spyOnConsole = exports.ignoreConsoleError = exports.getStyledClassSelector = exports.getElmClasses = exports.getClassSelector = exports.getClassName = exports.generateClassName = exports.firstItemComparator = void 0;
+exports.spyOnConsole = exports.ignoreConsoleError = exports.getElmClasses = exports.getClassSelector = exports.getClassName = exports.generateClassName = exports.firstItemComparator = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = require("styled-components");
 var _unexpectedReaction = require("unexpected-reaction");
 var _muiThemes = _interopRequireDefault(require("./../components/MaterialUI/muiThemes"));
 var _reactRouterDom = require("react-router-dom");
@@ -85,14 +84,6 @@ var getClassSelector = exports.getClassSelector = function getClassSelector(elm,
     return className && "." + className;
   }
 };
-var getStyledClassSelector = exports.getStyledClassSelector = function getStyledClassSelector(elm) {
-  var component = elm.type || elm;
-  if (!(0, _styledComponents.isStyledComponent)(component)) {
-    throw new Error("<" + (component.name || component) + " /> is not a styled component");
-  }
-  // Styled component toString() function returns a stable class name
-  return component.toString();
-};
 var firstItemComparator = exports.firstItemComparator = function firstItemComparator(a, b) {
   return a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0;
 };
@@ -231,7 +222,6 @@ var TestWrapper = exports.TestWrapper = function TestWrapper(_ref3) {
   reactHotLoader.register(getElmClasses, "getElmClasses", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(getClassName, "getClassName", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(getClassSelector, "getClassSelector", "/home/vsts/work/1/s/src/utils/testUtils.js");
-  reactHotLoader.register(getStyledClassSelector, "getStyledClassSelector", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(firstItemComparator, "firstItemComparator", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(PropStruct, "PropStruct", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(ignoreConsoleError, "ignoreConsoleError", "/home/vsts/work/1/s/src/utils/testUtils.js");
@@ -256,7 +246,6 @@ var TestWrapper = exports.TestWrapper = function TestWrapper(_ref3) {
   reactHotLoader.register(getElmClasses, "getElmClasses", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(getClassName, "getClassName", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(getClassSelector, "getClassSelector", "/home/vsts/work/1/s/src/utils/testUtils.js");
-  reactHotLoader.register(getStyledClassSelector, "getStyledClassSelector", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(firstItemComparator, "firstItemComparator", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(PropStruct, "PropStruct", "/home/vsts/work/1/s/src/utils/testUtils.js");
   reactHotLoader.register(ignoreConsoleError, "ignoreConsoleError", "/home/vsts/work/1/s/src/utils/testUtils.js");

package/dist/{components/Modal/Background.js → utils/toastHelper.js}

@@ -1,9 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+exports.getToastColor = void 0;
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -18,21 +16,21 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
-var Background = _styledComponents.default.div.withConfig({
-  displayName: "Background",
-  componentId: "sc-vgfi8m-0"
-})(["position:absolute;background-color:rgba(127,127,127,0.5);height:100%;width:100%;"]);
-var _default = Background;
-var _default2 = _default;
-var _default3 = exports.default = _default2;
+var getToastColor = exports.getToastColor = function getToastColor(theme, alertType) {
+  var toastBorderColors = {
+    error: theme.palette.error.main,
+    warn: theme.palette.warning.main,
+    confirm: theme.palette.success.main
+  };
+  return toastBorderColors[alertType] || "red";
+};
 ;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Background, "Background", "/home/vsts/work/1/s/src/components/Modal/Background.js");
-  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/Modal/Background.js");
+  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/utils/toastHelper.js");
 })();
 ;
 (function () {
@@ -45,8 +43,7 @@ var _default3 = exports.default = _default2;
   if (!reactHotLoader) {
     return;
   }
-  reactHotLoader.register(Background, "Background", "/home/vsts/work/1/s/src/components/Modal/Background.js");
-  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/Modal/Background.js");
+  reactHotLoader.register(getToastColor, "getToastColor", "/home/vsts/work/1/s/src/utils/toastHelper.js");
 })();
 ;
 (function () {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.2-dev.4",
+	"version": "5.99.0-dev.2",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {
@@ -56,7 +56,7 @@
 		"@testing-library/react": "^10.4.9"
 	},
 	"dependencies": {
-		"orc-scripts": "4.0.8",
+		"orc-scripts": "5.0.0-dev.9",
 		"react-number-format": "^5.3.0"
 	},
 	"sideEffects": false,

package/src/components/AppFrame/About.js

@@ -17,19 +17,19 @@ export const ABOUT_NAME = "__aboutBox";
 
 const getModalRoot = () => document.getElementById("modal");
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
 	aboutBox: props => ({
 		boxSizing: "border-box",
 		zIndex: 9999,
 		position: "absolute",
-		top: "calc(50% - 210px)",
-		left: "calc(50% - 210px)",
-		height: "420px",
-		width: "420px",
-		padding: "15px 20px",
+		top: `calc(50% - ${theme.spacing(21)})`,
+		left: `calc(50% - ${theme.spacing(21)})`,
+		height: theme.spacing(42),
+		width: theme.spacing(42),
+		padding: theme.spacing(1.5, 2),
 		color: "#ffffff",
-		fontSize: "13px",
-		lineHeight: "16px",
+		fontSize: theme.spacing(1.3),
+		lineHeight: theme.spacing(1.6),
 		background: `#0a0a07 url(${props.bgImage})`,
 
 		"&.enter-active": {
@@ -47,8 +47,8 @@ const useStyles = makeStyles(() => ({
 		zIndex: 9999,
 		position: "absolute",
 		color: "#ffffff",
-		top: "15px",
-		right: "20px",
+		top: theme.spacing(1.5),
+		right: theme.spacing(2),
 		margin: "0",
 		cursor: "pointer",
 		opacity: "1",
@@ -62,11 +62,11 @@ const useStyles = makeStyles(() => ({
 		textDecoration: "none",
 	},
 	aboutParagraph: {
-		marginTop: "20px",
+		marginTop: theme.spacing(2),
 	},
 	longAboutParagraph: props => ({
-		marginTop: "20px",
-		fontSize: props.lang?.toLowerCase().startsWith("fr") ? "10px" : undefined,
+		marginTop: theme.spacing(2),
+		fontSize: props.lang?.toLowerCase().startsWith("fr") ? theme.spacing(1) : undefined,
 	}),
 }));
 

package/src/components/AppFrame/Anchor.js

@@ -8,12 +8,12 @@ const useStyles = makeStyles(theme => ({
 		cursor: "pointer",
 		boxSizing: "border-box",
 		fontFamily: theme.typography.button.fontFamily,
-		fontSize: "12px",
+		fontSize: theme.spacing(1.2),
 		textTransform: "uppercase",
-		height: "40px",
-		minWidth: "180px",
-		paddingTop: "14px",
-		paddingRight: "14px",
+		height: theme.spacing(4),
+		minWidth: theme.spacing(18),
+		paddingTop: theme.spacing(1.4),
+		paddingRight: theme.spacing(1.4),
 		color: props.open ? theme.palette.primary.light : theme.palette.text.disabled,
 
 		"&:hover": {
@@ -21,8 +21,8 @@ const useStyles = makeStyles(theme => ({
 		},
 	}),
 	indicator: props => ({
-		fontSize: "12px",
-		padding: "0 11px",
+		fontSize: theme.spacing(1.2),
+		padding: theme.spacing(0, 1.1),
 		color: props.open ? theme.palette.text.disabled : theme.palette.primary.light,
 	}),
 }));