@indico-data/design-system 2.55.2 → 2.57.0

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 (31) hide show
  1. package/lib/components/index.d.ts +1 -0
  2. package/lib/components/truncate/Truncate.d.ts +2 -0
  3. package/lib/components/truncate/Truncate.stories.d.ts +9 -0
  4. package/lib/components/truncate/__tests__/Truncate.test.d.ts +1 -0
  5. package/lib/components/truncate/index.d.ts +1 -0
  6. package/lib/components/truncate/types.d.ts +7 -0
  7. package/lib/index.css +200 -78
  8. package/lib/index.d.ts +11 -1
  9. package/lib/index.esm.css +200 -78
  10. package/lib/index.esm.js +54 -2
  11. package/lib/index.esm.js.map +1 -1
  12. package/lib/index.js +54 -1
  13. package/lib/index.js.map +1 -1
  14. package/package.json +2 -1
  15. package/src/components/floatUI/FloatUI.stories.tsx +7 -4
  16. package/src/components/forms/date/datePicker/DatePicker.tsx +2 -2
  17. package/src/components/index.ts +1 -0
  18. package/src/components/menu/Menu.stories.tsx +14 -1
  19. package/src/components/menu/styles/Menu.scss +11 -0
  20. package/src/components/truncate/Truncate.mdx +34 -0
  21. package/src/components/truncate/Truncate.stories.tsx +86 -0
  22. package/src/components/truncate/Truncate.tsx +55 -0
  23. package/src/components/truncate/__tests__/Truncate.test.tsx +61 -0
  24. package/src/components/truncate/index.ts +1 -0
  25. package/src/components/truncate/styles/Truncate.scss +22 -0
  26. package/src/components/truncate/types.ts +7 -0
  27. package/src/index.ts +1 -1
  28. package/src/styles/index.scss +1 -0
  29. package/src/styles/variables/themes/dark.scss +19 -0
  30. package/src/styles/variables/themes/light.scss +178 -88
  31. package/plugin-build-tool.json +0 -4
package/lib/index.esm.css CHANGED
@@ -32,84 +32,159 @@
32
32
  }
33
33
 
