@uipath/apollo-react 4.54.0 → 4.54.2

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 (13) hide show
  1. package/dist/canvas/components/BaseNode/NodeLabel.cjs +44 -24
  2. package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map +1 -1
  3. package/dist/canvas/components/BaseNode/NodeLabel.js +44 -24
  4. package/dist/canvas/components/Toolbox/ListView.cjs +1 -4
  5. package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
  6. package/dist/canvas/components/Toolbox/ListView.js +1 -4
  7. package/dist/canvas/components/Toolbox/ListView.styles.cjs +8 -3
  8. package/dist/canvas/components/Toolbox/ListView.styles.d.ts.map +1 -1
  9. package/dist/canvas/components/Toolbox/ListView.styles.js +8 -3
  10. package/dist/material/components/ap-tooltip/useTruncationDetection.cjs +19 -1
  11. package/dist/material/components/ap-tooltip/useTruncationDetection.d.ts.map +1 -1
  12. package/dist/material/components/ap-tooltip/useTruncationDetection.js +19 -1
  13. package/package.json +1 -1
package/dist/canvas/components/BaseNode/NodeLabel.cjs CHANGED
@@ -45,31 +45,41 @@ const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
45
45
  children: children
46
46
  });
47
47
  };
48
- const ConditionalTooltip = ({ content, children })=>{
48
+ const ConditionalTooltip = ({ content, placement = 'top', children })=>{
49
49
  if (!content) return children;
50
50
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
51
51
  delay: true,
52
- placement: "top",
52
+ placement: placement,
53
53
  content: content,
54
54
  smartTooltip: true,
55
55
  children: children
56
56
  });
57
57
  };
58
- const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
58
+ 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", {
59
+ ...triggerProps,
60
+ ref: ref,
59
61
  "data-testid": dataTestId,
60
62
  onDoubleClick: onDoubleClick,
61
- 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'),
62
- style: backgroundColor ? {
63
- backgroundColor
64
- } : void 0,
63
+ 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),
64
+ style: {
65
+ ...style,
66
+ ...backgroundColor ? {
67
+ backgroundColor
68
+ } : void 0
69
+ },
65
70
  children: children
66
- });
67
- const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
71
+ }));
72
+ Header.displayName = 'Header';
73
+ 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", {
74
+ ...triggerProps,
75
+ ref: ref,
68
76
  "data-testid": dataTestId,
69
77
  onDoubleClick: onDoubleClick,
70
- 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'),
78
+ 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),
79
+ style: style,
71
80
  children: children
72
- });
81
+ }));
82
+ SubHeader.displayName = 'SubHeader';
73
83
  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", {
74
84
  ref: ref,
75
85
  value: value,
@@ -186,6 +196,9 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
186
196
  centerAdornment
187
197
  ]
188
198
  });
199
+ const headerTooltipContent = labelTooltip ?? label;
200
+ const subHeaderTooltipContent = labelTooltip ?? subLabel;
201
+ const tooltipPlacement = 'rectangle' === shape ? 'top' : 'bottom';
189
202
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(BaseTextContainer, {
190
203
  hasBottomHandles: hasBottomHandles,
191
204
  shape: shape,
@@ -218,21 +231,28 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
218
231
  "aria-label": "Edit node description"
219
232
  })
220
233
  ]
221
- }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ConditionalTooltip, {
222
- content: labelTooltip,
234
+ }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
223
235
  children: [
224
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
225
- shape: shape,
226
- backgroundColor: labelBackgroundColor,
227
- onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
228
- "data-testid": "node-label",
229
- children: label
236
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ConditionalTooltip, {
237
+ content: headerTooltipContent,
238
+ placement: tooltipPlacement,
239
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
240
+ shape: shape,
241
+ backgroundColor: labelBackgroundColor,
242
+ onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
243
+ "data-testid": "node-label",
244
+ children: label
245
+ })
230
246
  }),
231
- subLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SubHeader, {
232
- shape: shape,
233
- onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
234
- "data-testid": "node-sublabel",
235
- children: subLabel
247
+ subLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ConditionalTooltip, {
248
+ content: subHeaderTooltipContent,
249
+ placement: tooltipPlacement,
250
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SubHeader, {
251
+ shape: shape,
252
+ onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
253
+ "data-testid": "node-sublabel",
254
+ children: subLabel
255
+ })
236
256
  })
237
257
  ]
238
258
  }),
package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map CHANGED
@@ -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
@@ -16,31 +16,41 @@ const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
16
16
  children: children
17
17
  });
18
18
  };
