npm - @uipath/apollo-react - Versions diffs - 4.54.0 → 4.54.1 - Mend

@uipath/apollo-react 4.54.0 → 4.54.1

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 (7) hide show

package/dist/canvas/components/BaseNode/NodeLabel.cjs CHANGED Viewed

@@ -45,31 +45,41 @@ const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
         children: children
     });
 };
-const ConditionalTooltip = ({ content, children })=>{
+const ConditionalTooltip = ({ content, placement = 'top', children })=>{
     if (!content) return children;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
         delay: true,
-        placement: "top",
+        placement: placement,
         content: content,
         smartTooltip: true,
         children: children
     });
 };
-const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+const Header = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ shape, backgroundColor, onDoubleClick, children, className, style, 'data-testid': dataTestId, ...triggerProps }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ...triggerProps,
+        ref: ref,
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3'),
-        style: backgroundColor ? {
-            backgroundColor
-        } : void 0,
+        className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3', className),
+        style: {
+            ...style,
+            ...backgroundColor ? {
+                backgroundColor
+            } : void 0
+        },
         children: children
-    });
-const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+    }));
+Header.displayName = 'Header';
+const SubHeader = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ shape, onDoubleClick, children, className, style, 'data-testid': dataTestId, ...triggerProps }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ...triggerProps,
+        ref: ref,
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
+        className: (0, CssUtil_cjs_namespaceObject.cx)('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5', className),
+        style: style,
         children: children
-    });
+    }));
+SubHeader.displayName = 'SubHeader';
 const EditableLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
         ref: ref,
         value: value,
@@ -186,6 +196,9 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
             centerAdornment
         ]
     });
+    const headerTooltipContent = labelTooltip ?? label;
+    const subHeaderTooltipContent = labelTooltip ?? subLabel;
+    const tooltipPlacement = 'rectangle' === shape ? 'top' : 'bottom';
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(BaseTextContainer, {
         hasBottomHandles: hasBottomHandles,
         shape: shape,
@@ -218,21 +231,28 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         "aria-label": "Edit node description"
                     })
                 ]
-            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ConditionalTooltip, {
-                content: labelTooltip,
+            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
-                        shape: shape,
-                        backgroundColor: labelBackgroundColor,
-                        onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
-                        "data-testid": "node-label",
-                        children: label
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ConditionalTooltip, {
+                        content: headerTooltipContent,
+                        placement: tooltipPlacement,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
+                            shape: shape,
+                            backgroundColor: labelBackgroundColor,
+                            onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
+                            "data-testid": "node-label",
+                            children: label
+                        })
                     }),
-                    subLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SubHeader, {
-                        shape: shape,
-                        onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
-                        "data-testid": "node-sublabel",
-                        children: subLabel
+                    subLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ConditionalTooltip, {
+                        content: subHeaderTooltipContent,
+                        placement: tooltipPlacement,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SubHeader, {
+                            shape: shape,
+                            onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
+                            "data-testid": "node-sublabel",
+                            children: subLabel
+                        })
                     })
                 ]
             }),

package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;~~AA+IF~~,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;~~AA+KD~~,eAAO,MAAM,SAAS,~~mLAjKnB~~,cAAc,~~6CAiK~~+B,CAAC"}
1	+ {"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AAqKF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AA2LD,eAAO,MAAM,SAAS,mLA7KnB,cAAc,6CA6K+B,CAAC"}

package/dist/canvas/components/BaseNode/NodeLabel.js CHANGED Viewed

@@ -16,31 +16,41 @@ const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
         children: children
     });
 };
-const ConditionalTooltip = ({ content, children })=>{
+const ConditionalTooltip = ({ content, placement = 'top', children })=>{
     if (!content) return children;
     return /*#__PURE__*/ jsx(CanvasTooltip, {
         delay: true,
-        placement: "top",
+        placement: placement,
         content: content,
         smartTooltip: true,
         children: children
     });
 };
-const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
+const Header = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, onDoubleClick, children, className, style, 'data-testid': dataTestId, ...triggerProps }, ref)=>/*#__PURE__*/ jsx("div", {
+        ...triggerProps,
+        ref: ref,
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: cx('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3'),
-        style: backgroundColor ? {
-            backgroundColor
-        } : void 0,
+        className: cx('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3', className),
+        style: {
+            ...style,
+            ...backgroundColor ? {
+                backgroundColor
+            } : void 0
+        },
         children: children
-    });
-const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
+    }));
+Header.displayName = 'Header';
+const SubHeader = /*#__PURE__*/ forwardRef(({ shape, onDoubleClick, children, className, style, 'data-testid': dataTestId, ...triggerProps }, ref)=>/*#__PURE__*/ jsx("div", {
+        ...triggerProps,
+        ref: ref,
         "data-testid": dataTestId,
         onDoubleClick: onDoubleClick,
-        className: cx('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
+        className: cx('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5', className),
+        style: style,
         children: children
-    });
+    }));
+SubHeader.displayName = 'SubHeader';
 const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ jsx("textarea", {
         ref: ref,
         value: value,
@@ -157,6 +167,9 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
             centerAdornment
         ]
     });