34
34
  :root [data-theme=light] {
35
- --pf-primary-color: #6833d0;
36
- --pf-primary-color-100: #f0ebfa;
37
- --pf-primary-color-200: #d5c6f2;
38
- --pf-primary-color-300: #baa1e9;
39
- --pf-primary-color-400: #8c64db;
40
- --pf-primary-color-500: #6833d0;
41
- --pf-primary-color-600: #5e2ebb;
42
- --pf-primary-color-700: #5329a6;
43
- --pf-primary-color-800: #492492;
44
- --pf-primary-color-900: #3e1f7d;
45
- --pf-primary-color-1000: #271153;
46
- --pf-secondary-color: #0070f5;
47
- --pf-secondary-color-100: #dceafd;
48
- --pf-secondary-color-200: #b3d4fc;
49
- --pf-secondary-color-300: #7ab5fa;
50
- --pf-secondary-color-400: #4797f5;
51
- --pf-secondary-color-500: #0070f5;
52
- --pf-secondary-color-600: #0067e1;
53
- --pf-secondary-color-700: #005ac4;
54
- --pf-secondary-color-800: #004eac;
55
- --pf-secondary-color-900: #004393;
56
- --pf-gray-color: #444444;
57
- --pf-gray-color-100: #eeeeee;
58
- --pf-gray-color-200: #d0d0d0;
59
- --pf-gray-color-300: #a9a9a9;
60
- --pf-gray-color-400: #737373;
61
- --pf-gray-color-500: #444444;
62
- --pf-gray-color-600: #373737;
63
- --pf-gray-color-700: #2c2c2c;
64
- --pf-gray-color-800: #1f1f1f;
65
- --pf-gray-color-900: #141414;
66
- --pf-steel-color: #7c8594;
67
- --pf-steel-color-100: #f4f6f8;
68
- --pf-steel-color-200: #d9dee5;
69
- --pf-steel-color-300: #bcc3cd;
70
- --pf-steel-color-400: #a0a9b5;
71
- --pf-steel-color-500: #7c8594;
72
- --pf-steel-color-600: #5f697a;
73
- --pf-steel-color-700: #454e5e;
74
- --pf-steel-color-800: #2d3444;
75
- --pf-steel-color-900: #1b202c;
76
- --pf-green-color: #008a00;
77
- --pf-green-color-100: #d6ecd6;
78
- --pf-green-color-200: #99d099;
79
- --pf-green-color-300: #66b966;
80
- --pf-green-color-400: #33a133;
81
- --pf-green-color-500: #008a00;
82
- --pf-green-color-600: #007c00;
83
- --pf-green-color-700: #006e00;
84
- --pf-green-color-800: #006100;
85
- --pf-green-color-900: #005300;
86
- --pf-orange-color: #ffa424;
87
- --pf-orange-color-100: #ffdfb2;
88
- --pf-orange-color-200: #ffd292;
89
- --pf-orange-color-300: #ffc471;
90
- --pf-orange-color-400: #ffb650;
91
- --pf-orange-color-500: #ffa424;
92
- --pf-orange-color-600: #f29c22;
93
- --pf-orange-color-700: #e69420;
94
- --pf-orange-color-800: #cc831d;
95
- --pf-orange-color-900: #b37319;
96
- --pf-red-color: #e72326;
97
- --pf-red-color-100: #ffd6d6;
98
- --pf-red-color-200: #f49ea0;
99
- --pf-red-color-300: #ef696b;
100
- --pf-red-color-400: #eb4649;
101
- --pf-red-color-500: #e72326;
102
- --pf-red-color-600: #d52023;
103
- --pf-red-color-700: #c21d20;
104
- --pf-red-color-800: #b01b1d;
105
- --pf-red-color-900: #9d181a;
106
- --pf-error-color: var(--pf-red-color-600);
107
- --pf-success-color: var(--pf-green-color-600);
108
- --pf-warning-color: var(--pf-orange-color-600);
109
- --pf-neutral-color: var(--pf-gray-color);
110
- --pf-info-color: var(--pf-secondary-color-600);
111
- --pf-link-color: var(--pf-secondary-color);
112
- --pf-link-hover-color: var(--pf-secondary-color-400);
35
+ --pf-primary-color: #b4cadf;
36
+ --pf-primary-color-50: #5b8ab7;
37
+ --pf-primary-color-100: #6d96c3;
38
+ --pf-primary-color-200: #7b9fc5;
39
+ --pf-primary-color-300: #90adc8;
40
+ --pf-primary-color-400: #a3bdd4;
41
+ --pf-primary-color-500: #b4cadf;
42
+ --pf-primary-color-600: #c4d8eb;
43
+ --pf-primary-color-700: #d2e1f0;
44
+ --pf-primary-color-800: #dfeaf3;
45
+ --pf-primary-color-900: #eef4fa;
46
+ --pf-primary-color-950: #f6f9fc;
47
+ --pf-secondary-color: #3892f3;
48
+ --pf-secondary-color-50: #002b66;
49
+ --pf-secondary-color-100: #003b8c;
50
+ --pf-secondary-color-200: #004cb0;
51
+ --pf-secondary-color-300: #0060d6;
52
+ --pf-secondary-color-400: #0070f5;
53
+ --pf-secondary-color-500: #3892f3;
54
+ --pf-secondary-color-550: #66adff;
55
+ --pf-secondary-color-600: #91c5ff;
56
+ --pf-secondary-color-700: #b8dbff;
57
+ --pf-secondary-color-800: #d4eaff;
58
+ --pf-secondary-color-900: #e0f2ff;
59
+ --pf-secondary-color-950: #eaf4ff;
60
+ --pf-tertiary-color: #8394a9;
61
+ --pf-tertiary-color-50: #142838;
62
+ --pf-tertiary-color-100: #203148;
63
+ --pf-tertiary-color-200: #2e4563;
64
+ --pf-tertiary-color-300: #3e587a;
65
+ --pf-tertiary-color-400: #55677f;
66
+ --pf-tertiary-color-450: #6d8097;
67
+ --pf-tertiary-color-500: #8394a9;
68
+ --pf-tertiary-color-600: #93a3bb;
69
+ --pf-tertiary-color-700: #a5b4c6;
70
+ --pf-tertiary-color-800: #b2bfd0;
71
+ --pf-tertiary-color-900: #c4ccd7;
72
+ --pf-tertiary-color-950: #d6dde5;
73
+ --pf-gray-color: #525252;
74
+ --pf-gray-color-50: #0a0a0a;
75
+ --pf-gray-color-100: #171717;
76
+ --pf-gray-color-200: #262626;
77
+ --pf-gray-color-300: #404040;
78
+ --pf-gray-color-400: #525252;
79
+ --pf-gray-color-450: #737373;
80
+ --pf-gray-color-500: #737373;
81
+ --pf-gray-color-600: #989898;
82
+ --pf-gray-color-700: #bdbdbd;
83
+ --pf-gray-color-800: #dcdcdc;
84
+ --pf-gray-color-900: #efefef;
85
+ --pf-gray-color-950: #f6f6f6;
86
+ --pf-red-color: #f4a5ae;
87
+ --pf-red-color-50: #5b0d16;
88
+ --pf-red-color-100: #761821;
89
+ --pf-red-color-200: #8f252f;
90
+ --pf-red-color-300: #ad303d;
91
+ --pf-red-color-350: #b8424c;
92
+ --pf-red-color-400: #c84a57;
93
+ --pf-red-color-450: #dc5a66;
94
+ --pf-red-color-500: #f4a5ae;
95
+ --pf-red-color-600: #ebb6b8;
96
+ --pf-red-color-700: #f9d5dc;
97
+ --pf-red-color-800: #f4d7d8;
98
+ --pf-red-color-850: #fae9e9;
99
+ --pf-red-color-900: #fcebeb;
100
+ --pf-red-color-950: #fcf5f4;
101
+ --pf-orange-color: #ff873f;
102
+ --pf-orange-color-50: #721e01;
103
+ --pf-orange-color-100: #992702;
104
+ --pf-orange-color-200: #b33403;
105
+ --pf-orange-color-300: #d94b04;
106
+ --pf-orange-color-400: #f25c05;
107
+ --pf-orange-color-500: #ff873f;
108
+ --pf-orange-color-600: #ffa26d;
109
+ --pf-orange-color-700: #ffc9aa;
110
+ --pf-orange-color-800: #ffe3d1;
111
+ --pf-orange-color-900: #fff3ec;
112
+ --pf-orange-color-950: #fffaf7;
113
+ --pf-yellow-color: #ffa400;
114
+ --pf-yellow-color-50: #312602;
115
+ --pf-yellow-color-100: #664200;
116
+ --pf-yellow-color-200: #895c00;
117
+ --pf-yellow-color-300: #b37300;
118
+ --pf-yellow-color-400: #e08e00;
119
+ --pf-yellow-color-500: #ffa400;
120
+ --pf-yellow-color-600: #ffb621;
121
+ --pf-yellow-color-700: #ffc344;
122
+ --pf-yellow-color-800: #ffd369;
123
+ --pf-yellow-color-900: #ffeaa1;
124
+ --pf-yellow-color-950: #fff4d0;
125
+ --pf-green-color: #39c29d;
126
+ --pf-green-color-50: #003325;
127
+ --pf-green-color-100: #075f48;
128
+ --pf-green-color-200: #0a906c;
129
+ --pf-green-color-300: #03aaaa;
130
+ --pf-green-color-400: #26b890;
131
+ --pf-green-color-500: #39c29d;
132
+ --pf-green-color-600: #52ccae;
133
+ --pf-green-color-700: #6cd6ba;
134
+ --pf-green-color-800: #83e2c7;
135
+ --pf-green-color-900: #c1f1e2;
136
+ --pf-green-color-950: #83e2c7;
137
+ --pf-purple-color: #9776d3;
138
+ --pf-purple-color-50: #291a40;
139
+ --pf-purple-color-100: #55377b;
140
+ --pf-purple-color-200: #664196;
141
+ --pf-purple-color-300: #7a4eb3;
142
+ --pf-purple-color-400: #8b60c7;
143
+ --pf-purple-color-500: #9776d3;
144
+ --pf-purple-color-600: #b6a3e2;
145
+ --pf-purple-color-700: #cfc4ee;
146
+ --pf-purple-color-800: #e4dff5;
147
+ --pf-purple-color-900: #f1edfa;
148
+ --pf-purple-color-950: #f7f6fc;
149
+ --pf-white-color: #ffffff;
150
+ --pf-white-color-1: rgba(255, 255, 255, 0.01);
151
+ --pf-white-color-3: rgba(255, 255, 255, 0.03);
152
+ --pf-white-color-5: rgba(255, 255, 255, 0.05);
153
+ --pf-white-color-10: rgba(255, 255, 255, 0.1);
154
+ --pf-white-color-15: rgba(255, 255, 255, 0.15);
155
+ --pf-white-color-20: rgba(255, 255, 255, 0.2);
156
+ --pf-white-color-30: rgba(255, 255, 255, 0.3);
157
+ --pf-white-color-40: rgba(255, 255, 255, 0.4);
158
+ --pf-white-color-50: rgba(255, 255, 255, 0.5);
159
+ --pf-white-color-60: rgba(255, 255, 255, 0.6);
160
+ --pf-white-color-70: rgba(255, 255, 255, 0.7);
161
+ --pf-white-color-80: rgba(255, 255, 255, 0.8);
162
+ --pf-white-color-90: rgba(255, 255, 255, 0.9);
163
+ --pf-white-color-100: rgba(255, 255, 255, 1);
164
+ --pf-black-color: #000000;
165
+ --pf-black-color-1: rgba(0, 0, 0, 0.01);
166
+ --pf-black-color-3: rgba(0, 0, 0, 0.03);
167
+ --pf-black-color-5: rgba(0, 0, 0, 0.05);
168
+ --pf-black-color-10: rgba(0, 0, 0, 0.1);
169
+ --pf-black-color-15: rgba(0, 0, 0, 0.15);
170
+ --pf-black-color-20: rgba(0, 0, 0, 0.2);
171
+ --pf-black-color-30: rgba(0, 0, 0, 0.3);
172
+ --pf-black-color-40: rgba(0, 0, 0, 0.4);
173
+ --pf-black-color-50: rgba(0, 0, 0, 0.5);
174
+ --pf-black-color-60: rgba(0, 0, 0, 0.6);
175
+ --pf-black-color-70: rgba(0, 0, 0, 0.7);
176
+ --pf-black-color-80: rgba(0, 0, 0, 0.8);
177
+ --pf-black-color-90: rgba(0, 0, 0, 0.9);
178
+ --pf-black-color-100: rgba(0, 0, 0, 1);
179
+ --pf-error-color: var(--pf-red-color);
180
+ --pf-success-color: var(--pf-green-color);
181
+ --pf-warning-color: var(--pf-yellow-color-300);
182
+ --pf-neutral-color: var(--pf-gray-color-100);
183
+ --pf-info-color: var(--pf-secondary-color-200);
184
+ --pf-brand-color: var(--pf-secondary-color-550);
185
+ --pf-pending-color: var(--pf-red-color-900);
186
+ --pf-link-color: var(--pf-gray-color-300);
187
+ --pf-link-hover-color: var(--pf-gray-color-100);
113
188
  }
