18789341118

Committed 24 Oct 2025 06:57PM UTC coverage: 78.178% (+15.5%) from 62.703%

Build # 18789341118

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #888 from CBIIT/3.4.0

3.4.0 Release

Run Details

4977 of 5488 branches covered (90.69%)

Branch coverage included in aggregate %.

8210 of 9264 new or added lines in 257 files covered. (88.62%)

6307 existing lines in 120 files now uncovered.

30203 of 39512 relevant lines covered (76.44%)

213.36 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.82

/src/components/StyledFormComponents/StyledAutocomplete.tsx

import { Autocomplete, Paper, styled } from "@mui/material";

import dropdownArrowsIcon from "../../assets/icons/dropdown_arrows.svg?url";

const StyledAutocomplete = styled(Autocomplete)(({ readOnly }: { readOnly?: boolean }) => ({
  "& .MuiInputBase-root": {
    "&.MuiAutocomplete-inputRoot.MuiInputBase-root": {
      padding: 0,
      color: "#083A50",
    },

    ...(readOnly && {
      "& *": {
        cursor: "not-allowed",
      },
    }),
  },

  // Base input
  "& .MuiInputBase-input": {
    backgroundColor: "#fff",
    padding: "10.5px 30px 10.5px 12px !important",
    minHeight: "20px !important",
    ...(readOnly && {
      backgroundColor: "#E5EEF4",
      cursor: "not-allowed",
    }),
  },

  // Input placeholder
  "& .MuiInputBase-input::placeholder": {
    color: "#87878C",
    fontWeight: 400,
    opacity: 1,
  },

  // Border
  "& .MuiOutlinedInput-notchedOutline": {
    borderRadius: "8px",
    borderColor: "#6B7294",
  },

  // Input focused
  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
    border: "1px solid #209D7D !important",
    boxShadow:
      "2px 2px 4px 0px rgba(38, 184, 147, 0.10), -1px -1px 6px 0px rgba(38, 184, 147, 0.20)",
  },

  // Input with error
  "&.Mui-error fieldset": {
    borderColor: "#D54309 !important",
  },

  // Arrow Adornment
  "&.MuiAutocomplete-root .MuiAutocomplete-endAdornment": {
    top: "50%",
    transform: "translateY(-50%)",
    right: "9px",
  },
  "& .MuiAutocomplete-popupIndicator": {
    marginRight: "1px",
  },
  "& .MuiAutocomplete-popupIndicatorOpen": {
    transform: "none",
  },
}));

/**
 * A pre-styled Paper component for the Autocomplete dropdown.
 *
 * @note This is applied to the default export automatically, but is exported for further customization.
 */
export const StyledPaper = styled(Paper)({
  borderRadius: "8px",
  border: "1px solid #6B7294",
  marginTop: "2px",
  color: "#083A50",
  "& .MuiAutocomplete-listbox": {
    padding: 0,
    overflow: "auto",
    maxHeight: "300px",
  },
  "& .MuiAutocomplete-option[aria-selected='true']": {
    backgroundColor: "#3E7E6D !important",
    color: "#FFFFFF",
  },
  "& .MuiAutocomplete-option": {
    padding: "7.5px 10px",
    minHeight: "35px",
    background: "#FFFFFF",
  },
  "& .MuiAutocomplete-option:hover": {
    backgroundColor: "#3E7E6D",
    color: "#FFFFFF",
  },
  "& .MuiAutocomplete-option.Mui-focused": {
    backgroundColor: "#3E7E6D !important",
    color: "#FFFFFF",
  },
});

const DropdownArrowsIcon = styled("div")({
  backgroundImage: `url("${dropdownArrowsIcon}")`,
  backgroundSize: "contain",
  backgroundRepeat: "no-repeat",
  width: "10px",
  height: "18px",
});

StyledAutocomplete.defaultProps = {
  /**
   * Consistent icon for the dropdown arrow.
   */
  popupIcon: <DropdownArrowsIcon />,
  /**
   * Force the popup icon to always be visible.
   */
  forcePopupIcon: true,
  /**
   * Disable the MUI portal rendering.
   */
  disablePortal: true,
  /**
   * Disable the clear icon by default.
   */
  disableClearable: true,
  /**
   * Force a custom Paper component to style the dropdown.
   *
   * @note The paper is not nested within the Autocomplete component,
   * so it must be styled separately.
   */
  PaperComponent: StyledPaper,
};

export default StyledAutocomplete;

