@indico-data/design-system 3.6.1 → 3.6.3

package/lib/index.js

@@ -43117,12 +43117,17 @@ const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,bas
 .styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,type:"base"});}));
 
 const Tooltip = (_a) => {
-    var { id, clickToShow, delayShow, delayHide, children, zIndex = 1000, place = 'top' } = _a, rest = __rest(_a, ["id", "clickToShow", "delayShow", "delayHide", "children", "zIndex", "place"]);
+    var { id, clickToShow, delayShow, delayHide, children, place = 'top', width = 'max-content', maxWidth, opacity = 1, positionStrategy = 'absolute' } = _a, rest = __rest(_a, ["id", "clickToShow", "delayShow", "delayHide", "children", "place", "width", "maxWidth", "opacity", "positionStrategy"]);
     return (jsxRuntime.jsx(M, Object.assign({ style: {
             backgroundColor: 'var(--pf-semantic-background-inverted)',
             color: 'var(--pf-semantic-font-inverted)',
-            zIndex,
-        }, id: id, place: place, openOnClick: clickToShow, delayShow: delayShow, delayHide: delayHide }, rest, { children: children })));
+            width,
+            maxWidth,
+            boxSizing: 'border-box',
+            textWrap: 'wrap',
+            wordWrap: 'break-word',
+            zIndex: 1000,
+        }, className: "tooltip", id: id, place: place, openOnClick: clickToShow, delayShow: delayShow, delayHide: delayHide, opacity: opacity, positionStrategy: positionStrategy }, rest, { children: children })));
 };
 
 function BarSpinner(_a) {
@@ -43258,29 +43263,33 @@ function v4(options, buf, offset) {
 }
 
 const Truncate = (_a) => {
-    var { lineClamp = 0, truncateString, hasTooltip = true, tooltipId } = _a, rest = __rest(_a, ["lineClamp", "truncateString", "hasTooltip", "tooltipId"]);
+    var { numLines = 1, truncateString, tooltipOptions = {} } = _a, rest = __rest(_a, ["numLines", "truncateString", "tooltipOptions"]);
     const [isTruncated, setIsTruncated] = React.useState(false);
-    const id = (tooltipId !== null && tooltipId !== void 0 ? tooltipId : v4()).replace(/[^a-zA-Z0-9-_]/g, '_');
+    const id = React.useMemo(() => v4().replace(/[^a-zA-Z0-9-_]/g, '_'), []);
+    const ref = React.useRef(null);
     React.useEffect(() => {
         const checkTruncation = () => {
-            const element = document.querySelector(`[data-tooltip-id="${id}"]`);
-            if (element) {
-                if (lineClamp === 0) {
-                    setIsTruncated(element.scrollWidth > element.clientWidth);
-                }
-                else {
-                    setIsTruncated(element.scrollHeight > element.clientHeight);
-                }
+            const element = ref.current;
+            if (!element)
+                return;
+            if (numLines === 1) {
+                setIsTruncated(element.scrollWidth > element.clientWidth);
+            }
+            else {
+                setIsTruncated(element.scrollHeight > element.clientHeight);
             }
         };
         checkTruncation();
         window.addEventListener('resize', checkTruncation);
         return () => window.removeEventListener('resize', checkTruncation);
-    }, [id, lineClamp]);
+    }, [id, numLines]);
     const truncateStyle = {
-        '--line-clamp': lineClamp,
+        '--line-clamp': numLines,
     };
-    return (jsxRuntime.jsxs("div", { className: "truncate-wrapper", style: truncateStyle, children: [jsxRuntime.jsx("span", Object.assign({ "data-testid": `truncate-${id}-${isTruncated ? 'truncated' : 'not-truncated'}`, "data-tooltip-id": id, "data-tooltip-content": isTruncated ? truncateString : undefined, className: lineClamp > 0 ? 'truncate-clip' : 'truncate' }, rest, { children: truncateString })), isTruncated && truncateString && hasTooltip && (jsxRuntime.jsx(Tooltip, { "data-tooltip-delay-hide": 0, id: id, children: truncateString }))] }));
+    return (jsxRuntime.jsxs("div", { className: "truncate-wrapper", style: truncateStyle, children: [jsxRuntime.jsx("span", Object.assign({ ref: ref, "data-testid": `truncate-${id}-${isTruncated ? 'truncated' : 'not-truncated'}`, "data-tooltip-id": id, className: classNames('truncate', {
+                    'truncate--multi-line': numLines > 1,
+                    'truncate--single-line': numLines === 1,
+                }) }, rest, { children: truncateString })), isTruncated && truncateString && !tooltipOptions.disabled && (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltipOptions, { id: id, children: truncateString })))] }));
 };
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}