114
189
 
115
190
  :root [data-theme=dark],
@@ -164,6 +239,7 @@
164
239
  --pf-gray-color-700: #262626;
165
240
  --pf-gray-color-800: #171717;
166
241
  --pf-gray-color-900: #0a0a0a;
242
+ --pf-gray-color-950: #000000;
167
243
  --pf-red-color: #ce6068;
168
244
  --pf-red-color-50: #fcf5f4;
169
245
  --pf-red-color-100: #fae9e9;
@@ -171,6 +247,7 @@
171
247
  --pf-red-color-300: #ebb6b8;
172
248
  --pf-red-color-350: #f39bb9;
173
249
  --pf-red-color-400: #ef76a0;
250
+ --pf-red-color-450: #df8d91;
174
251
  --pf-red-color-500: #ce6068;
175
252
  --pf-red-color-600: #b94553;
176
253
  --pf-red-color-700: #9b3544;
@@ -241,6 +318,21 @@
241
318
  --pf-white-color-80: rgba(255, 255, 255, 0.8);
242
319
  --pf-white-color-90: rgba(255, 255, 255, 0.9);
243
320
  --pf-white-color-100: rgba(255, 255, 255, 1);
321
+ --pf-black-color: #000000;
322
+ --pf-black-color-1: rgba(0, 0, 0, 0.01);
323
+ --pf-black-color-3: rgba(0, 0, 0, 0.03);
324
+ --pf-black-color-5: rgba(0, 0, 0, 0.05);
325
+ --pf-black-color-10: rgba(0, 0, 0, 0.1);
326
+ --pf-black-color-15: rgba(0, 0, 0, 0.15);
327
+ --pf-black-color-20: rgba(0, 0, 0, 0.2);
328
+ --pf-black-color-30: rgba(0, 0, 0, 0.3);
329
+ --pf-black-color-40: rgba(0, 0, 0, 0.4);
330
+ --pf-black-color-50: rgba(0, 0, 0, 0.5);
331
+ --pf-black-color-60: rgba(0, 0, 0, 0.6);
332
+ --pf-black-color-70: rgba(0, 0, 0, 0.7);
333
+ --pf-black-color-80: rgba(0, 0, 0, 0.8);
334
+ --pf-black-color-90: rgba(0, 0, 0, 0.9);
335
+ --pf-black-color-100: rgba(0, 0, 0, 1);
244
336
  --pf-error-color: var(--pf-red-color);