+    const headerTooltipContent = labelTooltip ?? label;
+    const subHeaderTooltipContent = labelTooltip ?? subLabel;
+    const tooltipPlacement = 'rectangle' === shape ? 'top' : 'bottom';
     return /*#__PURE__*/ jsxs(BaseTextContainer, {
         hasBottomHandles: hasBottomHandles,
         shape: shape,
@@ -189,21 +202,28 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
                         "aria-label": "Edit node description"
                     })
                 ]
-            }) : /*#__PURE__*/ jsxs(ConditionalTooltip, {
-                content: labelTooltip,
+            }) : /*#__PURE__*/ jsxs(Fragment, {
                 children: [
-                    /*#__PURE__*/ jsx(Header, {
-                        shape: shape,
-                        backgroundColor: labelBackgroundColor,
-                        onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
-                        "data-testid": "node-label",
-                        children: label
+                    /*#__PURE__*/ jsx(ConditionalTooltip, {
+                        content: headerTooltipContent,
+                        placement: tooltipPlacement,
+                        children: /*#__PURE__*/ jsx(Header, {
+                            shape: shape,
+                            backgroundColor: labelBackgroundColor,
+                            onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
+                            "data-testid": "node-label",
+                            children: label
+                        })
                     }),
-                    subLabel && /*#__PURE__*/ jsx(SubHeader, {
-                        shape: shape,
-                        onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
-                        "data-testid": "node-sublabel",
-                        children: subLabel
+                    subLabel && /*#__PURE__*/ jsx(ConditionalTooltip, {
+                        content: subHeaderTooltipContent,
+                        placement: tooltipPlacement,
+                        children: /*#__PURE__*/ jsx(SubHeader, {
+                            shape: shape,
+                            onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
+                            "data-testid": "node-sublabel",
+                            children: subLabel
+                        })
                     })
                 ]
             }),

package/dist/material/components/ap-tooltip/useTruncationDetection.cjs CHANGED Viewed

@@ -28,6 +28,22 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const external_react_namespaceObject = require("react");
 const TOOLTIP_TARGET_ELEMENT = 'tooltip-target-element';
+function getLineClamp(computedStyle) {
+    return computedStyle.getPropertyValue('-webkit-line-clamp') || computedStyle.WebkitLineClamp;
+}
+function hasLineClamp(computedStyle) {
+    const lineClamp = getLineClamp(computedStyle);
+    return Boolean(lineClamp && 'none' !== lineClamp);
+}
+function isTruncationStyleCandidate(element) {
+    const computedStyle = window.getComputedStyle(element);
+    return 'ellipsis' === computedStyle.textOverflow || hasLineClamp(computedStyle);
+}
+function findTruncationStyleCandidate(element) {
+    if (!(element instanceof HTMLElement)) return;
+    if (isTruncationStyleCandidate(element)) return element;
+    return Array.from(element.children).find((child)=>child instanceof HTMLElement && isTruncationStyleCandidate(child));
+}
 function useTruncationDetection(elementRef) {
     const [isTruncated, setIsTruncated] = (0, external_react_namespaceObject.useState)(false);
     const hasCheckedRef = (0, external_react_namespaceObject.useRef)(false);
@@ -49,15 +65,17 @@ function useTruncationDetection(elementRef) {
                 const rootNode = element.getRootNode();
                 if (rootNode instanceof ShadowRoot) {
                     const hostElement = rootNode.host;
-                    const slottedElement = hostElement.querySelector('div[data-slot-name="children"]') || Array.from(hostElement.children).find((child)=>child instanceof HTMLElement && 'ellipsis' === window.getComputedStyle(child).textOverflow);
+                    const slottedElement = findTruncationStyleCandidate(hostElement.querySelector('div[data-slot-name="children"]')) || Array.from(hostElement.children).map((child)=>findTruncationStyleCandidate(child)).find(Boolean);
                     if (slottedElement instanceof HTMLElement) targetElement = slottedElement;
                 }
             }
         }
         const computedStyle = window.getComputedStyle(targetElement);
+        const isLineClamped = hasLineClamp(computedStyle);
         const hasEllipsis = 'ellipsis' === computedStyle.textOverflow;
         const hasOverflowHidden = 'hidden' === computedStyle.overflow || 'hidden' === computedStyle.overflowX;
         const hasWhiteSpaceNowrap = 'nowrap' === computedStyle.whiteSpace;
+        if (isLineClamped) return void setIsTruncated(targetElement.scrollHeight > targetElement.clientHeight);
         if (!hasEllipsis || !hasOverflowHidden || !hasWhiteSpaceNowrap) return void setIsTruncated(false);
         const isElementTruncated = targetElement.scrollWidth > targetElement.clientWidth;
         setIsTruncated(isElementTruncated);

package/dist/material/components/ap-tooltip/useTruncationDetection.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTruncationDetection.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-tooltip/useTruncationDetection.ts"],"names":[],"mappings":"~~AAIA~~,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG;IACvF,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,~~CAgGA~~"}
1	+ {"version":3,"file":"useTruncationDetection.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-tooltip/useTruncationDetection.ts"],"names":[],"mappings":"AAoCA,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG;IACvF,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAuGA"}

package/dist/material/components/ap-tooltip/useTruncationDetection.js CHANGED Viewed

@@ -1,5 +1,21 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 const TOOLTIP_TARGET_ELEMENT = 'tooltip-target-element';
+function getLineClamp(computedStyle) {
+    return computedStyle.getPropertyValue('-webkit-line-clamp') || computedStyle.WebkitLineClamp;
+}
+function hasLineClamp(computedStyle) {
+    const lineClamp = getLineClamp(computedStyle);
+    return Boolean(lineClamp && 'none' !== lineClamp);
+}
+function isTruncationStyleCandidate(element) {
+    const computedStyle = window.getComputedStyle(element);
+    return 'ellipsis' === computedStyle.textOverflow || hasLineClamp(computedStyle);
+}
+function findTruncationStyleCandidate(element) {
+    if (!(element instanceof HTMLElement)) return;
+    if (isTruncationStyleCandidate(element)) return element;
+    return Array.from(element.children).find((child)=>child instanceof HTMLElement && isTruncationStyleCandidate(child));
+}
 function useTruncationDetection(elementRef) {
     const [isTruncated, setIsTruncated] = useState(false);
     const hasCheckedRef = useRef(false);
@@ -21,15 +37,17 @@ function useTruncationDetection(elementRef) {
                 const rootNode = element.getRootNode();
                 if (rootNode instanceof ShadowRoot) {
                     const hostElement = rootNode.host;
-                    const slottedElement = hostElement.querySelector('div[data-slot-name="children"]') || Array.from(hostElement.children).find((child)=>child instanceof HTMLElement && 'ellipsis' === window.getComputedStyle(child).textOverflow);
+                    const slottedElement = findTruncationStyleCandidate(hostElement.querySelector('div[data-slot-name="children"]')) || Array.from(hostElement.children).map((child)=>findTruncationStyleCandidate(child)).find(Boolean);
                     if (slottedElement instanceof HTMLElement) targetElement = slottedElement;
                 }
             }
         }
         const computedStyle = window.getComputedStyle(targetElement);
+        const isLineClamped = hasLineClamp(computedStyle);
         const hasEllipsis = 'ellipsis' === computedStyle.textOverflow;
         const hasOverflowHidden = 'hidden' === computedStyle.overflow || 'hidden' === computedStyle.overflowX;
         const hasWhiteSpaceNowrap = 'nowrap' === computedStyle.whiteSpace;
+        if (isLineClamped) return void setIsTruncated(targetElement.scrollHeight > targetElement.clientHeight);
         if (!hasEllipsis || !hasOverflowHidden || !hasWhiteSpaceNowrap) return void setIsTruncated(false);
         const isElementTruncated = targetElement.scrollWidth > targetElement.clientWidth;
         setIsTruncated(isElementTruncated);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "4.54.0",
+  "version": "4.54.1",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",