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

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

@@ -2,7 +2,6 @@
 
 exports.__esModule = true;
 exports.branchLength = exports.branchIndent = exports.branchHeight = void 0;
-var _utils = require("../../utils");
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -17,10 +16,13 @@ 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;
+// How far from vertical branch to children's left edge
+var branchLength = exports.branchLength = 15;
+// How far up from bottom edge of node should horizontal branch sit
+var branchHeight = exports.branchHeight = 20;
 ;
 (function () {
   var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.1-dev.7",
+	"version": "5.10.1-dev.9",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/ApplicationModuleLoader.test.js

@@ -1,7 +1,6 @@
 import React from "react";
 import Immutable from "immutable";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
 import { Loader } from "./Authenticate";
 import ApplicationModuleLoader from "./ApplicationModuleLoader";
 import { mount } from "enzyme";
@@ -66,17 +65,13 @@ describe("ApplicationModuleLoader", () => {
 		state = state.setIn(["settings", "defaultScope"], null);
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<Loader />,
 		);
 	});
 
@@ -84,17 +79,13 @@ describe("ApplicationModuleLoader", () => {
 		state = state.setIn(["settings", "loadedModulesScope"], Immutable.fromJS(["moduleA"]));
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<Loader />,
 		);
 	});
 
@@ -103,11 +94,9 @@ describe("ApplicationModuleLoader", () => {
 
 		const component = (
 			<Provider store={theStore}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>
 		);
 
@@ -128,11 +117,9 @@ describe("ApplicationModuleLoader", () => {
 
 		const component = (
 			<Provider store={theStore}>
-				<ThemeProvider theme={{}}>
-					<ApplicationModuleLoader>
-						<TestComp />
-					</ApplicationModuleLoader>
-				</ThemeProvider>
+				<ApplicationModuleLoader>
+					<TestComp />
+				</ApplicationModuleLoader>
 			</Provider>
 		);
 

package/src/components/Authenticate.js

@@ -1,12 +1,23 @@
 import React from "react";
-import styled, { withTheme } from "styled-components";
-import { getThemeProp, safeGet } from "../utils";
-import Placeholder from "../components/Placeholder";
+import { makeStyles } from "@material-ui/core/styles";
+import { safeGet } from "../utils";
 import { useSelector } from "react-redux";
 import { unwrapImmutable } from "../utils";
 import { GET_AUTHENTICATION_PROFILE } from "../actions/authentication";
 import { ERROR, LOGOUT } from "../reducers/request";
 import ApplicationModuleLoader from "./ApplicationModuleLoader";
+import Placeholder from "./MaterialUI/DataDisplay/PredefinedElements/Placeholder";
+
+const useStyles = makeStyles({
+	wrapper: {
+		display: "flex",
+		width: "60%",
+		height: "100%",
+		padding: "0 20vw",
+		flexDirection: "column",
+		justifyContent: "center",
+	},
+});
 
 export const useAuthenticationData = () => ({
 	loading: useSelector(state => state.getIn(["requests", "actives", GET_AUTHENTICATION_PROFILE])),
@@ -15,34 +26,31 @@ export const useAuthenticationData = () => ({
 	needLogin: useSelector(state => state.getIn(["requests", LOGOUT])),
 });
 
-export const Wrapper = styled.div`
-	display: flex;
-	width: 60%;
-	height: 100%;
-	padding: 0 20vw;
-	flex-direction: column;
-	justify-content: center;
-`;
-
-export const Loader = withTheme(props => (
-	<Wrapper>
-		<Placeholder icon={getThemeProp(["icons", "loading"], "loading")(props)} animate />
-	</Wrapper>
-));
+export const Loader = () => {
+	const classes = useStyles();
+
+	return (
+		<div className={classes.wrapper}>
+			<Placeholder icon="orckestra-loader" animateIcon />
+		</div>
+	);
+};
 
 export const Error = ({ requestError, needLogin }) => {
+	const classes = useStyles();
+
 	if (needLogin) {
 		return (
-			<Wrapper>
+			<div className={classes.wrapper}>
 				<h1>Not logged in</h1>
-			</Wrapper>
+			</div>
 		);
 	}
 	return (
-		<Wrapper>
+		<div className={classes.wrapper}>
 			<h1>{safeGet(requestError, "payload", "message") || "An error occurred"}</h1>
 			Last failing action: <pre>{JSON.stringify(requestError, null, 2)}</pre>
-		</Wrapper>
+		</div>
 	);
 };
 

package/src/components/Authenticate.test.js

@@ -1,8 +1,7 @@
 import React from "react";
 import Immutable from "immutable";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
-import Authenticate, { Loader, Wrapper } from "./Authenticate";
+import Authenticate, { Loader } from "./Authenticate";
 import { ERROR, LOGOUT } from "../reducers/request";
 import { GET_AUTHENTICATION_PROFILE } from "../actions/authentication";
 
@@ -64,17 +63,13 @@ describe("Authenticate", () => {
 		state = state.setIn(["requests", "actives", GET_AUTHENTICATION_PROFILE], true);
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<Authenticate>
-						<TestComp />
-					</Authenticate>
-				</ThemeProvider>
+				<Authenticate>
+					<TestComp />
+				</Authenticate>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<Loader />,
 		);
 	});
 
@@ -82,17 +77,13 @@ describe("Authenticate", () => {
 		state = state.setIn(["settings", "defaultScope"], null);
 		return expect(
 			<Provider store={store(state)}>
-				<ThemeProvider theme={{}}>
-					<Authenticate applicationModuleReady={false}>
-						<TestComp />
-					</Authenticate>
-				</ThemeProvider>
+				<Authenticate applicationModuleReady={false}>
+					<TestComp />
+				</Authenticate>
 			</Provider>,
 			"when mounted",
 			"to exhaustively satisfy",
-			<ThemeProvider theme={{}}>
-				<Loader />
-			</ThemeProvider>,
+			<Loader />,
 		);
 	});
 
@@ -105,10 +96,10 @@ describe("Authenticate", () => {
 				</Authenticate>
 			</Provider>,
 			"when mounted",
-			"to exhaustively satisfy",
-			<Wrapper>
+			"to satisfy",
+			<div>
 				<h1>Not logged in</h1>
-			</Wrapper>,
+			</div>,
 		);
 	});
 
@@ -127,8 +118,8 @@ describe("Authenticate", () => {
 				</Authenticate>
 			</Provider>,
 			"when mounted",
-			"to exhaustively satisfy",
-			<Wrapper>
+			"to satisfy",
+			<div>
 				<h1>404 - NotFound</h1>
 				{"Last failing action: "}
 				<pre>
@@ -140,7 +131,7 @@ describe("Authenticate", () => {
 						"  }\n" +
 						"}"}
 				</pre>
-			</Wrapper>,
+			</div>,
 		);
 	});
 
@@ -158,11 +149,11 @@ describe("Authenticate", () => {
 				</Authenticate>
 			</Provider>,
 			"when mounted",
-			"to exhaustively satisfy",
-			<Wrapper>
+			"to satisfy",
+			<div>
 				<h1>An error occurred</h1>
 				Last failing action: <pre>{'{\n  "type": "TEST_ACTION"\n}'}</pre>
-			</Wrapper>,
+			</div>,
 		);
 	});
 });

package/src/components/ErrorPlaceholder.js

@@ -1,25 +1,8 @@
 import React from "react";
-import styled, { withTheme } from "styled-components";
-import { getThemeProp } from "../utils";
-import Placeholder from "./Placeholder";
+import Placeholder from "./MaterialUI/DataDisplay/PredefinedElements/Placeholder";
 
-export const Wrapper = styled.div`
-	display: flex;
-	width: 60%;
-	height: 100%;
-	padding: 0 20vw;
-	flex-direction: column;
-	justify-content: center;
-`;
-
-const ErrorPlaceholder = withTheme(({ message, description, onClick, ...props }) => (
-	<Placeholder
-		icon={getThemeProp(["icons", "reportProblem"], "error")(props)}
-		warn
-		title={message}
-		subtitle={description}
-		onClick={onClick}
-	/>
-));
+const ErrorPlaceholder = ({ message, description }) => (
+	<Placeholder icon="report-problem-triangle" error title={message} subtitle={description} />
+);
 
 export default ErrorPlaceholder;

package/src/components/ErrorPlaceholder.test.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { Provider } from "react-redux";
-import { ThemeProvider } from "styled-components";
-import Placeholder from "./Placeholder";
+import Placeholder from "./MaterialUI/DataDisplay/PredefinedElements/Placeholder";
 import ErrorPlaceholder from "./ErrorPlaceholder";
 
 describe("ErrorPlaceholder", () => {
@@ -14,9 +13,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<ThemeProvider theme={{}}>
-					<ErrorPlaceholder message="Error" />
-				</ThemeProvider>
+				<ErrorPlaceholder message="Error" />
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -27,7 +24,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Placeholder icon="error" warn title="Error" />
+				<Placeholder icon="report-problem-triangle" error title="Error" />
 			</Provider>,
 		));
 
@@ -40,9 +37,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<ThemeProvider theme={{ icons: { error: "error" } }}>
-					<ErrorPlaceholder message="Error" description="This failed" />
-				</ThemeProvider>
+				<ErrorPlaceholder message="Error" description="This failed" />
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -53,7 +48,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Placeholder icon="error" warn title="Error" subtitle="This failed" />
+				<Placeholder icon="report-problem-triangle" error title="Error" subtitle="This failed" />
 			</Provider>,
 		));
 