245
337
  --pf-success-color: var(--pf-green-color);
246
338
  --pf-warning-color: var(--pf-yellow-color-300);
@@ -1743,8 +1835,17 @@ form {
1743
1835
  width: 100%;
1744
1836
  text-align: left;
1745
1837
  border: none;
1838
+ border-radius: 0;
1746
1839
  box-shadow: none;
1747
1840
  }
1841
+ .menu .menu-item:first-child {
1842
+ border-top-left-radius: var(--pf-menu-rounded);
1843
+ border-top-right-radius: var(--pf-menu-rounded);
1844
+ }
1845
+ .menu .menu-item:last-child {
1846
+ border-bottom-left-radius: var(--pf-menu-rounded);
1847
+ border-bottom-right-radius: var(--pf-menu-rounded);
1848
+ }
1748
1849
  .menu .menu-item:hover {
1749
1850
  background: var(--pf-menu-item-hover-color);
1750
1851
  }
@@ -2536,6 +2637,27 @@ form {
2536
2637
  }
2537
2638
  }
2538
2639
 
2640
+ .truncate-wrapper {
2641
+ width: 100%;
2642
+ display: block;
2643
+ }
2644
+ .truncate-wrapper .truncate {
2645
+ white-space: nowrap;
2646
+ overflow: hidden;
2647
+ text-overflow: ellipsis;
2648
+ width: 100%;
2649
+ display: inline-block;
2650
+ }
2651
+ .truncate-wrapper .truncate-clip {
2652
+ display: -webkit-box;
2653
+ -webkit-box-orient: vertical;
2654
+ -webkit-line-clamp: var(--line-clamp);
2655
+ line-clamp: var(--line-clamp);
2656
+ overflow: hidden;
2657
+ text-overflow: ellipsis;
2658
+ width: 100%;
2659
+ }
2660
+
2539
2661
  :root [data-theme=light] {
2540
2662
  --sheets-background-color: var(--pf-gray-color-100);
2541
2663
  }
