orc-shared 5.10.2 → 5.99.0-dev.10

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

@@ -8,11 +8,13 @@ import TooltippedTypography from "./../DataDisplay/TooltippedElements/Tooltipped
 import Icon from "./../DataDisplay/Icon";
 import IconButton from "@material-ui/core/IconButton";
 import { ListSubheader } from "@material-ui/core";
+import FormControl from "@material-ui/core/FormControl";
+import useWindowSize from "../../../hooks/useWindowSize";
 
 const useStyles = makeStyles(theme => ({
-	baseItem: {
-		maxWidth: theme.spacing(35),
-	},
+	baseItem: props => ({
+		...(props.autoWidth ? { maxWidth: theme.spacing(35) } : { maxWidth: theme.spacing(props.multipleWidthSpacing) }),
+	}),
 	level0: {},
 	level1: {
 		paddingLeft: theme.spacing(theme.indent),
@@ -42,10 +44,8 @@ const useStyles = makeStyles(theme => ({
 		display: "flex",
 		flexDirection: "column",
 	},
-	selectPaper: {
+	selectPaper: props => ({
 		border: `1px solid ${theme.palette.grey.borders}`,
-		minWidth: `auto !important`,
-		width: `auto !important`,
 		"& ul": {
 			minWidth: theme.spacing(17.5),
 			maxHeight: theme.spacing(30),
@@ -62,16 +62,29 @@ const useStyles = makeStyles(theme => ({
 			borderRadius: 0,
 			whiteSpace: "normal",
 			"&:hover": {
-				backgroundColor: theme.palette.primary.light,
+				backgroundColor: theme.palette.primary.main,
+				"&:not(.Mui-selected) > p": {
+					color: `${theme.palette.primary.contrastText}`,
+				},
+				"&.Mui-selected": {
+					backgroundColor: theme.palette.secondary.light,
+				},
 			},
 			"&:focus, &:active": {
 				borderRadius: 0,
+				boxShadow: props.multiple ? "none" : `0 0 ${theme.spacing(0.4)} #4fa1f0`,
 				"&:hover": {
-					backgroundColor: theme.palette.primary.light,
+					backgroundColor: theme.palette.primary.main,
 				},
 			},
 		},
-	},
+		...(props.autoWidth
+			? {
+					minWidth: `auto !important`,
+					width: `auto !important`,
+				}
+			: {}),
+	}),
 	label: {
 		fontSize: theme.typography.fontSize,
 		color: theme.palette.grey.dark,
@@ -104,6 +117,10 @@ const useStyles = makeStyles(theme => ({
 		backgroundColor: theme.palette.grey.light,
 		border: 0,
 	},
+	formControl: props => ({
+		maxWidth: theme.spacing(props.multipleWidthSpacing),
+		minWidth: theme.spacing(props.multipleWidthSpacing),
+	}),
 }));
 
 const MenuProps = {
@@ -145,9 +162,16 @@ export const SelectIconButton = props => {
 	);
 };
 
+export const renderMultipleValues = (value, options) => {
+	return options
+		.filter(x => value.indexOf(x.value) !== -1)
+		.map(x => x.label)
+		.join(", ");
+};
+
 const selectEmptyValue = "~~#~~";
 
-const Select = ({ options, selectProps, children }) => {
+const Select = ({ options = [], selectProps, children }) => {
 	if (isSelectProps(selectProps) === false) {
 		throw new TypeError("selectProps property is not of type SelectProps");
 	}
@@ -155,8 +179,6 @@ const Select = ({ options, selectProps, children }) => {
 	const [open, setOpen] = useState(false);
 	const ref = useRef(null);
 
-	const classes = useStyles();
-
 	const update = selectProps?.get(SelectProps.propNames.update);
 	const value = selectProps?.get(SelectProps.propNames.value) ?? "";
 	const sortType = selectProps?.get(SelectProps.propNames.sortType) || sortTypeEnum.none;
@@ -169,35 +191,86 @@ 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) || false;
+	const renderValue = selectProps?.get(SelectProps.propNames.renderValue);
+	const autoWidth = selectProps?.get(SelectProps.propNames.autoWidth);
+	const autoFocus = selectProps?.get(SelectProps.propNames.autoFocus);
+	const multipleSelectWidth = selectProps?.get(SelectProps.propNames.multipleSelectWidth);
 	const hasError = !!error;
 
-	if (sortType === sortTypeEnum.numeric) {
-		options.sort((a, b) =>
-			a.sortOrder.localeCompare(b.sortOrder, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-		);
-	} else if (sortType === sortTypeEnum.default) {
-		options.sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1));
-	} else if (sortType === sortTypeEnum.alphabetical) {
-		options.sort((a, b) => {
-			if (a.value === selectEmptyValue) {
-				return -1;
-			}
-			if (b.value === selectEmptyValue) {
-				return 1;
-			}
-			return a.label.localeCompare(b.label);
-		});
-	}
+	const windowSize = useWindowSize();
+
+	// When too many elements are selected from the list, the component can be longer than the screen, not very convenient
+	// We need a fix length unfortunately, for large screen, we use 100% of the multipleSelectWidth, for medium length, 75%
+	// But for very small width, we use the inner width of the browser minus 150px (completely arbitrary value), otherwise
+	// the drop-down is too large and hard to read
+	const multipleSelectWidthFactor = windowSize.innerWidth > 1200 ? 1 : 0.75;
+	const multipleWidthSpacing =
+		windowSize.innerWidth > 750
+			? (multipleSelectWidth / 10) * multipleSelectWidthFactor
+			: (windowSize.innerWidth - 150) / 10;
+	const classes = useStyles({
+		multiple,
+		autoWidth,
+		multipleWidthSpacing,
+	});
+
+	const buildOptionsItems = () => {
+		const allOptions = [...options];
+
+		if (sortType === sortTypeEnum.numeric) {
+			allOptions.sort((a, b) =>
+				a.sortOrder.localeCompare(b.sortOrder, undefined, {
+					numeric: true,
+					sensitivity: "base",
+				}),
+			);
+		} else if (sortType === sortTypeEnum.default) {
+			allOptions.sort((a, b) => (a.sortOrder > b.sortOrder ? 1 : -1));
+		} else if (sortType === sortTypeEnum.alphabetical) {
+			allOptions.sort((a, b) => {
+				if (a.value === selectEmptyValue) {
+					return -1;
+				}
+				if (b.value === selectEmptyValue) {
+					return 1;
+				}
+				return a.label.localeCompare(b.label);
+			});
+		}
+
+		if (showAllValue && showAllLabel) {
+			allOptions.unshift({
+				value: showAllValue,
+				label: showAllLabel,
+			});
+		}
 
-	if (showAllValue && showAllLabel) {
-		options.unshift({
-			value: showAllValue,
-			label: showAllLabel,
+		return allOptions.map(option => {
+			const clss = option?.level ? classes["level" + option.level] : "";
+			const appliedClasses = classNames(classes.baseItem, clss);
+			const labelClss = classNames({
+				[classes.label]: true,
+				[classes.emptyLabel]: option.value === "" || option.value === selectEmptyValue,
+			});
+
+			const disabled = !!option.disabled;
+			const groupHeader = !!option.isGroupHeader;
+			if (groupHeader) {
+				return (
+					<ListSubheader key={option.value} className={appliedClasses}>
+						{option.label}
+					</ListSubheader>
+				);
+			} else {
+				return (
+					<MenuItem key={option.value} value={option.value} className={appliedClasses} disabled={disabled}>
+						<TooltippedTypography noWrap className={labelClss} children={option.label} titleValue={option.label} />
+					</MenuItem>
+				);
+			}
 		});
-	}
+	};
 
 	const handleChange = event => {
 		update(event.target.value);
@@ -205,98 +278,85 @@ const Select = ({ options, selectProps, children }) => {
 
 	const defaultMenuProps = {
 		classes: { paper: classNames(classes.selectPaper, selectProps?.getStyle(SelectProps.ruleNames.paper)) },
+		autoFocus,
 		...MenuProps,
 		...positionOverride,
 	};
 
 	const iconSelectMenuProps = {
 		classes: { paper: classNames(classes.selectPaper, selectProps?.getStyle(SelectProps.ruleNames.paper)) },
+		autoFocus,
 		...positionOverride,
 		...getIconButtonMenuProps(ref.current),
 	};
 
-	const items = options?.map(option => {
-		let clss = option?.level ? classes["level" + option.level] : "";
-		const appliedClasses = classNames(classes.baseItem, clss);
-		const labelClss = classNames({
-			[classes.label]: true,
-			[classes.emptyLabel]: option.value === "" || option.value === selectEmptyValue,
-		});
+	const items = native ? null : buildOptionsItems();
 
-		const disabled = !!option.disabled;
-		const groupHeader = !!option.isGroupHeader;
-		if (groupHeader) {
-			return (
-				<ListSubheader key={option.value} className={appliedClasses}>
-					{option.label}
-				</ListSubheader>
-			);
-		} else {
-			return (
-				<MenuItem key={option.value} value={option.value} className={appliedClasses} disabled={disabled}>
-					<TooltippedTypography noWrap className={labelClss} children={option.label} titleValue={option.label} />
-				</MenuItem>
-			);
-		}
-	});
-
-	const defaultSelect = (
+	const iconSelect = isIconSelect && (
 		<SelectMUI
+			open={open}
 			value={value}
+			ref={ref}
 			onChange={handleChange}
-			onClose={onClose}
 			disableUnderline={true}
-			IconComponent={SelectIcon}
-			MenuProps={defaultMenuProps}
+			IconComponent={SelectIconButton}
+			MenuProps={iconSelectMenuProps}
 			disabled={disabled}
 			error={hasError}
 			native={native}
 			inputProps={inputProps}
+			multiple={multiple}
 			classes={{
 				icon: classes.icon,
 				root: selectProps?.getStyle(SelectProps.ruleNames.root),
+				select: classes.displayNone,
 				disabled: classes.disabled,
 			}}
+			onClick={() => setOpen(!open)}
 		>
-			{native ? children : items}
+			{items ?? children}
 		</SelectMUI>
 	);
 
-	const iconSelect = (
+	// Render the normal select is the icon one is NULL
+	const selectToRender = iconSelect || (
 		<SelectMUI
-			open={open}
 			value={value}
-			ref={ref}
 			onChange={handleChange}
+			onClose={onClose}
 			disableUnderline={true}
-			IconComponent={SelectIconButton}
-			MenuProps={iconSelectMenuProps}
+			IconComponent={SelectIcon}
+			autoWidth={autoWidth}
+			MenuProps={defaultMenuProps}
 			disabled={disabled}
 			error={hasError}
 			native={native}
 			inputProps={inputProps}
+			multiple={multiple}
+			renderValue={renderValue ?? (multiple ? value => renderMultipleValues(value, options) : undefined)}
 			classes={{
 				icon: classes.icon,
 				root: selectProps?.getStyle(SelectProps.ruleNames.root),
-				select: classes.displayNone,
 				disabled: classes.disabled,
 			}}
-			onClick={() => setOpen(!open)}
 		>
-			{native ? children : items}
+			{items ?? children}
 		</SelectMUI>
 	);
 
-	const select = isIconSelect ? iconSelect : defaultSelect;
+	const selectToRenderWithError = hasError && (
+		<div className={classes.container}>
+			{selectToRender}
+			<div className={classNames(classes.errorText)}>{error}</div>
+		</div>
+	);
 
-	return (
-		(error && (
-			<div className={classes.container}>
-				{select}
-				<div className={classNames(classes.errorText)}>{error}</div>
-			</div>
-		)) ||
-		select
+	const selectControl = selectToRenderWithError || selectToRender;
+
+	return multiple === false ? (
+		selectControl
+	) : (
+		<FormControl className={classes.formControl}>{selectControl}</FormControl>
 	);
 };
 

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { mount } from "enzyme";
-import Select, { SelectIconButton } from "./Select";
+import Select, { renderMultipleValues, SelectIconButton } from "./Select";
 import SelectMUI from "@material-ui/core/Select";
 import sinon from "sinon";
 import { ignoreConsoleError, createMuiTheme, TestWrapper } from "../../../utils/testUtils";
@@ -9,6 +9,7 @@ import TooltippedTypography from "./../DataDisplay/TooltippedElements/Tooltipped
 import { ListSubheader, MuiThemeProvider } from "@material-ui/core";
 import MenuItem from "@material-ui/core/MenuItem";
 import Icon from "./../DataDisplay/Icon";
+import FormControl from "@material-ui/core/FormControl";
 
 describe("Select Component", () => {
 	let update, container;
@@ -75,13 +76,14 @@ describe("Select Component", () => {
 		expect(component, "when mounted", "to satisfy", expected);
 	});
 
-	it("Renders Select component with indent classes", () => {
+	it("Renders Select component without errors with a larger width", () => {
 		const options = [
-			{ value: "aValue", label: "aLabel", level: 0 },
-			{ value: "anotherValue", label: "anotherLabel", level: 1 },
-			{ value: "aThirdValue", label: "aThirdLabel", level: 2 },
+			{ value: "aValue", label: "aLabel" },
+			{ value: "anotherValue", label: "anotherLabel" },
 		];
 
+		Object.defineProperty(window, "innerWidth", { configurable: true, value: 1800 });
+
 		const selectProps = new SelectProps();
 
 		selectProps.set(SelectProps.propNames.update, update);
@@ -103,12 +105,49 @@ describe("Select Component", () => {
 					<MenuItem key="aValue" value="aValue">
 						<TooltippedTypography children="aLabel" titleValue="aLabel" />
 					</MenuItem>
-					<MenuItem key="anotherValue" value="anotherValue" className="makeStyles-level1">
+					<MenuItem key="anotherValue" value="anotherValue">
 						<TooltippedTypography noWrap children="anotherLabel" titleValue="anotherLabel" />
 					</MenuItem>
-					<MenuItem key="aThirdValue" value="aThirdValue" className="makeStyles-level2">
-						<TooltippedTypography noWrap children="aThirdLabel" titleValue="aThirdLabel" />
-					</MenuItem>
+				</SelectMUI>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders Select component using native mode", () => {
+		const options = [
+			{ value: "aValue", label: "aLabel", level: 0 },
+			{ value: "anotherValue", label: "anotherLabel", level: 1 },
+			{ value: "aThirdValue", label: "aThirdLabel", level: 2 },
+		];
+
+		const selectProps = new SelectProps();
+
+		selectProps.set(SelectProps.propNames.update, update);
+		selectProps.set(SelectProps.propNames.native, true);
+		selectProps.set(SelectProps.propNames.value, "aValue");
+
+		const component = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<Select options={options} selectProps={selectProps}>
+					<div>French Fries</div>
+					<div>Smashed Potatoes</div>
+					<div>Fried Green Tomatoes</div>
+				</Select>
+			</TestWrapper>
+		);
+
+		const ChevronDown = props => {
+			return <Icon id="dropdown-chevron-down" {...props} />;
+		};
+
+		const expected = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<SelectMUI native value="aValue" disableUnderline={true} IconComponent={ChevronDown} error={false}>
+					<div>French Fries</div>
+					<div>Smashed Potatoes</div>
+					<div>Fried Green Tomatoes</div>
 				</SelectMUI>
 			</TestWrapper>
 		);
@@ -262,8 +301,8 @@ describe("Select Component", () => {
 		};
 
 		const expected = (
-			<div>
-				<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<div>
 					<SelectMUI value="aValue" disableUnderline={true} IconComponent={ChevronDown} error={true}>
 						<MenuItem key="aValue" value="aValue">
 							<TooltippedTypography children="aLabel" titleValue="aLabel" />
@@ -272,9 +311,9 @@ describe("Select Component", () => {
 							<TooltippedTypography noWrap children="anotherLabel" titleValue="anotherLabel" />
 						</MenuItem>
 					</SelectMUI>
-				</TestWrapper>
-				<div>an error message</div>
-			</div>
+					<div>an error message</div>
+				</div>
+			</TestWrapper>
 		);
 
 		expect(component, "when mounted", "to satisfy", expected);
@@ -637,6 +676,51 @@ describe("Select Component", () => {
 		expect(component, "when mounted", "to satisfy", expected);
 	});
 
+	it("Renders Icon Select component correctly using native mode", () => {
+		const options = [
+			{ value: "aValue", label: "aLabel" },
+			{ value: "anotherValue", label: "anotherLabel" },
+		];
+
+		const selectProps = new SelectProps();
+
+		selectProps.set(SelectProps.propNames.update, update);
+		selectProps.set(SelectProps.propNames.value, "aValue");
+		selectProps.set(SelectProps.propNames.iconSelect, true);
+		selectProps.set(SelectProps.propNames.native, true);
+
+		const theme = createMuiTheme();
+
+		const component = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<Select options={options} selectProps={selectProps}>
+					<div>French Fries</div>
+					<div>Smashed Potatoes</div>
+					<div>Fried Green Tomatoes</div>
+				</Select>
+			</TestWrapper>
+		);
+
+		const expected = (
+			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
+				<SelectMUI
+					native
+					open={false}
+					value="aValue"
+					disableUnderline={true}
+					IconComponent={SelectIconButton}
+					error={false}
+				>
+					<div>French Fries</div>
+					<div>Smashed Potatoes</div>
+					<div>Fried Green Tomatoes</div>
+				</SelectMUI>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
 	it("Changes Icon Select open state on click", () => {
 		const options = [
 			{ value: "aValue", label: "aLabel" },
@@ -669,4 +753,105 @@ 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" },
+			{ value: "thirdValue", label: "thirdLabel" },
+		];
+
+		const selectProps = new SelectProps();
+
+		selectProps.set(SelectProps.propNames.update, update);
+		selectProps.set(SelectProps.propNames.multiple, true);
+		selectProps.set(SelectProps.propNames.value, ["aValue", "thirdValue"]);
+
+		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 }}>
+				<FormControl>
+					<SelectMUI
+						value={["aValue", "thirdValue"]}
+						disableUnderline={true}
+						IconComponent={ChevronDown}
+						error={false}
+						multiple={true}
+						renderValue={value => renderMultipleValues(value, options)}
+					>
+						<MenuItem key="aValue" value="aValue">
+							<TooltippedTypography children="aLabel" titleValue="aLabel" />
+						</MenuItem>
+						<MenuItem key="anotherValue" value="anotherValue">
+							<TooltippedTypography noWrap children="anotherLabel" titleValue="anotherLabel" />
+						</MenuItem>
+					</SelectMUI>
+				</FormControl>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+
+	it("Renders Icon Select component correctly using multiple mode and render value", () => {
+		const options = [
+			{ value: "aValue", label: "aLabel" },
+			{ value: "anotherValue", label: "anotherLabel" },
+			{ value: "thirdValue", label: "thirdLabel" },
+		];
+
+		const selectProps = new SelectProps();
+
+		const renderValues = values => values.join("#,#");
+
+		selectProps.set(SelectProps.propNames.update, update);
+		selectProps.set(SelectProps.propNames.multiple, true);
+		selectProps.set(SelectProps.propNames.value, ["aValue", "thirdValue"]);
+		selectProps.set(SelectProps.propNames.renderValue, renderValues);
+
+		const theme = createMuiTheme();
+
+		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 }}>
+				<FormControl>
+					<SelectMUI
+						value={["aValue", "thirdValue"]}
+						disableUnderline={true}
+						IconComponent={ChevronDown}
+						error={false}
+						multiple={true}
+						renderValue={renderValues}
+					>
+						<MenuItem key="aValue" value="aValue">
+							<TooltippedTypography children="aLabel" titleValue="aLabel" />
+						</MenuItem>
+						<MenuItem key="anotherValue" value="anotherValue">
+							<TooltippedTypography noWrap children="anotherLabel" titleValue="anotherLabel" />
+						</MenuItem>
+					</SelectMUI>
+				</FormControl>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
 });

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

@@ -21,6 +21,11 @@ class SelectProps extends ComponentProps {
 		onClose: "onClose",
 		native: "native",
 		inputProps: "inputProps",
+		multiple: "multiple",
+		autoWidth: "autoWidth",
+		autoFocus: "autoFocus",
+		renderValue: "renderValue",
+		multipleSelectWidth: "multipleSelectWidth",
 	};
 
 	static ruleNames = {
@@ -42,6 +47,11 @@ 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, false);
+		this.componentProps.set(this.constructor.propNames.autoWidth, true);
+		this.componentProps.set(this.constructor.propNames.autoFocus, true);
+		this.componentProps.set(this.constructor.propNames.renderValue, null);
+		this.componentProps.set(this.constructor.propNames.multipleSelectWidth, 700);
 
 		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,11 @@ describe("Select Props", () => {
 			"onClose",
 			"native",
 			"inputProps",
+			"multiple",
+			"autoWidth",
+			"autoFocus",
+			"renderValue",
+			"multipleSelectWidth",
 		];
 
 		expect(SelectProps.propNames, "to have keys", propNames);
@@ -34,6 +39,11 @@ describe("Select Props", () => {
 			"onClose",
 			"native",
 			"inputProps",
+			"multiple",
+			"autoWidth",
+			"autoFocus",
+			"renderValue",
+			"multipleSelectWidth",
 		];
 
 		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>