1	import { Autocomplete, Paper, styled } from "@mui/material";	1✔
2
3	import dropdownArrowsIcon from "../../assets/icons/dropdown_arrows.svg?url";	1✔
4
5	const StyledAutocomplete = styled(Autocomplete)(({ readOnly }: { readOnly?: boolean }) => ({	1✔
6	"& .MuiInputBase-root": {	259✔
7	"&.MuiAutocomplete-inputRoot.MuiInputBase-root": {	259✔
8	padding: 0,	259✔
9	color: "#083A50",	259✔
10	},	259✔
11
12	...(readOnly && {	259!
UNCOV 13	"& *": {	×
UNCOV 14	cursor: "not-allowed",	×
UNCOV 15	},	×
UNCOV 16	}),	×
17	},	259✔
18
19	// Base input
20	"& .MuiInputBase-input": {	259✔
21	backgroundColor: "#fff",	259✔
22	padding: "10.5px 30px 10.5px 12px !important",	259✔
23	minHeight: "20px !important",	259✔
24	...(readOnly && {	259!
UNCOV 25	backgroundColor: "#E5EEF4",	×
UNCOV 26	cursor: "not-allowed",	×
UNCOV 27	}),	×
28	},	259✔
29
30	// Input placeholder
31	"& .MuiInputBase-input::placeholder": {	259✔
32	color: "#87878C",	259✔
33	fontWeight: 400,	259✔
34	opacity: 1,	259✔
35	},	259✔
36
37	// Border
38	"& .MuiOutlinedInput-notchedOutline": {	259✔
39	borderRadius: "8px",	259✔
40	borderColor: "#6B7294",	259✔
41	},	259✔
42
43	// Input focused
44	"&.Mui-focused .MuiOutlinedInput-notchedOutline": {	259✔
45	border: "1px solid #209D7D !important",	259✔
46	boxShadow:	259✔
47	"2px 2px 4px 0px rgba(38, 184, 147, 0.10), -1px -1px 6px 0px rgba(38, 184, 147, 0.20)",	259✔
48	},	259✔
49
50	// Input with error
51	"&.Mui-error fieldset": {	259✔
52	borderColor: "#D54309 !important",	259✔
53	},	259✔
54
55	// Arrow Adornment
56	"&.MuiAutocomplete-root .MuiAutocomplete-endAdornment": {	259✔
57	top: "50%",	259✔
58	transform: "translateY(-50%)",	259✔
59	right: "9px",	259✔
60	},	259✔
61	"& .MuiAutocomplete-popupIndicator": {	259✔
62	marginRight: "1px",	259✔
63	},	259✔
64	"& .MuiAutocomplete-popupIndicatorOpen": {	259✔
65	transform: "none",	259✔
66	},	259✔
67	}));	1✔
68
69	/**
70	* A pre-styled Paper component for the Autocomplete dropdown.
71	*
72	* @note This is applied to the default export automatically, but is exported for further customization.
73	*/
74	export const StyledPaper = styled(Paper)({	1✔
75	borderRadius: "8px",	1✔
76	border: "1px solid #6B7294",	1✔
77	marginTop: "2px",	1✔
78	color: "#083A50",	1✔
79	"& .MuiAutocomplete-listbox": {	1✔
80	padding: 0,	1✔
81	overflow: "auto",	1✔
82	maxHeight: "300px",	1✔
83	},	1✔
84	"& .MuiAutocomplete-option[aria-selected='true']": {	1✔
85	backgroundColor: "#3E7E6D !important",	1✔
86	color: "#FFFFFF",	1✔
87	},	1✔
88	"& .MuiAutocomplete-option": {	1✔
89	padding: "7.5px 10px",	1✔
90	minHeight: "35px",	1✔
91	background: "#FFFFFF",	1✔
92	},	1✔
93	"& .MuiAutocomplete-option:hover": {	1✔
94	backgroundColor: "#3E7E6D",	1✔
95	color: "#FFFFFF",	1✔
96	},	1✔
97	"& .MuiAutocomplete-option.Mui-focused": {	1✔
98	backgroundColor: "#3E7E6D !important",	1✔
99	color: "#FFFFFF",	1✔
100	},	1✔
101	});	1✔
102
103	const DropdownArrowsIcon = styled("div")({	1✔
104	backgroundImage: `url("${dropdownArrowsIcon}")`,	1✔
105	backgroundSize: "contain",	1✔
106	backgroundRepeat: "no-repeat",	1✔
107	width: "10px",	1✔
108	height: "18px",	1✔
109	});	1✔
110
111	StyledAutocomplete.defaultProps = {	1✔
112	/**
113	* Consistent icon for the dropdown arrow.
114	*/
115	popupIcon: <DropdownArrowsIcon />,	1✔
116	/**
117	* Force the popup icon to always be visible.
118	*/
119	forcePopupIcon: true,	1✔
120	/**
121	* Disable the MUI portal rendering.
122	*/
123	disablePortal: true,	1✔
124	/**
125	* Disable the clear icon by default.
126	*/
127	disableClearable: true,	1✔
128	/**
129	* Force a custom Paper component to style the dropdown.
130	*
131	* @note The paper is not nested within the Autocomplete component,
132	* so it must be styled separately.
133	*/
134	PaperComponent: StyledPaper,	1✔
135	};	1✔
136
137	export default StyledAutocomplete;	1✔

CBIIT / crdc-datahub-ui / 18789341118

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous