@versini/ui-button 12.0.2 → 12.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.
- package/dist/{795.js → 285.js} +4 -3
- package/dist/{188.js → 287.js} +2 -4
- package/dist/components/Button/Button.js +5 -3
- package/dist/components/Button/ButtonCopy.js +6 -4
- package/dist/components/Button/ButtonIcon.js +218 -2
- package/dist/components/Button/ButtonLink.js +6 -2
- package/package.json +3 -3
- package/dist/370.js +0 -219
package/dist/{795.js → 285.js}
RENAMED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-button v12.0.
|
|
2
|
+
@versini/ui-button v12.0.4
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import { jsx } from "
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
import "react";
|
|
8
|
+
|
|
7
9
|
|
|
8
10
|
|
|
9
11
|
|
|
@@ -40,4 +42,3 @@ import { jsx } from "./188.js";
|
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
export { BaseButton_private };
|
|
43
|
-
export { useEffect, useLayoutEffect, useRef, useState } from "react";
|
package/dist/{188.js → 287.js}
RENAMED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-button v12.0.
|
|
2
|
+
@versini/ui-button v12.0.4
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import clsx from "clsx";
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
|
|
10
9
|
const BUTTON_CLASSNAME = "av-button";
|
|
11
10
|
|
|
12
11
|
|
|
@@ -465,5 +464,4 @@ const getButtonClasses = ({ type, className, raw, mode, focusMode, disabled, ful
|
|
|
465
464
|
}), className);
|
|
466
465
|
};
|
|
467
466
|
|
|
468
|
-
export { TYPE_BUTTON, TYPE_ICON, TYPE_LINK,
|
|
469
|
-
export { jsx, jsxs } from "react/jsx-runtime";
|
|
467
|
+
export { TYPE_BUTTON, TYPE_ICON, TYPE_LINK, getBadgeClasses, getButtonClasses, getButtonIconLabelClasses, getIconClasses };
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-button v12.0.
|
|
2
|
+
@versini/ui-button v12.0.4
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
import { getButtonClasses, TYPE_BUTTON } from "../../287.js";
|
|
8
|
+
import { BaseButton_private } from "../../285.js";
|
|
9
|
+
|
|
8
10
|
|
|
9
11
|
|
|
10
12
|
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-button v12.0.
|
|
2
|
+
@versini/ui-button v12.0.4
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
7
|
import { IconCopied, IconCopy } from "@versini/ui-icons";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
8
|
+
import { useEffect, useState } from "react";
|
|
9
|
+
import { ButtonIcon } from "./ButtonIcon.js";
|
|
10
|
+
|
|
11
|
+
|
|
10
12
|
|
|
11
13
|
|
|
12
14
|
|
|
@@ -1,7 +1,223 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-button v12.0.
|
|
2
|
+
@versini/ui-button v12.0.4
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { useMergeRefs } from "@versini/ui-hooks/use-merge-refs";
|
|
8
|
+
import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";
|
|
9
|
+
import { useEffect, useLayoutEffect, useRef } from "react";
|
|
10
|
+
import { getButtonClasses, getIconClasses, getButtonIconLabelClasses, TYPE_ICON, getBadgeClasses } from "../../287.js";
|
|
11
|
+
import { BaseButton_private } from "../../285.js";
|
|
6
12
|
|
|
7
|
-
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
const WIDTH = {
|
|
24
|
+
small: 24,
|
|
25
|
+
medium: 32,
|
|
26
|
+
large: 48
|
|
27
|
+
};
|
|
28
|
+
const PADDINGS = {
|
|
29
|
+
small: 8 * 2,
|
|
30
|
+
medium: 12 * 2,
|
|
31
|
+
large: 16 * 2
|
|
32
|
+
};
|
|
33
|
+
const BORDERS = 2; // border x 2
|
|
34
|
+
const ANIMATION_DURATION = 300; // ms - should match the CSS transition duration
|
|
35
|
+
function ButtonIcon({ children, disabled = false, mode = "system", focusMode = "system", fullWidth = false, className, type = "button", raw = false, noBorder = false, "aria-label": ariaLabel, label, size = "medium", labelRight, labelLeft, noBackground = false, align = "center", radius = "large", variant = "secondary", iconClassName, animated = false, badge, ref, ...otherProps }) {
|
|
36
|
+
const buttonClass = getButtonClasses({
|
|
37
|
+
type: TYPE_ICON,
|
|
38
|
+
mode,
|
|
39
|
+
focusMode,
|
|
40
|
+
fullWidth,
|
|
41
|
+
disabled,
|
|
42
|
+
raw,
|
|
43
|
+
className,
|
|
44
|
+
noBorder,
|
|
45
|
+
size,
|
|
46
|
+
labelRight,
|
|
47
|
+
labelLeft,
|
|
48
|
+
noBackground,
|
|
49
|
+
align,
|
|
50
|
+
radius,
|
|
51
|
+
variant,
|
|
52
|
+
animated,
|
|
53
|
+
badge
|
|
54
|
+
});
|
|
55
|
+
const iconClass = getIconClasses({
|
|
56
|
+
mode,
|
|
57
|
+
raw,
|
|
58
|
+
iconClassName,
|
|
59
|
+
variant
|
|
60
|
+
});
|
|
61
|
+
const labelClass = getButtonIconLabelClasses({
|
|
62
|
+
animated
|
|
63
|
+
});
|
|
64
|
+
// Create a combined class for the button content wrapper
|
|
65
|
+
const contentWrapperClass = "flex items-center justify-center relative w-full h-full overflow-hidden";
|
|
66
|
+
const [labelRightRef, rectR] = useResizeObserver();
|
|
67
|
+
const [labelLeftRef, rectL] = useResizeObserver();
|
|
68
|
+
const [iconRef, rectIcon] = useResizeObserver();
|
|
69
|
+
const bufferRef = useRef(0);
|
|
70
|
+
const buttonRef = useRef(null);
|
|
71
|
+
const timeoutRef = useRef(null);
|
|
72
|
+
const mergedRef = useMergeRefs([
|
|
73
|
+
ref,
|
|
74
|
+
buttonRef
|
|
75
|
+
]);
|
|
76
|
+
/**
|
|
77
|
+
* Effect to calculate the buffer to add to the width of the button to
|
|
78
|
+
* account for the icon, paddings and borders.
|
|
79
|
+
*/ useLayoutEffect(()=>{
|
|
80
|
+
/* v8 ignore start */ if (iconRef && iconRef.current && animated) {
|
|
81
|
+
bufferRef.current = rectIcon.width + PADDINGS[size] + (noBorder ? 0 : BORDERS);
|
|
82
|
+
// Set initial button width if it hasn't been set yet
|
|
83
|
+
if (buttonRef.current && !buttonRef.current.style.width) {
|
|
84
|
+
buttonRef.current.style.width = `${WIDTH[size]}px`;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
/* v8 ignore stop */ }, [
|
|
88
|
+
rectIcon,
|
|
89
|
+
iconRef,
|
|
90
|
+
size,
|
|
91
|
+
noBorder,
|
|
92
|
+
animated
|
|
93
|
+
]);
|
|
94
|
+
/**
|
|
95
|
+
* Effect to update the width of the button based on the visibility of
|
|
96
|
+
* the right and left labels.
|
|
97
|
+
*/ useLayoutEffect(()=>{
|
|
98
|
+
/* v8 ignore start */ if (buttonRef && buttonRef.current && animated) {
|
|
99
|
+
// Calculate the target width first
|
|
100
|
+
let newWidth = WIDTH[size];
|
|
101
|
+
if (labelRight && labelRightRef && rectR.width > 0) {
|
|
102
|
+
newWidth = rectR.width + bufferRef.current;
|
|
103
|
+
} else if (labelLeft && labelLeftRef && rectL.width > 0) {
|
|
104
|
+
newWidth = rectL.width + bufferRef.current;
|
|
105
|
+
}
|
|
106
|
+
// Clear any existing timeout to prevent race conditions
|
|
107
|
+
if (timeoutRef.current) {
|
|
108
|
+
clearTimeout(timeoutRef.current);
|
|
109
|
+
}
|
|
110
|
+
// Start transition - expand button first
|
|
111
|
+
if (newWidth !== parseInt(buttonRef.current.style.width || "0", 10)) {
|
|
112
|
+
// Make sure labels are hidden during width transition
|
|
113
|
+
if (labelRightRef.current) {
|
|
114
|
+
labelRightRef.current.style.opacity = "0";
|
|
115
|
+
}
|
|
116
|
+
if (labelLeftRef.current) {
|
|
117
|
+
labelLeftRef.current.style.opacity = "0";
|
|
118
|
+
}
|
|
119
|
+
// Set the width to trigger the transition
|
|
120
|
+
buttonRef.current.style.width = `${newWidth}px`;
|
|
121
|
+
// After button width transition completes, show the label
|
|
122
|
+
if (newWidth > WIDTH[size]) {
|
|
123
|
+
timeoutRef.current = setTimeout(()=>{
|
|
124
|
+
if (labelRightRef.current && labelRight) {
|
|
125
|
+
labelRightRef.current.style.opacity = "1";
|
|
126
|
+
}
|
|
127
|
+
if (labelLeftRef.current && labelLeft) {
|
|
128
|
+
labelLeftRef.current.style.opacity = "1";
|
|
129
|
+
}
|
|
130
|
+
timeoutRef.current = null;
|
|
131
|
+
}, ANIMATION_DURATION * 0.8); // Wait for most of the width transition to complete
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
// If transitioning to icon-only state, hide labels immediately
|
|
135
|
+
if (newWidth === WIDTH[size]) {
|
|
136
|
+
if (labelRightRef.current) {
|
|
137
|
+
labelRightRef.current.style.opacity = "0";
|
|
138
|
+
}
|
|
139
|
+
if (labelLeftRef.current) {
|
|
140
|
+
labelLeftRef.current.style.opacity = "0";
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
/* v8 ignore stop */ }, [
|
|
145
|
+
rectR,
|
|
146
|
+
labelRight,
|
|
147
|
+
labelRightRef,
|
|
148
|
+
rectL,
|
|
149
|
+
labelLeft,
|
|
150
|
+
labelLeftRef,
|
|
151
|
+
size,
|
|
152
|
+
animated
|
|
153
|
+
]);
|
|
154
|
+
// Clean up timeout on unmount
|
|
155
|
+
/* v8 ignore start */ useEffect(()=>{
|
|
156
|
+
return ()=>{
|
|
157
|
+
if (timeoutRef.current) {
|
|
158
|
+
clearTimeout(timeoutRef.current);
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
}, []);
|
|
162
|
+
/* v8 ignore stop */ const badgeInfo = getBadgeClasses({
|
|
163
|
+
size,
|
|
164
|
+
badge
|
|
165
|
+
});
|
|
166
|
+
return /*#__PURE__*/ jsxs(BaseButton_private, {
|
|
167
|
+
ref: mergedRef,
|
|
168
|
+
className: buttonClass,
|
|
169
|
+
disabled: disabled,
|
|
170
|
+
type: type,
|
|
171
|
+
"aria-label": ariaLabel || label,
|
|
172
|
+
...otherProps,
|
|
173
|
+
children: [
|
|
174
|
+
/*#__PURE__*/ jsxs("div", {
|
|
175
|
+
className: contentWrapperClass,
|
|
176
|
+
children: [
|
|
177
|
+
/*#__PURE__*/ jsx(ButtonLabel, {
|
|
178
|
+
label: labelLeft,
|
|
179
|
+
labelRef: labelLeftRef,
|
|
180
|
+
labelClass: labelClass,
|
|
181
|
+
labelInnerClass: "pr-2",
|
|
182
|
+
initiallyHidden: animated
|
|
183
|
+
}),
|
|
184
|
+
/*#__PURE__*/ jsx("span", {
|
|
185
|
+
ref: iconRef,
|
|
186
|
+
className: iconClass,
|
|
187
|
+
children: children
|
|
188
|
+
}),
|
|
189
|
+
/*#__PURE__*/ jsx(ButtonLabel, {
|
|
190
|
+
label: labelRight,
|
|
191
|
+
labelRef: labelRightRef,
|
|
192
|
+
labelClass: labelClass,
|
|
193
|
+
labelInnerClass: "pl-2",
|
|
194
|
+
initiallyHidden: animated
|
|
195
|
+
})
|
|
196
|
+
]
|
|
197
|
+
}),
|
|
198
|
+
badgeInfo && /*#__PURE__*/ jsx("span", {
|
|
199
|
+
className: badgeInfo.className,
|
|
200
|
+
"aria-hidden": "true",
|
|
201
|
+
children: badgeInfo.displayValue
|
|
202
|
+
})
|
|
203
|
+
]
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
const ButtonLabel = ({ labelRef, labelClass, label, labelInnerClass, initiallyHidden = false })=>{
|
|
207
|
+
if (!label && !initiallyHidden) {
|
|
208
|
+
return null;
|
|
209
|
+
}
|
|
210
|
+
return /*#__PURE__*/ jsx("span", {
|
|
211
|
+
ref: labelRef,
|
|
212
|
+
className: labelClass,
|
|
213
|
+
style: initiallyHidden ? {
|
|
214
|
+
opacity: 0
|
|
215
|
+
} : undefined,
|
|
216
|
+
children: label && /*#__PURE__*/ jsx("span", {
|
|
217
|
+
className: labelInnerClass,
|
|
218
|
+
children: label
|
|
219
|
+
})
|
|
220
|
+
});
|
|
221
|
+
};
|
|
222
|
+
|
|
223
|
+
export { ButtonIcon };
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-button v12.0.
|
|
2
|
+
@versini/ui-button v12.0.4
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import {
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import clsx from "clsx";
|
|
8
|
+
import { getButtonClasses, TYPE_LINK } from "../../287.js";
|
|
9
|
+
|
|
10
|
+
|
|
7
11
|
|
|
8
12
|
|
|
9
13
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-button",
|
|
3
|
-
"version": "12.0.
|
|
3
|
+
"version": "12.0.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -63,12 +63,12 @@
|
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
65
|
"@versini/ui-hooks": "6.1.1",
|
|
66
|
-
"@versini/ui-icons": "4.
|
|
66
|
+
"@versini/ui-icons": "4.19.2",
|
|
67
67
|
"clsx": "2.1.1",
|
|
68
68
|
"tailwindcss": "4.2.1"
|
|
69
69
|
},
|
|
70
70
|
"sideEffects": [
|
|
71
71
|
"**/*.css"
|
|
72
72
|
],
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "6b50d466dbc1261a8539f469016ab438e4e8e51c"
|
|
74
74
|
}
|
package/dist/370.js
DELETED
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
@versini/ui-button v12.0.2
|
|
3
|
-
© 2026 gizmette.com
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { useMergeRefs } from "@versini/ui-hooks/use-merge-refs";
|
|
7
|
-
import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";
|
|
8
|
-
import { jsxs, getButtonClasses, getIconClasses, getButtonIconLabelClasses, TYPE_ICON, getBadgeClasses, jsx } from "./188.js";
|
|
9
|
-
import { useLayoutEffect, useRef, useEffect, BaseButton_private } from "./795.js";
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const WIDTH = {
|
|
20
|
-
small: 24,
|
|
21
|
-
medium: 32,
|
|
22
|
-
large: 48
|
|
23
|
-
};
|
|
24
|
-
const PADDINGS = {
|
|
25
|
-
small: 8 * 2,
|
|
26
|
-
medium: 12 * 2,
|
|
27
|
-
large: 16 * 2
|
|
28
|
-
};
|
|
29
|
-
const BORDERS = 2; // border x 2
|
|
30
|
-
const ANIMATION_DURATION = 300; // ms - should match the CSS transition duration
|
|
31
|
-
function ButtonIcon({ children, disabled = false, mode = "system", focusMode = "system", fullWidth = false, className, type = "button", raw = false, noBorder = false, "aria-label": ariaLabel, label, size = "medium", labelRight, labelLeft, noBackground = false, align = "center", radius = "large", variant = "secondary", iconClassName, animated = false, badge, ref, ...otherProps }) {
|
|
32
|
-
const buttonClass = getButtonClasses({
|
|
33
|
-
type: TYPE_ICON,
|
|
34
|
-
mode,
|
|
35
|
-
focusMode,
|
|
36
|
-
fullWidth,
|
|
37
|
-
disabled,
|
|
38
|
-
raw,
|
|
39
|
-
className,
|
|
40
|
-
noBorder,
|
|
41
|
-
size,
|
|
42
|
-
labelRight,
|
|
43
|
-
labelLeft,
|
|
44
|
-
noBackground,
|
|
45
|
-
align,
|
|
46
|
-
radius,
|
|
47
|
-
variant,
|
|
48
|
-
animated,
|
|
49
|
-
badge
|
|
50
|
-
});
|
|
51
|
-
const iconClass = getIconClasses({
|
|
52
|
-
mode,
|
|
53
|
-
raw,
|
|
54
|
-
iconClassName,
|
|
55
|
-
variant
|
|
56
|
-
});
|
|
57
|
-
const labelClass = getButtonIconLabelClasses({
|
|
58
|
-
animated
|
|
59
|
-
});
|
|
60
|
-
// Create a combined class for the button content wrapper
|
|
61
|
-
const contentWrapperClass = "flex items-center justify-center relative w-full h-full overflow-hidden";
|
|
62
|
-
const [labelRightRef, rectR] = useResizeObserver();
|
|
63
|
-
const [labelLeftRef, rectL] = useResizeObserver();
|
|
64
|
-
const [iconRef, rectIcon] = useResizeObserver();
|
|
65
|
-
const bufferRef = useRef(0);
|
|
66
|
-
const buttonRef = useRef(null);
|
|
67
|
-
const timeoutRef = useRef(null);
|
|
68
|
-
const mergedRef = useMergeRefs([
|
|
69
|
-
ref,
|
|
70
|
-
buttonRef
|
|
71
|
-
]);
|
|
72
|
-
/**
|
|
73
|
-
* Effect to calculate the buffer to add to the width of the button to
|
|
74
|
-
* account for the icon, paddings and borders.
|
|
75
|
-
*/ useLayoutEffect(()=>{
|
|
76
|
-
/* v8 ignore start */ if (iconRef && iconRef.current && animated) {
|
|
77
|
-
bufferRef.current = rectIcon.width + PADDINGS[size] + (noBorder ? 0 : BORDERS);
|
|
78
|
-
// Set initial button width if it hasn't been set yet
|
|
79
|
-
if (buttonRef.current && !buttonRef.current.style.width) {
|
|
80
|
-
buttonRef.current.style.width = `${WIDTH[size]}px`;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
/* v8 ignore stop */ }, [
|
|
84
|
-
rectIcon,
|
|
85
|
-
iconRef,
|
|
86
|
-
size,
|
|
87
|
-
noBorder,
|
|
88
|
-
animated
|
|
89
|
-
]);
|
|
90
|
-
/**
|
|
91
|
-
* Effect to update the width of the button based on the visibility of
|
|
92
|
-
* the right and left labels.
|
|
93
|
-
*/ useLayoutEffect(()=>{
|
|
94
|
-
/* v8 ignore start */ if (buttonRef && buttonRef.current && animated) {
|
|
95
|
-
// Calculate the target width first
|
|
96
|
-
let newWidth = WIDTH[size];
|
|
97
|
-
if (labelRight && labelRightRef && rectR.width > 0) {
|
|
98
|
-
newWidth = rectR.width + bufferRef.current;
|
|
99
|
-
} else if (labelLeft && labelLeftRef && rectL.width > 0) {
|
|
100
|
-
newWidth = rectL.width + bufferRef.current;
|
|
101
|
-
}
|
|
102
|
-
// Clear any existing timeout to prevent race conditions
|
|
103
|
-
if (timeoutRef.current) {
|
|
104
|
-
clearTimeout(timeoutRef.current);
|
|
105
|
-
}
|
|
106
|
-
// Start transition - expand button first
|
|
107
|
-
if (newWidth !== parseInt(buttonRef.current.style.width || "0", 10)) {
|
|
108
|
-
// Make sure labels are hidden during width transition
|
|
109
|
-
if (labelRightRef.current) {
|
|
110
|
-
labelRightRef.current.style.opacity = "0";
|
|
111
|
-
}
|
|
112
|
-
if (labelLeftRef.current) {
|
|
113
|
-
labelLeftRef.current.style.opacity = "0";
|
|
114
|
-
}
|
|
115
|
-
// Set the width to trigger the transition
|
|
116
|
-
buttonRef.current.style.width = `${newWidth}px`;
|
|
117
|
-
// After button width transition completes, show the label
|
|
118
|
-
if (newWidth > WIDTH[size]) {
|
|
119
|
-
timeoutRef.current = setTimeout(()=>{
|
|
120
|
-
if (labelRightRef.current && labelRight) {
|
|
121
|
-
labelRightRef.current.style.opacity = "1";
|
|
122
|
-
}
|
|
123
|
-
if (labelLeftRef.current && labelLeft) {
|
|
124
|
-
labelLeftRef.current.style.opacity = "1";
|
|
125
|
-
}
|
|
126
|
-
timeoutRef.current = null;
|
|
127
|
-
}, ANIMATION_DURATION * 0.8); // Wait for most of the width transition to complete
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
// If transitioning to icon-only state, hide labels immediately
|
|
131
|
-
if (newWidth === WIDTH[size]) {
|
|
132
|
-
if (labelRightRef.current) {
|
|
133
|
-
labelRightRef.current.style.opacity = "0";
|
|
134
|
-
}
|
|
135
|
-
if (labelLeftRef.current) {
|
|
136
|
-
labelLeftRef.current.style.opacity = "0";
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
/* v8 ignore stop */ }, [
|
|
141
|
-
rectR,
|
|
142
|
-
labelRight,
|
|
143
|
-
labelRightRef,
|
|
144
|
-
rectL,
|
|
145
|
-
labelLeft,
|
|
146
|
-
labelLeftRef,
|
|
147
|
-
size,
|
|
148
|
-
animated
|
|
149
|
-
]);
|
|
150
|
-
// Clean up timeout on unmount
|
|
151
|
-
/* v8 ignore start */ useEffect(()=>{
|
|
152
|
-
return ()=>{
|
|
153
|
-
if (timeoutRef.current) {
|
|
154
|
-
clearTimeout(timeoutRef.current);
|
|
155
|
-
}
|
|
156
|
-
};
|
|
157
|
-
}, []);
|
|
158
|
-
/* v8 ignore stop */ const badgeInfo = getBadgeClasses({
|
|
159
|
-
size,
|
|
160
|
-
badge
|
|
161
|
-
});
|
|
162
|
-
return /*#__PURE__*/ jsxs(BaseButton_private, {
|
|
163
|
-
ref: mergedRef,
|
|
164
|
-
className: buttonClass,
|
|
165
|
-
disabled: disabled,
|
|
166
|
-
type: type,
|
|
167
|
-
"aria-label": ariaLabel || label,
|
|
168
|
-
...otherProps,
|
|
169
|
-
children: [
|
|
170
|
-
/*#__PURE__*/ jsxs("div", {
|
|
171
|
-
className: contentWrapperClass,
|
|
172
|
-
children: [
|
|
173
|
-
/*#__PURE__*/ jsx(ButtonLabel, {
|
|
174
|
-
label: labelLeft,
|
|
175
|
-
labelRef: labelLeftRef,
|
|
176
|
-
labelClass: labelClass,
|
|
177
|
-
labelInnerClass: "pr-2",
|
|
178
|
-
initiallyHidden: animated
|
|
179
|
-
}),
|
|
180
|
-
/*#__PURE__*/ jsx("span", {
|
|
181
|
-
ref: iconRef,
|
|
182
|
-
className: iconClass,
|
|
183
|
-
children: children
|
|
184
|
-
}),
|
|
185
|
-
/*#__PURE__*/ jsx(ButtonLabel, {
|
|
186
|
-
label: labelRight,
|
|
187
|
-
labelRef: labelRightRef,
|
|
188
|
-
labelClass: labelClass,
|
|
189
|
-
labelInnerClass: "pl-2",
|
|
190
|
-
initiallyHidden: animated
|
|
191
|
-
})
|
|
192
|
-
]
|
|
193
|
-
}),
|
|
194
|
-
badgeInfo && /*#__PURE__*/ jsx("span", {
|
|
195
|
-
className: badgeInfo.className,
|
|
196
|
-
"aria-hidden": "true",
|
|
197
|
-
children: badgeInfo.displayValue
|
|
198
|
-
})
|
|
199
|
-
]
|
|
200
|
-
});
|
|
201
|
-
}
|
|
202
|
-
const ButtonLabel = ({ labelRef, labelClass, label, labelInnerClass, initiallyHidden = false })=>{
|
|
203
|
-
if (!label && !initiallyHidden) {
|
|
204
|
-
return null;
|
|
205
|
-
}
|
|
206
|
-
return /*#__PURE__*/ jsx("span", {
|
|
207
|
-
ref: labelRef,
|
|
208
|
-
className: labelClass,
|
|
209
|
-
style: initiallyHidden ? {
|
|
210
|
-
opacity: 0
|
|
211
|
-
} : undefined,
|
|
212
|
-
children: label && /*#__PURE__*/ jsx("span", {
|
|
213
|
-
className: labelInnerClass,
|
|
214
|
-
children: label
|
|
215
|
-
})
|
|
216
|
-
});
|
|
217
|
-
};
|
|
218
|
-
|
|
219
|
-
export { ButtonIcon };
|