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

package/src/components/MaterialUI/Inputs/InputBase.test.js

@@ -317,7 +317,7 @@ describe("InputBase Component", () => {
 	});
 });
 
-describe("InputBase component debounce", () => {
+describe("InputBase component debouce", () => {
 	const clock = sinon.useFakeTimers();
 	let update, container;
 
@@ -946,463 +946,4 @@ describe("AdvancedNumericInput", () => {
 
 		expect(update, "to have calls satisfying", [{ args: ["", metadata] }]);
 	});
-
-	it("Change advanced numeric input value with decimal does not have the spinner buttons", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='increase']");
-		expect(btn.length, "to be", 0);
-	});
-
-	it("Disabled advanced numeric input value without decimals should not have the increase/decrease buttons", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.disabled, true);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
-		expect(btn.length, "to equal", 0);
-	});
-
-	it("Advanced numeric input value without decimals, simulate onMouseDown to make code coverage happy", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btnIncrease = mountedComponent.find("[data-qa='increase']").hostNodes();
-		const btnDecrease = mountedComponent.find("[data-qa='decrease']").hostNodes();
-
-		btnIncrease.simulate("mouseDown");
-		btnDecrease.simulate("mouseDown");
-	});
-
-	it("Advanced numeric input value without decimals but with custom onKeyDown with prevent default", () => {
-		const keydownSpy = sinon.stub().callsFake(e => {
-			e.preventDefault();
-		});
-
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { onKeyDown: keydownSpy });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("keydown", { key: "ArrowUp" });
-
-		expect(keydownSpy, "was called once");
-		expect(update, "was not called");
-	});
-
-	it("Advanced numeric input value without decimals but with custom onKeyDown without prevent default", () => {
-		const keydownSpy = sinon.stub().callsFake(e => {});
-
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { onKeyDown: keydownSpy });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("keydown", { key: "ArrowUp" });
-
-		expect(keydownSpy, "was called once");
-		expect(update, "to have calls satisfying", [{ args: ["1", null] }]);
-	});
-
-	it("Change advanced numeric input value, empty initial value with increase button", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["1", null] }]);
-	});
-
-	it("Change advanced numeric input value, 1 initial value with increase button", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "1";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["2", null] }]);
-	});
-
-	it("Change advanced numeric input value, 10 initial value with max 11 with increase button", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "10";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -11, max: 11 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["11", null] }]);
-	});
-
-	it("Change advanced numeric input value, 11 initial value with max 11 with increase button stays at 11", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "11";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -11, max: 11 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "was not called");
-	});
-
-	it("Change advanced numeric input value, empty initial value, min=5, max=15, increase button set value to 5", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: 5, max: 15 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["5", null] }]);
-	});
-
-	it("Change advanced numeric input value, empty initial value, min=-15, max=-5, increase button set value to -5", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -15, max: -5 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["-5", null] }]);
-	});
-
-	it("Change advanced numeric input value, empty initial value, min=5, max=15, increase button set value to 5", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: 5, max: 15 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='increase']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["5", null] }]);
-	});
-
-	it("Change advanced numeric input value, empty initial value, min=5, max=15, key up set value to 1", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -5, max: 15 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("keydown", { key: "ArrowUp" });
-
-		expect(update, "to have calls satisfying", [{ args: ["1", null] }]);
-	});
-
-	it("Change advanced numeric input value, empty initial value, min=5, max=15, scroll up set value to 1", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -5, max: 15 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("wheel", { deltaY: -100 });
-
-		expect(update, "to have calls satisfying", [{ args: ["1", null] }]);
-	});
-
-	it("Change advanced numeric input value, empty initial value with decrease button", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["-1", null] }]);
-	});
-
-	it("Change advanced numeric input value, -1 initial value with decrease button", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "-1";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["-2", null] }]);
-	});
-
-	it("Change advanced numeric input value, -10 initial value with min 11 with decrease button", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "-10";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -11, max: 11 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["-11", null] }]);
-	});
-
-	it("Change advanced numeric input value, -11 initial value with min -11 with decrease button stays at -11", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "-11";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -11, max: 11 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "was not called");
-	});
-
-	it("Change advanced numeric input value, empty initial value, min=5, max=15, decrease button should set to 5", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: 5, max: 15 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["5", null] }]);
-	});
-
-	it("Change advanced numeric input value, empty initial value, min=-15, max=-5, decrease button set value to -5", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -15, max: -5 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["-5", null] }]);
-	});
-
-	it("Change advanced numeric input value, empty initial value, min=5, max=15, decrease button set value to 5", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: 5, max: 15 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const btn = mountedComponent.find("[data-qa='decrease']").hostNodes();
-		btn.simulate("click");
-
-		expect(update, "to have calls satisfying", [{ args: ["5", null] }]);
-	});
-
-	it("Change advanced numeric input value, empty initial value, min=5, max=15, key down set value to 1", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -5, max: 15 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("keydown", { key: "ArrowDown" });
-
-		expect(update, "to have calls satisfying", [{ args: ["-1", null] }]);
-	});
-
-	it("Change advanced numeric input value, empty initial value, min=5, max=15, scroll down set value to 1", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
-		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -5, max: 15 });
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("wheel", { deltaY: 100 });
-
-		expect(update, "to have calls satisfying", [{ args: ["-1", null] }]);
-	});
 });

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js