package/lib/index.esm.js CHANGED
@@ -8,6 +8,7 @@ import ReactDOM__default from 'react-dom';
8
8
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
9
9
  import n, { css, ThemeProvider } from 'styled-components';
10
10
  import ReactSelect, { components as components$1 } from 'react-select';
11
+ import { webcrypto } from 'node:crypto';
11
12
 
12
13
  const indicons = {
13
14
  'indico-o-white': (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 100 100", children: jsx("path", { d: "M100 50c0 27.6-22.4 50-50 50S0 77.6 0 50 22.4 0 50 0s50 22.4 50 50zM50 19.4c-16.9 0-30.6 13.7-30.6 30.6S33.1 80.6 50 80.6 80.6 66.9 80.6 50 66.9 19.4 50 19.4zm0 21.7c-4.9 0-8.9 4-8.9 8.9s4 8.9 8.9 8.9 8.9-4 8.9-8.9-4-8.9-8.9-8.9z" }) })),
@@ -11941,7 +11942,7 @@ const DatePicker = (props) => {
11941
11942
  onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
11942
11943
  };
11943
11944
  const finalProps = Object.assign(Object.assign(Object.assign({}, commonProps), rest), modeProps);
11944
- return (jsxs(Fragment, { children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: "Select Time" }) }), jsx(Col, { children: jsx(TimePicker, { timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
11945
+ return (jsxs("div", { className: "date-picker-wrapper", children: [hasTimePicker && (jsx("div", { className: "time-picker-wrapper", children: jsxs(Row, { align: "center", children: [jsx(Col, { xs: "content", children: jsx("p", { className: "ma-0", children: "Select Time" }) }), jsx(Col, { children: jsx(TimePicker, { timeValue: timeValue !== null && timeValue !== void 0 ? timeValue : '', onTimeChange: handleTimeChange }) })] }) })), jsx(DayPicker, Object.assign({}, finalProps))] }));
11945
11946
  };
11946
11947
 
11947
11948
  function getNodeName$1(node) {
@@ -42874,5 +42875,56 @@ function BarSpinner(_a) {
42874
42875
  return (jsx("div", Object.assign({ className: `bar-spinner ${className}`, id: id, style: style }, rest, { children: jsx("span", {}) })));
42875
42876
  }
42876
42877
 
42877
- export { Badge, BarSpinner, Button$1 as Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select$1 as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, arrow$2 as arrow, autoPlacement, autoUpdate$1 as autoUpdate, computePosition$2 as computePosition, detectOverflow$1 as detectOverflow, flip$2 as flip, getOverflowAncestors$1 as getOverflowAncestors, hide$1 as hide, inline, limitShift, offset$2 as offset, platform$1 as platform, registerFontAwesomeIcons, shift$2 as shift, size, useFloating$1 as useFloating };
42878
+ const urlAlphabet =
42879
+ 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
42880
+
42881
+ const POOL_SIZE_MULTIPLIER = 128;
42882
+ let pool, poolOffset;
42883
+ function fillPool(bytes) {
42884
+ if (!pool || pool.length < bytes) {
42885
+ pool = Buffer.allocUnsafe(bytes * POOL_SIZE_MULTIPLIER);
42886
+ webcrypto.getRandomValues(pool);
42887
+ poolOffset = 0;
42888
+ } else if (poolOffset + bytes > pool.length) {
42889
+ webcrypto.getRandomValues(pool);
42890
+ poolOffset = 0;
42891
+ }
42892
+ poolOffset += bytes;
42893
+ }
42894
+ function nanoid(size = 21) {
42895
+ fillPool((size |= 0));
42896
+ let id = '';
42897
+ for (let i = poolOffset - size; i < poolOffset; i++) {
42898
+ id += urlAlphabet[pool[i] & 63];
42899
+ }
42900
+ return id
42901
+ }
42902
+
42903
+ const Truncate = (_a) => {
42904
+ var { lineClamp = 0, truncateString, hasTooltip = true, tooltipId } = _a, rest = __rest(_a, ["lineClamp", "truncateString", "hasTooltip", "tooltipId"]);
42905
+ const [isTruncated, setIsTruncated] = useState(false);
42906
+ const id = (tooltipId !== null && tooltipId !== void 0 ? tooltipId : nanoid()).replace(/[^a-zA-Z0-9-_]/g, '_');
42907
+ useEffect(() => {
42908
+ const checkTruncation = () => {
42909
+ const element = document.querySelector(`[data-tooltip-id="${id}"]`);
42910
+ if (element) {
42911
+ if (lineClamp === 0) {
42912
+ setIsTruncated(element.scrollWidth > element.clientWidth);
42913
+ }
42914
+ else {
42915
+ setIsTruncated(element.scrollHeight > element.clientHeight);
42916
+ }
42917
+ }
42918
+ };
42919
+ checkTruncation();
42920
+ window.addEventListener('resize', checkTruncation);
42921
+ return () => window.removeEventListener('resize', checkTruncation);
42922
+ }, [id, lineClamp]);
42923
+ const truncateStyle = {
42924
+ '--line-clamp': lineClamp,
42925
+ };
42926
+ return (jsxs("div", { className: "truncate-wrapper", style: truncateStyle, children: [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 && (jsx(Tooltip, { "data-tooltip-delay-hide": 100, id: id, border: "solid 1px var(--pf-border-color)", children: truncateString }))] }));
42927
+ };
42928
+
42929
+ export { Badge, BarSpinner, Button$1 as Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, Select$1 as SelectInput, SingleInputDatePicker, Skeleton, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, arrow$2 as arrow, autoPlacement, autoUpdate$1 as autoUpdate, computePosition$2 as computePosition, detectOverflow$1 as detectOverflow, flip$2 as flip, getOverflowAncestors$1 as getOverflowAncestors, hide$1 as hide, inline, limitShift, offset$2 as offset, platform$1 as platform, registerFontAwesomeIcons, shift$2 as shift, size, useFloating$1 as useFloating };
42878
42930
  //# sourceMappingURL=index.esm.js.map