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