19
- const ConditionalTooltip = ({ content, children })=>{
19
+ const ConditionalTooltip = ({ content, placement = 'top', children })=>{
20
20
  if (!content) return children;
21
21
  return /*#__PURE__*/ jsx(CanvasTooltip, {
22
22
  delay: true,
23
- placement: "top",
23
+ placement: placement,
24
24
  content: content,
25
25
  smartTooltip: true,
26
26
  children: children
27
27
  });
28
28
  };
29
- const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
29
+ const Header = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, onDoubleClick, children, className, style, 'data-testid': dataTestId, ...triggerProps }, ref)=>/*#__PURE__*/ jsx("div", {
30
+ ...triggerProps,
31
+ ref: ref,
30
32
  "data-testid": dataTestId,
31
33
  onDoubleClick: onDoubleClick,
32
- 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'),
33
- style: backgroundColor ? {
34
- backgroundColor
35
- } : void 0,
34
+ 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),
35
+ style: {
36
+ ...style,
37
+ ...backgroundColor ? {
38
+ backgroundColor
39
+ } : void 0
40
+ },
36
41
  children: children
37
- });
38
- const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
42
+ }));
43
+ Header.displayName = 'Header';
44
+ const SubHeader = /*#__PURE__*/ forwardRef(({ shape, onDoubleClick, children, className, style, 'data-testid': dataTestId, ...triggerProps }, ref)=>/*#__PURE__*/ jsx("div", {
45
+ ...triggerProps,
46
+ ref: ref,
39
47
  "data-testid": dataTestId,
40
48
  onDoubleClick: onDoubleClick,
41
- 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'),
49
+ 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),
50
+ style: style,
42
51
  children: children
43
- });
52
+ }));
53
+ SubHeader.displayName = 'SubHeader';
44
54
  const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ jsx("textarea", {
45
55
  ref: ref,
46
56
  value: value,
@@ -157,6 +167,9 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
157
167
  centerAdornment
158
168
  ]
159
169
  });
170
+ const headerTooltipContent = labelTooltip ?? label;
171
+ const subHeaderTooltipContent = labelTooltip ?? subLabel;
172
+ const tooltipPlacement = 'rectangle' === shape ? 'top' : 'bottom';
160
173
  return /*#__PURE__*/ jsxs(BaseTextContainer, {
161
174
  hasBottomHandles: hasBottomHandles,
162
175
  shape: shape,
@@ -189,21 +202,28 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
189
202
  "aria-label": "Edit node description"
190
203
  })
191
204
  ]
