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 +};