diff --git a/packages/core/package.json b/packages/core/package.json index 42f5924ccd..d2561fae8d 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -111,7 +111,7 @@ "monday-ui-style": "0.14.1", "prop-types": "^15.8.1", "react-dates": "21.8.0", - "react-inlinesvg": "^3.0.1", + "react-inlinesvg": "^4.1.3", "react-is": "^16.9.0", "react-popper": "^2.3.0", "react-select": "^3.2.0", diff --git a/packages/core/src/components/Icon/CustomSvgIcon/CustomSvgIcon.tsx b/packages/core/src/components/Icon/CustomSvgIcon/CustomSvgIcon.tsx index 8512cd0065..1d58988551 100644 --- a/packages/core/src/components/Icon/CustomSvgIcon/CustomSvgIcon.tsx +++ b/packages/core/src/components/Icon/CustomSvgIcon/CustomSvgIcon.tsx @@ -52,8 +52,11 @@ const CustomSvgIcon: FunctionComponent = ({ if (typeof src !== "string") return null; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const SVGComponent = SVG as React.FC; + return ( - = forwardRef( const componentRef = useRef(null); const mergedRef = useMergeRef(ref, componentRef); const ignoreHeightOverflow = maxLines === 1; - const { ref: overrideRef, class: ellipsisClass } = useEllipsisClass(mergedRef, ellipsis, maxLines); + const { class: ellipsisClass, style: ellipsisStyle } = useEllipsisClass(ellipsis, maxLines); const overrideTooltipProps = useTooltipProps( componentRef, withoutTooltip, @@ -81,9 +81,10 @@ const Typography: VibeComponent = forwardRef( element, { id, + style: ellipsisStyle, "data-testid": dataTestId, className: cx(styles.typography, styles[color], styles[align], ellipsisClass, className), - ref: overrideRef, + ref: mergedRef, role, ...htmlAttributes }, diff --git a/packages/core/src/components/Typography/TypographyHooks.tsx b/packages/core/src/components/Typography/TypographyHooks.tsx index c906848ac2..ebfb4bca51 100644 --- a/packages/core/src/components/Typography/TypographyHooks.tsx +++ b/packages/core/src/components/Typography/TypographyHooks.tsx @@ -1,22 +1,20 @@ -import { MutableRefObject } from "react"; +import { MutableRefObject, useMemo } from "react"; import { ElementContent } from "../../types"; import useIsOverflowing from "../../hooks/useIsOverflowing/useIsOverflowing"; import { TooltipProps } from "../Tooltip/Tooltip"; import styles from "./Typography.module.scss"; -export function useEllipsisClass(ref: MutableRefObject, ellipsis: boolean, maxLines: number) { - let ellipsisClass; - const overrideRef = (node: HTMLElement) => { - node?.style.setProperty("--text-clamp-lines", maxLines.toString()); - ref.current = node; - }; - +export function useEllipsisClass(ellipsis: boolean, maxLines = 1) { + let ellipsisClass: string; // If component contains ellipsis return the fit ellipsis class if (ellipsis) { ellipsisClass = maxLines > 1 ? styles.multiLineEllipsis : styles.singleLineEllipsis; } - return { ref: overrideRef, class: ellipsisClass }; + const result = useMemo(() => { + return { class: ellipsisClass, style: { "--text-clamp-lines": maxLines.toString() } }; + }, [ellipsisClass, maxLines]); + return result; } export function useTooltipProps( diff --git a/yarn.lock b/yarn.lock index efd367b6eb..b65e7dcccb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9812,11 +9812,6 @@ execa@^8.0.1: signal-exit "^4.1.0" strip-final-newline "^3.0.0" -exenv@^1.2.2: - version "1.2.2" - resolved "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" - integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw== - exit@^0.1.2: version "0.1.2" resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -16774,18 +16769,17 @@ react-fast-compare@^3.0.1: resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49" integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== -react-from-dom@^0.6.2: - version "0.6.2" - resolved "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.2.tgz#9da903a508c91c013b55afcd59348b8b0a39bdb4" - integrity sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ== +react-from-dom@^0.7.2: + version "0.7.3" + resolved "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.7.3.tgz#60e75fde2369ceb0a8f87d88f9cfbeb67b730e43" + integrity sha512-9IK6R7+eD1wOAMC2ZCrENev0eK1625cb7vX+cnnOR9LBRNbjKiaJk4ij2zQbcefEXTWjXFhA7CTO1cd8wMONnw== -react-inlinesvg@^3.0.1: - version "3.0.3" - resolved "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-3.0.3.tgz#b52d34869af2f7dd06f459302f5719ff70f0cb44" - integrity sha512-D9wqEyh1+ni07+CP2yaD9nSK11Y2ngd79xudEilX7YHKmUCeP1lXZqFvuLbdOo+m+oEjekd+c0DBc/bj93Lwqg== +react-inlinesvg@^4.1.3: + version "4.1.3" + resolved "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.1.3.tgz#671f083fd78934ec58afa5128460252dcae61177" + integrity sha512-p1+wkr1UQZyLw/3bdpnHO3v3tMNVWyxWnAEY6ML/Ql9ldDYTBTy6HqAyNl7u3au925XPffLMiXKnQrqZeJAldw== dependencies: - exenv "^1.2.2" - react-from-dom "^0.6.2" + react-from-dom "^0.7.2" react-input-autosize@^2.2.2: version "2.2.2" @@ -18447,16 +18441,7 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -18542,7 +18527,7 @@ stringify-entities@^4.0.0: character-entities-html4 "^2.0.0" character-entities-legacy "^3.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -18563,13 +18548,6 @@ strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -20412,7 +20390,7 @@ workerpool@6.2.1: resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343" integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -20430,15 +20408,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"