@@ -67,9 +62,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<ThemeProvider theme={{}}>
-					<ErrorPlaceholder message="Error" onClick={handler} />
-				</ThemeProvider>
+				<ErrorPlaceholder message="Error" onClick={handler} />
 			</Provider>,
 			"when mounted",
 			"to satisfy",
@@ -80,7 +73,7 @@ describe("ErrorPlaceholder", () => {
 					getState: () => ({}),
 				}}
 			>
-				<Placeholder icon="error" warn title="Error" onClick={handler} />
+				<Placeholder icon="report-problem-triangle" error title="Error" onClick={handler} />
 			</Provider>,
 		);
 	});

package/src/components/Form/InputField.test.js

@@ -114,10 +114,11 @@ describe("InputField", () => {
 					if (type === "MultiSelector") {
 						val = ["thing"];
 						emptyVal = [];
+						target = "[role='button']";
 					} else {
 						val = "thing";
+						target = "select";
 					}
-					target = "select";
 				} else if (type === "SwitchInput") {
 					val = true;
 				} else if (type === "DateInput") {

package/src/components/Form/Inputs/MultiSelector.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Select from "../../MaterialUI/Inputs/Select";
+import { memoize } from "../../../utils";
+import SelectProps from "../../MaterialUI/Inputs/SelectProps";
+
+export const selectEventUpdater = memoize(update => value => update(value));
+
+const MultiSelector = ({ value, options, update, ...props }) => {
+	const selectProps = new SelectProps();
+
+	selectProps.set(SelectProps.propNames.value, value);
+	selectProps.set(SelectProps.propNames.onClose, props.onBlur);
+	selectProps.set(SelectProps.propNames.disabled, props.disabled);
+	selectProps.set(SelectProps.propNames.multiple, true);
+	selectProps.set(SelectProps.propNames.update, selectEventUpdater(update));
+
+	const hasError = props.required && (!Array.isArray(value) || value.length === 0);
+	selectProps.set(SelectProps.propNames.error, hasError);
+
+	return <Select options={options} selectProps={selectProps} />;
+};
+
+export default MultiSelector;