npm - @corva/ui - Versions diffs - 3.82.0-3 → 3.82.0-4 - Mend

@corva/ui 3.82.0-3 → 3.82.0-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/cjs-bundle/componentsV2/TextMiddleTruncated/TextMiddleTruncated.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/slicedToArray"),r=require("classnames"),n=require("react"),i=require("lodash"),c=require("../Tooltip/Tooltip.js"),s=require("./TextMiddleTruncated.constants.js"),u=require("./TextMiddleTruncated.scss.js"),a=require("../../utils/formatting.js"),l=require("react/jsx-runtime");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(e),f=o(t),v=o(r);function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}var h=function(e){var t=e.children,r=void 0===t?"":t,o=e.testId,b=e.className,h=e.disableTooltip,p=e.maxLines,j=void 0===p?1:p,T=String(r),m=n.useRef(null),x=n.useRef(null),O=n.useRef(null),y=n.useState(T),g=f.default(y,2),q=g[0],M=g[1],P=n.useState(),w=f.default(P,2),I=w[0],D=w[1],N=j>1;n.useLayoutEffect((function(){var e=function(){if(m.current&&x.current){var e=m.current.clientWidth,t=x.current,r=t.scrollWidth,n=t.textContent,i=null!=n?n:"";if(e&&r&&i.length)if(N){var c=r/i.length,s=Math.max(1,Math.floor(e/c));if(i.length<=s*j)return D(void 0),void M(i);for(var u=j-1,l=u-1,o=s*(u-1)+(s-2),d=s,f=i.slice(0,o),v=i.slice(i.length-d),b=[],h=0;h<u;h+=1){var p=h*s,T=h===l,y=T?s-3:s,g=f.slice(p,p+y);g&&b.push(T?"".concat(g," ..."):g)}b.push(v),D(b),M(b.join("\n"))}else{var q;if(e===(null===(q=O.current)||void 0===q?void 0:q.clientWidth))return;D(void 0),M(a.truncateInTheMiddle(i,e,r))}}};e();var t=i.debounce((function(){return requestAnimationFrame(e)}),200,{leading:!0}),r=new ResizeObserver(t),n=new MutationObserver(t);return m.current&&x.current&&(r.observe(m.current),r.observe(x.current),n.observe(x.current,{subtree:!0,characterData:!0})),function(){r.disconnect(),n.disconnect(),t.cancel()}}),[N,j,T]);var S=!!I||q!==T;return l.jsx(c.Tooltip,{title:T,disabled:h||!S,children:l.jsxs("div",{className:v.default(u.root,b,d.default({},u.multiLine,N)),ref:m,"data-testid":o,children:[l.jsx("div",{className:u.inner,ref:O,"data-testid":s.TextMiddleTruncatedTestIds.TruncatedTextTestId,children:I?l.jsx(l.Fragment,{children:I.map((function(e,t){return l.jsx("div",{className:u.line,children:e},t)}))}):q}),l.jsx("div",{className:u.hiddenElement,ref:x,"data-testid":s.TextMiddleTruncatedTestIds.FullTextTestId,children:T})]})})};exports.TextMiddleTruncated=function(e){return l.jsx(h,function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach((function(t){d.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},e),"".concat(e.children,"-").concat(e.maxLines))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/slicedToArray"),r=require("classnames"),n=require("react"),i=require("lodash"),a=require("../Tooltip/Tooltip.js"),l=require("./TextMiddleTruncated.constants.js"),u=require("./TextMiddleTruncated.scss.js"),s=require("../../utils/formatting.js"),c=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=d(e),f=d(t),p=d(r);function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}var h=function(e){var t,r=e.children,d=void 0===r?"":r,m=e.testId,h=e.className,b=e.disableTooltip,v=e.maxLines,j=void 0===v?1:v,x=String(d),g=n.useRef(null),T=n.useRef(null),O=n.useRef(null),y=n.useState(x),F=f.default(y,2),q=F[0],w=F[1],M=n.useState(),P=f.default(M,2),S=P[0],L=P[1],E=j>1;n.useLayoutEffect((function(){var e=null,t=function(){if(g.current&&T.current){var e=g.current.clientWidth,t=T.current,r=t.scrollWidth,n=t.textContent,i=null!=n?n:"";if(i.length)if(E){if(!e||!r)return;var a=r/i.length,l=Math.max(1,Math.floor(e/a));if(i.length<=l*j)return L(void 0),void w(i);for(var u=j-1,c=u-1,d=l*(u-1)+(l-2),o=l,f=i.slice(0,d),p=i.slice(i.length-o),m=[],h=0;h<u;h+=1){var b=h*l,v=h===c,x=v?l-3:l,y=f.slice(b,b+x);y&&m.push(v?"".concat(y," ..."):y)}m.push(p),L(m),w(m.join("\n"))}else{var F=O.current;if(!F)return;var q=getComputedStyle(g.current),M=parseFloat(q.paddingLeft)+parseFloat(q.paddingRight),P=parseFloat(q.borderLeftWidth)+parseFloat(q.borderRightWidth),S=parseFloat(q.width)-("border-box"===q.boxSizing?M+P:0),N=parseFloat(getComputedStyle(T.current).width);if(!Number.isFinite(S)||!N)return;L(void 0),w(s.truncateInTheMiddle(i,S,N,(function(e){return F.textContent=e,parseFloat(getComputedStyle(F).width)})))}}};t();var r=i.debounce((function(){null!==e&&cancelAnimationFrame(e),e=requestAnimationFrame(t)}),200,{leading:!0}),n=new ResizeObserver(r),a=new MutationObserver(r);return g.current&&T.current&&(n.observe(g.current),n.observe(T.current),a.observe(T.current,{subtree:!0,characterData:!0})),function(){n.disconnect(),a.disconnect(),r.cancel(),null!==e&&cancelAnimationFrame(e)}}),[E,j,x]);var N=!!S||q!==x;return c.jsx(a.Tooltip,{title:x,disabled:b||!N,children:c.jsxs("div",{className:p.default(u.root,h,(t={},o.default(t,u.multiLine,E),o.default(t,u.singleLine,!E),t)),ref:g,"data-testid":m,children:[c.jsx("div",{className:u.inner,"data-testid":l.TextMiddleTruncatedTestIds.TruncatedTextTestId,children:S?c.jsx(c.Fragment,{children:S.map((function(e,t){return c.jsx("div",{className:u.line,children:e},t)}))}):q}),c.jsx("div",{className:p.default(u.hiddenElement,E?u.measurementElement:u.fullTextSingleLine),ref:T,"data-testid":l.TextMiddleTruncatedTestIds.FullTextTestId,children:x}),!E&&c.jsx("div",{className:p.default(u.hiddenElement,u.measurementElement),ref:O,"aria-hidden":"true"})]})})};exports.TextMiddleTruncated=function(e){return c.jsx(h,function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?m(Object(r),!0).forEach((function(t){o.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},e),"".concat(e.children,"-").concat(e.maxLines))};
 //# sourceMappingURL=TextMiddleTruncated.js.map

package/cjs-bundle/componentsV2/TextMiddleTruncated/TextMiddleTruncated.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextMiddleTruncated.js","sources":["../../../../src/componentsV2/TextMiddleTruncated/TextMiddleTruncated.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { debounce } from 'lodash';\n\nimport { Tooltip } from '../Tooltip';\n\nimport { TextMiddleTruncatedTestIds } from './TextMiddleTruncated.constants';\n\nimport styles from './TextMiddleTruncated.scss';\n\nimport { truncateInTheMiddle } from '~/utils/formatting';\n\nexport type TextMiddleTruncatedProps = {\n /*\n Content\n /\n children?: string \| number;\n disableTooltip?: boolean;\n /\n Maximum number of lines to display.\n * When maxLines > 1, the second-to-last line ends with \"...\" and the last line shows the end of text.\n \n e.g. with maxLines=4:\n \n line1\n \n line2\n \n line3...\n \n line4\n /\n maxLines?: number;\n\n className?: string;\n testId?: string;\n};\n\nconst TextMiddleTruncatedBase = ({\n children = '',\n testId,\n className,\n disableTooltip,\n maxLines = 1,\n}: TextMiddleTruncatedProps) => {\n const stringContent = String(children);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const hiddenEltRef = useRef<HTMLDivElement>(null);\n const innerRef = useRef<HTMLDivElement>(null);\n const [truncatedContent, setTruncatedContent] = useState(stringContent);\n const [multiLineContent, setMultiLineContent] = useState<string[]>();\n\n const isMultiLine = maxLines > 1;\n\n useLayoutEffect(() => {\n const runTruncation = () => {\n if (!containerRef.current \|\| !hiddenEltRef.current) return;\n\n const { clientWidth } = containerRef.current;\n const { scrollWidth: textWidth, textContent } = hiddenEltRef.current;\n const text = textContent ?? '';\n\n if (!clientWidth \|\| !textWidth \|\| !text.length) return;\n\n if (isMultiLine) {\n // Multi-line mode: \"...\" always on second-to-last line\n // e.g., maxLines=4: line1, line2, line3..., line4\n const charWidth = textWidth / text.length;\n // Guard against very small clientWidth to prevent infinite loop or empty lines\n const charsPerLine = Math.max(1, Math.floor(clientWidth / charWidth));\n\n // Check if text fits in maxLines without truncation\n if (text.length <= charsPerLine maxLines) {\n setMultiLineContent(undefined);\n setTruncatedContent(text);\n return;\n }\n\n // Lines 1 to (N-2): full width\n // Line (N-1): ends with \" ...\" (second-to-last)\n // Line N: shows end of text (last line)\n const firstLinesCount = maxLines - 1; // lines before the last\n const ellipsisLineIndex = firstLinesCount - 1; // second-to-last line (0-indexed)\n\n // Characters for first part (all lines except last, with ellipsis on second-to-last)\n const firstPartChars = charsPerLine * (firstLinesCount - 1) + (charsPerLine - 2);\n // Characters for last line\n const lastLineChars = charsPerLine;\n\n const firstPart = text.slice(0, firstPartChars);\n const lastLine = text.slice(text.length - lastLineChars);\n\n // Split first part into lines\n const lines: string[] = [];\n for (let i = 0; i < firstLinesCount; i += 1) {\n const start = i * charsPerLine;\n const isEllipsisLine = i === ellipsisLineIndex;\n const lineWidth = isEllipsisLine ? charsPerLine - 3 : charsPerLine;\n const lineText = firstPart.slice(start, start + lineWidth);\n if (lineText) {\n lines.push(isEllipsisLine ? `${lineText} ...` : lineText);\n }\n }\n lines.push(lastLine);\n\n setMultiLineContent(lines);\n setTruncatedContent(lines.join('\\n'));\n } else {\n // Single line mode: use original truncation\n if (clientWidth === innerRef.current?.clientWidth) return;\n\n setMultiLineContent(undefined);\n setTruncatedContent(truncateInTheMiddle(text, clientWidth, textWidth));\n }\n };\n\n runTruncation();\n\n const debouncedTruncation = debounce(() => requestAnimationFrame(runTruncation), 200, {\n leading: true,\n });\n\n const resizeObserver = new ResizeObserver(debouncedTruncation);\n const mutationObserver = new MutationObserver(debouncedTruncation);\n\n if (containerRef.current && hiddenEltRef.current) {\n resizeObserver.observe(containerRef.current);\n resizeObserver.observe(hiddenEltRef.current);\n mutationObserver.observe(hiddenEltRef.current, { subtree: true, characterData: true });\n }\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n debouncedTruncation.cancel();\n };\n }, [isMultiLine, maxLines, stringContent]);\n\n const isTruncated = !!multiLineContent \|\| truncatedContent !== stringContent;\n\n return (\n <Tooltip title={stringContent} disabled={disableTooltip \|\| !isTruncated}>\n <div\n className={classNames(styles.root, className, { [styles.multiLine]: isMultiLine })}\n ref={containerRef}\n data-testid={testId}\n >\n <div\n className={styles.inner}\n ref={innerRef}\n data-testid={TextMiddleTruncatedTestIds.TruncatedTextTestId}\n >\n {multiLineContent ? (\n <>\n {multiLineContent.map((line, index) => (\n <div key={index} className={styles.line}>\n {line}\n </div>\n ))}\n </>\n ) : (\n truncatedContent\n )}\n </div>\n <div\n className={styles.hiddenElement}\n ref={hiddenEltRef}\n data-testid={TextMiddleTruncatedTestIds.FullTextTestId}\n >\n {stringContent}\n </div>\n </div>\n </Tooltip>\n );\n};\n\nexport const TextMiddleTruncated = (props: TextMiddleTruncatedProps) => (\n <TextMiddleTruncatedBase key={`${props.children}-${props.maxLines}`} {...props} />\n);\n"],"names":["TextMiddleTruncatedBase","_ref","_ref$children","children","testId","className","disableTooltip","_ref$maxLines","maxLines","stringContent","String","containerRef","useRef","hiddenEltRef","innerRef","useState","_useState2","_slicedToArray","_useState","truncatedContent","setTruncatedContent","_useState3","_useState4","multiLineContent","setMultiLineContent","isMultiLine","useLayoutEffect","runTruncation","current","clientWidth","textWidth","scrollWidth","textContent","text","length","charWidth","charsPerLine","Math","max","floor","undefined","firstLinesCount","ellipsisLineIndex","firstPartChars","lastLineChars","firstPart","slice","lastLine","lines","i","start","isEllipsisLine","lineWidth","lineText","push","join","_innerRef$current","truncateInTheMiddle","debouncedTruncation","debounce","requestAnimationFrame","leading","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","subtree","characterData","disconnect","cancel","isTruncated","_jsx","Tooltip","title","disabled","_jsxs","jsxs","classNames","styles","root","_defineProperty","multiLine","ref","jsx","inner","TextMiddleTruncatedTestIds","TruncatedTextTestId","_Fragment","map","line","index","hiddenElement","FullTextTestId","props"],"mappings":"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"}
1	+ {"version":3,"file":"TextMiddleTruncated.js","sources":["../../../../src/componentsV2/TextMiddleTruncated/TextMiddleTruncated.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { debounce } from 'lodash';\n\nimport { Tooltip } from '../Tooltip';\n\nimport { TextMiddleTruncatedTestIds } from './TextMiddleTruncated.constants';\n\nimport styles from './TextMiddleTruncated.scss';\n\nimport { truncateInTheMiddle } from '~/utils/formatting';\n\nexport type TextMiddleTruncatedProps = {\n /*\n Content\n /\n children?: string \| number;\n disableTooltip?: boolean;\n /\n Maximum number of lines to display.\n * When maxLines > 1, the second-to-last line ends with \"...\" and the last line shows the end of text.\n \n e.g. with maxLines=4:\n \n line1\n \n line2\n \n line3...\n \n line4\n /\n maxLines?: number;\n\n className?: string;\n testId?: string;\n};\n\nconst TextMiddleTruncatedBase = ({\n children = '',\n testId,\n className,\n disableTooltip,\n maxLines = 1,\n}: TextMiddleTruncatedProps) => {\n const stringContent = String(children);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const hiddenEltRef = useRef<HTMLDivElement>(null);\n const measurementRef = useRef<HTMLDivElement>(null);\n const [truncatedContent, setTruncatedContent] = useState(stringContent);\n const [multiLineContent, setMultiLineContent] = useState<string[]>();\n\n const isMultiLine = maxLines > 1;\n\n useLayoutEffect(() => {\n let animationFrameId: number \| null = null;\n\n const runTruncation = () => {\n if (!containerRef.current \|\| !hiddenEltRef.current) return;\n\n const { clientWidth } = containerRef.current;\n const { scrollWidth: textWidth, textContent } = hiddenEltRef.current;\n const text = textContent ?? '';\n\n if (!text.length) return;\n\n if (isMultiLine) {\n if (!clientWidth \|\| !textWidth) return;\n\n // Multi-line mode: \"...\" always on second-to-last line\n // e.g., maxLines=4: line1, line2, line3..., line4\n const charWidth = textWidth / text.length;\n // Guard against very small clientWidth to prevent infinite loop or empty lines\n const charsPerLine = Math.max(1, Math.floor(clientWidth / charWidth));\n\n // Check if text fits in maxLines without truncation\n if (text.length <= charsPerLine maxLines) {\n setMultiLineContent(undefined);\n setTruncatedContent(text);\n return;\n }\n\n // Lines 1 to (N-2): full width\n // Line (N-1): ends with \" ...\" (second-to-last)\n // Line N: shows end of text (last line)\n const firstLinesCount = maxLines - 1; // lines before the last\n const ellipsisLineIndex = firstLinesCount - 1; // second-to-last line (0-indexed)\n\n // Characters for first part (all lines except last, with ellipsis on second-to-last)\n const firstPartChars = charsPerLine * (firstLinesCount - 1) + (charsPerLine - 2);\n // Characters for last line\n const lastLineChars = charsPerLine;\n\n const firstPart = text.slice(0, firstPartChars);\n const lastLine = text.slice(text.length - lastLineChars);\n\n // Split first part into lines\n const lines: string[] = [];\n for (let i = 0; i < firstLinesCount; i += 1) {\n const start = i * charsPerLine;\n const isEllipsisLine = i === ellipsisLineIndex;\n const lineWidth = isEllipsisLine ? charsPerLine - 3 : charsPerLine;\n const lineText = firstPart.slice(start, start + lineWidth);\n if (lineText) {\n lines.push(isEllipsisLine ? `${lineText} ...` : lineText);\n }\n }\n lines.push(lastLine);\n\n setMultiLineContent(lines);\n setTruncatedContent(lines.join('\\n'));\n } else {\n const measurementElement = measurementRef.current;\n\n if (!measurementElement) return;\n\n // Resolved CSS widths retain fractions and use layout pixels even under transforms.\n const containerStyle = getComputedStyle(containerRef.current);\n const horizontalPadding =\n parseFloat(containerStyle.paddingLeft) + parseFloat(containerStyle.paddingRight);\n const horizontalBorder =\n parseFloat(containerStyle.borderLeftWidth) + parseFloat(containerStyle.borderRightWidth);\n const availableWidth =\n parseFloat(containerStyle.width) -\n (containerStyle.boxSizing === 'border-box' ? horizontalPadding + horizontalBorder : 0);\n const fullTextWidth = parseFloat(getComputedStyle(hiddenEltRef.current).width);\n if (!Number.isFinite(availableWidth) \|\| !fullTextWidth) return;\n\n const measureWidth = (candidate: string) => {\n measurementElement.textContent = candidate;\n return parseFloat(getComputedStyle(measurementElement).width);\n };\n\n setMultiLineContent(undefined);\n setTruncatedContent(truncateInTheMiddle(text, availableWidth, fullTextWidth, measureWidth));\n }\n };\n\n runTruncation();\n\n const debouncedTruncation = debounce(\n () => {\n if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);\n\n animationFrameId = requestAnimationFrame(runTruncation);\n },\n 200,\n { leading: true }\n );\n\n const resizeObserver = new ResizeObserver(debouncedTruncation);\n const mutationObserver = new MutationObserver(debouncedTruncation);\n\n if (containerRef.current && hiddenEltRef.current) {\n resizeObserver.observe(containerRef.current);\n resizeObserver.observe(hiddenEltRef.current);\n mutationObserver.observe(hiddenEltRef.current, { subtree: true, characterData: true });\n }\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n debouncedTruncation.cancel();\n if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);\n };\n }, [isMultiLine, maxLines, stringContent]);\n\n const isTruncated = !!multiLineContent \|\| truncatedContent !== stringContent;\n\n return (\n <Tooltip title={stringContent} disabled={disableTooltip \|\| !isTruncated}>\n <div\n className={classNames(styles.root, className, {\n [styles.multiLine]: isMultiLine,\n [styles.singleLine]: !isMultiLine,\n })}\n ref={containerRef}\n data-testid={testId}\n >\n <div className={styles.inner} data-testid={TextMiddleTruncatedTestIds.TruncatedTextTestId}>\n {multiLineContent ? (\n <>\n {multiLineContent.map((line, index) => (\n <div key={index} className={styles.line}>\n {line}\n </div>\n ))}\n </>\n ) : (\n truncatedContent\n )}\n </div>\n <div\n className={classNames(\n styles.hiddenElement,\n isMultiLine ? styles.measurementElement : styles.fullTextSingleLine\n )}\n ref={hiddenEltRef}\n data-testid={TextMiddleTruncatedTestIds.FullTextTestId}\n >\n {stringContent}\n </div>\n {!isMultiLine && (\n <div\n className={classNames(styles.hiddenElement, styles.measurementElement)}\n ref={measurementRef}\n aria-hidden=\"true\"\n />\n )}\n </div>\n </Tooltip>\n );\n};\n\nexport const TextMiddleTruncated = (props: TextMiddleTruncatedProps) => (\n <TextMiddleTruncatedBase key={`${props.children}-${props.maxLines}`} {...props} />\n);\n"],"names":["TextMiddleTruncatedBase","_ref","_classNames","_ref$children","children","testId","className","disableTooltip","_ref$maxLines","maxLines","stringContent","String","containerRef","useRef","hiddenEltRef","measurementRef","useState","_useState2","_slicedToArray","_useState","truncatedContent","setTruncatedContent","_useState3","_useState4","multiLineContent","setMultiLineContent","isMultiLine","useLayoutEffect","animationFrameId","runTruncation","current","clientWidth","textWidth","scrollWidth","textContent","text","length","charWidth","charsPerLine","Math","max","floor","undefined","firstLinesCount","ellipsisLineIndex","firstPartChars","lastLineChars","firstPart","slice","lastLine","lines","i","start","isEllipsisLine","lineWidth","lineText","push","join","measurementElement","containerStyle","getComputedStyle","horizontalPadding","parseFloat","paddingLeft","paddingRight","horizontalBorder","borderLeftWidth","borderRightWidth","availableWidth","width","boxSizing","fullTextWidth","Number","isFinite","truncateInTheMiddle","candidate","debouncedTruncation","debounce","cancelAnimationFrame","requestAnimationFrame","leading","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","subtree","characterData","disconnect","cancel","isTruncated","_jsx","Tooltip","title","disabled","_jsxs","jsxs","classNames","styles","root","multiLine","singleLine","ref","jsx","inner","TextMiddleTruncatedTestIds","TruncatedTextTestId","_Fragment","map","line","index","hiddenElement","fullTextSingleLine","FullTextTestId","props"],"mappings":"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"}

package/cjs-bundle/componentsV2/TextMiddleTruncated/TextMiddleTruncated.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require('./../../ext-esm/style-inject/dist/style-inject.es.js')(".TextMiddleTruncated_root__sMHwy{overflow:hidden;white-space:nowrap}.TextMiddleTruncated_multiLine__ECbYi{white-space:normal}.TextMiddleTruncated_multiLine__ECbYi .TextMiddleTruncated_inner__sWwZy{display:block}.TextMiddleTruncated_inner__sWwZy{display:inline-block;vertical-align:top}.TextMiddleTruncated_line__OF0LA{overflow:hidden;text-overflow:clip;white-space:nowrap}.TextMiddleTruncated_hiddenElement__JW0Og{left:-9999px;pointer-events:none;position:absolute;top:-9999px;visibility:hidden;white-space:nowrap}"),module.exports={root:"TextMiddleTruncated_root__sMHwy",multiLine:"TextMiddleTruncated_multiLine__ECbYi",inner:"TextMiddleTruncated_inner__sWwZy",line:"TextMiddleTruncated_line__OF0LA",hiddenElement:"TextMiddleTruncated_hiddenElement__JW0Og"};
+"use strict";require('./../../ext-esm/style-inject/dist/style-inject.es.js')(".TextMiddleTruncated_root__sMHwy{overflow:hidden;white-space:nowrap}.TextMiddleTruncated_singleLine__yZJHl{display:grid;grid-template-columns:minmax(0,1fr)}.TextMiddleTruncated_singleLine__yZJHl .TextMiddleTruncated_inner__sWwZy{grid-area:1/1}.TextMiddleTruncated_multiLine__ECbYi{white-space:normal}.TextMiddleTruncated_multiLine__ECbYi .TextMiddleTruncated_inner__sWwZy{display:block}.TextMiddleTruncated_inner__sWwZy{display:inline-block;vertical-align:top}.TextMiddleTruncated_line__OF0LA{overflow:hidden;text-overflow:clip;white-space:nowrap}.TextMiddleTruncated_hiddenElement__JW0Og{pointer-events:none;visibility:hidden;white-space:nowrap;width:max-content}.TextMiddleTruncated_measurementElement__8KbXa{left:-9999px;position:absolute;top:-9999px}.TextMiddleTruncated_fullTextSingleLine__4B2PI{grid-area:1/1}"),module.exports={root:"TextMiddleTruncated_root__sMHwy",singleLine:"TextMiddleTruncated_singleLine__yZJHl",inner:"TextMiddleTruncated_inner__sWwZy",multiLine:"TextMiddleTruncated_multiLine__ECbYi",line:"TextMiddleTruncated_line__OF0LA",hiddenElement:"TextMiddleTruncated_hiddenElement__JW0Og",measurementElement:"TextMiddleTruncated_measurementElement__8KbXa",fullTextSingleLine:"TextMiddleTruncated_fullTextSingleLine__4B2PI"};
 //# sourceMappingURL=TextMiddleTruncated.scss.js.map

package/cjs-bundle/utils/formatting.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.formatAssetName=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=arguments.length>1?arguments[1]:void 0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:420,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:6,i=t.split(" ");if(e>n||t.length<r||i.length<=1)return t;var o=t[0],c=i[i.length-1];return"".concat(o," ").concat(c)},exports.orDash=function(t){return Number.isFinite(t)||"string"==typeof t?t:"-"},exports.truncateInTheMiddle=function(t,e,n){if(e>=n)return t;var r=e/(n/t.length),i=Math.ceil(r/2),o=Math.max(i-3,2);return"".concat(t.slice(0,o)," ... ").concat(t.slice(t.length-o))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.formatAssetName=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1?arguments[1]:void 0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:420,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:6,l=e.split(" ");if(t>n||e.length<r||l.length<=1)return e;var o=e[0],c=l[l.length-1];return"".concat(o," ").concat(c)},exports.orDash=function(e){return Number.isFinite(e)||"string"==typeof e?e:"-"},exports.truncateInTheMiddle=function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if(t>=n)return e;var l=n/e.length,o=t/l,c=Math.ceil(o/2),i=Math.max(c-3,2);if(!r)return"".concat(e.slice(0,i)," ... ").concat(e.slice(e.length-i));var a=function(t){var n=e.slice(0,t).replace(/[\uD800-\uDBFF]$/,""),r=e.slice(e.length-t).replace(/^[\uDC00-\uDFFF]/,"");return"".concat(n," ... ").concat(r)},u=a(i);if(r(u)<=t)return u;for(var s=1,h=i-1,v=null;s<=h;){var f=Math.floor((s+h)/2),g=a(f);r(g)<=t?(v=g,s=f+1):h=f-1}return v||(r("...")<=t?"...":"")};
 //# sourceMappingURL=formatting.js.map

package/cjs-bundle/utils/formatting.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"formatting.js","sources":["../../../src/utils/formatting.js"],"sourcesContent":["export const orDash = value => {\n return Number.isFinite(value) \|\| typeof value === 'string' ? value : '-';\n};\n\nconst MOBILE_BREAK_POINT_WIDTH = 420;\nconst MAX_ASSET_NAME_LENGTH = 6;\n\nexport const formatAssetName = (\n assetName = '',\n containerPixelWidth,\n mobileBreakPointWidth = MOBILE_BREAK_POINT_WIDTH,\n maxAssetNameLength = MAX_ASSET_NAME_LENGTH\n) => {\n const words = assetName.split(' ');\n if (\n containerPixelWidth > mobileBreakPointWidth \|\|\n assetName.length < maxAssetNameLength \|\|\n words.length <= 1\n ) {\n return assetName;\n }\n\n const initialChar = assetName[0];\n const lastWord = words[words.length - 1];\n return `${initialChar} ${lastWord}`;\n};\n\nexport const truncateInTheMiddle = (text, clientWidth, scrollWidth) => {\n if (clientWidth >= scrollWidth) return text;\n\n const charWidthInPx = scrollWidth / text.length;\n const visibleCharsLength = clientWidth / charWidthInPx;\n const trimmedTextLength = Math.ceil(visibleCharsLength / 2);\n const charNum = Math.max(trimmedTextLength - 3, 2);\n\n return `${text.slice(0, charNum)} ... ${text.slice(text.length - charNum)}`;\n};\n"],"names":["assetName","containerPixelWidth","arguments","length","undefined","mobileBreakPointWidth","maxAssetNameLength","words","split","initialChar","lastWord","value","Number","isFinite","text","clientWidth","scrollWidth","visibleCharsLength","trimmedTextLength","Math","ceil","charNum","max","concat","slice"],"mappings":"4FAO+B,WAK1B,IAJHA,yDAAY,GACZC,EAAmBC,UAAAC,OAAA,EAAAD,UAAA,QAAAE,EACnBC,yDAN+B,IAO/BC,yDAN4B,EAQtBC,EAAQP,EAAUQ,MAAM,KAC9B,GACEP,EAAsBI,GACtBL,EAAUG,OAASG,GACnBC,EAAMJ,QAAU,EAEhB,OAAOH,EAGT,IAAMS,EAAcT,EAAU,GACxBU,EAAWH,EAAMA,EAAMJ,OAAS,GACtC,MAAUM,GAAAA,OAAAA,cAAeC,EAC3B,iBAzBsB,SAAAC,GACpB,OAAOC,OAAOC,SAASF,IAA2B,iBAAVA,EAAqBA,EAAQ,GACvE,~~8BAyBmC~~,SAACG,EAAMC,EAAaC,~~GACrD~~,~~GAAID~~,GAAeC,EAAa,OAAOF,EAEvC,~~IACMG~~,~~EAAqBF~~,~~GADLC,~~EAAcF,EAAKX,~~QAEnCe~~,EAAoBC,KAAKC,KAAKH,EAAqB,GACnDI,EAAUF,KAAKG,IAAIJ,EAAoB,EAAG,GAEhD,MAAA,~~GAAAK~~,~~OAAUT~~,~~EAAKU~~,MAAM,EAAGH,GAAQ,SAAAE,~~OAAQT~~,~~EAAKU~~,~~MAAMV~~,EAAKX,~~OAASkB~~,~~GACnE~~"}
1	+ {"version":3,"file":"formatting.js","sources":["../../../src/utils/formatting.js"],"sourcesContent":["export const orDash = value => {\n return Number.isFinite(value) \|\| typeof value === 'string' ? value : '-';\n};\n\nconst MOBILE_BREAK_POINT_WIDTH = 420;\nconst MAX_ASSET_NAME_LENGTH = 6;\n\nexport const formatAssetName = (\n assetName = '',\n containerPixelWidth,\n mobileBreakPointWidth = MOBILE_BREAK_POINT_WIDTH,\n maxAssetNameLength = MAX_ASSET_NAME_LENGTH\n) => {\n const words = assetName.split(' ');\n if (\n containerPixelWidth > mobileBreakPointWidth \|\|\n assetName.length < maxAssetNameLength \|\|\n words.length <= 1\n ) {\n return assetName;\n }\n\n const initialChar = assetName[0];\n const lastWord = words[words.length - 1];\n return `${initialChar} ${lastWord}`;\n};\n\n/*\n Three-argument calls retain the original average-width estimate.\n * Supply measureWidth to verify candidates using the caller's actual text styles.\n * @param {((candidate: string) => number) \| null} [measureWidth]\n */\nexport const truncateInTheMiddle = (text, clientWidth, scrollWidth, measureWidth = null) => {\n if (clientWidth >= scrollWidth) return text;\n\n const charWidthInPx = scrollWidth / text.length;\n const visibleCharsLength = clientWidth / charWidthInPx;\n const trimmedTextLength = Math.ceil(visibleCharsLength / 2);\n const charNum = Math.max(trimmedTextLength - 3, 2);\n\n if (!measureWidth) {\n return `${text.slice(0, charNum)} ... ${text.slice(text.length - charNum)}`;\n }\n\n const buildCandidate = count => {\n // UTF-16 slice boundaries must not split a surrogate pair in measured output.\n const start = text.slice(0, count).replace(/[\\uD800-\\uDBFF]$/, '');\n const end = text.slice(text.length - count).replace(/^[\\uDC00-\\uDFFF]/, '');\n\n return `${start} ... ${end}`;\n };\n\n // Measure real candidates instead of summing a per-char width map: the browser applies\n // kerning, ligatures, font fallback and letter-spacing, which a map cannot reproduce.\n // Each measurement forces a reflow, so the estimate is tried first and the fallback\n // is a binary search, bounded by log2(charNum) measurements for any text length.\n const estimate = buildCandidate(charNum);\n\n if (measureWidth(estimate) <= clientWidth) return estimate;\n\n let low = 1;\n let high = charNum - 1;\n let bestFit = null;\n\n while (low <= high) {\n const middle = Math.floor((low + high) / 2);\n const candidate = buildCandidate(middle);\n\n if (measureWidth(candidate) <= clientWidth) {\n bestFit = candidate;\n low = middle + 1;\n } else {\n high = middle - 1;\n }\n }\n\n if (bestFit) return bestFit;\n\n return measureWidth('...') <= clientWidth ? '...' : '';\n};\n"],"names":["assetName","containerPixelWidth","arguments","length","undefined","mobileBreakPointWidth","maxAssetNameLength","words","split","initialChar","lastWord","value","Number","isFinite","text","clientWidth","scrollWidth","measureWidth","charWidthInPx","visibleCharsLength","trimmedTextLength","Math","ceil","charNum","max","concat","slice","buildCandidate","count","start","replace","end","estimate","low","high","bestFit","middle","floor","candidate"],"mappings":"4FAO+B,WAK1B,IAJHA,yDAAY,GACZC,EAAmBC,UAAAC,OAAA,EAAAD,UAAA,QAAAE,EACnBC,yDAN+B,IAO/BC,yDAN4B,EAQtBC,EAAQP,EAAUQ,MAAM,KAC9B,GACEP,EAAsBI,GACtBL,EAAUG,OAASG,GACnBC,EAAMJ,QAAU,EAEhB,OAAOH,EAGT,IAAMS,EAAcT,EAAU,GACxBU,EAAWH,EAAMA,EAAMJ,OAAS,GACtC,MAAUM,GAAAA,OAAAA,cAAeC,EAC3B,iBAzBsB,SAAAC,GACpB,OAAOC,OAAOC,SAASF,IAA2B,iBAAVA,EAAqBA,EAAQ,GACvE,8BA8BmC,SAACG,EAAMC,EAAaC,GAAqC,IAAxBC,yDAAe,KACjF,GAAIF,GAAeC,EAAa,OAAOF,EAEvC,IAAMI,EAAgBF,EAAcF,EAAKX,OACnCgB,EAAqBJ,EAAcG,EACnCE,EAAoBC,KAAKC,KAAKH,EAAqB,GACnDI,EAAUF,KAAKG,IAAIJ,EAAoB,EAAG,GAEhD,IAAKH,EACH,MAAA,GAAAQ,OAAUX,EAAKY,MAAM,EAAGH,GAAQ,SAAAE,OAAQX,EAAKY,MAAMZ,EAAKX,OAASoB,IAGnE,IAAMI,EAAiB,SAAAC,GAErB,IAAMC,EAAQf,EAAKY,MAAM,EAAGE,GAAOE,QAAQ,mBAAoB,IACzDC,EAAMjB,EAAKY,MAAMZ,EAAKX,OAASyB,GAAOE,QAAQ,mBAAoB,IAExE,MAAUD,GAAAA,OAAAA,kBAAaE,IAOnBC,EAAWL,EAAeJ,GAEhC,GAAIN,EAAae,IAAajB,EAAa,OAAOiB,EAMlD,IAJA,IAAIC,EAAM,EACNC,EAAOX,EAAU,EACjBY,EAAU,KAEPF,GAAOC,GAAM,CAClB,IAAME,EAASf,KAAKgB,OAAOJ,EAAMC,GAAQ,GACnCI,EAAYX,EAAeS,GAE7BnB,EAAaqB,IAAcvB,GAC7BoB,EAAUG,EACVL,EAAMG,EAAS,GAEfF,EAAOE,EAAS,CAEpB,CAEA,OAAID,IAEGlB,EAAa,QAAUF,EAAc,MAAQ,GACtD"}

package/componentsV2/TextMiddleTruncated/TextMiddleTruncated.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextMiddleTruncated.d.ts","sourceRoot":"","sources":["../../../src/componentsV2/TextMiddleTruncated/TextMiddleTruncated.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;~~AA6IF~~,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,4CAElE,CAAC"}
1	+ {"version":3,"file":"TextMiddleTruncated.d.ts","sourceRoot":"","sources":["../../../src/componentsV2/TextMiddleTruncated/TextMiddleTruncated.tsx"],"names":[],"mappings":"AAYA,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAmLF,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,4CAElE,CAAC"}

package/componentsV2/TextMiddleTruncated/TextMiddleTruncated.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/slicedToArray";import t from"classnames";import{useRef as n,useState as i,useLayoutEffect as o}from"react";import{debounce as c}from"lodash";import{Tooltip as l}from"../Tooltip/Tooltip.js";import{TextMiddleTruncatedTestIds as a}from"./TextMiddleTruncated.constants.js";import s from"./TextMiddleTruncated.scss.js";import{truncateInTheMiddle as u}from"../../utils/formatting.js";import{jsx as d,jsxs as f,Fragment as m}from"react/jsx-runtime";function p(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}var v=function(p){var v=p.children,h=void 0===v?"":v,b=p.testId,O=p.className,j=p.disableTooltip,g=p.maxLines,y=void 0===g?1:g,T=String(h),x=n(null),P=n(null),w=n(null),D=i(T),M=r(D,2),N=M[0],E=M[1],I=i(),L=r(I,2),S=L[0],W=L[1],A=y>1;return o((function(){var e=function(){if(x.current&&P.current){var e=x.current.clientWidth,r=P.current,t=r.scrollWidth,n=r.textContent,i=null!=n?n:"";if(e&&t&&i.length)if(A){var o=t/i.length,c=Math.max(1,Math.floor(e/o));if(i.length<=c*y)return W(void 0),void E(i);for(var l=y-1,a=l-1,s=c*(l-1)+(c-2),d=c,f=i.slice(0,s),m=i.slice(i.length-d),p=[],v=0;v<l;v+=1){var h=v*c,b=v===a,O=b?c-3:c,j=f.slice(h,h+O);j&&p.push(b?"".concat(j," ..."):j)}p.push(m),W(p),E(p.join("\n"))}else{var g;if(e===(null===(g=w.current)||void 0===g?void 0:g.clientWidth))return;W(void 0),E(u(i,e,t))}}};e();var r=c((function(){return requestAnimationFrame(e)}),200,{leading:!0}),t=new ResizeObserver(r),n=new MutationObserver(r);return x.current&&P.current&&(t.observe(x.current),t.observe(P.current),n.observe(P.current,{subtree:!0,characterData:!0})),function(){t.disconnect(),n.disconnect(),r.cancel()}}),[A,y,T]),d(l,{title:T,disabled:j||!(!!S||N!==T),children:f("div",{className:t(s.root,O,e({},s.multiLine,A)),ref:x,"data-testid":b,children:[d("div",{className:s.inner,ref:w,"data-testid":a.TruncatedTextTestId,children:S?d(m,{children:S.map((function(e,r){return d("div",{className:s.line,children:e},r)}))}):N}),d("div",{className:s.hiddenElement,ref:P,"data-testid":a.FullTextTestId,children:T})]})})},h=function(r){return d(v,function(r){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){e(r,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))}))}return r}({},r),"".concat(r.children,"-").concat(r.maxLines))};export{h as TextMiddleTruncated};
+import e from"@babel/runtime/helpers/defineProperty";import t from"@babel/runtime/helpers/slicedToArray";import r from"classnames";import{useRef as n,useState as i,useLayoutEffect as o}from"react";import{debounce as a}from"lodash";import{Tooltip as l}from"../Tooltip/Tooltip.js";import{TextMiddleTruncatedTestIds as c}from"./TextMiddleTruncated.constants.js";import s from"./TextMiddleTruncated.scss.js";import{truncateInTheMiddle as u}from"../../utils/formatting.js";import{jsx as d,jsxs as m,Fragment as f}from"react/jsx-runtime";function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}var h=function(p){var h,b=p.children,v=void 0===b?"":b,g=p.testId,O=p.className,j=p.disableTooltip,y=p.maxLines,x=void 0===y?1:y,T=String(v),F=n(null),w=n(null),P=n(null),S=i(T),L=t(S,2),N=L[0],E=L[1],C=i(),D=t(C,2),M=D[0],A=D[1],W=x>1;return o((function(){var e=null,t=function(){if(F.current&&w.current){var e=F.current.clientWidth,t=w.current,r=t.scrollWidth,n=t.textContent,i=null!=n?n:"";if(i.length)if(W){if(!e||!r)return;var o=r/i.length,a=Math.max(1,Math.floor(e/o));if(i.length<=a*x)return A(void 0),void E(i);for(var l=x-1,c=l-1,s=a*(l-1)+(a-2),d=a,m=i.slice(0,s),f=i.slice(i.length-d),p=[],h=0;h<l;h+=1){var b=h*a,v=h===c,g=v?a-3:a,O=m.slice(b,b+g);O&&p.push(v?"".concat(O," ..."):O)}p.push(f),A(p),E(p.join("\n"))}else{var j=P.current;if(!j)return;var y=getComputedStyle(F.current),T=parseFloat(y.paddingLeft)+parseFloat(y.paddingRight),S=parseFloat(y.borderLeftWidth)+parseFloat(y.borderRightWidth),L=parseFloat(y.width)-("border-box"===y.boxSizing?T+S:0),N=parseFloat(getComputedStyle(w.current).width);if(!Number.isFinite(L)||!N)return;A(void 0),E(u(i,L,N,(function(e){return j.textContent=e,parseFloat(getComputedStyle(j).width)})))}}};t();var r=a((function(){null!==e&&cancelAnimationFrame(e),e=requestAnimationFrame(t)}),200,{leading:!0}),n=new ResizeObserver(r),i=new MutationObserver(r);return F.current&&w.current&&(n.observe(F.current),n.observe(w.current),i.observe(w.current,{subtree:!0,characterData:!0})),function(){n.disconnect(),i.disconnect(),r.cancel(),null!==e&&cancelAnimationFrame(e)}}),[W,x,T]),d(l,{title:T,disabled:j||!(!!M||N!==T),children:m("div",{className:r(s.root,O,(h={},e(h,s.multiLine,W),e(h,s.singleLine,!W),h)),ref:F,"data-testid":g,children:[d("div",{className:s.inner,"data-testid":c.TruncatedTextTestId,children:M?d(f,{children:M.map((function(e,t){return d("div",{className:s.line,children:e},t)}))}):N}),d("div",{className:r(s.hiddenElement,W?s.measurementElement:s.fullTextSingleLine),ref:w,"data-testid":c.FullTextTestId,children:T}),!W&&d("div",{className:r(s.hiddenElement,s.measurementElement),ref:P,"aria-hidden":"true"})]})})},b=function(t){return d(h,function(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?p(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}({},t),"".concat(t.children,"-").concat(t.maxLines))};export{b as TextMiddleTruncated};
 //# sourceMappingURL=TextMiddleTruncated.js.map

package/componentsV2/TextMiddleTruncated/TextMiddleTruncated.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextMiddleTruncated.js","sources":["../../../src/componentsV2/TextMiddleTruncated/TextMiddleTruncated.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { debounce } from 'lodash';\n\nimport { Tooltip } from '../Tooltip';\n\nimport { TextMiddleTruncatedTestIds } from './TextMiddleTruncated.constants';\n\nimport styles from './TextMiddleTruncated.scss';\n\nimport { truncateInTheMiddle } from '~/utils/formatting';\n\nexport type TextMiddleTruncatedProps = {\n /*\n Content\n /\n children?: string \| number;\n disableTooltip?: boolean;\n /\n Maximum number of lines to display.\n * When maxLines > 1, the second-to-last line ends with \"...\" and the last line shows the end of text.\n \n e.g. with maxLines=4:\n \n line1\n \n line2\n \n line3...\n \n line4\n /\n maxLines?: number;\n\n className?: string;\n testId?: string;\n};\n\nconst TextMiddleTruncatedBase = ({\n children = '',\n testId,\n className,\n disableTooltip,\n maxLines = 1,\n}: TextMiddleTruncatedProps) => {\n const stringContent = String(children);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const hiddenEltRef = useRef<HTMLDivElement>(null);\n const innerRef = useRef<HTMLDivElement>(null);\n const [truncatedContent, setTruncatedContent] = useState(stringContent);\n const [multiLineContent, setMultiLineContent] = useState<string[]>();\n\n const isMultiLine = maxLines > 1;\n\n useLayoutEffect(() => {\n const runTruncation = () => {\n if (!containerRef.current \|\| !hiddenEltRef.current) return;\n\n const { clientWidth } = containerRef.current;\n const { scrollWidth: textWidth, textContent } = hiddenEltRef.current;\n const text = textContent ?? '';\n\n if (!clientWidth \|\| !textWidth \|\| !text.length) return;\n\n if (isMultiLine) {\n // Multi-line mode: \"...\" always on second-to-last line\n // e.g., maxLines=4: line1, line2, line3..., line4\n const charWidth = textWidth / text.length;\n // Guard against very small clientWidth to prevent infinite loop or empty lines\n const charsPerLine = Math.max(1, Math.floor(clientWidth / charWidth));\n\n // Check if text fits in maxLines without truncation\n if (text.length <= charsPerLine maxLines) {\n setMultiLineContent(undefined);\n setTruncatedContent(text);\n return;\n }\n\n // Lines 1 to (N-2): full width\n // Line (N-1): ends with \" ...\" (second-to-last)\n // Line N: shows end of text (last line)\n const firstLinesCount = maxLines - 1; // lines before the last\n const ellipsisLineIndex = firstLinesCount - 1; // second-to-last line (0-indexed)\n\n // Characters for first part (all lines except last, with ellipsis on second-to-last)\n const firstPartChars = charsPerLine * (firstLinesCount - 1) + (charsPerLine - 2);\n // Characters for last line\n const lastLineChars = charsPerLine;\n\n const firstPart = text.slice(0, firstPartChars);\n const lastLine = text.slice(text.length - lastLineChars);\n\n // Split first part into lines\n const lines: string[] = [];\n for (let i = 0; i < firstLinesCount; i += 1) {\n const start = i * charsPerLine;\n const isEllipsisLine = i === ellipsisLineIndex;\n const lineWidth = isEllipsisLine ? charsPerLine - 3 : charsPerLine;\n const lineText = firstPart.slice(start, start + lineWidth);\n if (lineText) {\n lines.push(isEllipsisLine ? `${lineText} ...` : lineText);\n }\n }\n lines.push(lastLine);\n\n setMultiLineContent(lines);\n setTruncatedContent(lines.join('\\n'));\n } else {\n // Single line mode: use original truncation\n if (clientWidth === innerRef.current?.clientWidth) return;\n\n setMultiLineContent(undefined);\n setTruncatedContent(truncateInTheMiddle(text, clientWidth, textWidth));\n }\n };\n\n runTruncation();\n\n const debouncedTruncation = debounce(() => requestAnimationFrame(runTruncation), 200, {\n leading: true,\n });\n\n const resizeObserver = new ResizeObserver(debouncedTruncation);\n const mutationObserver = new MutationObserver(debouncedTruncation);\n\n if (containerRef.current && hiddenEltRef.current) {\n resizeObserver.observe(containerRef.current);\n resizeObserver.observe(hiddenEltRef.current);\n mutationObserver.observe(hiddenEltRef.current, { subtree: true, characterData: true });\n }\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n debouncedTruncation.cancel();\n };\n }, [isMultiLine, maxLines, stringContent]);\n\n const isTruncated = !!multiLineContent \|\| truncatedContent !== stringContent;\n\n return (\n <Tooltip title={stringContent} disabled={disableTooltip \|\| !isTruncated}>\n <div\n className={classNames(styles.root, className, { [styles.multiLine]: isMultiLine })}\n ref={containerRef}\n data-testid={testId}\n >\n <div\n className={styles.inner}\n ref={innerRef}\n data-testid={TextMiddleTruncatedTestIds.TruncatedTextTestId}\n >\n {multiLineContent ? (\n <>\n {multiLineContent.map((line, index) => (\n <div key={index} className={styles.line}>\n {line}\n </div>\n ))}\n </>\n ) : (\n truncatedContent\n )}\n </div>\n <div\n className={styles.hiddenElement}\n ref={hiddenEltRef}\n data-testid={TextMiddleTruncatedTestIds.FullTextTestId}\n >\n {stringContent}\n </div>\n </div>\n </Tooltip>\n );\n};\n\nexport const TextMiddleTruncated = (props: TextMiddleTruncatedProps) => (\n <TextMiddleTruncatedBase key={`${props.children}-${props.maxLines}`} {...props} />\n);\n"],"names":["TextMiddleTruncatedBase","_ref","_ref$children","children","testId","className","disableTooltip","_ref$maxLines","maxLines","stringContent","String","containerRef","useRef","hiddenEltRef","innerRef","useState","_useState2","_slicedToArray","_useState","truncatedContent","setTruncatedContent","_useState3","_useState4","multiLineContent","setMultiLineContent","isMultiLine","useLayoutEffect","runTruncation","current","clientWidth","textWidth","scrollWidth","textContent","text","length","charWidth","charsPerLine","Math","max","floor","undefined","firstLinesCount","ellipsisLineIndex","firstPartChars","lastLineChars","firstPart","slice","lastLine","lines","i","start","isEllipsisLine","lineWidth","lineText","push","join","_innerRef$current","truncateInTheMiddle","debouncedTruncation","debounce","requestAnimationFrame","leading","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","subtree","characterData","disconnect","cancel","_jsx","Tooltip","title","disabled","_jsxs","classNames","styles","root","_defineProperty","multiLine","ref","inner","TextMiddleTruncatedTestIds","TruncatedTextTestId","_Fragment","map","line","index","hiddenElement","FullTextTestId","TextMiddleTruncated","props"],"mappings":"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"}
1	+ {"version":3,"file":"TextMiddleTruncated.js","sources":["../../../src/componentsV2/TextMiddleTruncated/TextMiddleTruncated.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { debounce } from 'lodash';\n\nimport { Tooltip } from '../Tooltip';\n\nimport { TextMiddleTruncatedTestIds } from './TextMiddleTruncated.constants';\n\nimport styles from './TextMiddleTruncated.scss';\n\nimport { truncateInTheMiddle } from '~/utils/formatting';\n\nexport type TextMiddleTruncatedProps = {\n /*\n Content\n /\n children?: string \| number;\n disableTooltip?: boolean;\n /\n Maximum number of lines to display.\n * When maxLines > 1, the second-to-last line ends with \"...\" and the last line shows the end of text.\n \n e.g. with maxLines=4:\n \n line1\n \n line2\n \n line3...\n \n line4\n /\n maxLines?: number;\n\n className?: string;\n testId?: string;\n};\n\nconst TextMiddleTruncatedBase = ({\n children = '',\n testId,\n className,\n disableTooltip,\n maxLines = 1,\n}: TextMiddleTruncatedProps) => {\n const stringContent = String(children);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const hiddenEltRef = useRef<HTMLDivElement>(null);\n const measurementRef = useRef<HTMLDivElement>(null);\n const [truncatedContent, setTruncatedContent] = useState(stringContent);\n const [multiLineContent, setMultiLineContent] = useState<string[]>();\n\n const isMultiLine = maxLines > 1;\n\n useLayoutEffect(() => {\n let animationFrameId: number \| null = null;\n\n const runTruncation = () => {\n if (!containerRef.current \|\| !hiddenEltRef.current) return;\n\n const { clientWidth } = containerRef.current;\n const { scrollWidth: textWidth, textContent } = hiddenEltRef.current;\n const text = textContent ?? '';\n\n if (!text.length) return;\n\n if (isMultiLine) {\n if (!clientWidth \|\| !textWidth) return;\n\n // Multi-line mode: \"...\" always on second-to-last line\n // e.g., maxLines=4: line1, line2, line3..., line4\n const charWidth = textWidth / text.length;\n // Guard against very small clientWidth to prevent infinite loop or empty lines\n const charsPerLine = Math.max(1, Math.floor(clientWidth / charWidth));\n\n // Check if text fits in maxLines without truncation\n if (text.length <= charsPerLine maxLines) {\n setMultiLineContent(undefined);\n setTruncatedContent(text);\n return;\n }\n\n // Lines 1 to (N-2): full width\n // Line (N-1): ends with \" ...\" (second-to-last)\n // Line N: shows end of text (last line)\n const firstLinesCount = maxLines - 1; // lines before the last\n const ellipsisLineIndex = firstLinesCount - 1; // second-to-last line (0-indexed)\n\n // Characters for first part (all lines except last, with ellipsis on second-to-last)\n const firstPartChars = charsPerLine * (firstLinesCount - 1) + (charsPerLine - 2);\n // Characters for last line\n const lastLineChars = charsPerLine;\n\n const firstPart = text.slice(0, firstPartChars);\n const lastLine = text.slice(text.length - lastLineChars);\n\n // Split first part into lines\n const lines: string[] = [];\n for (let i = 0; i < firstLinesCount; i += 1) {\n const start = i * charsPerLine;\n const isEllipsisLine = i === ellipsisLineIndex;\n const lineWidth = isEllipsisLine ? charsPerLine - 3 : charsPerLine;\n const lineText = firstPart.slice(start, start + lineWidth);\n if (lineText) {\n lines.push(isEllipsisLine ? `${lineText} ...` : lineText);\n }\n }\n lines.push(lastLine);\n\n setMultiLineContent(lines);\n setTruncatedContent(lines.join('\\n'));\n } else {\n const measurementElement = measurementRef.current;\n\n if (!measurementElement) return;\n\n // Resolved CSS widths retain fractions and use layout pixels even under transforms.\n const containerStyle = getComputedStyle(containerRef.current);\n const horizontalPadding =\n parseFloat(containerStyle.paddingLeft) + parseFloat(containerStyle.paddingRight);\n const horizontalBorder =\n parseFloat(containerStyle.borderLeftWidth) + parseFloat(containerStyle.borderRightWidth);\n const availableWidth =\n parseFloat(containerStyle.width) -\n (containerStyle.boxSizing === 'border-box' ? horizontalPadding + horizontalBorder : 0);\n const fullTextWidth = parseFloat(getComputedStyle(hiddenEltRef.current).width);\n if (!Number.isFinite(availableWidth) \|\| !fullTextWidth) return;\n\n const measureWidth = (candidate: string) => {\n measurementElement.textContent = candidate;\n return parseFloat(getComputedStyle(measurementElement).width);\n };\n\n setMultiLineContent(undefined);\n setTruncatedContent(truncateInTheMiddle(text, availableWidth, fullTextWidth, measureWidth));\n }\n };\n\n runTruncation();\n\n const debouncedTruncation = debounce(\n () => {\n if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);\n\n animationFrameId = requestAnimationFrame(runTruncation);\n },\n 200,\n { leading: true }\n );\n\n const resizeObserver = new ResizeObserver(debouncedTruncation);\n const mutationObserver = new MutationObserver(debouncedTruncation);\n\n if (containerRef.current && hiddenEltRef.current) {\n resizeObserver.observe(containerRef.current);\n resizeObserver.observe(hiddenEltRef.current);\n mutationObserver.observe(hiddenEltRef.current, { subtree: true, characterData: true });\n }\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n debouncedTruncation.cancel();\n if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);\n };\n }, [isMultiLine, maxLines, stringContent]);\n\n const isTruncated = !!multiLineContent \|\| truncatedContent !== stringContent;\n\n return (\n <Tooltip title={stringContent} disabled={disableTooltip \|\| !isTruncated}>\n <div\n className={classNames(styles.root, className, {\n [styles.multiLine]: isMultiLine,\n [styles.singleLine]: !isMultiLine,\n })}\n ref={containerRef}\n data-testid={testId}\n >\n <div className={styles.inner} data-testid={TextMiddleTruncatedTestIds.TruncatedTextTestId}>\n {multiLineContent ? (\n <>\n {multiLineContent.map((line, index) => (\n <div key={index} className={styles.line}>\n {line}\n </div>\n ))}\n </>\n ) : (\n truncatedContent\n )}\n </div>\n <div\n className={classNames(\n styles.hiddenElement,\n isMultiLine ? styles.measurementElement : styles.fullTextSingleLine\n )}\n ref={hiddenEltRef}\n data-testid={TextMiddleTruncatedTestIds.FullTextTestId}\n >\n {stringContent}\n </div>\n {!isMultiLine && (\n <div\n className={classNames(styles.hiddenElement, styles.measurementElement)}\n ref={measurementRef}\n aria-hidden=\"true\"\n />\n )}\n </div>\n </Tooltip>\n );\n};\n\nexport const TextMiddleTruncated = (props: TextMiddleTruncatedProps) => (\n <TextMiddleTruncatedBase key={`${props.children}-${props.maxLines}`} {...props} />\n);\n"],"names":["TextMiddleTruncatedBase","_ref","_classNames","_ref$children","children","testId","className","disableTooltip","_ref$maxLines","maxLines","stringContent","String","containerRef","useRef","hiddenEltRef","measurementRef","useState","_useState2","_slicedToArray","_useState","truncatedContent","setTruncatedContent","_useState3","_useState4","multiLineContent","setMultiLineContent","isMultiLine","useLayoutEffect","animationFrameId","runTruncation","current","clientWidth","textWidth","scrollWidth","textContent","text","length","charWidth","charsPerLine","Math","max","floor","undefined","firstLinesCount","ellipsisLineIndex","firstPartChars","lastLineChars","firstPart","slice","lastLine","lines","i","start","isEllipsisLine","lineWidth","lineText","push","join","measurementElement","containerStyle","getComputedStyle","horizontalPadding","parseFloat","paddingLeft","paddingRight","horizontalBorder","borderLeftWidth","borderRightWidth","availableWidth","width","boxSizing","fullTextWidth","Number","isFinite","truncateInTheMiddle","candidate","debouncedTruncation","debounce","cancelAnimationFrame","requestAnimationFrame","leading","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","subtree","characterData","disconnect","cancel","_jsx","Tooltip","title","disabled","_jsxs","classNames","styles","root","multiLine","singleLine","ref","inner","TextMiddleTruncatedTestIds","TruncatedTextTestId","_Fragment","map","line","index","hiddenElement","fullTextSingleLine","FullTextTestId","TextMiddleTruncated","props"],"mappings":"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"}

package/componentsV2/TextMiddleTruncated/TextMiddleTruncated.scss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from'./../../ext-esm/style-inject/dist/style-inject.es.js';var i={root:"TextMiddleTruncated_root__sMHwy",multiLine:"TextMiddleTruncated_multiLine__ECbYi",inner:"TextMiddleTruncated_inner__sWwZy",line:"TextMiddleTruncated_line__OF0LA",hiddenElement:"TextMiddleTruncated_hiddenElement__JW0Og"};e(".TextMiddleTruncated_root__sMHwy{overflow:hidden;white-space:nowrap}.TextMiddleTruncated_multiLine__ECbYi{white-space:normal}.TextMiddleTruncated_multiLine__ECbYi .TextMiddleTruncated_inner__sWwZy{display:block}.TextMiddleTruncated_inner__sWwZy{display:inline-block;vertical-align:top}.TextMiddleTruncated_line__OF0LA{overflow:hidden;text-overflow:clip;white-space:nowrap}.TextMiddleTruncated_hiddenElement__JW0Og{left:-9999px;pointer-events:none;position:absolute;top:-9999px;visibility:hidden;white-space:nowrap}");export{i as default};
+import e from'./../../ext-esm/style-inject/dist/style-inject.es.js';var i={root:"TextMiddleTruncated_root__sMHwy",singleLine:"TextMiddleTruncated_singleLine__yZJHl",inner:"TextMiddleTruncated_inner__sWwZy",multiLine:"TextMiddleTruncated_multiLine__ECbYi",line:"TextMiddleTruncated_line__OF0LA",hiddenElement:"TextMiddleTruncated_hiddenElement__JW0Og",measurementElement:"TextMiddleTruncated_measurementElement__8KbXa",fullTextSingleLine:"TextMiddleTruncated_fullTextSingleLine__4B2PI"};e(".TextMiddleTruncated_root__sMHwy{overflow:hidden;white-space:nowrap}.TextMiddleTruncated_singleLine__yZJHl{display:grid;grid-template-columns:minmax(0,1fr)}.TextMiddleTruncated_singleLine__yZJHl .TextMiddleTruncated_inner__sWwZy{grid-area:1/1}.TextMiddleTruncated_multiLine__ECbYi{white-space:normal}.TextMiddleTruncated_multiLine__ECbYi .TextMiddleTruncated_inner__sWwZy{display:block}.TextMiddleTruncated_inner__sWwZy{display:inline-block;vertical-align:top}.TextMiddleTruncated_line__OF0LA{overflow:hidden;text-overflow:clip;white-space:nowrap}.TextMiddleTruncated_hiddenElement__JW0Og{pointer-events:none;visibility:hidden;white-space:nowrap;width:max-content}.TextMiddleTruncated_measurementElement__8KbXa{left:-9999px;position:absolute;top:-9999px}.TextMiddleTruncated_fullTextSingleLine__4B2PI{grid-area:1/1}");export{i as default};
 //# sourceMappingURL=TextMiddleTruncated.scss.js.map

package/componentsV2/TextMiddleTruncated/TextMiddleTruncated.stories.d.ts CHANGED Viewed

@@ -6,5 +6,6 @@ declare const meta: Meta<Props>;
 export default meta;
 export declare const Default: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const DynamicTooltips: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProportionalFont: () => import("react/jsx-runtime").JSX.Element;
 export declare const MaxLinesMode: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextMiddleTruncated.stories.d.ts.map

package/componentsV2/TextMiddleTruncated/TextMiddleTruncated.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextMiddleTruncated.stories.d.ts","sourceRoot":"","sources":["../../../src/componentsV2/TextMiddleTruncated/TextMiddleTruncated.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,KAAK,KAAK,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAExD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,KAAK,CAGrB,CAAC;eA8Ba,IAAI;AAEnB,eAAO,MAAM,OAAO,UAAW,KAAK,4CAMnC,CAAC;AAEF,eAAO,MAAM,eAAe,+CAmB3B,CAAC;AAWF,eAAO,MAAM,YAAY,+CA+CxB,CAAC"}
1	+ {"version":3,"file":"TextMiddleTruncated.stories.d.ts","sourceRoot":"","sources":["../../../src/componentsV2/TextMiddleTruncated/TextMiddleTruncated.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,KAAK,KAAK,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAExD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,KAAK,CAGrB,CAAC;eA8Ba,IAAI;AAEnB,eAAO,MAAM,OAAO,UAAW,KAAK,4CAMnC,CAAC;AAEF,eAAO,MAAM,eAAe,+CAmB3B,CAAC;AASF,eAAO,MAAM,gBAAgB,+CAiC5B,CAAC;AAWF,eAAO,MAAM,YAAY,+CA+CxB,CAAC"}

package/componentsV2/TextMiddleTruncated/__tests__/TextMiddleTruncated.test.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=TextMiddleTruncated.test.d.ts.map

package/componentsV2/TextMiddleTruncated/__tests__/TextMiddleTruncated.test.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"TextMiddleTruncated.test.d.ts","sourceRoot":"","sources":["../../../../src/componentsV2/TextMiddleTruncated/__tests__/TextMiddleTruncated.test.js"],"names":[],"mappings":""}