diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx
index 4be84b6e0..49749f2ca 100644
--- a/src/Components/Inputs/Select/index.jsx
+++ b/src/Components/Inputs/Select/index.jsx
@@ -158,7 +158,7 @@ Select.propTypes = {
sx: PropTypes.object,
labelControlSpacing: PropTypes.number,
truncate: PropTypes.bool, // New prop: enable/disable truncation
- maxTruncateLength: PropTypes.number, // New prop: configurable length
+ maxTruncateLength: PropTypes.number, // New prop: deafult is 15
};
export default Select;
diff --git a/src/Pages/Incidents/Components/OptionsHeader/index.jsx b/src/Pages/Incidents/Components/OptionsHeader/index.jsx
index 2e0db24c9..d61899d23 100644
--- a/src/Pages/Incidents/Components/OptionsHeader/index.jsx
+++ b/src/Pages/Incidents/Components/OptionsHeader/index.jsx
@@ -25,7 +25,6 @@ const OptionsHeader = ({
direction: "row",
alignItems: "center",
gap: theme.spacing(6),
- marginLeft: "5px",
};
if (!shouldRender) return ;
@@ -68,15 +67,10 @@ const OptionsHeader = ({
sx={{
ml: "auto",
alignItems: "stretch",
- "& .MuiButtonBase-root": {
- whiteSpace: "nowrap",
- height: "auto",
- "&.MuiButton-group": {
- borderColor: theme.palette.primary.lowContrast,
- },
- },
- "& .MuiButtonBase-root:hover": {
+ "& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
borderColor: theme.palette.primary.lowContrast,
+ width: "auto",
+ whiteSpace: "nowrap",
},
}}
>
@@ -115,15 +109,10 @@ const OptionsHeader = ({
sx={{
ml: "auto",
alignItems: "stretch",
- "& .MuiButtonBase-root": {
- whiteSpace: "nowrap",
- height: "auto",
- "&.MuiButton-group": {
- borderColor: theme.palette.primary.lowContrast,
- },
- },
- "& .MuiButtonBase-root:hover": {
+ "& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
borderColor: theme.palette.primary.lowContrast,
+ width: "auto",
+ whiteSpace: "nowrap",
},
}}
>
diff --git a/src/Utils/Input/utils.jsx b/src/Utils/Input/utils.jsx
index 3d567fe8d..f0cb75ac7 100644
--- a/src/Utils/Input/utils.jsx
+++ b/src/Utils/Input/utils.jsx
@@ -1,27 +1,37 @@
+import PropTypes from "prop-types";
+
/**
* Utility function to render a truncated value with an optional title.
- * @param {string} value - The selected value (But this will always come as id).
- * @param {array} items - The list of items to find the selected value from.
+ * @param {string} displayName - The name or text to display.
* @param {boolean} truncate - Whether to truncate the text or not.
* @param {number} maxLength - The maximum length of the text.
- * @param {string} placeholder - Placeholder text if no value is selected.
+ * @param {string} placeholder - Placeholder text if no value is provided.
* @returns {JSX.Element} - The JSX element for the rendered value.
*/
-export const renderTruncatedValue = (displayName, truncate, maxLength, placeholder) => {
- // If no value or the value is '0', return the placeholder
+export const renderTruncatedValue = function (
+ displayName,
+ truncate,
+ maxLength,
+ placeholder
+) {
if (!displayName || displayName === "0") return placeholder;
- // Function to truncate the text with a dotted end
- const truncateTextWithDottedEnds = (text, maxLength) => {
+ const truncateTextWithDottedEnds = function (text, maxLength) {
if (!text || text.length <= maxLength) return text;
return `${text.substring(0, maxLength)}...`;
};
- // If truncation is enabled, return the truncated text with a title for full value
return truncate ? (
{truncateTextWithDottedEnds(displayName, maxLength)}
) : (
- displayName
+ {displayName}
);
};
+
+renderTruncatedValue.propTypes = {
+ displayName: PropTypes.string, // The name or text to display
+ truncate: PropTypes.bool, // Whether to truncate the text or not
+ maxLength: PropTypes.number, // The maximum length of the text
+ placeholder: PropTypes.string, // Placeholder text if no value is provided
+};