192
- }) : /*#__PURE__*/ jsxs(ConditionalTooltip, {
193
- content: labelTooltip,
205
+ }) : /*#__PURE__*/ jsxs(Fragment, {
194
206
  children: [
195
- /*#__PURE__*/ jsx(Header, {
196
- shape: shape,
197
- backgroundColor: labelBackgroundColor,
198
- onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
199
- "data-testid": "node-label",
200
- children: label
207
+ /*#__PURE__*/ jsx(ConditionalTooltip, {
208
+ content: headerTooltipContent,
209
+ placement: tooltipPlacement,
210
+ children: /*#__PURE__*/ jsx(Header, {
211
+ shape: shape,
212
+ backgroundColor: labelBackgroundColor,
213
+ onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
214
+ "data-testid": "node-label",
215
+ children: label
216
+ })
201
217
  }),
202
- subLabel && /*#__PURE__*/ jsx(SubHeader, {
203
- shape: shape,
204
- onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
205
- "data-testid": "node-sublabel",
206
- children: subLabel
218
+ subLabel && /*#__PURE__*/ jsx(ConditionalTooltip, {
219
+ content: subHeaderTooltipContent,
220
+ placement: tooltipPlacement,
221
+ children: /*#__PURE__*/ jsx(SubHeader, {
222
+ shape: shape,
223
+ onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
224
+ "data-testid": "node-sublabel",
225
+ children: subLabel
226
+ })
207
227
  })
208
228
  ]
209
229
  }),
package/dist/canvas/components/Toolbox/ListView.cjs CHANGED
@@ -96,10 +96,7 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
96
96
  const renderItem = renderedItems[index];
97
97
  const buttonStyle = (0, external_react_namespaceObject.useMemo)(()=>({
98
98
  ...style,
99
- padding: 0,
100
- paddingRight: '4px',
101
- height: '32px',
102
- outlineOffset: '-1px'
99
+ padding: '4px 6px'
103
100
  }), [
104
101
  style
105
102
  ]);
package/dist/canvas/components/Toolbox/ListView.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"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"}
package/dist/canvas/components/Toolbox/ListView.js CHANGED
@@ -67,10 +67,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
67
67
  const renderItem = renderedItems[index];
68
68
  const buttonStyle = useMemo(()=>({
69
69
  ...style,
70
- padding: 0,
71
- paddingRight: '4px',
72
- height: '32px',
73
- outlineOffset: '-1px'
70
+ padding: '4px 6px'
74
71
  }), [
75
72
  style
76
73
  ]);
package/dist/canvas/components/Toolbox/ListView.styles.cjs CHANGED
@@ -66,7 +66,13 @@ const ListItemButton = styled_default()(react_namespaceObject.motion.button)`
66
66
  cursor: pointer;
67
67
  text-align: left;
68
68
  width: 100%;
69
- transition: all 0.15s ease;
69
+ // Reserve the focus ring geometry in the resting state (invisible via a
70
+ // transparent color) so activating a row only flips outline-color. Without
71
+ // this the outline falls back to UA defaults (3px / currentColor) and every
72
+ // sub-property jumps at once, flashing a thick dark border under transition.
73
+ outline: 1px solid transparent;
74
+ outline-offset: -1px;
75
+ transition: background-color 0.15s ease, opacity 0.15s ease, outline-color 0.15s ease;
70
76
 
71
77
  &:hover,
72
78
  &.active {
@@ -74,8 +80,7 @@ const ListItemButton = styled_default()(react_namespaceObject.motion.button)`
74
80
  }
75
81
 
76
82
  &.active {
77
- outline: 1px solid var(--canvas-primary);
78
- outline-offset: -1px;
83
+ outline-color: var(--canvas-primary);
79
84
  }
80
85
  `;
81
86
  const IconContainer = styled_default().div`
package/dist/canvas/components/Toolbox/ListView.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,aAAa;;;yGAazB,CAAC;AAEF,eAAO,MAAM,cAAc;;UAqB1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAazD,CAAC;AAEF,eAAO,MAAM,UAAU,EAkClB,OAAO,IAAI,CAAC"}
1
+ {"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,aAAa;;;yGAazB,CAAC;AAEF,eAAO,MAAM,cAAc;;UA0B1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAazD,CAAC;AAEF,eAAO,MAAM,UAAU,EAkClB,OAAO,IAAI,CAAC"}
package/dist/canvas/components/Toolbox/ListView.styles.js CHANGED
@@ -25,7 +25,13 @@ const ListItemButton = styled(motion.button)`
25
25
  cursor: pointer;
26
26
  text-align: left;
27
27
  width: 100%;
28
- transition: all 0.15s ease;
28
+ // Reserve the focus ring geometry in the resting state (invisible via a
29
+ // transparent color) so activating a row only flips outline-color. Without
30
+ // this the outline falls back to UA defaults (3px / currentColor) and every
31
+ // sub-property jumps at once, flashing a thick dark border under transition.
32
+ outline: 1px solid transparent;
33
+ outline-offset: -1px;
34
+ transition: background-color 0.15s ease, opacity 0.15s ease, outline-color 0.15s ease;
29
35
 
30
36
  &:hover,
31
37
  &.active {
@@ -33,8 +39,7 @@ const ListItemButton = styled(motion.button)`
33
39
  }
34
40
 
35
41
  &.active {
36
- outline: 1px solid var(--canvas-primary);
37
- outline-offset: -1px;
42
+ outline-color: var(--canvas-primary);
38
43
  }
39
44
  `;
40
45
  const IconContainer = styled.div`
package/dist/material/components/ap-tooltip/useTruncationDetection.cjs CHANGED
@@ -28,6 +28,22 @@ __webpack_require__.d(__webpack_exports__, {
28
28
  });
29
29
  const external_react_namespaceObject = require("react");
30
30
  const TOOLTIP_TARGET_ELEMENT = 'tooltip-target-element';
31
+ function getLineClamp(computedStyle) {
32
+ return computedStyle.getPropertyValue('-webkit-line-clamp') || computedStyle.WebkitLineClamp;
33
+ }
34
+ function hasLineClamp(computedStyle) {
35
+ const lineClamp = getLineClamp(computedStyle);
36
+ return Boolean(lineClamp && 'none' !== lineClamp);
37
+ }
38
+ function isTruncationStyleCandidate(element) {
39
+ const computedStyle = window.getComputedStyle(element);
40
+ return 'ellipsis' === computedStyle.textOverflow || hasLineClamp(computedStyle);
41
+ }
42
+ function findTruncationStyleCandidate(element) {
43
+ if (!(element instanceof HTMLElement)) return;
44
+ if (isTruncationStyleCandidate(element)) return element;
45
+ return Array.from(element.children).find((child)=>child instanceof HTMLElement && isTruncationStyleCandidate(child));
46
+ }
31
47
  function useTruncationDetection(elementRef) {
32
48
  const [isTruncated, setIsTruncated] = (0, external_react_namespaceObject.useState)(false);
33
49
  const hasCheckedRef = (0, external_react_namespaceObject.useRef)(false);
@@ -49,15 +65,17 @@ function useTruncationDetection(elementRef) {
49
65
  const rootNode = element.getRootNode();
50
66
  if (rootNode instanceof ShadowRoot) {
51
67
  const hostElement = rootNode.host;
52
- const slottedElement = hostElement.querySelector('div[data-slot-name="children"]') || Array.from(hostElement.children).find((child)=>child instanceof HTMLElement && 'ellipsis' === window.getComputedStyle(child).textOverflow);
68
+ const slottedElement = findTruncationStyleCandidate(hostElement.querySelector('div[data-slot-name="children"]')) || Array.from(hostElement.children).map((child)=>findTruncationStyleCandidate(child)).find(Boolean);
53
69
  if (slottedElement instanceof HTMLElement) targetElement = slottedElement;
54
70
  }
55
71
  }
56
72
  }
57
73
  const computedStyle = window.getComputedStyle(targetElement);
74
+ const isLineClamped = hasLineClamp(computedStyle);
58
75
  const hasEllipsis = 'ellipsis' === computedStyle.textOverflow;
59
76
  const hasOverflowHidden = 'hidden' === computedStyle.overflow || 'hidden' === computedStyle.overflowX;
60
77
  const hasWhiteSpaceNowrap = 'nowrap' === computedStyle.whiteSpace;
78
+ if (isLineClamped) return void setIsTruncated(targetElement.scrollHeight > targetElement.clientHeight);
61
79
  if (!hasEllipsis || !hasOverflowHidden || !hasWhiteSpaceNowrap) return void setIsTruncated(false);
62
80
  const isElementTruncated = targetElement.scrollWidth > targetElement.clientWidth;
63
81
  setIsTruncated(isElementTruncated);
package/dist/material/components/ap-tooltip/useTruncationDetection.d.ts.map CHANGED
@@ -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
@@ -1,5 +1,21 @@
1
1
  import { useCallback, useEffect, useRef, useState } from "react";
2
2
  const TOOLTIP_TARGET_ELEMENT = 'tooltip-target-element';
3
+ function getLineClamp(computedStyle) {
4
+ return computedStyle.getPropertyValue('-webkit-line-clamp') || computedStyle.WebkitLineClamp;
5
+ }
6
+ function hasLineClamp(computedStyle) {
7
+ const lineClamp = getLineClamp(computedStyle);
8
+ return Boolean(lineClamp && 'none' !== lineClamp);
9
+ }
10
+ function isTruncationStyleCandidate(element) {
11
+ const computedStyle = window.getComputedStyle(element);
12
+ return 'ellipsis' === computedStyle.textOverflow || hasLineClamp(computedStyle);
13
+ }
14
+ function findTruncationStyleCandidate(element) {
15
+ if (!(element instanceof HTMLElement)) return;
16
+ if (isTruncationStyleCandidate(element)) return element;
17
+ return Array.from(element.children).find((child)=>child instanceof HTMLElement && isTruncationStyleCandidate(child));
18
+ }
3
19
  function useTruncationDetection(elementRef) {
4
20
  const [isTruncated, setIsTruncated] = useState(false);
5
21
  const hasCheckedRef = useRef(false);
@@ -21,15 +37,17 @@ function useTruncationDetection(elementRef) {
21
37
  const rootNode = element.getRootNode();
22
38
  if (rootNode instanceof ShadowRoot) {
23
39
  const hostElement = rootNode.host;
24
- const slottedElement = hostElement.querySelector('div[data-slot-name="children"]') || Array.from(hostElement.children).find((child)=>child instanceof HTMLElement && 'ellipsis' === window.getComputedStyle(child).textOverflow);
40
+ const slottedElement = findTruncationStyleCandidate(hostElement.querySelector('div[data-slot-name="children"]')) || Array.from(hostElement.children).map((child)=>findTruncationStyleCandidate(child)).find(Boolean);
25
41
  if (slottedElement instanceof HTMLElement) targetElement = slottedElement;
26
42
  }
27
43
  }
28
44
  }
29
45
  const computedStyle = window.getComputedStyle(targetElement);
46
+ const isLineClamped = hasLineClamp(computedStyle);
30
47
  const hasEllipsis = 'ellipsis' === computedStyle.textOverflow;
31
48
  const hasOverflowHidden = 'hidden' === computedStyle.overflow || 'hidden' === computedStyle.overflowX;
32
49
  const hasWhiteSpaceNowrap = 'nowrap' === computedStyle.whiteSpace;
50
+ if (isLineClamped) return void setIsTruncated(targetElement.scrollHeight > targetElement.clientHeight);
33
51
  if (!hasEllipsis || !hasOverflowHidden || !hasWhiteSpaceNowrap) return void setIsTruncated(false);
34
52
  const isElementTruncated = targetElement.scrollWidth > targetElement.clientWidth;
35
53
  setIsTruncated(isElementTruncated);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "4.54.0",
3
+ "version": "4.54.2",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",