@@ -104,7 +104,7 @@ export const useStyles = makeStyles(theme => ({
 		"&:focus-within": {
 			zIndex: 99,
 			border: `${theme.spacing(0.1)} solid ${theme.palette.focus}`,
-			boxShadow: `0 0 4px ${theme.palette.focus}`,
+			boxShadow: `0 0 ${theme.spacing(0.4)} ${theme.palette.focus}`,
 		},
 	},
 	selectRoot: {

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.test.js

@@ -47,7 +47,7 @@ describe("useStyles", () => {
 			expect
 				.it("to contain", "z-index: 99;")
 				.and("to contain", "border: 0.0625rem solid #4fa1f0;")
-				.and("to contain", "box-shadow: 0 0 4px #4fa1f0;"),
+				.and("to contain", "box-shadow: 0 0 0.25rem #4fa1f0;"),
 		);
 	});
 });

package/src/components/MaterialUI/Inputs/Select.js

@@ -145,6 +145,8 @@ export const SelectIconButton = props => {
 	);
 };
 
+const renderMultipleValues = selected => selected?.join(", ");
+
 const selectEmptyValue = "~~#~~";
 
 const Select = ({ options, selectProps, children }) => {
@@ -169,6 +171,7 @@ const Select = ({ options, selectProps, children }) => {
 	const native = selectProps?.get(SelectProps.propNames.native);
 	const onClose = selectProps?.get(SelectProps.propNames.onClose);
 	const inputProps = selectProps?.get(SelectProps.propNames.inputProps);
+	const multiple = selectProps?.get(SelectProps.propNames.multiple);
 	const hasError = !!error;
 
 	if (sortType === sortTypeEnum.numeric) {
@@ -252,6 +255,8 @@ const Select = ({ options, selectProps, children }) => {
 			error={hasError}
 			native={native}
 			inputProps={inputProps}
+			multiple={multiple}
+			renderValue={multiple ? renderMultipleValues : undefined}
 			classes={{
 				icon: classes.icon,
 				root: selectProps?.getStyle(SelectProps.ruleNames.root),
@@ -275,6 +280,8 @@ const Select = ({ options, selectProps, children }) => {
 			error={hasError}
 			native={native}
 			inputProps={inputProps}
+			multiple={multiple}
+			renderValue={multiple ? renderMultipleValues : undefined}
 			classes={{
 				icon: classes.icon,
 				root: selectProps?.getStyle(SelectProps.ruleNames.root),

package/src/components/MaterialUI/Inputs/Select.test.js

@@ -669,4 +669,49 @@ describe("Select Component", () => {
 
 		expect(muiSelect.prop("open"), "to be true");
 	});
+
+	it("Renders Select component with multiple values", () => {
+		const options = [
+			{ value: "aValue", label: "aLabel" },
+			{ value: "anotherValue", label: "anotherLabel" },
+		];
+
+		const selectProps = new SelectProps();
+
+		selectProps.set(SelectProps.propNames.update, update);
+		selectProps.set(SelectProps.propNames.multiple, true);
+		selectProps.set(SelectProps.propNames.value, ["aValue"]);
+
+		const component = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<Select options={options} selectProps={selectProps} />
+			</TestWrapper>
+		);
+
+		const ChevronDown = props => {
+			return <Icon id="dropdown-chevron-down" {...props} />;
+		};
+
+		const expected = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<SelectMUI
+					value={["aValue"]}
+					disableUnderline={true}
+					IconComponent={ChevronDown}
+					error={false}
+					multiple={true}
+					renderValue={selected => selected.join(", ")}
+				>
+					<MenuItem key="aValue" value="aValue">
+						<TooltippedTypography children="aLabel" titleValue="aLabel" />
+					</MenuItem>
+					<MenuItem key="anotherValue" value="anotherValue">
+						<TooltippedTypography noWrap children="anotherLabel" titleValue="anotherLabel" />
+					</MenuItem>
+				</SelectMUI>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
 });

package/src/components/MaterialUI/Inputs/SelectProps.js

@@ -21,6 +21,7 @@ class SelectProps extends ComponentProps {
 		onClose: "onClose",
 		native: "native",
 		inputProps: "inputProps",
+		multiple: "multiple",
 	};
 
 	static ruleNames = {
@@ -42,6 +43,7 @@ class SelectProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.onClose, null);
 		this.componentProps.set(this.constructor.propNames.native, null);
 		this.componentProps.set(this.constructor.propNames.inputProps, null);
+		this.componentProps.set(this.constructor.propNames.multiple, null);
 
 		this.componentClasses.set(this.constructor.ruleNames.root, null);
 		this.componentClasses.set(this.constructor.ruleNames.paper, null);

package/src/components/MaterialUI/Inputs/SelectProps.test.js

@@ -15,6 +15,7 @@ describe("Select Props", () => {
 			"onClose",
 			"native",
 			"inputProps",
+			"multiple",
 		];
 
 		expect(SelectProps.propNames, "to have keys", propNames);
@@ -34,6 +35,7 @@ describe("Select Props", () => {
 			"onClose",
 			"native",
 			"inputProps",
+			"multiple",
 		];
 
 		const selectProps = new SelectProps();

package/src/components/MaterialUI/Inputs/Switch.js

@@ -39,7 +39,7 @@ export const useStyles = makeStyles(theme => ({
 	track: {
 		backgroundColor: theme.palette.grey.borders,
 		opacity: "1 !important",
-		borderRadius: "20px",
+		borderRadius: theme.spacing(2),
 		position: "relative",
 		"&:before, &:after": {
 			display: "inline-block",

package/src/components/MaterialUI/Navigation/DropDownMenu.js

@@ -1,9 +1,9 @@
 import React, { useState, isValidElement, cloneElement } from "react";
+import { FormattedMessage } from "react-intl";
 import { makeStyles } from "@material-ui/core/styles";
 import Button from "@material-ui/core/Button";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
-import Text from "../../Text";
 import DropDownMenuProps, { isDropDownMenuProps } from "./DropDownMenuProps";
 
 const useStyles = makeStyles(theme => ({
@@ -95,7 +95,7 @@ const DropDownMenu = ({ payload, menuItems, children, dropDownMenuProps = new Dr
 						onClick={onMenuItemClick(action, itemContext)}
 						disabled={disabled}
 					>
-						<Text message={title} />
+						{typeof title === "string" ? title : <FormattedMessage {...title} />}
 					</MenuItem>
 				))}
 			</Menu>

package/src/components/MaterialUI/Navigation/DropDownMenu.test.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Provider } from "react-redux";
 import ReactDOM from "react-dom";
 import sinon from "sinon";
 import { mount } from "enzyme";
@@ -14,7 +13,7 @@ describe("DropDownMenu", () => {
 	let store, menuItems, container;
 	beforeEach(() => {
 		menuItems = [
-			{ title: "asd", action: sinon.spy().named("action"), itemContext: "aContext" },
+			{ title: { id: "asd", defaultMessage: "asd" }, action: sinon.spy().named("action"), itemContext: "aContext" },
 			{ title: "asd2", action: sinon.spy().named("action"), itemContext: "myContext" },
 		];
 		store = {
@@ -73,9 +72,9 @@ describe("DropDownMenu", () => {
 		const payload = "payload";
 
 		ReactDOM.render(
-			<Provider store={store}>
+			<TestWrapper provider={{ store }} intlProvider>
 				<DropDownMenu payload={payload} menuItems={menuItems} />
-			</Provider>,
+			</TestWrapper>,
 			container,
 		);
 
@@ -98,9 +97,9 @@ describe("DropDownMenu", () => {
 		const payload = "payload";
 
 		const component = (
-			<Provider store={store}>
+			<TestWrapper provider={{ store }} intlProvider>
 				<DropDownMenu payload={payload} menuItems={menuItems} />
-			</Provider>
+			</TestWrapper>
 		);
 
 		const mountedComponent = mount(component);