15497092546

Committed 06 Jun 2025 06:19PM UTC coverage: 65.179% (+2.5%) from 62.708%

Build # 15497092546

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #726 from CBIIT/CRDCDH-2817

CRDCDH-2817 Vite/Vitest Migration & Upgrade dependencies

Run Details

3529 of 3882 branches covered (90.91%)

Branch coverage included in aggregate %.

167 of 224 new or added lines in 82 files covered. (74.55%)

7620 existing lines in 126 files now uncovered.

22012 of 35304 relevant lines covered (62.35%)

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

CBIIT / crdc-datahub-ui / 15497092546

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