@react-spectrum/button 3.0.0-nightly.2912 → 3.0.0-nightly.2917
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/ActionButton.main.js +17 -17
- package/dist/ActionButton.mjs +17 -17
- package/dist/ActionButton.module.js +17 -17
- package/dist/Button.main.js +31 -31
- package/dist/Button.mjs +31 -31
- package/dist/Button.module.js +31 -31
- package/dist/ClearButton.main.js +7 -7
- package/dist/ClearButton.mjs +7 -7
- package/dist/ClearButton.module.js +7 -7
- package/dist/FieldButton.main.js +10 -10
- package/dist/FieldButton.mjs +10 -10
- package/dist/FieldButton.module.js +10 -10
- package/dist/LogicButton.main.js +6 -6
- package/dist/LogicButton.mjs +6 -6
- package/dist/LogicButton.module.js +6 -6
- package/dist/ToggleButton.main.js +15 -15
- package/dist/ToggleButton.mjs +15 -15
- package/dist/ToggleButton.module.js +15 -15
- package/package.json +16 -16
|
@@ -42,10 +42,10 @@ $parcel$export(module.exports, "ActionButton", () => $65dbde0e8e7aba71$export$cf
|
|
|
42
42
|
|
|
43
43
|
function $65dbde0e8e7aba71$var$ActionButton(props, ref) {
|
|
44
44
|
props = (0, $9HF4v$reactspectrumprovider.useProviderProps)(props);
|
|
45
|
-
props = (0, $9HF4v$reactspectrumutils.useSlotProps)(props,
|
|
45
|
+
props = (0, $9HF4v$reactspectrumutils.useSlotProps)(props, 'actionButton');
|
|
46
46
|
let textProps = (0, $9HF4v$reactspectrumutils.useSlotProps)({
|
|
47
|
-
UNSAFE_className: (0, $9HF4v$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
48
|
-
},
|
|
47
|
+
UNSAFE_className: (0, $9HF4v$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-ActionButton-label')
|
|
48
|
+
}, 'text');
|
|
49
49
|
let { isQuiet: isQuiet, isDisabled: isDisabled, staticColor: staticColor, children: children, autoFocus: autoFocus, holdAffordance: // @ts-ignore (private)
|
|
50
50
|
holdAffordance, hideButtonText: // @ts-ignore (private)
|
|
51
51
|
hideButtonText, ...otherProps } = props;
|
|
@@ -57,36 +57,36 @@ function $65dbde0e8e7aba71$var$ActionButton(props, ref) {
|
|
|
57
57
|
let { styleProps: styleProps } = (0, $9HF4v$reactspectrumutils.useStyleProps)(otherProps);
|
|
58
58
|
let isTextOnly = (0, ($parcel$interopDefault($9HF4v$react))).Children.toArray(props.children).every((c)=>!/*#__PURE__*/ (0, ($parcel$interopDefault($9HF4v$react))).isValidElement(c));
|
|
59
59
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($9HF4v$react))).createElement((0, $9HF4v$reactariafocus.FocusRing), {
|
|
60
|
-
focusRingClass: (0, $9HF4v$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
60
|
+
focusRingClass: (0, $9HF4v$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'focus-ring'),
|
|
61
61
|
autoFocus: autoFocus
|
|
62
62
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($9HF4v$react))).createElement("button", {
|
|
63
63
|
...styleProps,
|
|
64
64
|
...(0, $9HF4v$reactariautils.mergeProps)(buttonProps, hoverProps),
|
|
65
65
|
ref: domRef,
|
|
66
|
-
className: (0, $9HF4v$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
66
|
+
className: (0, $9HF4v$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-ActionButton', {
|
|
67
|
+
'spectrum-ActionButton--quiet': isQuiet,
|
|
68
|
+
'spectrum-ActionButton--staticColor': !!staticColor,
|
|
69
|
+
'spectrum-ActionButton--staticWhite': staticColor === 'white',
|
|
70
|
+
'spectrum-ActionButton--staticBlack': staticColor === 'black',
|
|
71
|
+
'is-active': isPressed,
|
|
72
|
+
'is-disabled': isDisabled,
|
|
73
|
+
'is-hovered': isHovered
|
|
74
74
|
}, styleProps.className)
|
|
75
75
|
}, holdAffordance && /*#__PURE__*/ (0, ($parcel$interopDefault($9HF4v$react))).createElement((0, ($parcel$interopDefault($9HF4v$spectrumiconsuiCornerTriangle))), {
|
|
76
|
-
UNSAFE_className: (0, $9HF4v$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
76
|
+
UNSAFE_className: (0, $9HF4v$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-ActionButton-hold')
|
|
77
77
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($9HF4v$react))).createElement((0, $9HF4v$reactspectrumutils.ClearSlots), null, /*#__PURE__*/ (0, ($parcel$interopDefault($9HF4v$react))).createElement((0, $9HF4v$reactspectrumutils.SlotProvider), {
|
|
78
78
|
slots: {
|
|
79
79
|
icon: {
|
|
80
|
-
size:
|
|
81
|
-
UNSAFE_className: (0, $9HF4v$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
82
|
-
|
|
80
|
+
size: 'S',
|
|
81
|
+
UNSAFE_className: (0, $9HF4v$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-Icon', {
|
|
82
|
+
'spectrum-ActionGroup-itemIcon': hideButtonText
|
|
83
83
|
})
|
|
84
84
|
},
|
|
85
85
|
text: {
|
|
86
86
|
...textProps
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
|
-
}, typeof children ===
|
|
89
|
+
}, typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, ($parcel$interopDefault($9HF4v$react))).createElement((0, $9HF4v$reactspectrumtext.Text), null, children) : children))));
|
|
90
90
|
}
|
|
91
91
|
/**
|
|
92
92
|
* ActionButtons allow users to perform an action.
|
package/dist/ActionButton.mjs
CHANGED
|
@@ -36,10 +36,10 @@ function $parcel$interopDefault(a) {
|
|
|
36
36
|
|
|
37
37
|
function $042ad0b3a4a55b33$var$ActionButton(props, ref) {
|
|
38
38
|
props = (0, $kfV1G$useProviderProps)(props);
|
|
39
|
-
props = (0, $kfV1G$useSlotProps)(props,
|
|
39
|
+
props = (0, $kfV1G$useSlotProps)(props, 'actionButton');
|
|
40
40
|
let textProps = (0, $kfV1G$useSlotProps)({
|
|
41
|
-
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))),
|
|
42
|
-
},
|
|
41
|
+
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))), 'spectrum-ActionButton-label')
|
|
42
|
+
}, 'text');
|
|
43
43
|
let { isQuiet: isQuiet, isDisabled: isDisabled, staticColor: staticColor, children: children, autoFocus: autoFocus, holdAffordance: // @ts-ignore (private)
|
|
44
44
|
holdAffordance, hideButtonText: // @ts-ignore (private)
|
|
45
45
|
hideButtonText, ...otherProps } = props;
|
|
@@ -51,36 +51,36 @@ function $042ad0b3a4a55b33$var$ActionButton(props, ref) {
|
|
|
51
51
|
let { styleProps: styleProps } = (0, $kfV1G$useStyleProps)(otherProps);
|
|
52
52
|
let isTextOnly = (0, $kfV1G$react).Children.toArray(props.children).every((c)=>!/*#__PURE__*/ (0, $kfV1G$react).isValidElement(c));
|
|
53
53
|
return /*#__PURE__*/ (0, $kfV1G$react).createElement((0, $kfV1G$FocusRing), {
|
|
54
|
-
focusRingClass: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))),
|
|
54
|
+
focusRingClass: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))), 'focus-ring'),
|
|
55
55
|
autoFocus: autoFocus
|
|
56
56
|
}, /*#__PURE__*/ (0, $kfV1G$react).createElement("button", {
|
|
57
57
|
...styleProps,
|
|
58
58
|
...(0, $kfV1G$mergeProps)(buttonProps, hoverProps),
|
|
59
59
|
ref: domRef,
|
|
60
|
-
className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))),
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
60
|
+
className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))), 'spectrum-ActionButton', {
|
|
61
|
+
'spectrum-ActionButton--quiet': isQuiet,
|
|
62
|
+
'spectrum-ActionButton--staticColor': !!staticColor,
|
|
63
|
+
'spectrum-ActionButton--staticWhite': staticColor === 'white',
|
|
64
|
+
'spectrum-ActionButton--staticBlack': staticColor === 'black',
|
|
65
|
+
'is-active': isPressed,
|
|
66
|
+
'is-disabled': isDisabled,
|
|
67
|
+
'is-hovered': isHovered
|
|
68
68
|
}, styleProps.className)
|
|
69
69
|
}, holdAffordance && /*#__PURE__*/ (0, $kfV1G$react).createElement((0, $kfV1G$spectrumiconsuiCornerTriangle), {
|
|
70
|
-
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))),
|
|
70
|
+
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))), 'spectrum-ActionButton-hold')
|
|
71
71
|
}), /*#__PURE__*/ (0, $kfV1G$react).createElement((0, $kfV1G$ClearSlots), null, /*#__PURE__*/ (0, $kfV1G$react).createElement((0, $kfV1G$SlotProvider), {
|
|
72
72
|
slots: {
|
|
73
73
|
icon: {
|
|
74
|
-
size:
|
|
75
|
-
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))),
|
|
76
|
-
|
|
74
|
+
size: 'S',
|
|
75
|
+
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))), 'spectrum-Icon', {
|
|
76
|
+
'spectrum-ActionGroup-itemIcon': hideButtonText
|
|
77
77
|
})
|
|
78
78
|
},
|
|
79
79
|
text: {
|
|
80
80
|
...textProps
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
}, typeof children ===
|
|
83
|
+
}, typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, $kfV1G$react).createElement((0, $kfV1G$Text), null, children) : children))));
|
|
84
84
|
}
|
|
85
85
|
/**
|
|
86
86
|
* ActionButtons allow users to perform an action.
|
|
@@ -36,10 +36,10 @@ function $parcel$interopDefault(a) {
|
|
|
36
36
|
|
|
37
37
|
function $042ad0b3a4a55b33$var$ActionButton(props, ref) {
|
|
38
38
|
props = (0, $kfV1G$useProviderProps)(props);
|
|
39
|
-
props = (0, $kfV1G$useSlotProps)(props,
|
|
39
|
+
props = (0, $kfV1G$useSlotProps)(props, 'actionButton');
|
|
40
40
|
let textProps = (0, $kfV1G$useSlotProps)({
|
|
41
|
-
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))),
|
|
42
|
-
},
|
|
41
|
+
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))), 'spectrum-ActionButton-label')
|
|
42
|
+
}, 'text');
|
|
43
43
|
let { isQuiet: isQuiet, isDisabled: isDisabled, staticColor: staticColor, children: children, autoFocus: autoFocus, holdAffordance: // @ts-ignore (private)
|
|
44
44
|
holdAffordance, hideButtonText: // @ts-ignore (private)
|
|
45
45
|
hideButtonText, ...otherProps } = props;
|
|
@@ -51,36 +51,36 @@ function $042ad0b3a4a55b33$var$ActionButton(props, ref) {
|
|
|
51
51
|
let { styleProps: styleProps } = (0, $kfV1G$useStyleProps)(otherProps);
|
|
52
52
|
let isTextOnly = (0, $kfV1G$react).Children.toArray(props.children).every((c)=>!/*#__PURE__*/ (0, $kfV1G$react).isValidElement(c));
|
|
53
53
|
return /*#__PURE__*/ (0, $kfV1G$react).createElement((0, $kfV1G$FocusRing), {
|
|
54
|
-
focusRingClass: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))),
|
|
54
|
+
focusRingClass: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))), 'focus-ring'),
|
|
55
55
|
autoFocus: autoFocus
|
|
56
56
|
}, /*#__PURE__*/ (0, $kfV1G$react).createElement("button", {
|
|
57
57
|
...styleProps,
|
|
58
58
|
...(0, $kfV1G$mergeProps)(buttonProps, hoverProps),
|
|
59
59
|
ref: domRef,
|
|
60
|
-
className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))),
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
60
|
+
className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))), 'spectrum-ActionButton', {
|
|
61
|
+
'spectrum-ActionButton--quiet': isQuiet,
|
|
62
|
+
'spectrum-ActionButton--staticColor': !!staticColor,
|
|
63
|
+
'spectrum-ActionButton--staticWhite': staticColor === 'white',
|
|
64
|
+
'spectrum-ActionButton--staticBlack': staticColor === 'black',
|
|
65
|
+
'is-active': isPressed,
|
|
66
|
+
'is-disabled': isDisabled,
|
|
67
|
+
'is-hovered': isHovered
|
|
68
68
|
}, styleProps.className)
|
|
69
69
|
}, holdAffordance && /*#__PURE__*/ (0, $kfV1G$react).createElement((0, $kfV1G$spectrumiconsuiCornerTriangle), {
|
|
70
|
-
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))),
|
|
70
|
+
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))), 'spectrum-ActionButton-hold')
|
|
71
71
|
}), /*#__PURE__*/ (0, $kfV1G$react).createElement((0, $kfV1G$ClearSlots), null, /*#__PURE__*/ (0, $kfV1G$react).createElement((0, $kfV1G$SlotProvider), {
|
|
72
72
|
slots: {
|
|
73
73
|
icon: {
|
|
74
|
-
size:
|
|
75
|
-
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))),
|
|
76
|
-
|
|
74
|
+
size: 'S',
|
|
75
|
+
UNSAFE_className: (0, $kfV1G$classNames)((0, ($parcel$interopDefault($kfV1G$button_vars_cssmodulejs))), 'spectrum-Icon', {
|
|
76
|
+
'spectrum-ActionGroup-itemIcon': hideButtonText
|
|
77
77
|
})
|
|
78
78
|
},
|
|
79
79
|
text: {
|
|
80
80
|
...textProps
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
|
-
}, typeof children ===
|
|
83
|
+
}, typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, $kfV1G$react).createElement((0, $kfV1G$Text), null, children) : children))));
|
|
84
84
|
}
|
|
85
85
|
/**
|
|
86
86
|
* ActionButtons allow users to perform an action.
|
package/dist/Button.main.js
CHANGED
|
@@ -62,9 +62,9 @@ function $842a195ed1671b15$var$disablePendingProps(props) {
|
|
|
62
62
|
function $842a195ed1671b15$var$Button(props, ref) {
|
|
63
63
|
var _buttonProps_arialabelledby;
|
|
64
64
|
props = (0, $hN0b7$reactspectrumprovider.useProviderProps)(props);
|
|
65
|
-
props = (0, $hN0b7$reactspectrumutils.useSlotProps)(props,
|
|
65
|
+
props = (0, $hN0b7$reactspectrumutils.useSlotProps)(props, 'button');
|
|
66
66
|
props = $842a195ed1671b15$var$disablePendingProps(props);
|
|
67
|
-
let { elementType: Element =
|
|
67
|
+
let { elementType: Element = 'button', children: children, variant: variant, style: style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline', staticColor: staticColor, isDisabled: isDisabled, isPending: isPending, autoFocus: autoFocus, ...otherProps } = props;
|
|
68
68
|
let domRef = (0, $hN0b7$reactspectrumutils.useFocusableRef)(ref);
|
|
69
69
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $hN0b7$reactariabutton.useButton)(props, domRef);
|
|
70
70
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $hN0b7$reactariainteractions.useHover)({
|
|
@@ -75,12 +75,12 @@ function $842a195ed1671b15$var$Button(props, ref) {
|
|
|
75
75
|
onFocusChange: onFocusChange,
|
|
76
76
|
isDisabled: isDisabled
|
|
77
77
|
});
|
|
78
|
-
let stringFormatter = (0, $hN0b7$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($b2da92ebd9a2bc00$exports))),
|
|
78
|
+
let stringFormatter = (0, $hN0b7$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($b2da92ebd9a2bc00$exports))), '@react-spectrum/button');
|
|
79
79
|
let { styleProps: styleProps } = (0, $hN0b7$reactspectrumutils.useStyleProps)(otherProps);
|
|
80
|
-
let hasLabel = (0, $hN0b7$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($afc5a4514aca2340$exports)))[
|
|
81
|
-
let hasIcon = (0, $hN0b7$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($afc5a4514aca2340$exports)))[
|
|
80
|
+
let hasLabel = (0, $hN0b7$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($afc5a4514aca2340$exports)))['spectrum-Button-label']}`, domRef);
|
|
81
|
+
let hasIcon = (0, $hN0b7$reactspectrumutils.useHasChild)(`.${(0, ($parcel$interopDefault($afc5a4514aca2340$exports)))['spectrum-Icon']}`, domRef);
|
|
82
82
|
// an aria label will block children and their labels from being read, this is undesirable for pending state
|
|
83
|
-
let hasAriaLabel = !!buttonProps[
|
|
83
|
+
let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];
|
|
84
84
|
let [isProgressVisible, setIsProgressVisible] = (0, $hN0b7$react.useState)(false);
|
|
85
85
|
let backupButtonId = (0, $hN0b7$reactariautils.useId)();
|
|
86
86
|
let buttonId = buttonProps.id || backupButtonId;
|
|
@@ -102,18 +102,18 @@ function $842a195ed1671b15$var$Button(props, ref) {
|
|
|
102
102
|
}, [
|
|
103
103
|
isPending
|
|
104
104
|
]);
|
|
105
|
-
if (variant ===
|
|
106
|
-
else if (variant ===
|
|
107
|
-
variant =
|
|
108
|
-
staticColor =
|
|
105
|
+
if (variant === 'cta') variant = 'accent';
|
|
106
|
+
else if (variant === 'overBackground') {
|
|
107
|
+
variant = 'primary';
|
|
108
|
+
staticColor = 'white';
|
|
109
109
|
}
|
|
110
|
-
const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps[
|
|
110
|
+
const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();
|
|
111
111
|
var _buttonProps_arialabelledby_replace;
|
|
112
|
-
const isPendingAriaLiveLabelledby = hasAriaLabel ? (_buttonProps_arialabelledby_replace = (_buttonProps_arialabelledby = buttonProps[
|
|
113
|
-
let ariaLive =
|
|
114
|
-
if ((0, $hN0b7$reactariautils.isAppleDevice)() && (!hasAriaLabel || (0, $hN0b7$reactariautils.isFirefox)())) ariaLive =
|
|
112
|
+
const isPendingAriaLiveLabelledby = hasAriaLabel ? (_buttonProps_arialabelledby_replace = (_buttonProps_arialabelledby = buttonProps['aria-labelledby']) === null || _buttonProps_arialabelledby === void 0 ? void 0 : _buttonProps_arialabelledby.replace(buttonId, spinnerId)) !== null && _buttonProps_arialabelledby_replace !== void 0 ? _buttonProps_arialabelledby_replace : spinnerId : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();
|
|
113
|
+
let ariaLive = 'polite';
|
|
114
|
+
if ((0, $hN0b7$reactariautils.isAppleDevice)() && (!hasAriaLabel || (0, $hN0b7$reactariautils.isFirefox)())) ariaLive = 'off';
|
|
115
115
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($hN0b7$react))).createElement((0, $hN0b7$reactariafocus.FocusRing), {
|
|
116
|
-
focusRingClass: (0, $hN0b7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
116
|
+
focusRingClass: (0, $hN0b7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'focus-ring'),
|
|
117
117
|
autoFocus: autoFocus
|
|
118
118
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hN0b7$react))).createElement(Element, {
|
|
119
119
|
...styleProps,
|
|
@@ -123,41 +123,41 @@ function $842a195ed1671b15$var$Button(props, ref) {
|
|
|
123
123
|
"data-variant": variant,
|
|
124
124
|
"data-style": style,
|
|
125
125
|
"data-static-color": staticColor || undefined,
|
|
126
|
-
"aria-disabled": isPending ?
|
|
127
|
-
"aria-label": isPending ? isPendingAriaLiveLabel : buttonProps[
|
|
128
|
-
"aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps[
|
|
129
|
-
className: (0, $hN0b7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
126
|
+
"aria-disabled": isPending ? 'true' : undefined,
|
|
127
|
+
"aria-label": isPending ? isPendingAriaLiveLabel : buttonProps['aria-label'],
|
|
128
|
+
"aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby'],
|
|
129
|
+
className: (0, $hN0b7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-Button', {
|
|
130
|
+
'spectrum-Button--iconOnly': hasIcon && !hasLabel,
|
|
131
|
+
'is-disabled': isDisabled || isProgressVisible,
|
|
132
|
+
'is-active': isPressed,
|
|
133
|
+
'is-hovered': isHovered,
|
|
134
|
+
'spectrum-Button--pending': isProgressVisible
|
|
135
135
|
}, styleProps.className)
|
|
136
136
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hN0b7$react))).createElement((0, $hN0b7$reactspectrumutils.SlotProvider), {
|
|
137
137
|
slots: {
|
|
138
138
|
icon: {
|
|
139
139
|
id: iconId,
|
|
140
|
-
size:
|
|
141
|
-
UNSAFE_className: (0, $hN0b7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
140
|
+
size: 'S',
|
|
141
|
+
UNSAFE_className: (0, $hN0b7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-Icon')
|
|
142
142
|
},
|
|
143
143
|
text: {
|
|
144
144
|
id: textId,
|
|
145
|
-
UNSAFE_className: (0, $hN0b7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
145
|
+
UNSAFE_className: (0, $hN0b7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-Button-label')
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
|
-
}, typeof children ===
|
|
148
|
+
}, typeof children === 'string' ? /*#__PURE__*/ (0, ($parcel$interopDefault($hN0b7$react))).createElement((0, $hN0b7$reactspectrumtext.Text), null, children) : children, isPending && /*#__PURE__*/ (0, ($parcel$interopDefault($hN0b7$react))).createElement("div", {
|
|
149
149
|
"aria-hidden": "true",
|
|
150
150
|
style: {
|
|
151
|
-
visibility: isProgressVisible ?
|
|
151
|
+
visibility: isProgressVisible ? 'visible' : 'hidden'
|
|
152
152
|
},
|
|
153
|
-
className: (0, $hN0b7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
153
|
+
className: (0, $hN0b7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-Button-circleLoader')
|
|
154
154
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hN0b7$react))).createElement((0, $hN0b7$reactspectrumprogress.ProgressCircle), {
|
|
155
155
|
"aria-label": isPendingAriaLiveLabel,
|
|
156
156
|
isIndeterminate: true,
|
|
157
157
|
size: "S",
|
|
158
158
|
staticColor: staticColor
|
|
159
159
|
})), isPending && /*#__PURE__*/ (0, ($parcel$interopDefault($hN0b7$react))).createElement((0, ($parcel$interopDefault($hN0b7$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($hN0b7$react))).createElement("div", {
|
|
160
|
-
"aria-live": isFocused ? ariaLive :
|
|
160
|
+
"aria-live": isFocused ? ariaLive : 'off'
|
|
161
161
|
}, isProgressVisible && /*#__PURE__*/ (0, ($parcel$interopDefault($hN0b7$react))).createElement("div", {
|
|
162
162
|
role: "img",
|
|
163
163
|
"aria-labelledby": isPendingAriaLiveLabelledby
|
package/dist/Button.mjs
CHANGED
|
@@ -56,9 +56,9 @@ function $b865a6f0049e2d66$var$disablePendingProps(props) {
|
|
|
56
56
|
function $b865a6f0049e2d66$var$Button(props, ref) {
|
|
57
57
|
var _buttonProps_arialabelledby;
|
|
58
58
|
props = (0, $l1zrX$useProviderProps)(props);
|
|
59
|
-
props = (0, $l1zrX$useSlotProps)(props,
|
|
59
|
+
props = (0, $l1zrX$useSlotProps)(props, 'button');
|
|
60
60
|
props = $b865a6f0049e2d66$var$disablePendingProps(props);
|
|
61
|
-
let { elementType: Element =
|
|
61
|
+
let { elementType: Element = 'button', children: children, variant: variant, style: style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline', staticColor: staticColor, isDisabled: isDisabled, isPending: isPending, autoFocus: autoFocus, ...otherProps } = props;
|
|
62
62
|
let domRef = (0, $l1zrX$useFocusableRef)(ref);
|
|
63
63
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $l1zrX$useButton)(props, domRef);
|
|
64
64
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $l1zrX$useHover)({
|
|
@@ -69,12 +69,12 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
|
|
|
69
69
|
onFocusChange: onFocusChange,
|
|
70
70
|
isDisabled: isDisabled
|
|
71
71
|
});
|
|
72
|
-
let stringFormatter = (0, $l1zrX$useLocalizedStringFormatter)((0, ($parcel$interopDefault($l1zrX$intlStringsmodulejs))),
|
|
72
|
+
let stringFormatter = (0, $l1zrX$useLocalizedStringFormatter)((0, ($parcel$interopDefault($l1zrX$intlStringsmodulejs))), '@react-spectrum/button');
|
|
73
73
|
let { styleProps: styleProps } = (0, $l1zrX$useStyleProps)(otherProps);
|
|
74
|
-
let hasLabel = (0, $l1zrX$useHasChild)(`.${(0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs)))[
|
|
75
|
-
let hasIcon = (0, $l1zrX$useHasChild)(`.${(0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs)))[
|
|
74
|
+
let hasLabel = (0, $l1zrX$useHasChild)(`.${(0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs)))['spectrum-Button-label']}`, domRef);
|
|
75
|
+
let hasIcon = (0, $l1zrX$useHasChild)(`.${(0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs)))['spectrum-Icon']}`, domRef);
|
|
76
76
|
// an aria label will block children and their labels from being read, this is undesirable for pending state
|
|
77
|
-
let hasAriaLabel = !!buttonProps[
|
|
77
|
+
let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];
|
|
78
78
|
let [isProgressVisible, setIsProgressVisible] = (0, $l1zrX$useState)(false);
|
|
79
79
|
let backupButtonId = (0, $l1zrX$useId)();
|
|
80
80
|
let buttonId = buttonProps.id || backupButtonId;
|
|
@@ -96,18 +96,18 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
|
|
|
96
96
|
}, [
|
|
97
97
|
isPending
|
|
98
98
|
]);
|
|
99
|
-
if (variant ===
|
|
100
|
-
else if (variant ===
|
|
101
|
-
variant =
|
|
102
|
-
staticColor =
|
|
99
|
+
if (variant === 'cta') variant = 'accent';
|
|
100
|
+
else if (variant === 'overBackground') {
|
|
101
|
+
variant = 'primary';
|
|
102
|
+
staticColor = 'white';
|
|
103
103
|
}
|
|
104
|
-
const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps[
|
|
104
|
+
const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();
|
|
105
105
|
var _buttonProps_arialabelledby_replace;
|
|
106
|
-
const isPendingAriaLiveLabelledby = hasAriaLabel ? (_buttonProps_arialabelledby_replace = (_buttonProps_arialabelledby = buttonProps[
|
|
107
|
-
let ariaLive =
|
|
108
|
-
if ((0, $l1zrX$isAppleDevice)() && (!hasAriaLabel || (0, $l1zrX$isFirefox)())) ariaLive =
|
|
106
|
+
const isPendingAriaLiveLabelledby = hasAriaLabel ? (_buttonProps_arialabelledby_replace = (_buttonProps_arialabelledby = buttonProps['aria-labelledby']) === null || _buttonProps_arialabelledby === void 0 ? void 0 : _buttonProps_arialabelledby.replace(buttonId, spinnerId)) !== null && _buttonProps_arialabelledby_replace !== void 0 ? _buttonProps_arialabelledby_replace : spinnerId : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();
|
|
107
|
+
let ariaLive = 'polite';
|
|
108
|
+
if ((0, $l1zrX$isAppleDevice)() && (!hasAriaLabel || (0, $l1zrX$isFirefox)())) ariaLive = 'off';
|
|
109
109
|
return /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$FocusRing), {
|
|
110
|
-
focusRingClass: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
110
|
+
focusRingClass: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'focus-ring'),
|
|
111
111
|
autoFocus: autoFocus
|
|
112
112
|
}, /*#__PURE__*/ (0, $l1zrX$react).createElement(Element, {
|
|
113
113
|
...styleProps,
|
|
@@ -117,41 +117,41 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
|
|
|
117
117
|
"data-variant": variant,
|
|
118
118
|
"data-style": style,
|
|
119
119
|
"data-static-color": staticColor || undefined,
|
|
120
|
-
"aria-disabled": isPending ?
|
|
121
|
-
"aria-label": isPending ? isPendingAriaLiveLabel : buttonProps[
|
|
122
|
-
"aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps[
|
|
123
|
-
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
120
|
+
"aria-disabled": isPending ? 'true' : undefined,
|
|
121
|
+
"aria-label": isPending ? isPendingAriaLiveLabel : buttonProps['aria-label'],
|
|
122
|
+
"aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby'],
|
|
123
|
+
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Button', {
|
|
124
|
+
'spectrum-Button--iconOnly': hasIcon && !hasLabel,
|
|
125
|
+
'is-disabled': isDisabled || isProgressVisible,
|
|
126
|
+
'is-active': isPressed,
|
|
127
|
+
'is-hovered': isHovered,
|
|
128
|
+
'spectrum-Button--pending': isProgressVisible
|
|
129
129
|
}, styleProps.className)
|
|
130
130
|
}, /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$SlotProvider), {
|
|
131
131
|
slots: {
|
|
132
132
|
icon: {
|
|
133
133
|
id: iconId,
|
|
134
|
-
size:
|
|
135
|
-
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
134
|
+
size: 'S',
|
|
135
|
+
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Icon')
|
|
136
136
|
},
|
|
137
137
|
text: {
|
|
138
138
|
id: textId,
|
|
139
|
-
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
139
|
+
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Button-label')
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
}, typeof children ===
|
|
142
|
+
}, typeof children === 'string' ? /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$Text), null, children) : children, isPending && /*#__PURE__*/ (0, $l1zrX$react).createElement("div", {
|
|
143
143
|
"aria-hidden": "true",
|
|
144
144
|
style: {
|
|
145
|
-
visibility: isProgressVisible ?
|
|
145
|
+
visibility: isProgressVisible ? 'visible' : 'hidden'
|
|
146
146
|
},
|
|
147
|
-
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
147
|
+
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Button-circleLoader')
|
|
148
148
|
}, /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$ProgressCircle), {
|
|
149
149
|
"aria-label": isPendingAriaLiveLabel,
|
|
150
150
|
isIndeterminate: true,
|
|
151
151
|
size: "S",
|
|
152
152
|
staticColor: staticColor
|
|
153
153
|
})), isPending && /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$react).Fragment, null, /*#__PURE__*/ (0, $l1zrX$react).createElement("div", {
|
|
154
|
-
"aria-live": isFocused ? ariaLive :
|
|
154
|
+
"aria-live": isFocused ? ariaLive : 'off'
|
|
155
155
|
}, isProgressVisible && /*#__PURE__*/ (0, $l1zrX$react).createElement("div", {
|
|
156
156
|
role: "img",
|
|
157
157
|
"aria-labelledby": isPendingAriaLiveLabelledby
|
package/dist/Button.module.js
CHANGED
|
@@ -56,9 +56,9 @@ function $b865a6f0049e2d66$var$disablePendingProps(props) {
|
|
|
56
56
|
function $b865a6f0049e2d66$var$Button(props, ref) {
|
|
57
57
|
var _buttonProps_arialabelledby;
|
|
58
58
|
props = (0, $l1zrX$useProviderProps)(props);
|
|
59
|
-
props = (0, $l1zrX$useSlotProps)(props,
|
|
59
|
+
props = (0, $l1zrX$useSlotProps)(props, 'button');
|
|
60
60
|
props = $b865a6f0049e2d66$var$disablePendingProps(props);
|
|
61
|
-
let { elementType: Element =
|
|
61
|
+
let { elementType: Element = 'button', children: children, variant: variant, style: style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline', staticColor: staticColor, isDisabled: isDisabled, isPending: isPending, autoFocus: autoFocus, ...otherProps } = props;
|
|
62
62
|
let domRef = (0, $l1zrX$useFocusableRef)(ref);
|
|
63
63
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $l1zrX$useButton)(props, domRef);
|
|
64
64
|
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $l1zrX$useHover)({
|
|
@@ -69,12 +69,12 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
|
|
|
69
69
|
onFocusChange: onFocusChange,
|
|
70
70
|
isDisabled: isDisabled
|
|
71
71
|
});
|
|
72
|
-
let stringFormatter = (0, $l1zrX$useLocalizedStringFormatter)((0, ($parcel$interopDefault($l1zrX$intlStringsmodulejs))),
|
|
72
|
+
let stringFormatter = (0, $l1zrX$useLocalizedStringFormatter)((0, ($parcel$interopDefault($l1zrX$intlStringsmodulejs))), '@react-spectrum/button');
|
|
73
73
|
let { styleProps: styleProps } = (0, $l1zrX$useStyleProps)(otherProps);
|
|
74
|
-
let hasLabel = (0, $l1zrX$useHasChild)(`.${(0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs)))[
|
|
75
|
-
let hasIcon = (0, $l1zrX$useHasChild)(`.${(0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs)))[
|
|
74
|
+
let hasLabel = (0, $l1zrX$useHasChild)(`.${(0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs)))['spectrum-Button-label']}`, domRef);
|
|
75
|
+
let hasIcon = (0, $l1zrX$useHasChild)(`.${(0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs)))['spectrum-Icon']}`, domRef);
|
|
76
76
|
// an aria label will block children and their labels from being read, this is undesirable for pending state
|
|
77
|
-
let hasAriaLabel = !!buttonProps[
|
|
77
|
+
let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];
|
|
78
78
|
let [isProgressVisible, setIsProgressVisible] = (0, $l1zrX$useState)(false);
|
|
79
79
|
let backupButtonId = (0, $l1zrX$useId)();
|
|
80
80
|
let buttonId = buttonProps.id || backupButtonId;
|
|
@@ -96,18 +96,18 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
|
|
|
96
96
|
}, [
|
|
97
97
|
isPending
|
|
98
98
|
]);
|
|
99
|
-
if (variant ===
|
|
100
|
-
else if (variant ===
|
|
101
|
-
variant =
|
|
102
|
-
staticColor =
|
|
99
|
+
if (variant === 'cta') variant = 'accent';
|
|
100
|
+
else if (variant === 'overBackground') {
|
|
101
|
+
variant = 'primary';
|
|
102
|
+
staticColor = 'white';
|
|
103
103
|
}
|
|
104
|
-
const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps[
|
|
104
|
+
const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();
|
|
105
105
|
var _buttonProps_arialabelledby_replace;
|
|
106
|
-
const isPendingAriaLiveLabelledby = hasAriaLabel ? (_buttonProps_arialabelledby_replace = (_buttonProps_arialabelledby = buttonProps[
|
|
107
|
-
let ariaLive =
|
|
108
|
-
if ((0, $l1zrX$isAppleDevice)() && (!hasAriaLabel || (0, $l1zrX$isFirefox)())) ariaLive =
|
|
106
|
+
const isPendingAriaLiveLabelledby = hasAriaLabel ? (_buttonProps_arialabelledby_replace = (_buttonProps_arialabelledby = buttonProps['aria-labelledby']) === null || _buttonProps_arialabelledby === void 0 ? void 0 : _buttonProps_arialabelledby.replace(buttonId, spinnerId)) !== null && _buttonProps_arialabelledby_replace !== void 0 ? _buttonProps_arialabelledby_replace : spinnerId : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();
|
|
107
|
+
let ariaLive = 'polite';
|
|
108
|
+
if ((0, $l1zrX$isAppleDevice)() && (!hasAriaLabel || (0, $l1zrX$isFirefox)())) ariaLive = 'off';
|
|
109
109
|
return /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$FocusRing), {
|
|
110
|
-
focusRingClass: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
110
|
+
focusRingClass: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'focus-ring'),
|
|
111
111
|
autoFocus: autoFocus
|
|
112
112
|
}, /*#__PURE__*/ (0, $l1zrX$react).createElement(Element, {
|
|
113
113
|
...styleProps,
|
|
@@ -117,41 +117,41 @@ function $b865a6f0049e2d66$var$Button(props, ref) {
|
|
|
117
117
|
"data-variant": variant,
|
|
118
118
|
"data-style": style,
|
|
119
119
|
"data-static-color": staticColor || undefined,
|
|
120
|
-
"aria-disabled": isPending ?
|
|
121
|
-
"aria-label": isPending ? isPendingAriaLiveLabel : buttonProps[
|
|
122
|
-
"aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps[
|
|
123
|
-
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
120
|
+
"aria-disabled": isPending ? 'true' : undefined,
|
|
121
|
+
"aria-label": isPending ? isPendingAriaLiveLabel : buttonProps['aria-label'],
|
|
122
|
+
"aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby'],
|
|
123
|
+
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Button', {
|
|
124
|
+
'spectrum-Button--iconOnly': hasIcon && !hasLabel,
|
|
125
|
+
'is-disabled': isDisabled || isProgressVisible,
|
|
126
|
+
'is-active': isPressed,
|
|
127
|
+
'is-hovered': isHovered,
|
|
128
|
+
'spectrum-Button--pending': isProgressVisible
|
|
129
129
|
}, styleProps.className)
|
|
130
130
|
}, /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$SlotProvider), {
|
|
131
131
|
slots: {
|
|
132
132
|
icon: {
|
|
133
133
|
id: iconId,
|
|
134
|
-
size:
|
|
135
|
-
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
134
|
+
size: 'S',
|
|
135
|
+
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Icon')
|
|
136
136
|
},
|
|
137
137
|
text: {
|
|
138
138
|
id: textId,
|
|
139
|
-
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
139
|
+
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Button-label')
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
}, typeof children ===
|
|
142
|
+
}, typeof children === 'string' ? /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$Text), null, children) : children, isPending && /*#__PURE__*/ (0, $l1zrX$react).createElement("div", {
|
|
143
143
|
"aria-hidden": "true",
|
|
144
144
|
style: {
|
|
145
|
-
visibility: isProgressVisible ?
|
|
145
|
+
visibility: isProgressVisible ? 'visible' : 'hidden'
|
|
146
146
|
},
|
|
147
|
-
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
147
|
+
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Button-circleLoader')
|
|
148
148
|
}, /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$ProgressCircle), {
|
|
149
149
|
"aria-label": isPendingAriaLiveLabel,
|
|
150
150
|
isIndeterminate: true,
|
|
151
151
|
size: "S",
|
|
152
152
|
staticColor: staticColor
|
|
153
153
|
})), isPending && /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$react).Fragment, null, /*#__PURE__*/ (0, $l1zrX$react).createElement("div", {
|
|
154
|
-
"aria-live": isFocused ? ariaLive :
|
|
154
|
+
"aria-live": isFocused ? ariaLive : 'off'
|
|
155
155
|
}, isProgressVisible && /*#__PURE__*/ (0, $l1zrX$react).createElement("div", {
|
|
156
156
|
role: "img",
|
|
157
157
|
"aria-labelledby": isPendingAriaLiveLabelledby
|
package/dist/ClearButton.main.js
CHANGED
|
@@ -38,8 +38,8 @@ $parcel$export(module.exports, "ClearButton", () => $9c84a434f1c9da63$export$13e
|
|
|
38
38
|
|
|
39
39
|
function $9c84a434f1c9da63$var$ClearButton(props, ref) {
|
|
40
40
|
let { children: children = /*#__PURE__*/ (0, ($parcel$interopDefault($3cv9y$react))).createElement((0, ($parcel$interopDefault($3cv9y$spectrumiconsuiCrossSmall))), {
|
|
41
|
-
UNSAFE_className: (0, ($parcel$interopDefault($afc5a4514aca2340$exports)))[
|
|
42
|
-
}), focusClassName: focusClassName, variant: variant, autoFocus: autoFocus, isDisabled: isDisabled, preventFocus: preventFocus, elementType: elementType = preventFocus ?
|
|
41
|
+
UNSAFE_className: (0, ($parcel$interopDefault($afc5a4514aca2340$exports)))['spectrum-Icon']
|
|
42
|
+
}), focusClassName: focusClassName, variant: variant, autoFocus: autoFocus, isDisabled: isDisabled, preventFocus: preventFocus, elementType: elementType = preventFocus ? 'div' : 'button', ...otherProps } = props;
|
|
43
43
|
let domRef = (0, $3cv9y$reactspectrumutils.useFocusableRef)(ref);
|
|
44
44
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $3cv9y$reactariabutton.useButton)({
|
|
45
45
|
...props,
|
|
@@ -55,17 +55,17 @@ function $9c84a434f1c9da63$var$ClearButton(props, ref) {
|
|
|
55
55
|
if (preventFocus) delete buttonProps.tabIndex;
|
|
56
56
|
let ElementType = elementType;
|
|
57
57
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($3cv9y$react))).createElement((0, $3cv9y$reactariafocus.FocusRing), {
|
|
58
|
-
focusRingClass: (0, $3cv9y$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
58
|
+
focusRingClass: (0, $3cv9y$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'focus-ring', focusClassName),
|
|
59
59
|
autoFocus: autoFocus
|
|
60
60
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($3cv9y$react))).createElement(ElementType, {
|
|
61
61
|
...styleProps,
|
|
62
62
|
...(0, $3cv9y$reactariautils.mergeProps)(buttonProps, hoverProps),
|
|
63
63
|
ref: domRef,
|
|
64
|
-
className: (0, $3cv9y$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
64
|
+
className: (0, $3cv9y$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-ClearButton', {
|
|
65
65
|
[`spectrum-ClearButton--${variant}`]: variant,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
'is-disabled': isDisabled,
|
|
67
|
+
'is-active': isPressed,
|
|
68
|
+
'is-hovered': isHovered
|
|
69
69
|
}, styleProps.className)
|
|
70
70
|
}, children));
|
|
71
71
|
}
|
package/dist/ClearButton.mjs
CHANGED
|
@@ -32,8 +32,8 @@ function $parcel$interopDefault(a) {
|
|
|
32
32
|
|
|
33
33
|
function $dd24e555a16de2ae$var$ClearButton(props, ref) {
|
|
34
34
|
let { children: children = /*#__PURE__*/ (0, $d0kJV$react).createElement((0, $d0kJV$spectrumiconsuiCrossSmall), {
|
|
35
|
-
UNSAFE_className: (0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs)))[
|
|
36
|
-
}), focusClassName: focusClassName, variant: variant, autoFocus: autoFocus, isDisabled: isDisabled, preventFocus: preventFocus, elementType: elementType = preventFocus ?
|
|
35
|
+
UNSAFE_className: (0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs)))['spectrum-Icon']
|
|
36
|
+
}), focusClassName: focusClassName, variant: variant, autoFocus: autoFocus, isDisabled: isDisabled, preventFocus: preventFocus, elementType: elementType = preventFocus ? 'div' : 'button', ...otherProps } = props;
|
|
37
37
|
let domRef = (0, $d0kJV$useFocusableRef)(ref);
|
|
38
38
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $d0kJV$useButton)({
|
|
39
39
|
...props,
|
|
@@ -49,17 +49,17 @@ function $dd24e555a16de2ae$var$ClearButton(props, ref) {
|
|
|
49
49
|
if (preventFocus) delete buttonProps.tabIndex;
|
|
50
50
|
let ElementType = elementType;
|
|
51
51
|
return /*#__PURE__*/ (0, $d0kJV$react).createElement((0, $d0kJV$FocusRing), {
|
|
52
|
-
focusRingClass: (0, $d0kJV$classNames)((0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs))),
|
|
52
|
+
focusRingClass: (0, $d0kJV$classNames)((0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs))), 'focus-ring', focusClassName),
|
|
53
53
|
autoFocus: autoFocus
|
|
54
54
|
}, /*#__PURE__*/ (0, $d0kJV$react).createElement(ElementType, {
|
|
55
55
|
...styleProps,
|
|
56
56
|
...(0, $d0kJV$mergeProps)(buttonProps, hoverProps),
|
|
57
57
|
ref: domRef,
|
|
58
|
-
className: (0, $d0kJV$classNames)((0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs))),
|
|
58
|
+
className: (0, $d0kJV$classNames)((0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs))), 'spectrum-ClearButton', {
|
|
59
59
|
[`spectrum-ClearButton--${variant}`]: variant,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
'is-disabled': isDisabled,
|
|
61
|
+
'is-active': isPressed,
|
|
62
|
+
'is-hovered': isHovered
|
|
63
63
|
}, styleProps.className)
|
|
64
64
|
}, children));
|
|
65
65
|
}
|
|
@@ -32,8 +32,8 @@ function $parcel$interopDefault(a) {
|
|
|
32
32
|
|
|
33
33
|
function $dd24e555a16de2ae$var$ClearButton(props, ref) {
|
|
34
34
|
let { children: children = /*#__PURE__*/ (0, $d0kJV$react).createElement((0, $d0kJV$spectrumiconsuiCrossSmall), {
|
|
35
|
-
UNSAFE_className: (0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs)))[
|
|
36
|
-
}), focusClassName: focusClassName, variant: variant, autoFocus: autoFocus, isDisabled: isDisabled, preventFocus: preventFocus, elementType: elementType = preventFocus ?
|
|
35
|
+
UNSAFE_className: (0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs)))['spectrum-Icon']
|
|
36
|
+
}), focusClassName: focusClassName, variant: variant, autoFocus: autoFocus, isDisabled: isDisabled, preventFocus: preventFocus, elementType: elementType = preventFocus ? 'div' : 'button', ...otherProps } = props;
|
|
37
37
|
let domRef = (0, $d0kJV$useFocusableRef)(ref);
|
|
38
38
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $d0kJV$useButton)({
|
|
39
39
|
...props,
|
|
@@ -49,17 +49,17 @@ function $dd24e555a16de2ae$var$ClearButton(props, ref) {
|
|
|
49
49
|
if (preventFocus) delete buttonProps.tabIndex;
|
|
50
50
|
let ElementType = elementType;
|
|
51
51
|
return /*#__PURE__*/ (0, $d0kJV$react).createElement((0, $d0kJV$FocusRing), {
|
|
52
|
-
focusRingClass: (0, $d0kJV$classNames)((0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs))),
|
|
52
|
+
focusRingClass: (0, $d0kJV$classNames)((0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs))), 'focus-ring', focusClassName),
|
|
53
53
|
autoFocus: autoFocus
|
|
54
54
|
}, /*#__PURE__*/ (0, $d0kJV$react).createElement(ElementType, {
|
|
55
55
|
...styleProps,
|
|
56
56
|
...(0, $d0kJV$mergeProps)(buttonProps, hoverProps),
|
|
57
57
|
ref: domRef,
|
|
58
|
-
className: (0, $d0kJV$classNames)((0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs))),
|
|
58
|
+
className: (0, $d0kJV$classNames)((0, ($parcel$interopDefault($d0kJV$button_vars_cssmodulejs))), 'spectrum-ClearButton', {
|
|
59
59
|
[`spectrum-ClearButton--${variant}`]: variant,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
'is-disabled': isDisabled,
|
|
61
|
+
'is-active': isPressed,
|
|
62
|
+
'is-hovered': isHovered
|
|
63
63
|
}, styleProps.className)
|
|
64
64
|
}, children));
|
|
65
65
|
}
|
package/dist/FieldButton.main.js
CHANGED
|
@@ -36,7 +36,7 @@ $parcel$export(module.exports, "FieldButton", () => $5931ec1ea1ec1b0d$export$47d
|
|
|
36
36
|
|
|
37
37
|
// @private
|
|
38
38
|
function $5931ec1ea1ec1b0d$var$FieldButton(props, ref) {
|
|
39
|
-
props = (0, $7mUYa$reactspectrumutils.useSlotProps)(props,
|
|
39
|
+
props = (0, $7mUYa$reactspectrumutils.useSlotProps)(props, 'button');
|
|
40
40
|
let { isQuiet: isQuiet, isDisabled: isDisabled, validationState: validationState, isInvalid: isInvalid, children: children, autoFocus: autoFocus, isActive: isActive, focusRingClass: focusRingClass, ...otherProps } = props;
|
|
41
41
|
let domRef = (0, $7mUYa$reactspectrumutils.useFocusableRef)(ref);
|
|
42
42
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $7mUYa$reactariabutton.useButton)(props, domRef);
|
|
@@ -45,23 +45,23 @@ function $5931ec1ea1ec1b0d$var$FieldButton(props, ref) {
|
|
|
45
45
|
});
|
|
46
46
|
let { styleProps: styleProps } = (0, $7mUYa$reactspectrumutils.useStyleProps)(otherProps);
|
|
47
47
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($7mUYa$react))).createElement((0, $7mUYa$reactariafocus.FocusRing), {
|
|
48
|
-
focusRingClass: (0, $7mUYa$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
48
|
+
focusRingClass: (0, $7mUYa$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'focus-ring', focusRingClass),
|
|
49
49
|
autoFocus: autoFocus
|
|
50
50
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($7mUYa$react))).createElement("button", {
|
|
51
51
|
...(0, $7mUYa$reactariautils.mergeProps)(buttonProps, hoverProps),
|
|
52
52
|
ref: domRef,
|
|
53
|
-
className: (0, $7mUYa$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
53
|
+
className: (0, $7mUYa$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-FieldButton', {
|
|
54
|
+
'spectrum-FieldButton--quiet': isQuiet,
|
|
55
|
+
'is-active': isActive || isPressed,
|
|
56
|
+
'is-disabled': isDisabled,
|
|
57
|
+
'spectrum-FieldButton--invalid': isInvalid || validationState === 'invalid',
|
|
58
|
+
'is-hovered': isHovered
|
|
59
59
|
}, styleProps.className)
|
|
60
60
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($7mUYa$react))).createElement((0, $7mUYa$reactspectrumutils.SlotProvider), {
|
|
61
61
|
slots: {
|
|
62
62
|
icon: {
|
|
63
|
-
size:
|
|
64
|
-
UNSAFE_className: (0, $7mUYa$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
63
|
+
size: 'S',
|
|
64
|
+
UNSAFE_className: (0, $7mUYa$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-Icon')
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
}, children)));
|
package/dist/FieldButton.mjs
CHANGED
|
@@ -30,7 +30,7 @@ function $parcel$interopDefault(a) {
|
|
|
30
30
|
|
|
31
31
|
// @private
|
|
32
32
|
function $b43bd559b476d0c4$var$FieldButton(props, ref) {
|
|
33
|
-
props = (0, $b8ZoF$useSlotProps)(props,
|
|
33
|
+
props = (0, $b8ZoF$useSlotProps)(props, 'button');
|
|
34
34
|
let { isQuiet: isQuiet, isDisabled: isDisabled, validationState: validationState, isInvalid: isInvalid, children: children, autoFocus: autoFocus, isActive: isActive, focusRingClass: focusRingClass, ...otherProps } = props;
|
|
35
35
|
let domRef = (0, $b8ZoF$useFocusableRef)(ref);
|
|
36
36
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $b8ZoF$useButton)(props, domRef);
|
|
@@ -39,23 +39,23 @@ function $b43bd559b476d0c4$var$FieldButton(props, ref) {
|
|
|
39
39
|
});
|
|
40
40
|
let { styleProps: styleProps } = (0, $b8ZoF$useStyleProps)(otherProps);
|
|
41
41
|
return /*#__PURE__*/ (0, $b8ZoF$react).createElement((0, $b8ZoF$FocusRing), {
|
|
42
|
-
focusRingClass: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))),
|
|
42
|
+
focusRingClass: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))), 'focus-ring', focusRingClass),
|
|
43
43
|
autoFocus: autoFocus
|
|
44
44
|
}, /*#__PURE__*/ (0, $b8ZoF$react).createElement("button", {
|
|
45
45
|
...(0, $b8ZoF$mergeProps)(buttonProps, hoverProps),
|
|
46
46
|
ref: domRef,
|
|
47
|
-
className: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))),
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
className: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))), 'spectrum-FieldButton', {
|
|
48
|
+
'spectrum-FieldButton--quiet': isQuiet,
|
|
49
|
+
'is-active': isActive || isPressed,
|
|
50
|
+
'is-disabled': isDisabled,
|
|
51
|
+
'spectrum-FieldButton--invalid': isInvalid || validationState === 'invalid',
|
|
52
|
+
'is-hovered': isHovered
|
|
53
53
|
}, styleProps.className)
|
|
54
54
|
}, /*#__PURE__*/ (0, $b8ZoF$react).createElement((0, $b8ZoF$SlotProvider), {
|
|
55
55
|
slots: {
|
|
56
56
|
icon: {
|
|
57
|
-
size:
|
|
58
|
-
UNSAFE_className: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))),
|
|
57
|
+
size: 'S',
|
|
58
|
+
UNSAFE_className: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))), 'spectrum-Icon')
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
}, children)));
|
|
@@ -30,7 +30,7 @@ function $parcel$interopDefault(a) {
|
|
|
30
30
|
|
|
31
31
|
// @private
|
|
32
32
|
function $b43bd559b476d0c4$var$FieldButton(props, ref) {
|
|
33
|
-
props = (0, $b8ZoF$useSlotProps)(props,
|
|
33
|
+
props = (0, $b8ZoF$useSlotProps)(props, 'button');
|
|
34
34
|
let { isQuiet: isQuiet, isDisabled: isDisabled, validationState: validationState, isInvalid: isInvalid, children: children, autoFocus: autoFocus, isActive: isActive, focusRingClass: focusRingClass, ...otherProps } = props;
|
|
35
35
|
let domRef = (0, $b8ZoF$useFocusableRef)(ref);
|
|
36
36
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $b8ZoF$useButton)(props, domRef);
|
|
@@ -39,23 +39,23 @@ function $b43bd559b476d0c4$var$FieldButton(props, ref) {
|
|
|
39
39
|
});
|
|
40
40
|
let { styleProps: styleProps } = (0, $b8ZoF$useStyleProps)(otherProps);
|
|
41
41
|
return /*#__PURE__*/ (0, $b8ZoF$react).createElement((0, $b8ZoF$FocusRing), {
|
|
42
|
-
focusRingClass: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))),
|
|
42
|
+
focusRingClass: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))), 'focus-ring', focusRingClass),
|
|
43
43
|
autoFocus: autoFocus
|
|
44
44
|
}, /*#__PURE__*/ (0, $b8ZoF$react).createElement("button", {
|
|
45
45
|
...(0, $b8ZoF$mergeProps)(buttonProps, hoverProps),
|
|
46
46
|
ref: domRef,
|
|
47
|
-
className: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))),
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
className: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))), 'spectrum-FieldButton', {
|
|
48
|
+
'spectrum-FieldButton--quiet': isQuiet,
|
|
49
|
+
'is-active': isActive || isPressed,
|
|
50
|
+
'is-disabled': isDisabled,
|
|
51
|
+
'spectrum-FieldButton--invalid': isInvalid || validationState === 'invalid',
|
|
52
|
+
'is-hovered': isHovered
|
|
53
53
|
}, styleProps.className)
|
|
54
54
|
}, /*#__PURE__*/ (0, $b8ZoF$react).createElement((0, $b8ZoF$SlotProvider), {
|
|
55
55
|
slots: {
|
|
56
56
|
icon: {
|
|
57
|
-
size:
|
|
58
|
-
UNSAFE_className: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))),
|
|
57
|
+
size: 'S',
|
|
58
|
+
UNSAFE_className: (0, $b8ZoF$classNames)((0, ($parcel$interopDefault($b8ZoF$button_vars_cssmodulejs))), 'spectrum-Icon')
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
}, children)));
|
package/dist/LogicButton.main.js
CHANGED
|
@@ -46,20 +46,20 @@ function $3bd294eda342b0c4$var$LogicButton(props, ref) {
|
|
|
46
46
|
});
|
|
47
47
|
let { styleProps: styleProps } = (0, $adWKT$reactspectrumutils.useStyleProps)(otherProps);
|
|
48
48
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($adWKT$react))).createElement((0, $adWKT$reactariafocus.FocusRing), {
|
|
49
|
-
focusRingClass: (0, $adWKT$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
49
|
+
focusRingClass: (0, $adWKT$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'focus-ring'),
|
|
50
50
|
autoFocus: autoFocus
|
|
51
51
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($adWKT$react))).createElement("button", {
|
|
52
52
|
...styleProps,
|
|
53
53
|
...(0, $adWKT$reactariautils.mergeProps)(buttonProps, hoverProps),
|
|
54
54
|
ref: domRef,
|
|
55
|
-
className: (0, $adWKT$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
55
|
+
className: (0, $adWKT$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-LogicButton', {
|
|
56
56
|
[`spectrum-LogicButton--${variant}`]: variant,
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
'is-disabled': isDisabled,
|
|
58
|
+
'is-active': isPressed,
|
|
59
|
+
'is-hovered': isHovered
|
|
60
60
|
}, styleProps.className)
|
|
61
61
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($adWKT$react))).createElement("span", {
|
|
62
|
-
className: (0, $adWKT$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
62
|
+
className: (0, $adWKT$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-Button-label')
|
|
63
63
|
}, children)));
|
|
64
64
|
}
|
|
65
65
|
/**
|
package/dist/LogicButton.mjs
CHANGED
|
@@ -40,20 +40,20 @@ function $45108e3c482ee88b$var$LogicButton(props, ref) {
|
|
|
40
40
|
});
|
|
41
41
|
let { styleProps: styleProps } = (0, $g8O0d$useStyleProps)(otherProps);
|
|
42
42
|
return /*#__PURE__*/ (0, $g8O0d$react).createElement((0, $g8O0d$FocusRing), {
|
|
43
|
-
focusRingClass: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))),
|
|
43
|
+
focusRingClass: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))), 'focus-ring'),
|
|
44
44
|
autoFocus: autoFocus
|
|
45
45
|
}, /*#__PURE__*/ (0, $g8O0d$react).createElement("button", {
|
|
46
46
|
...styleProps,
|
|
47
47
|
...(0, $g8O0d$mergeProps)(buttonProps, hoverProps),
|
|
48
48
|
ref: domRef,
|
|
49
|
-
className: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))),
|
|
49
|
+
className: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))), 'spectrum-LogicButton', {
|
|
50
50
|
[`spectrum-LogicButton--${variant}`]: variant,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
'is-disabled': isDisabled,
|
|
52
|
+
'is-active': isPressed,
|
|
53
|
+
'is-hovered': isHovered
|
|
54
54
|
}, styleProps.className)
|
|
55
55
|
}, /*#__PURE__*/ (0, $g8O0d$react).createElement("span", {
|
|
56
|
-
className: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))),
|
|
56
|
+
className: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))), 'spectrum-Button-label')
|
|
57
57
|
}, children)));
|
|
58
58
|
}
|
|
59
59
|
/**
|
|
@@ -40,20 +40,20 @@ function $45108e3c482ee88b$var$LogicButton(props, ref) {
|
|
|
40
40
|
});
|
|
41
41
|
let { styleProps: styleProps } = (0, $g8O0d$useStyleProps)(otherProps);
|
|
42
42
|
return /*#__PURE__*/ (0, $g8O0d$react).createElement((0, $g8O0d$FocusRing), {
|
|
43
|
-
focusRingClass: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))),
|
|
43
|
+
focusRingClass: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))), 'focus-ring'),
|
|
44
44
|
autoFocus: autoFocus
|
|
45
45
|
}, /*#__PURE__*/ (0, $g8O0d$react).createElement("button", {
|
|
46
46
|
...styleProps,
|
|
47
47
|
...(0, $g8O0d$mergeProps)(buttonProps, hoverProps),
|
|
48
48
|
ref: domRef,
|
|
49
|
-
className: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))),
|
|
49
|
+
className: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))), 'spectrum-LogicButton', {
|
|
50
50
|
[`spectrum-LogicButton--${variant}`]: variant,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
'is-disabled': isDisabled,
|
|
52
|
+
'is-active': isPressed,
|
|
53
|
+
'is-hovered': isHovered
|
|
54
54
|
}, styleProps.className)
|
|
55
55
|
}, /*#__PURE__*/ (0, $g8O0d$react).createElement("span", {
|
|
56
|
-
className: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))),
|
|
56
|
+
className: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))), 'spectrum-Button-label')
|
|
57
57
|
}, children)));
|
|
58
58
|
}
|
|
59
59
|
/**
|
|
@@ -52,34 +52,34 @@ function $b5c927da7d8f1be6$var$ToggleButton(props, ref) {
|
|
|
52
52
|
let { styleProps: styleProps } = (0, $58xyJ$reactspectrumutils.useStyleProps)(otherProps);
|
|
53
53
|
let isTextOnly = (0, ($parcel$interopDefault($58xyJ$react))).Children.toArray(props.children).every((c)=>!/*#__PURE__*/ (0, ($parcel$interopDefault($58xyJ$react))).isValidElement(c));
|
|
54
54
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($58xyJ$react))).createElement((0, $58xyJ$reactariafocus.FocusRing), {
|
|
55
|
-
focusRingClass: (0, $58xyJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
55
|
+
focusRingClass: (0, $58xyJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'focus-ring'),
|
|
56
56
|
autoFocus: autoFocus
|
|
57
57
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($58xyJ$react))).createElement("button", {
|
|
58
58
|
...styleProps,
|
|
59
59
|
...(0, $58xyJ$reactariautils.mergeProps)(buttonProps, hoverProps),
|
|
60
60
|
ref: domRef,
|
|
61
|
-
className: (0, $58xyJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
61
|
+
className: (0, $58xyJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-ActionButton', {
|
|
62
|
+
'spectrum-ActionButton--quiet': isQuiet,
|
|
63
|
+
'spectrum-ActionButton--emphasized': isEmphasized,
|
|
64
|
+
'spectrum-ActionButton--staticColor': !!staticColor,
|
|
65
|
+
'spectrum-ActionButton--staticWhite': staticColor === 'white',
|
|
66
|
+
'spectrum-ActionButton--staticBlack': staticColor === 'black',
|
|
67
|
+
'is-active': isPressed,
|
|
68
|
+
'is-disabled': isDisabled,
|
|
69
|
+
'is-hovered': isHovered,
|
|
70
|
+
'is-selected': state.isSelected
|
|
71
71
|
}, styleProps.className)
|
|
72
72
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($58xyJ$react))).createElement((0, $58xyJ$reactspectrumutils.SlotProvider), {
|
|
73
73
|
slots: {
|
|
74
74
|
icon: {
|
|
75
|
-
size:
|
|
76
|
-
UNSAFE_className: (0, $58xyJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
75
|
+
size: 'S',
|
|
76
|
+
UNSAFE_className: (0, $58xyJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-Icon')
|
|
77
77
|
},
|
|
78
78
|
text: {
|
|
79
|
-
UNSAFE_className: (0, $58xyJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))),
|
|
79
|
+
UNSAFE_className: (0, $58xyJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-ActionButton-label')
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
|
-
}, typeof children ===
|
|
82
|
+
}, typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, ($parcel$interopDefault($58xyJ$react))).createElement((0, $58xyJ$reactspectrumtext.Text), null, children) : children)));
|
|
83
83
|
}
|
|
84
84
|
/**
|
|
85
85
|
* ToggleButtons allow users to toggle a selection on or off, for example
|
package/dist/ToggleButton.mjs
CHANGED
|
@@ -46,34 +46,34 @@ function $3979c7c23b0bd270$var$ToggleButton(props, ref) {
|
|
|
46
46
|
let { styleProps: styleProps } = (0, $3XyjH$useStyleProps)(otherProps);
|
|
47
47
|
let isTextOnly = (0, $3XyjH$react).Children.toArray(props.children).every((c)=>!/*#__PURE__*/ (0, $3XyjH$react).isValidElement(c));
|
|
48
48
|
return /*#__PURE__*/ (0, $3XyjH$react).createElement((0, $3XyjH$FocusRing), {
|
|
49
|
-
focusRingClass: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))),
|
|
49
|
+
focusRingClass: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))), 'focus-ring'),
|
|
50
50
|
autoFocus: autoFocus
|
|
51
51
|
}, /*#__PURE__*/ (0, $3XyjH$react).createElement("button", {
|
|
52
52
|
...styleProps,
|
|
53
53
|
...(0, $3XyjH$mergeProps)(buttonProps, hoverProps),
|
|
54
54
|
ref: domRef,
|
|
55
|
-
className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))),
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
55
|
+
className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))), 'spectrum-ActionButton', {
|
|
56
|
+
'spectrum-ActionButton--quiet': isQuiet,
|
|
57
|
+
'spectrum-ActionButton--emphasized': isEmphasized,
|
|
58
|
+
'spectrum-ActionButton--staticColor': !!staticColor,
|
|
59
|
+
'spectrum-ActionButton--staticWhite': staticColor === 'white',
|
|
60
|
+
'spectrum-ActionButton--staticBlack': staticColor === 'black',
|
|
61
|
+
'is-active': isPressed,
|
|
62
|
+
'is-disabled': isDisabled,
|
|
63
|
+
'is-hovered': isHovered,
|
|
64
|
+
'is-selected': state.isSelected
|
|
65
65
|
}, styleProps.className)
|
|
66
66
|
}, /*#__PURE__*/ (0, $3XyjH$react).createElement((0, $3XyjH$SlotProvider), {
|
|
67
67
|
slots: {
|
|
68
68
|
icon: {
|
|
69
|
-
size:
|
|
70
|
-
UNSAFE_className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))),
|
|
69
|
+
size: 'S',
|
|
70
|
+
UNSAFE_className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))), 'spectrum-Icon')
|
|
71
71
|
},
|
|
72
72
|
text: {
|
|
73
|
-
UNSAFE_className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))),
|
|
73
|
+
UNSAFE_className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))), 'spectrum-ActionButton-label')
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
|
-
}, typeof children ===
|
|
76
|
+
}, typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, $3XyjH$react).createElement((0, $3XyjH$Text), null, children) : children)));
|
|
77
77
|
}
|
|
78
78
|
/**
|
|
79
79
|
* ToggleButtons allow users to toggle a selection on or off, for example
|
|
@@ -46,34 +46,34 @@ function $3979c7c23b0bd270$var$ToggleButton(props, ref) {
|
|
|
46
46
|
let { styleProps: styleProps } = (0, $3XyjH$useStyleProps)(otherProps);
|
|
47
47
|
let isTextOnly = (0, $3XyjH$react).Children.toArray(props.children).every((c)=>!/*#__PURE__*/ (0, $3XyjH$react).isValidElement(c));
|
|
48
48
|
return /*#__PURE__*/ (0, $3XyjH$react).createElement((0, $3XyjH$FocusRing), {
|
|
49
|
-
focusRingClass: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))),
|
|
49
|
+
focusRingClass: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))), 'focus-ring'),
|
|
50
50
|
autoFocus: autoFocus
|
|
51
51
|
}, /*#__PURE__*/ (0, $3XyjH$react).createElement("button", {
|
|
52
52
|
...styleProps,
|
|
53
53
|
...(0, $3XyjH$mergeProps)(buttonProps, hoverProps),
|
|
54
54
|
ref: domRef,
|
|
55
|
-
className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))),
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
55
|
+
className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))), 'spectrum-ActionButton', {
|
|
56
|
+
'spectrum-ActionButton--quiet': isQuiet,
|
|
57
|
+
'spectrum-ActionButton--emphasized': isEmphasized,
|
|
58
|
+
'spectrum-ActionButton--staticColor': !!staticColor,
|
|
59
|
+
'spectrum-ActionButton--staticWhite': staticColor === 'white',
|
|
60
|
+
'spectrum-ActionButton--staticBlack': staticColor === 'black',
|
|
61
|
+
'is-active': isPressed,
|
|
62
|
+
'is-disabled': isDisabled,
|
|
63
|
+
'is-hovered': isHovered,
|
|
64
|
+
'is-selected': state.isSelected
|
|
65
65
|
}, styleProps.className)
|
|
66
66
|
}, /*#__PURE__*/ (0, $3XyjH$react).createElement((0, $3XyjH$SlotProvider), {
|
|
67
67
|
slots: {
|
|
68
68
|
icon: {
|
|
69
|
-
size:
|
|
70
|
-
UNSAFE_className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))),
|
|
69
|
+
size: 'S',
|
|
70
|
+
UNSAFE_className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))), 'spectrum-Icon')
|
|
71
71
|
},
|
|
72
72
|
text: {
|
|
73
|
-
UNSAFE_className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))),
|
|
73
|
+
UNSAFE_className: (0, $3XyjH$classNames)((0, ($parcel$interopDefault($3XyjH$button_vars_cssmodulejs))), 'spectrum-ActionButton-label')
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
|
-
}, typeof children ===
|
|
76
|
+
}, typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, $3XyjH$react).createElement((0, $3XyjH$Text), null, children) : children)));
|
|
77
77
|
}
|
|
78
78
|
/**
|
|
79
79
|
* ToggleButtons allow users to toggle a selection on or off, for example
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/button",
|
|
3
|
-
"version": "3.0.0-nightly.
|
|
3
|
+
"version": "3.0.0-nightly.2917+c34886769",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,23 +36,23 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/button": "3.0.0-nightly.
|
|
40
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
41
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
42
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
43
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
44
|
-
"@react-spectrum/progress": "3.0.0-nightly.
|
|
45
|
-
"@react-spectrum/text": "3.5.
|
|
46
|
-
"@react-spectrum/utils": "3.0.0-nightly.
|
|
47
|
-
"@react-stately/toggle": "3.0.0-nightly.
|
|
48
|
-
"@react-types/button": "3.9.
|
|
49
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
50
|
-
"@spectrum-icons/ui": "3.0.0-nightly.
|
|
39
|
+
"@react-aria/button": "3.0.0-nightly.2917+c34886769",
|
|
40
|
+
"@react-aria/focus": "3.0.0-nightly.2917+c34886769",
|
|
41
|
+
"@react-aria/i18n": "3.0.0-nightly.2917+c34886769",
|
|
42
|
+
"@react-aria/interactions": "3.0.0-nightly.2917+c34886769",
|
|
43
|
+
"@react-aria/utils": "3.0.0-nightly.2917+c34886769",
|
|
44
|
+
"@react-spectrum/progress": "3.0.0-nightly.2917+c34886769",
|
|
45
|
+
"@react-spectrum/text": "3.5.6-nightly.4629+c34886769",
|
|
46
|
+
"@react-spectrum/utils": "3.0.0-nightly.2917+c34886769",
|
|
47
|
+
"@react-stately/toggle": "3.0.0-nightly.2917+c34886769",
|
|
48
|
+
"@react-types/button": "3.9.5-nightly.4629+c34886769",
|
|
49
|
+
"@react-types/shared": "3.0.0-nightly.2917+c34886769",
|
|
50
|
+
"@spectrum-icons/ui": "3.0.0-nightly.2917+c34886769",
|
|
51
51
|
"@swc/helpers": "^0.5.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@adobe/spectrum-css-temp": "3.0.0-nightly.
|
|
55
|
-
"@react-spectrum/test-utils-internal": "3.0.0-nightly.
|
|
54
|
+
"@adobe/spectrum-css-temp": "3.0.0-nightly.2917+c34886769",
|
|
55
|
+
"@react-spectrum/test-utils-internal": "3.0.0-nightly.4629+c34886769"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@react-spectrum/provider": "^3.0.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"publishConfig": {
|
|
62
62
|
"access": "public"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "c34886769d3e69bb56553a02eead6a0fd877e754"
|
|
65
65
|
}
|