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

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

@@ -73,7 +73,7 @@ const useStyles = makeStyles(theme => ({
 	},
 	active: {
 		backgroundColor: `${theme.palette.primary.dark} !important`,
-		boxShadow: "inset 10px 0 10px 1px rgba(0,0,0,0.18)",
+		boxShadow: `inset ${theme.spacing(1, 0, 1, 0.1)} rgba(0,0,0,0.18)`,
 
 		"&:after": {
 			borderLeftColor: `${theme.palette.primary.dark} !important`,
@@ -165,7 +165,7 @@ const StepperModal = ({
 						<FormattedMessage {...sharedMessages.cancel} />
 					</Button>
 
-					{(currentStep < steps.length - 1 || steps[currentStep]?.isIntermediate) &&
+					{currentStep < steps.length - 1 &&
 						(steps[currentStep]?.actions?.length > 0 ? (
 							steps[currentStep].actions.map(action => (
 								<Button
@@ -191,7 +191,7 @@ const StepperModal = ({
 							</Button>
 						))}
 
-					{currentStep === steps.length - 1 && !steps[currentStep]?.isIntermediate && (
+					{currentStep === steps.length - 1 && (
 						<Button
 							variant="contained"
 							color="primary"

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

@@ -335,80 +335,6 @@ describe("StepperModal", () => {
 		expect(okCallback, "was called");
 	});
 
-	it("Renders StepperModal correctly without confirm button for an intermediate step", () => {
-		const open = true;
-		const title = "title";
-		const backdropClickCallback = jest.fn();
-		const okCallback = jest.fn();
-		const cancelCallback = jest.fn();
-		const modalProps = new ModalProps();
-		const actions = [
-			{
-				value: "first value",
-				label: "first action",
-				Handler: () => {},
-			},
-			{
-				value: "second value",
-				label: "second action",
-				Handler: () => {},
-			},
-		];
-		const steps = [{ title: "step1", content: <div>content</div>, actions, isIntermediate: true }];
-
-		const titleComponent = (
-			<div>
-				<div>{title}</div>
-				<div>step1</div>
-			</div>
-		);
-		const messageComponent = <div>{steps[0].content}</div>;
-
-		modalProps.set(ModalProps.propNames.title, titleComponent);
-		modalProps.set(ModalProps.propNames.open, open);
-		modalProps.set(ModalProps.propNames.backdropClickCallback, backdropClickCallback);
-		modalProps.set(ModalProps.propNames.type, "wide");
-
-		const actionPanel = (
-			<div>
-				<div></div>
-				<div>
-					<Button variant="outlined" disabled={false} onClick={() => cancelCallback()}>
-						{sharedMessages.cancel.defaultMessage}
-					</Button>
-					<Button variant="contained" color="primary" disabled={false} onClick={() => {}} disableElevation>
-						first action
-					</Button>
-					<Button variant="contained" color="primary" disabled={false} onClick={() => {}} disableElevation>
-						second action
-					</Button>
-				</div>
-			</div>
-		);
-
-		modalProps.set(ModalProps.propNames.actionPanel, actionPanel);
-
-		const component = (
-			<IntlProvider locale="en-US" messages={messages}>
-				<StepperModal
-					steps={steps}
-					title={title}
-					open={open}
-					confirmCallback={okCallback}
-					closeCallback={cancelCallback}
-				/>
-			</IntlProvider>
-		);
-
-		const expected = (
-			<IntlProvider locale="en-US" messages={messages}>
-				<Modal message={messageComponent} modalProps={modalProps} />
-			</IntlProvider>
-		);
-
-		expect(component, "when mounted", "to satisfy", expected);
-	});
-
 	it("Render closed modal", () => {
 		const open = false;
 

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

@@ -50,9 +50,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-US"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 				</div>
 			</div>
@@ -63,9 +61,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-CA"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 				</div>
 			</div>,
@@ -73,9 +69,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"fr-CA"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 				</div>
 			</div>,
@@ -108,9 +102,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-US"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 					<div>{aError}</div>
 				</div>
@@ -122,9 +114,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-CA"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 				</div>
 			</div>,
@@ -132,9 +122,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"fr-CA"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 				</div>
 			</div>,

package/src/components/MaterialUI/DataDisplay/SelectionList.js

@@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
 		},
 		"&::-webkit-scrollbar-thumb": {
 			background: theme.palette.grey.borders,
-			border: `5px white solid`,
+			border: `${theme.spacing(0.5)} white solid`,
 			backgroundClip: "padding-box",
 			borderRadius: theme.spacing(1.5),
 		},

package/src/components/MaterialUI/DataDisplay/Table.js

@@ -352,7 +352,11 @@ const DefaultFullTable = React.forwardRef((props, ref) => {
 					context={props.context}
 				/>
 			</TableMui>
-			{props.tableRows.length > 0 ? null : <div className={props.classes.placeholder}>{props.placeholder}</div>}
+			{props.tableRows.length > 0 ? null : (
+				<div className={classNames(props.classes.placeholder, props.customClasses.placeholderContainer)}>
+					{props.placeholder}
+				</div>
+			)}
 		</div>
 	);
 });
@@ -441,6 +445,7 @@ const Table = React.forwardRef(
 		customClasses["tableCell"] = tableProps?.getStyle(TableProps.ruleNames.tableCell) || null;
 		customClasses["headerCell"] = tableProps?.getStyle(TableProps.ruleNames.headerCell) || null;
 		customClasses["tableContainer"] = tableProps?.getStyle(TableProps.ruleNames.tableContainer) || null;
+		customClasses["placeholderContainer"] = tableProps?.getStyle(TableProps.ruleNames.placeholderContainer) || null;
 		customClasses["container"] = tableProps?.getStyle(TableProps.ruleNames.container) || null;
 		customClasses["table"] = tableProps?.getStyle(TableProps.ruleNames.table) || null;
 

package/src/components/MaterialUI/DataDisplay/Table.test.js

@@ -8,7 +8,7 @@ import TableMui from "@material-ui/core/Table";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import { buildHeaderAndRowFromConfig } from "./tableHelpers";
-import Placeholder from "../../Placeholder";
+import Placeholder from "./PredefinedElements/Placeholder";
 import TableInfoBar from "./PredefinedElements/TableInfoBar";
 import { ignoreConsoleError } from "../../../utils/testUtils";
 import TableProps from "./TableProps";
@@ -1102,6 +1102,26 @@ describe("Table", () => {
 		expect(placeHolder.length, "to equal", 1);
 	});
 
+	it("Renders Table with placeholder and custom class if rows are empty", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, []);
+
+		const placeholder = <Placeholder />;
+
+		const tableProps = new TableProps();
+		tableProps.setStyle(TableProps.ruleNames.placeholderContainer, "placeholder-container-custom-class");
+
+		const component = <Table rows={rows} headers={headers} placeholder={placeholder} tableProps={tableProps} />;
+
+		const mountedComponent = mount(component);
+
+		const placeHolder = mountedComponent.find(Placeholder);
+		expect(placeHolder.exists(), "to be true");
+
+		const placeholderContainer = placeHolder.parent();
+		expect(placeholderContainer.exists(), "to be true");
+		expect(placeholderContainer.hasClass("placeholder-container-custom-class"), "to be true");
+	});
+
 	it("Renders Table with tableInfo if provided", () => {
 		const { headers, rows } = buildHeaderAndRowFromConfig(config, []);
 

package/src/components/MaterialUI/DataDisplay/TableProps.js

@@ -24,6 +24,7 @@ class TableProps extends ComponentProps {
 		tableContainer: "tableContainer",
 		container: "container",
 		table: "table",
+		placeholderContainer: "placeholderContainer",
 	};
 
 	constructor() {
@@ -47,6 +48,7 @@ class TableProps extends ComponentProps {
 		this.componentClasses.set(this.constructor.ruleNames.tableCell, null);
 		this.componentClasses.set(this.constructor.ruleNames.headerCell, null);
 		this.componentClasses.set(this.constructor.ruleNames.tableContainer, null);
+		this.componentClasses.set(this.constructor.ruleNames.placeholderContainer, null);
 		this.componentClasses.set(this.constructor.ruleNames.container, null);
 		this.componentClasses.set(this.constructor.ruleNames.table, null);
 

package/src/components/MaterialUI/DataDisplay/TableProps.test.js

@@ -12,7 +12,16 @@ describe("TableProps Props", () => {
 			"constrained",
 		];
 
-		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
+		const ruleNames = [
+			"tableHeader",
+			"tableRow",
+			"tableCell",
+			"headerCell",
+			"tableContainer",
+			"placeholderContainer",
+			"container",
+			"table",
+		];
 
 		expect(TableProps.propNames, "to have keys", propNames);
 		expect(TableProps.ruleNames, "to have keys", ruleNames);
@@ -34,7 +43,16 @@ describe("TableProps Props", () => {
 			"saveScrollbarPosition",
 		];
 
-		const ruleNames = ["tableHeader", "tableRow", "tableCell", "headerCell", "tableContainer", "container", "table"];
+		const ruleNames = [
+			"tableHeader",
+			"tableRow",
+			"tableCell",
+			"headerCell",
+			"tableContainer",
+			"placeholderContainer",
+			"container",
+			"table",
+		];
 
 		const tableProps = new TableProps();
 

package/src/components/MaterialUI/DataDisplay/TransferList.js

@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
 		},
 		"&::-webkit-scrollbar-thumb": {
 			background: theme.palette.grey.borders,
-			border: `5px white solid`,
+			border: `${theme.spacing(0.5)} white solid`,
 			backgroundClip: "padding-box",
 			borderRadius: theme.spacing(1.5),
 		},

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

@@ -16,7 +16,7 @@ const useStyles = makeStyles(theme => ({
 		display: "flex",
 		flexDirection: props => (props.row ? "row" : "column"),
 		flexWrap: "wrap",
-		marginLeft: "8px",
+		marginLeft: theme.spacing(0.8),
 	},
 	errorText: {
 		marginTop: theme.spacing(0.5),

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

@@ -27,7 +27,7 @@ const useStyles = makeStyles(theme => ({
 		"&:focus, &:focus-within": {
 			borderRadius: theme.shape.borderRadius,
 			borderColor: theme.palette.focus,
-			boxShadow: `0 0 4px ${theme.palette.focus}`,
+			boxShadow: `0 0 ${theme.spacing(0.4)} ${theme.palette.focus}`,
 			outline: "none",
 		},
 		"& .react-datepicker": {

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

@@ -5,8 +5,6 @@ import InputBaseProps, { isInputProps } from "./InputBaseProps";
 import classNames from "classnames";
 import { NumericFormat, numericFormatter } from "react-number-format";
 import { trimSpacesAndLeadingZeros } from "../../../utils/inputHelper";
-import Icon from "../DataDisplay/Icon";
-import IconButton from "@material-ui/core/IconButton";
 
 export const useStyles = makeStyles(theme => ({
 	container: {
@@ -41,25 +39,11 @@ export const useStyles = makeStyles(theme => ({
 		maxWidth: "unset",
 		minWidth: 0,
 		border: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
-		borderRadius: props => {
-			const topLeft = props.label ? 0 : 0.5;
-			const topRight = props.isAdvancedNumericInput ? 0 : 0.5;
-			const bottomRight = topRight;
-			const bottomLeft = topLeft;
-
-			return theme.spacing(topLeft, topRight, bottomRight, bottomLeft);
-		},
+		borderRadius: props => (props.label ? theme.spacing(0, 0.5, 0.5, 0) : theme.spacing(0.5)),
 		paddingLeft: theme.spacing(0.85),
 		"&:focus, &:active": {
 			border: `${theme.spacing(0.1)} solid ${theme.palette.focus}`,
-			borderRadius: props => {
-				const topLeft = props.label ? 0 : 0.5;
-				const topRight = props.isAdvancedNumericInput ? 0 : 0.5;
-				const bottomRight = topRight;
-				const bottomLeft = topLeft;
-
-				return theme.spacing(topLeft, topRight, bottomRight, bottomLeft);
-			},
+			borderRadius: props => (props.label ? theme.spacing(0, 0.5, 0.5, 0) : theme.spacing(0.5)),
 		},
 	},
 	errorInput: {
@@ -95,41 +79,6 @@ export const useStyles = makeStyles(theme => ({
 	inputMultiline: {
 		padding: theme.spacing(0.6, 0.6, 0.6, 0.85),
 	},
-	numericSpinnerContainer: {
-		display: "flex",
-		backgroundColor: theme.palette.grey.light,
-		flexDirection: "column",
-		borderTopLeftRadius: 0,
-		borderBottomLeftRadius: 0,
-		borderTopRightRadius: theme.shape.borderRadius,
-		borderBottomRightRadius: theme.shape.borderRadius,
-		border: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
-		padding: 0,
-		margin: "0 0 0 -1px",
-	},
-	numericSpinnerUp: {
-		fontSize: "8px",
-		padding: "0 3px",
-		borderBottom: "1px solid #CCCCCC",
-		borderRadius: 0,
-		flex: 1,
-		margin: 0,
-		width: "20px",
-		"& + .MuiButton-root, & + .MuiIconButton-root, & + .MuiInputBase-root": {
-			marginLeft: 0,
-		},
-	},
-	numericSpinnerDown: {
-		fontSize: "8px",
-		padding: "0 3px",
-		borderRadius: 0,
-		flex: 1,
-		margin: 0,
-		marginLeft: 0,
-		"& + .MuiButton-root, & + .MuiIconButton-root, & + .MuiInputBase-root": {
-			marginLeft: 0,
-		},
-	},
 }));
 
 export const AdvancedNumericInput = props => {
@@ -180,13 +129,6 @@ const InputBase = ({ inputProps }) => {
 	const isAdvancedNumericInput = type.toLowerCase() === "advancednumericinput";
 	const inputComponent = isAdvancedNumericInput ? AdvancedNumericInput : undefined;
 	const inputControlType = isAdvancedNumericInput ? "text" : type;
-	const [inputText, setInputText] = React.useState(null);
-	const textToDisplay = inputText ?? value;
-	const classes = useStyles({ label, errorPosition, isAdvancedNumericInput });
-
-	let controlSpecificSuffix = null;
-	let onKeyDown = null;
-	let onWheel = null;
 
 	if (isAdvancedNumericInput && numericInputProps) {
 		Object.keys(numericInputProps).forEach(key => {
@@ -215,115 +157,6 @@ const InputBase = ({ inputProps }) => {
 		inputAttributes.isAllowed = val => {
 			return val.value === "" || val.value === "-" || val.value !== null;
 		};
-
-		if (decimalScale === 0 && !disabled) {
-			const getInitialNumericValue = () => {
-				if (0 >= inputAttributes.min && 0 <= inputAttributes.max) {
-					return 0;
-				}
-
-				if (Math.abs(inputAttributes.min) < Math.abs(inputAttributes.max)) {
-					return inputAttributes.min;
-				}
-
-				return inputAttributes.max;
-			};
-
-			const increaseNumericValue = () => {
-				if (textToDisplay) {
-					const currentValue = parseInt(textToDisplay, 10);
-					if (currentValue + 1 <= inputAttributes.max) {
-						setInputText((currentValue + 1).toString());
-					}
-				} else {
-					let currentValue = getInitialNumericValue();
-					if (currentValue === 0 && currentValue + 1 <= inputAttributes.max) {
-						currentValue++;
-					}
-					setInputText(currentValue.toString());
-				}
-			};
-			const decreaseNumericValue = () => {
-				if (textToDisplay) {
-					const currentValue = parseInt(textToDisplay, 10);
-					if (currentValue - 1 >= inputAttributes.min) {
-						setInputText((currentValue - 1).toString());
-					}
-				} else {
-					let currentValue = getInitialNumericValue();
-					if (currentValue === 0 && currentValue - 1 >= inputAttributes.min) {
-						currentValue--;
-					}
-					setInputText(currentValue.toString());
-				}
-			};
-
-			const focusInput = target => {
-				target.closest(".InputBase-input-wrapper").getElementsByTagName("input")[0].focus();
-			};
-
-			controlSpecificSuffix = (
-				<div className={classes.numericSpinnerContainer}>
-					<IconButton
-						className={classes.numericSpinnerUp}
-						tabIndex="-1"
-						data-qa="increase"
-						disabled={disabled}
-						onMouseDown={event => event.preventDefault()} // prevent the button from stealing focus
-						onClick={event => {
-							event.preventDefault();
-							event.stopPropagation();
-							increaseNumericValue();
-							focusInput(event.target);
-						}}
-					>
-						<Icon id="chevron-up" />
-					</IconButton>
-
-					<IconButton
-						className={classes.numericSpinnerDown}
-						tabIndex="-1"
-						data-qa="decrease"
-						disabled={disabled}
-						onMouseDown={event => event.preventDefault()} // prevent the button from stealing focus
-						onClick={event => {
-							event.preventDefault();
-							event.stopPropagation();
-							decreaseNumericValue();
-							focusInput(event.target);
-						}}
-					>
-						<Icon id="chevron-down" />
-					</IconButton>
-				</div>
-			);
-
-			onKeyDown = event => {
-				if (event.key === "ArrowUp") {
-					event.preventDefault();
-					event.stopPropagation();
-
-					increaseNumericValue();
-				}
-				// Note Alex20260119: using an 'else if' caused issue with code coverage
-				if (event.key === "ArrowDown") {
-					event.preventDefault();
-					event.stopPropagation();
-
-					decreaseNumericValue();
-				}
-			};
-
-			onWheel = event => {
-				if (event.deltaY < 0) {
-					increaseNumericValue();
-				} else {
-					decreaseNumericValue();
-				}
-
-				focusInput(event.target);
-			};
-		}
 	}
 
 	const defaultRows = 4;
@@ -337,6 +170,7 @@ const InputBase = ({ inputProps }) => {
 		// causing onBlur to never fire
 		item.target.focus();
 	};
+	const classes = useStyles({ label, errorPosition });
 
 	const onChangeHandler = event => {
 		if (event.persist) {
@@ -388,6 +222,8 @@ const InputBase = ({ inputProps }) => {
 
 	const inputBaseInputStyle = inputProps?.getStyle(InputBaseProps.ruleNames.input);
 	const errorTextStyle = inputProps?.getStyle(InputBaseProps.ruleNames.errorText);
+	const [inputText, setInputText] = React.useState(null);
+	const textToDisplay = inputText ?? value;
 
 	React.useEffect(() => {
 		if (inputText === null || window.bypassDebounce === true) {
@@ -413,55 +249,36 @@ const InputBase = ({ inputProps }) => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [inputText, metadata, timeoutDelay, update, value]);
 
-	if (onKeyDown) {
-		if (inputAttributes.onKeyDown) {
-			const originalKeyDown = inputAttributes.onKeyDown;
-			inputAttributes.onKeyDown = event => {
-				originalKeyDown(event);
-
-				if (!event.isDefaultPrevented()) {
-					onKeyDown(event);
-				}
-			};
-		} else {
-			inputAttributes.onKeyDown = onKeyDown;
-		}
-	}
-
 	return (
 		<div className={classes.container}>
 			<div className={classes.inputContainer}>
 				{label && <label className={`${classes.prepend} ${disabled && classes.disabledPrepend}`}>{label}</label>}
-				<div style={{ display: "flex" }} className="InputBase-input-wrapper">
-					<InputBaseMUI
-						classes={{
-							input: classNames(classes.controlInput, inputBaseInputStyle),
-							error: classes.errorInput,
-							disabled: classes.disabled,
-							multiline: classes.multiline,
-							inputMultiline: classes.inputMultiline,
-						}}
-						onBlur={onBlurInternal}
-						onClick={onClick}
-						type={inputControlType}
-						placeholder={placeholder}
-						value={textToDisplay}
-						fullWidth={true}
-						onWheel={onWheel}
-						onChange={event => onChangeHandler(event)}
-						error={!!error}
-						inputProps={inputAttributes}
-						inputComponent={inputComponent}
-						disabled={disabled}
-						multiline={multiline}
-						startAdornment={startAdornment}
-						endAdornment={endAdornment}
-						minRows={rows}
-						title={tooltipText}
-						autoComplete={autoComplete}
-					/>
-					{controlSpecificSuffix}
-				</div>
+				<InputBaseMUI
+					classes={{
+						input: classNames(classes.controlInput, inputBaseInputStyle),
+						error: classes.errorInput,
+						disabled: classes.disabled,
+						multiline: classes.multiline,
+						inputMultiline: classes.inputMultiline,
+					}}
+					onBlur={onBlurInternal}
+					onClick={onClick}
+					type={inputControlType}
+					placeholder={placeholder}
+					value={textToDisplay}
+					fullWidth={true}
+					onChange={event => onChangeHandler(event)}
+					error={!!error}
+					inputProps={inputAttributes}
+					inputComponent={inputComponent}
+					disabled={disabled}
+					multiline={multiline}
+					startAdornment={startAdornment}
+					endAdornment={endAdornment}
+					minRows={rows}
+					title={tooltipText}
+					autoComplete={autoComplete}
+				/>
 			</div>
 			{error && <div className={classNames(classes.errorText, errorTextStyle)}>{error}</div>}
 		</div>