orc-shared 5.7.0-dev.9 → 5.8.0-dev.2

package/src/actions/scopes.js

@@ -1,6 +1,11 @@
 import { makeActionTypes } from "./makeApiAction";
 import makeOrcApiAction from "./makeOrcApiAction";
-import { getApplicationModules, getUserScopeRequest, getUserScopeTreeRequest } from "./requestsApi";
+import {
+	getApplicationModules,
+	getUserScopeRequest,
+	getUserScopeTreeRequest,
+	getScopeExtendedConfigurationRequest,
+} from "./requestsApi";
 import { overtureModule } from "../constants";
 
 export const validateOvertureApplication = () => {
@@ -60,3 +65,22 @@ export const applicationScopeHasChanged = (previousScope, newScope, moduleName)
 		},
 	};
 };
+
+export const GET_SCOPE_EXTENDED_CONFIGURATION = "GET_SCOPE_EXTENDED_CONFIGURATION";
+
+export const [
+	GET_SCOPE_EXTENDED_CONFIGURATION_REQUEST,
+	GET_SCOPE_EXTENDED_CONFIGURATION_SUCCESS,
+	GET_SCOPE_EXTENDED_CONFIGURATION_FAILURE,
+] = makeActionTypes(GET_SCOPE_EXTENDED_CONFIGURATION);
+
+export const getScopeExtendedConfiguration = scope =>
+	makeOrcApiAction(
+		GET_SCOPE_EXTENDED_CONFIGURATION,
+		getScopeExtendedConfigurationRequest.buildUrl(scope),
+		getScopeExtendedConfigurationRequest.verb,
+		{
+			bailout: false,
+			meta: { scope },
+		},
+	);

package/src/actions/scopes.test.js

@@ -12,6 +12,7 @@ import {
 	GET_APPLICATION_MODULES_REQUEST,
 	GET_APPLICATION_MODULES_SUCCESS,
 	GET_APPLICATION_MODULES_FAILURE,
+	getScopeExtendedConfiguration,
 } from "./scopes";
 
 jest.mock("../utils/buildUrl", () => {
@@ -150,3 +151,36 @@ describe("applicationScopeHasChanged", () => {
 		});
 	});
 });
+
+describe("getScopeExtendedConfiguration", () => {
+	it("creates a RSAA to fetch a scope extended configuration", () => {
+		expect(getScopeExtendedConfiguration, "when called with", ["zeScope"], "to exhaustively satisfy", {
+			[RSAA]: {
+				types: [
+					{
+						type: "GET_SCOPE_EXTENDED_CONFIGURATION_REQUEST",
+						meta: { scope: "zeScope" },
+					},
+					{
+						type: "GET_SCOPE_EXTENDED_CONFIGURATION_SUCCESS",
+						meta: { scope: "zeScope" },
+					},
+					{
+						type: "GET_SCOPE_EXTENDED_CONFIGURATION_FAILURE",
+						meta: { scope: "zeScope" },
+					},
+				],
+				endpoint: 'URL: scopes/zeScope/extendedConfiguration ""',
+				method: "GET",
+				body: undefined,
+				credentials: "include",
+				bailout: false,
+				headers: {
+					Accept: "application/json; charset=utf-8",
+					"Content-Type": "application/json",
+				},
+				options: { redirect: "follow" },
+			},
+		});
+	});
+});

package/src/buildStore.js

@@ -11,6 +11,7 @@ import localeFactory, { cultureByDefault } from "./reducers/localeFactory";
 import navigationReducer from "./reducers/navigation";
 import requestReducer from "./reducers/request";
 import scopesReducer from "./reducers/scopes";
+import scopesExtendedConfigurationReducer from "./reducers/scopesExtendedConfiguration";
 import settingsReducer from "./reducers/settings";
 import toastReducer from "./reducers/toasts";
 import viewReducer from "./reducers/view";
