@react-spectrum/progress 3.7.6 → 3.7.7
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/ProgressBar.main.js +3 -3
- package/dist/ProgressBar.mjs +4 -4
- package/dist/ProgressBar.module.js +3 -3
- package/dist/ProgressBarBase.main.js +13 -13
- package/dist/ProgressBarBase.mjs +14 -14
- package/dist/ProgressBarBase.module.js +13 -13
- package/dist/ProgressCircle.main.js +19 -19
- package/dist/ProgressCircle.mjs +20 -20
- package/dist/ProgressCircle.module.js +19 -19
- package/dist/barloader_vars_css.mjs +1 -1
- package/dist/circleloader_vars_css.mjs +1 -1
- package/package.json +7 -7
package/dist/ProgressBar.main.js
CHANGED
|
@@ -39,9 +39,9 @@ function $08d0cdc7f7a792a7$var$ProgressBar(props, ref) {
|
|
|
39
39
|
barProps: progressBarProps,
|
|
40
40
|
labelProps: labelProps,
|
|
41
41
|
barClassName: (0, $24n0W$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))), {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
'spectrum-BarLoader--overBackground': variant === 'overBackground',
|
|
43
|
+
'spectrum-BarLoader--staticWhite': staticColor === 'white',
|
|
44
|
+
'spectrum-BarLoader--staticBlack': staticColor === 'black'
|
|
45
45
|
})
|
|
46
46
|
});
|
|
47
47
|
}
|
package/dist/ProgressBar.mjs
CHANGED
|
@@ -33,9 +33,9 @@ function $551ca31cb687f352$var$ProgressBar(props, ref) {
|
|
|
33
33
|
barProps: progressBarProps,
|
|
34
34
|
labelProps: labelProps,
|
|
35
35
|
barClassName: (0, $b214y$classNames)((0, ($parcel$interopDefault($b214y$barloader_vars_cssmodulejs))), {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
'spectrum-BarLoader--overBackground': variant === 'overBackground',
|
|
37
|
+
'spectrum-BarLoader--staticWhite': staticColor === 'white',
|
|
38
|
+
'spectrum-BarLoader--staticBlack': staticColor === 'black'
|
|
39
39
|
})
|
|
40
40
|
});
|
|
41
41
|
}
|
|
@@ -46,4 +46,4 @@ function $551ca31cb687f352$var$ProgressBar(props, ref) {
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
export {$551ca31cb687f352$export$c17561cb55d4db30 as ProgressBar};
|
|
49
|
-
//# sourceMappingURL=ProgressBar.
|
|
49
|
+
//# sourceMappingURL=ProgressBar.module.js.map
|
|
@@ -33,9 +33,9 @@ function $551ca31cb687f352$var$ProgressBar(props, ref) {
|
|
|
33
33
|
barProps: progressBarProps,
|
|
34
34
|
labelProps: labelProps,
|
|
35
35
|
barClassName: (0, $b214y$classNames)((0, ($parcel$interopDefault($b214y$barloader_vars_cssmodulejs))), {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
'spectrum-BarLoader--overBackground': variant === 'overBackground',
|
|
37
|
+
'spectrum-BarLoader--staticWhite': staticColor === 'white',
|
|
38
|
+
'spectrum-BarLoader--staticBlack': staticColor === 'black'
|
|
39
39
|
})
|
|
40
40
|
});
|
|
41
41
|
}
|
|
@@ -30,7 +30,7 @@ $parcel$export(module.exports, "ProgressBarBase", () => $3d86ae6a9356cc8a$export
|
|
|
30
30
|
|
|
31
31
|
// Base ProgressBar component shared with Meter.
|
|
32
32
|
function $3d86ae6a9356cc8a$var$ProgressBarBase(props, ref) {
|
|
33
|
-
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size =
|
|
33
|
+
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size = 'L', label: label, barClassName: barClassName, showValueLabel: showValueLabel = !!label, labelPosition: labelPosition = 'top', isIndeterminate: isIndeterminate = false, barProps: barProps, labelProps: labelProps, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...otherProps } = props;
|
|
34
34
|
let domRef = (0, $jAYvx$reactspectrumutils.useDOMRef)(ref);
|
|
35
35
|
let { styleProps: styleProps } = (0, $jAYvx$reactspectrumutils.useStyleProps)(otherProps);
|
|
36
36
|
value = (0, $jAYvx$reactariautils.clamp)(value, minValue, maxValue);
|
|
@@ -41,30 +41,30 @@ function $3d86ae6a9356cc8a$var$ProgressBarBase(props, ref) {
|
|
|
41
41
|
}
|
|
42
42
|
// Ideally this should be in useProgressBar, but children
|
|
43
43
|
// are not supported in ProgressCircle which shares that hook...
|
|
44
|
-
if (!label && !ariaLabel && !ariaLabelledby) console.warn(
|
|
44
|
+
if (!label && !ariaLabel && !ariaLabelledby) console.warn('If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility');
|
|
45
45
|
// use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files
|
|
46
46
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($jAYvx$react))).createElement("div", {
|
|
47
47
|
...barProps,
|
|
48
48
|
ref: domRef,
|
|
49
|
-
className: (0, $jAYvx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))),
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
className: (0, $jAYvx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))), 'spectrum-BarLoader', {
|
|
50
|
+
'spectrum-BarLoader--small': size === 'S',
|
|
51
|
+
'spectrum-BarLoader--large': size === 'L',
|
|
52
|
+
'spectrum-BarLoader--indeterminate': isIndeterminate,
|
|
53
|
+
'spectrum-BarLoader--sideLabel': labelPosition === 'side'
|
|
54
54
|
}, barClassName, styleProps.className),
|
|
55
55
|
style: {
|
|
56
|
-
minWidth:
|
|
56
|
+
minWidth: '-moz-fit-content',
|
|
57
57
|
...styleProps.style
|
|
58
58
|
}
|
|
59
59
|
}, label && /*#__PURE__*/ (0, ($parcel$interopDefault($jAYvx$react))).createElement("span", {
|
|
60
60
|
...labelProps,
|
|
61
|
-
className: (0, $jAYvx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))),
|
|
61
|
+
className: (0, $jAYvx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))), 'spectrum-BarLoader-label')
|
|
62
62
|
}, label), showValueLabel && barProps && /*#__PURE__*/ (0, ($parcel$interopDefault($jAYvx$react))).createElement("div", {
|
|
63
|
-
className: (0, $jAYvx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))),
|
|
64
|
-
}, barProps[
|
|
65
|
-
className: (0, $jAYvx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))),
|
|
63
|
+
className: (0, $jAYvx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))), 'spectrum-BarLoader-percentage')
|
|
64
|
+
}, barProps['aria-valuetext']), /*#__PURE__*/ (0, ($parcel$interopDefault($jAYvx$react))).createElement("div", {
|
|
65
|
+
className: (0, $jAYvx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))), 'spectrum-BarLoader-track')
|
|
66
66
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($jAYvx$react))).createElement("div", {
|
|
67
|
-
className: (0, $jAYvx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))),
|
|
67
|
+
className: (0, $jAYvx$reactspectrumutils.classNames)((0, ($parcel$interopDefault($9f78a6c009f32d0a$exports))), 'spectrum-BarLoader-fill'),
|
|
68
68
|
style: barStyle
|
|
69
69
|
})));
|
|
70
70
|
}
|
package/dist/ProgressBarBase.mjs
CHANGED
|
@@ -24,7 +24,7 @@ function $parcel$interopDefault(a) {
|
|
|
24
24
|
|
|
25
25
|
// Base ProgressBar component shared with Meter.
|
|
26
26
|
function $ddf9337e928b5fe6$var$ProgressBarBase(props, ref) {
|
|
27
|
-
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size =
|
|
27
|
+
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size = 'L', label: label, barClassName: barClassName, showValueLabel: showValueLabel = !!label, labelPosition: labelPosition = 'top', isIndeterminate: isIndeterminate = false, barProps: barProps, labelProps: labelProps, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...otherProps } = props;
|
|
28
28
|
let domRef = (0, $hlUTw$useDOMRef)(ref);
|
|
29
29
|
let { styleProps: styleProps } = (0, $hlUTw$useStyleProps)(otherProps);
|
|
30
30
|
value = (0, $hlUTw$clamp)(value, minValue, maxValue);
|
|
@@ -35,30 +35,30 @@ function $ddf9337e928b5fe6$var$ProgressBarBase(props, ref) {
|
|
|
35
35
|
}
|
|
36
36
|
// Ideally this should be in useProgressBar, but children
|
|
37
37
|
// are not supported in ProgressCircle which shares that hook...
|
|
38
|
-
if (!label && !ariaLabel && !ariaLabelledby) console.warn(
|
|
38
|
+
if (!label && !ariaLabel && !ariaLabelledby) console.warn('If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility');
|
|
39
39
|
// use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files
|
|
40
40
|
return /*#__PURE__*/ (0, $hlUTw$react).createElement("div", {
|
|
41
41
|
...barProps,
|
|
42
42
|
ref: domRef,
|
|
43
|
-
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))),
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))), 'spectrum-BarLoader', {
|
|
44
|
+
'spectrum-BarLoader--small': size === 'S',
|
|
45
|
+
'spectrum-BarLoader--large': size === 'L',
|
|
46
|
+
'spectrum-BarLoader--indeterminate': isIndeterminate,
|
|
47
|
+
'spectrum-BarLoader--sideLabel': labelPosition === 'side'
|
|
48
48
|
}, barClassName, styleProps.className),
|
|
49
49
|
style: {
|
|
50
|
-
minWidth:
|
|
50
|
+
minWidth: '-moz-fit-content',
|
|
51
51
|
...styleProps.style
|
|
52
52
|
}
|
|
53
53
|
}, label && /*#__PURE__*/ (0, $hlUTw$react).createElement("span", {
|
|
54
54
|
...labelProps,
|
|
55
|
-
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))),
|
|
55
|
+
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))), 'spectrum-BarLoader-label')
|
|
56
56
|
}, label), showValueLabel && barProps && /*#__PURE__*/ (0, $hlUTw$react).createElement("div", {
|
|
57
|
-
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))),
|
|
58
|
-
}, barProps[
|
|
59
|
-
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))),
|
|
57
|
+
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))), 'spectrum-BarLoader-percentage')
|
|
58
|
+
}, barProps['aria-valuetext']), /*#__PURE__*/ (0, $hlUTw$react).createElement("div", {
|
|
59
|
+
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))), 'spectrum-BarLoader-track')
|
|
60
60
|
}, /*#__PURE__*/ (0, $hlUTw$react).createElement("div", {
|
|
61
|
-
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))),
|
|
61
|
+
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))), 'spectrum-BarLoader-fill'),
|
|
62
62
|
style: barStyle
|
|
63
63
|
})));
|
|
64
64
|
}
|
|
@@ -66,4 +66,4 @@ let $ddf9337e928b5fe6$export$7c6ed87244065f3a = /*#__PURE__*/ (0, $hlUTw$react).
|
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
export {$ddf9337e928b5fe6$export$7c6ed87244065f3a as ProgressBarBase};
|
|
69
|
-
//# sourceMappingURL=ProgressBarBase.
|
|
69
|
+
//# sourceMappingURL=ProgressBarBase.module.js.map
|
|
@@ -24,7 +24,7 @@ function $parcel$interopDefault(a) {
|
|
|
24
24
|
|
|
25
25
|
// Base ProgressBar component shared with Meter.
|
|
26
26
|
function $ddf9337e928b5fe6$var$ProgressBarBase(props, ref) {
|
|
27
|
-
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size =
|
|
27
|
+
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size = 'L', label: label, barClassName: barClassName, showValueLabel: showValueLabel = !!label, labelPosition: labelPosition = 'top', isIndeterminate: isIndeterminate = false, barProps: barProps, labelProps: labelProps, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...otherProps } = props;
|
|
28
28
|
let domRef = (0, $hlUTw$useDOMRef)(ref);
|
|
29
29
|
let { styleProps: styleProps } = (0, $hlUTw$useStyleProps)(otherProps);
|
|
30
30
|
value = (0, $hlUTw$clamp)(value, minValue, maxValue);
|
|
@@ -35,30 +35,30 @@ function $ddf9337e928b5fe6$var$ProgressBarBase(props, ref) {
|
|
|
35
35
|
}
|
|
36
36
|
// Ideally this should be in useProgressBar, but children
|
|
37
37
|
// are not supported in ProgressCircle which shares that hook...
|
|
38
|
-
if (!label && !ariaLabel && !ariaLabelledby) console.warn(
|
|
38
|
+
if (!label && !ariaLabel && !ariaLabelledby) console.warn('If you do not provide a visible label via children, you must specify an aria-label or aria-labelledby attribute for accessibility');
|
|
39
39
|
// use inline style for fit-content because cssnano is too smart for us and will strip out the -moz prefix in css files
|
|
40
40
|
return /*#__PURE__*/ (0, $hlUTw$react).createElement("div", {
|
|
41
41
|
...barProps,
|
|
42
42
|
ref: domRef,
|
|
43
|
-
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))),
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))), 'spectrum-BarLoader', {
|
|
44
|
+
'spectrum-BarLoader--small': size === 'S',
|
|
45
|
+
'spectrum-BarLoader--large': size === 'L',
|
|
46
|
+
'spectrum-BarLoader--indeterminate': isIndeterminate,
|
|
47
|
+
'spectrum-BarLoader--sideLabel': labelPosition === 'side'
|
|
48
48
|
}, barClassName, styleProps.className),
|
|
49
49
|
style: {
|
|
50
|
-
minWidth:
|
|
50
|
+
minWidth: '-moz-fit-content',
|
|
51
51
|
...styleProps.style
|
|
52
52
|
}
|
|
53
53
|
}, label && /*#__PURE__*/ (0, $hlUTw$react).createElement("span", {
|
|
54
54
|
...labelProps,
|
|
55
|
-
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))),
|
|
55
|
+
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))), 'spectrum-BarLoader-label')
|
|
56
56
|
}, label), showValueLabel && barProps && /*#__PURE__*/ (0, $hlUTw$react).createElement("div", {
|
|
57
|
-
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))),
|
|
58
|
-
}, barProps[
|
|
59
|
-
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))),
|
|
57
|
+
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))), 'spectrum-BarLoader-percentage')
|
|
58
|
+
}, barProps['aria-valuetext']), /*#__PURE__*/ (0, $hlUTw$react).createElement("div", {
|
|
59
|
+
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))), 'spectrum-BarLoader-track')
|
|
60
60
|
}, /*#__PURE__*/ (0, $hlUTw$react).createElement("div", {
|
|
61
|
-
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))),
|
|
61
|
+
className: (0, $hlUTw$classNames)((0, ($parcel$interopDefault($hlUTw$barloader_vars_cssmodulejs))), 'spectrum-BarLoader-fill'),
|
|
62
62
|
style: barStyle
|
|
63
63
|
})));
|
|
64
64
|
}
|
|
@@ -31,7 +31,7 @@ $parcel$export(module.exports, "ProgressCircle", () => $365887133501f5a1$export$
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
function $365887133501f5a1$var$ProgressCircle(props, ref) {
|
|
34
|
-
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size =
|
|
34
|
+
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size = 'M', staticColor: staticColor, variant: variant, isIndeterminate: isIndeterminate = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...otherProps } = props;
|
|
35
35
|
let domRef = (0, $eahRj$reactspectrumutils.useDOMRef)(ref);
|
|
36
36
|
let { styleProps: styleProps } = (0, $eahRj$reactspectrumutils.useStyleProps)(otherProps);
|
|
37
37
|
value = (0, $eahRj$reactariautils.clamp)(value, minValue, maxValue);
|
|
@@ -47,46 +47,46 @@ function $365887133501f5a1$var$ProgressCircle(props, ref) {
|
|
|
47
47
|
if (percentage > 0 && percentage <= 50) {
|
|
48
48
|
angle = -180 + percentage / 50 * 180;
|
|
49
49
|
subMask1Style.transform = `rotate(${angle}deg)`;
|
|
50
|
-
subMask2Style.transform =
|
|
50
|
+
subMask2Style.transform = 'rotate(-180deg)';
|
|
51
51
|
} else if (percentage > 50) {
|
|
52
52
|
angle = -180 + (percentage - 50) / 50 * 180;
|
|
53
|
-
subMask1Style.transform =
|
|
53
|
+
subMask1Style.transform = 'rotate(0deg)';
|
|
54
54
|
subMask2Style.transform = `rotate(${angle}deg)`;
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
|
-
if (!ariaLabel && !ariaLabelledby) console.warn(
|
|
57
|
+
if (!ariaLabel && !ariaLabelledby) console.warn('ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility');
|
|
58
58
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($eahRj$react))).createElement("div", {
|
|
59
59
|
...styleProps,
|
|
60
60
|
...progressBarProps,
|
|
61
61
|
ref: domRef,
|
|
62
|
-
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))),
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
62
|
+
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))), 'spectrum-CircleLoader', {
|
|
63
|
+
'spectrum-CircleLoader--indeterminate': isIndeterminate,
|
|
64
|
+
'spectrum-CircleLoader--small': size === 'S',
|
|
65
|
+
'spectrum-CircleLoader--large': size === 'L',
|
|
66
|
+
'spectrum-CircleLoader--overBackground': variant === 'overBackground',
|
|
67
|
+
'spectrum-CircleLoader--staticWhite': staticColor === 'white',
|
|
68
|
+
'spectrum-CircleLoader--staticBlack': staticColor === 'black'
|
|
69
69
|
}, styleProps.className)
|
|
70
70
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($eahRj$react))).createElement("div", {
|
|
71
|
-
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))),
|
|
71
|
+
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))), 'spectrum-CircleLoader-track')
|
|
72
72
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($eahRj$react))).createElement("div", {
|
|
73
|
-
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))),
|
|
73
|
+
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))), 'spectrum-CircleLoader-fills')
|
|
74
74
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($eahRj$react))).createElement("div", {
|
|
75
|
-
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))),
|
|
75
|
+
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))), 'spectrum-CircleLoader-fillMask1')
|
|
76
76
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($eahRj$react))).createElement("div", {
|
|
77
|
-
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))),
|
|
77
|
+
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))), 'spectrum-CircleLoader-fillSubMask1'),
|
|
78
78
|
"data-testid": "fillSubMask1",
|
|
79
79
|
style: subMask1Style
|
|
80
80
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($eahRj$react))).createElement("div", {
|
|
81
|
-
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))),
|
|
81
|
+
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))), 'spectrum-CircleLoader-fill')
|
|
82
82
|
}))), /*#__PURE__*/ (0, ($parcel$interopDefault($eahRj$react))).createElement("div", {
|
|
83
|
-
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))),
|
|
83
|
+
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))), 'spectrum-CircleLoader-fillMask2')
|
|
84
84
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($eahRj$react))).createElement("div", {
|
|
85
|
-
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))),
|
|
85
|
+
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))), 'spectrum-CircleLoader-fillSubMask2'),
|
|
86
86
|
"data-testid": "fillSubMask2",
|
|
87
87
|
style: subMask2Style
|
|
88
88
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($eahRj$react))).createElement("div", {
|
|
89
|
-
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))),
|
|
89
|
+
className: (0, $eahRj$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f4d8d13edf2d3ca2$exports))), 'spectrum-CircleLoader-fill')
|
|
90
90
|
})))));
|
|
91
91
|
}
|
|
92
92
|
/**
|
package/dist/ProgressCircle.mjs
CHANGED
|
@@ -25,7 +25,7 @@ function $parcel$interopDefault(a) {
|
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
function $79c16f64960b6385$var$ProgressCircle(props, ref) {
|
|
28
|
-
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size =
|
|
28
|
+
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size = 'M', staticColor: staticColor, variant: variant, isIndeterminate: isIndeterminate = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...otherProps } = props;
|
|
29
29
|
let domRef = (0, $a4QS8$useDOMRef)(ref);
|
|
30
30
|
let { styleProps: styleProps } = (0, $a4QS8$useStyleProps)(otherProps);
|
|
31
31
|
value = (0, $a4QS8$clamp)(value, minValue, maxValue);
|
|
@@ -41,46 +41,46 @@ function $79c16f64960b6385$var$ProgressCircle(props, ref) {
|
|
|
41
41
|
if (percentage > 0 && percentage <= 50) {
|
|
42
42
|
angle = -180 + percentage / 50 * 180;
|
|
43
43
|
subMask1Style.transform = `rotate(${angle}deg)`;
|
|
44
|
-
subMask2Style.transform =
|
|
44
|
+
subMask2Style.transform = 'rotate(-180deg)';
|
|
45
45
|
} else if (percentage > 50) {
|
|
46
46
|
angle = -180 + (percentage - 50) / 50 * 180;
|
|
47
|
-
subMask1Style.transform =
|
|
47
|
+
subMask1Style.transform = 'rotate(0deg)';
|
|
48
48
|
subMask2Style.transform = `rotate(${angle}deg)`;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
if (!ariaLabel && !ariaLabelledby) console.warn(
|
|
51
|
+
if (!ariaLabel && !ariaLabelledby) console.warn('ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility');
|
|
52
52
|
return /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
53
53
|
...styleProps,
|
|
54
54
|
...progressBarProps,
|
|
55
55
|
ref: domRef,
|
|
56
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader', {
|
|
57
|
+
'spectrum-CircleLoader--indeterminate': isIndeterminate,
|
|
58
|
+
'spectrum-CircleLoader--small': size === 'S',
|
|
59
|
+
'spectrum-CircleLoader--large': size === 'L',
|
|
60
|
+
'spectrum-CircleLoader--overBackground': variant === 'overBackground',
|
|
61
|
+
'spectrum-CircleLoader--staticWhite': staticColor === 'white',
|
|
62
|
+
'spectrum-CircleLoader--staticBlack': staticColor === 'black'
|
|
63
63
|
}, styleProps.className)
|
|
64
64
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
65
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
65
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-track')
|
|
66
66
|
}), /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
67
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
67
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fills')
|
|
68
68
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
69
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
69
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fillMask1')
|
|
70
70
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
71
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
71
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fillSubMask1'),
|
|
72
72
|
"data-testid": "fillSubMask1",
|
|
73
73
|
style: subMask1Style
|
|
74
74
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
75
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
75
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fill')
|
|
76
76
|
}))), /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
77
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
77
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fillMask2')
|
|
78
78
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
79
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
79
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fillSubMask2'),
|
|
80
80
|
"data-testid": "fillSubMask2",
|
|
81
81
|
style: subMask2Style
|
|
82
82
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
83
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
83
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fill')
|
|
84
84
|
})))));
|
|
85
85
|
}
|
|
86
86
|
/**
|
|
@@ -90,4 +90,4 @@ function $79c16f64960b6385$var$ProgressCircle(props, ref) {
|
|
|
90
90
|
|
|
91
91
|
|
|
92
92
|
export {$79c16f64960b6385$export$c79b9d6b4cc92af7 as ProgressCircle};
|
|
93
|
-
//# sourceMappingURL=ProgressCircle.
|
|
93
|
+
//# sourceMappingURL=ProgressCircle.module.js.map
|
|
@@ -25,7 +25,7 @@ function $parcel$interopDefault(a) {
|
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
function $79c16f64960b6385$var$ProgressCircle(props, ref) {
|
|
28
|
-
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size =
|
|
28
|
+
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, size: size = 'M', staticColor: staticColor, variant: variant, isIndeterminate: isIndeterminate = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...otherProps } = props;
|
|
29
29
|
let domRef = (0, $a4QS8$useDOMRef)(ref);
|
|
30
30
|
let { styleProps: styleProps } = (0, $a4QS8$useStyleProps)(otherProps);
|
|
31
31
|
value = (0, $a4QS8$clamp)(value, minValue, maxValue);
|
|
@@ -41,46 +41,46 @@ function $79c16f64960b6385$var$ProgressCircle(props, ref) {
|
|
|
41
41
|
if (percentage > 0 && percentage <= 50) {
|
|
42
42
|
angle = -180 + percentage / 50 * 180;
|
|
43
43
|
subMask1Style.transform = `rotate(${angle}deg)`;
|
|
44
|
-
subMask2Style.transform =
|
|
44
|
+
subMask2Style.transform = 'rotate(-180deg)';
|
|
45
45
|
} else if (percentage > 50) {
|
|
46
46
|
angle = -180 + (percentage - 50) / 50 * 180;
|
|
47
|
-
subMask1Style.transform =
|
|
47
|
+
subMask1Style.transform = 'rotate(0deg)';
|
|
48
48
|
subMask2Style.transform = `rotate(${angle}deg)`;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
if (!ariaLabel && !ariaLabelledby) console.warn(
|
|
51
|
+
if (!ariaLabel && !ariaLabelledby) console.warn('ProgressCircle requires an aria-label or aria-labelledby attribute for accessibility');
|
|
52
52
|
return /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
53
53
|
...styleProps,
|
|
54
54
|
...progressBarProps,
|
|
55
55
|
ref: domRef,
|
|
56
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader', {
|
|
57
|
+
'spectrum-CircleLoader--indeterminate': isIndeterminate,
|
|
58
|
+
'spectrum-CircleLoader--small': size === 'S',
|
|
59
|
+
'spectrum-CircleLoader--large': size === 'L',
|
|
60
|
+
'spectrum-CircleLoader--overBackground': variant === 'overBackground',
|
|
61
|
+
'spectrum-CircleLoader--staticWhite': staticColor === 'white',
|
|
62
|
+
'spectrum-CircleLoader--staticBlack': staticColor === 'black'
|
|
63
63
|
}, styleProps.className)
|
|
64
64
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
65
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
65
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-track')
|
|
66
66
|
}), /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
67
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
67
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fills')
|
|
68
68
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
69
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
69
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fillMask1')
|
|
70
70
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
71
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
71
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fillSubMask1'),
|
|
72
72
|
"data-testid": "fillSubMask1",
|
|
73
73
|
style: subMask1Style
|
|
74
74
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
75
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
75
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fill')
|
|
76
76
|
}))), /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
77
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
77
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fillMask2')
|
|
78
78
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
79
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
79
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fillSubMask2'),
|
|
80
80
|
"data-testid": "fillSubMask2",
|
|
81
81
|
style: subMask2Style
|
|
82
82
|
}, /*#__PURE__*/ (0, $a4QS8$react).createElement("div", {
|
|
83
|
-
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))),
|
|
83
|
+
className: (0, $a4QS8$classNames)((0, ($parcel$interopDefault($a4QS8$circleloader_vars_cssmodulejs))), 'spectrum-CircleLoader-fill')
|
|
84
84
|
})))));
|
|
85
85
|
}
|
|
86
86
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/progress",
|
|
3
|
-
"version": "3.7.
|
|
3
|
+
"version": "3.7.7",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/progress": "^3.4.
|
|
40
|
-
"@react-aria/utils": "^3.24.
|
|
41
|
-
"@react-spectrum/utils": "^3.11.
|
|
42
|
-
"@react-types/progress": "^3.5.
|
|
43
|
-
"@react-types/shared": "^3.23.
|
|
39
|
+
"@react-aria/progress": "^3.4.13",
|
|
40
|
+
"@react-aria/utils": "^3.24.1",
|
|
41
|
+
"@react-spectrum/utils": "^3.11.7",
|
|
42
|
+
"@react-types/progress": "^3.5.4",
|
|
43
|
+
"@react-types/shared": "^3.23.1",
|
|
44
44
|
"@swc/helpers": "^0.5.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"publishConfig": {
|
|
54
54
|
"access": "public"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
|
|
57
57
|
}
|