@@ -59,6 +60,7 @@ const buildStore = (reducers, devOptions = {}) => {
 			router: connectRouter(history),
 			requests: requestReducer,
 			scopes: scopesReducer,
+			scopesExtendedConfiguration: scopesExtendedConfigurationReducer,
 			settings: settingsReducer,
 			toasts: toastReducer,
 			versionInfo: versionInfoReducer,

package/src/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.js

@@ -77,7 +77,7 @@ const InformationItemChildren = ({
 	return <MultipleLinesText textProps={multipleLinesTextProps} children={value} tooltipClasses={tooltipClasses} />;
 };
 
-const InformationItemHeader = ({ classes, label, headerIcon }) => {
+const InformationItemHeader = ({ classes, label, headerIcon, headerIconClassName }) => {
 	const formattedLabel = typeof label === "object" ? <FormattedMessage {...label} /> : label;
 	const headerText = (formattedLabel && <Typography className={classes.title} children={formattedLabel} />) ?? null;
 
@@ -85,7 +85,7 @@ const InformationItemHeader = ({ classes, label, headerIcon }) => {
 		return (
 			<div className={classes.headerRoot}>
 				<div className={classes.headerTextContainer}>{headerText}</div>
-				<div className={classes.headerIconContainer}>{headerIcon}</div>
+				<div className={classNames(classes.headerIconContainer, headerIconClassName)}>{headerIcon}</div>
 			</div>
 		);
 	}
@@ -99,6 +99,7 @@ const InformationItem = ({
 	required,
 	error,
 	headerIcon = undefined,
+	headerIconClassName = undefined,
 	showNotAvailable = false,
 	marginTop = 0,
 	isMaxLineCountEnabled,
@@ -109,7 +110,12 @@ const InformationItem = ({
 
 	return (
 		<div className={classes.container}>
-			<InformationItemHeader classes={classes} label={label} headerIcon={headerIcon} />
+			<InformationItemHeader
+				classes={classes}
+				label={label}
+				headerIcon={headerIcon}
+				headerIconClassName={headerIconClassName}
+			/>
 			<InformationItemChildren
 				classes={classes}
 				children={children}

package/src/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.test.js

@@ -315,4 +315,33 @@ describe("Information Item", () => {
 
 		expect(component, "when mounted", "to satisfy", expected);
 	});
+
+	it("Renders Information Item properly with a header icon and custom header icon class", () => {
+		const label = "label";
+		const value = "value";
+
+		const component = (
+			<IntlProvider locale="en-US">
+				<InformationItem label={label} headerIcon={<span>the header icon</span>} headerIconClassName="CustomClass">
+					{value}
+				</InformationItem>
+			</IntlProvider>
+		);
+
+		const expected = (
+			<div>
+				<div>
+					<div>
+						<Typography children={label} />
+					</div>
+					<div className={"CustomClass"}>
+						<span>the header icon</span>
+					</div>
+				</div>
+				<MultipleLinesText>{value}</MultipleLinesText>
+			</div>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
 });

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

@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
 	},
 	checkBoxContainer: {
 		display: "flex",
-		flexDirection: "row",
+		flexDirection: props => (props.row ? "row" : "column"),
 		flexWrap: "wrap",
 		"& .MuiFormControlLabel-root": {
 			[theme.breakpoints.up("xs")]: {},
@@ -35,8 +35,6 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const CheckboxGroup = ({ checkboxGroupProps }) => {
-	const classes = useStyles();
-
 	if (isCheckboxGroupProps(checkboxGroupProps) === false) {
 		throw new TypeError("checkboxGroupProps property is not of type CheckboxGroupProps");
 	}
@@ -48,6 +46,9 @@ const CheckboxGroup = ({ checkboxGroupProps }) => {
 	const readOnly = checkboxGroupProps?.get(CheckboxGroupProps.propNames.readOnly) || false;
 	const disabled = checkboxGroupProps?.get(CheckboxGroupProps.propNames.disabled) || false;
 	const options = checkboxGroupProps?.get(CheckboxGroupProps.propNames.options) ?? [];
+	const row = checkboxGroupProps.get(CheckboxGroupProps.propNames.row) ?? true;
+
+	const classes = useStyles({ row });
 
 	const handleGroupUpdate = (checked, value, newValue) => {
 		const values = value ? value.split("|") : [];
@@ -64,7 +65,7 @@ const CheckboxGroup = ({ checkboxGroupProps }) => {
 
 	const checkBoxGroup = (
 		<div className={classes.container}>
-			<div className={classes.checkBoxContainer}>
+			<div className={classes.checkBoxContainer} data-qa="checkboxgroup-container">
 				{options.map((option, index) => {
 					const checkboxProps = new CheckboxProps();
 					checkboxProps.set(CheckboxProps.propNames.update, checked => handleGroupUpdate(checked, value, option.value));

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

@@ -85,6 +85,28 @@ describe("CheckboxGroup Component", () => {
 		expect(component, "when mounted", "to satisfy", expected);
 	});
 
+	it("Renders CheckboxGroup component without errors and vertical orientation", () => {
+		const props = new CheckboxGroupProps();
+		const options = [
+			{ value: "option1", sortOrder: 1 },
+			{ value: "option2", sortOrder: 2 },
+			{ value: "option3", sortOrder: 3 },
+			{ value: "option3_special", sortOrder: 4 },
+		];
+
+		props.set(CheckboxGroupProps.propNames.update, update);
+		props.set(CheckboxGroupProps.propNames.value, "option1|option3_special");
+		props.set(CheckboxGroupProps.propNames.options, options);
+		props.set(CheckboxGroupProps.propNames.row, false);
+		const component = <CheckboxGroup checkboxGroupProps={props} />;
+
+		const mountedComponent = mount(component);
+		const container = mountedComponent.find("[data-qa='checkboxgroup-container']");
+
+		const styles = getComputedStyle(container.getDOMNode());
+		expect(styles.flexDirection, "to be", "column");
+	});
+
 	it("Renders CheckboxGroup component without errors when options are not specified", () => {
 		const props = new CheckboxGroupProps();
 

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

@@ -9,6 +9,7 @@ class CheckboxGroupProps extends ComponentProps {
 		readOnly: "readOnly",
 		disabled: "disabled",
 		error: "error",
+		row: "row",
 	};
 
 	constructor() {
@@ -20,6 +21,7 @@ class CheckboxGroupProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.disabled, null);
 		this.componentProps.set(this.constructor.propNames.options, null);
 		this.componentProps.set(this.constructor.propNames.error, null);
+		this.componentProps.set(this.constructor.propNames.row, null);
 
 		this._isCheckboxGroupProps = true;
 	}

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

@@ -2,13 +2,13 @@ import CheckboxGroupProps, { isCheckboxGroupProps } from "./CheckboxGroupProps";
 
 describe("CheckboxGroup Props", () => {
 	it("Contains necessary props keys", () => {
-		const propNames = ["update", "value", "label", "readOnly", "disabled", "options", "error"];
+		const propNames = ["update", "value", "label", "readOnly", "disabled", "options", "error", "row"];
 
 		expect(CheckboxGroupProps.propNames, "to have keys", propNames);
 	});
 
 	it("Puts keys in component props map", () => {
-		const propNames = ["update", "value", "label", "readOnly", "disabled", "options", "error"];
+		const propNames = ["update", "value", "label", "readOnly", "disabled", "options", "error", "row"];
 
 		const checkboxProps = new CheckboxGroupProps();
 

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

@@ -146,12 +146,15 @@ const InputBase = ({ inputProps }) => {
 			inputAttributes.min = -2147483648;
 		}
 
+		const decimalScale = numericInputProps?.decimalScale ?? 0;
+
+		const lengthForMin = Math.trunc(inputAttributes.min).toString().length;
+		const lengthForMax = Math.trunc(inputAttributes.max).toString().length;
+
+		inputAttributes.maxLength = Math.max(lengthForMin, lengthForMax) + (decimalScale > 0 ? decimalScale + 1 : 0);
+
 		inputAttributes.isAllowed = val => {
-			return (
-				val.value === "" ||
-				val.value === "-" ||
-				(val.floatValue >= inputAttributes.min && val.floatValue <= inputAttributes.max)
-			);
+			return val.value === "" || val.value === "-" || val.value !== null;
 		};
 	}
 

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

@@ -436,6 +436,166 @@ describe("AdvancedNumericInput", () => {
 		expect(advInput.props().decimalScale, "to be", 2);
 	});
 
+	it("Renders InputBase component as advanced numeric input without min max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		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 advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 2);
+		expect(advInput.props().min, "to be", -2147483648);
+		expect(advInput.props().max, "to be", 2147483647);
+		expect(advInput.props().maxLength, "to be", 14);
+	});
+
+	it("Renders InputBase component as advanced numeric input without min", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		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, { max: 122 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 0);
+		expect(advInput.props().min, "to be", -2147483648);
+		expect(advInput.props().max, "to be", 122);
+		expect(advInput.props().maxLength, "to be", 11);
+	});
+
+	it("Renders InputBase component as advanced numeric input without max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		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 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -9.9 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 2);
+		expect(advInput.props().min, "to be", -9.9);
+		expect(advInput.props().max, "to be", 2147483647);
+		expect(advInput.props().maxLength, "to be", 13);
+	});
+
+	it("Renders InputBase component as advanced numeric input with negative min positive max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		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: 1 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -999.9, max: 9.8 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 1);
+		expect(advInput.props().min, "to be", -999.9);
+		expect(advInput.props().max, "to be", 9.8);
+		expect(advInput.props().maxLength, "to be", 6);
+	});
+
+	it("Renders InputBase component as advanced numeric input with negative min large positive max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		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: 1 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -9.9, max: 99999.8 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 1);
+		expect(advInput.props().min, "to be", -9.9);
+		expect(advInput.props().max, "to be", 99999.8);
+		expect(advInput.props().maxLength, "to be", 7);
+	});
+
+	it("Renders InputBase component as advanced numeric input with negative min negative max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		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: 3 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: -99.9, max: -9.8 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 3);
+		expect(advInput.props().min, "to be", -99.9);
+		expect(advInput.props().max, "to be", -9.8);
+		expect(advInput.props().maxLength, "to be", 7);
+	});
+
+	it("Renders InputBase component as advanced numeric input with positive min positive max", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		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: 5 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { min: 9.9, max: 99.8 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 5);
+		expect(advInput.props().min, "to be", 9.9);
+		expect(advInput.props().max, "to be", 99.8);
+		expect(advInput.props().maxLength, "to be", 8);
+	});
+
 	it("Change advanced numeric input value", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";
@@ -686,116 +846,6 @@ describe("AdvancedNumericInput", () => {
 		// no idea what to assert here, this test is mostly for code coverage
 	});
 
-	it("Change advanced numeric input value with min value out of default bounds", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-
-		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 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("change", { target: { value: "-3147483648", focus: noop } });
-
-		expect(update, "not to have calls satisfying", [{ args: ["-3147483648", metadata] }]);
-
-		input.simulate("change", { target: { value: "-111", focus: noop } });
-		expect(update, "to have calls satisfying", [{ args: ["-111", metadata] }]);
-	});
-
-	it("Change advanced numeric input value with min value out of specified bounds", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-
-		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 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-		inputProps.set(InputBaseProps.propNames.inputAttributes, {
-			min: -100,
-		});
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("change", { target: { value: "-2000", focus: noop } });
-
-		expect(update, "not to have calls satisfying", [{ args: ["-2000", metadata] }]);
-
-		input.simulate("change", { target: { value: "-11", focus: noop } });
-		expect(update, "to have calls satisfying", [{ args: ["-11", metadata] }]);
-	});
-
-	it("Change advanced numeric input value with max value out of default bounds", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-
-		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 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("change", { target: { value: "3147483648", focus: noop } });
-
-		expect(update, "not to have calls satisfying", [{ args: ["3147483648", metadata] }]);
-
-		input.simulate("change", { target: { value: "111", focus: noop } });
-		expect(update, "to have calls satisfying", [{ args: ["111", metadata] }]);
-	});
-
-	it("Change advanced numeric input value with max value out of specified bounds", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-
-		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 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-		inputProps.set(InputBaseProps.propNames.inputAttributes, {
-			max: 100,
-		});
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("change", { target: { value: "2000", focus: noop } });
-
-		expect(update, "not to have calls satisfying", [{ args: ["2000", metadata] }]);
-
-		input.simulate("change", { target: { value: "11", focus: noop } });
-		expect(update, "to have calls satisfying", [{ args: ["11", metadata] }]);
-	});
-
 	it("Change advanced numeric input value: dash is allowed", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";

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

@@ -153,6 +153,7 @@ const SearchControl = ({
 	disabled,
 	focusAndSelectSearchFieldOnLoad = true,
 	focusSearchOnSearchOptionChange = false,
+	trimSearchvalue = true,
 }) => {
 	searchOptions = !searchOptions?.length ? null : searchOptions;
 	searchOption = getSearchOptionValue(searchOptions, searchOption);
@@ -161,9 +162,15 @@ const SearchControl = ({
 
 	const inputRef = useRef();
 
-	const update = value => {
+	const onSearchInternal = (newSearchOption, value) => {
+		const searchValue = trimSearchvalue ? value?.trim() : value;
+
+		onSearch(newSearchOption, searchValue);
+	};
+
+	const update = newSearchOption => {
 		if (focusSearchOnSearchOptionChange && inputRef.current) {
-			onSearch(value, "");
+			onSearchInternal(newSearchOption, "");
 			setTimeout(() => {
 				/* istanbul ignore next */
 				if (inputRef.current) {
@@ -173,7 +180,7 @@ const SearchControl = ({
 				}
 			}, 0);
 		} else {
-			onSearch(value, defaultValue);
+			onSearchInternal(newSearchOption, inputRef.current?.value);
 		}
 	};
 
@@ -208,7 +215,7 @@ const SearchControl = ({
 
 	const onSubmit = event => {
 		// using form submit instead of a keydown (with key=enter) to allow the 'enter key' event to be canceled elsewhere to avoid the submit event
-		onSearch(searchOption, inputRef.current?.value);
+		onSearchInternal(searchOption, inputRef.current?.value);
 		event.preventDefault();
 	};
 
@@ -231,7 +238,7 @@ const SearchControl = ({
 								disabled={disabled}
 								onClick={() => {
 									inputRef.current.value = null;
-									onSearch(searchOption);
+									onSearchInternal(searchOption);
 									inputRef.current.focus();
 								}}
 								className={classes.clearButton}
@@ -252,7 +259,7 @@ const SearchControl = ({
 			disabled={disabled}
 			classes={{ root: classes.searchButton }}
 			onClick={() => {
-				onSearch(searchOption, inputRef.current.value);
+				onSearchInternal(searchOption, inputRef.current.value);
 			}}
 		>
 			<Icon id="search" />