@react-spectrum/button 3.16.3 → 3.16.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ActionButton.main.js +17 -17
- package/dist/ActionButton.mjs +18 -18
- package/dist/ActionButton.module.js +17 -17
- package/dist/Button.main.js +41 -32
- package/dist/Button.main.js.map +1 -1
- package/dist/Button.mjs +42 -33
- package/dist/Button.module.js +41 -32
- package/dist/Button.module.js.map +1 -1
- package/dist/ClearButton.main.js +7 -7
- package/dist/ClearButton.mjs +8 -8
- package/dist/ClearButton.module.js +7 -7
- package/dist/FieldButton.main.js +10 -10
- package/dist/FieldButton.main.js.map +1 -1
- package/dist/FieldButton.mjs +11 -11
- package/dist/FieldButton.module.js +10 -10
- package/dist/FieldButton.module.js.map +1 -1
- package/dist/LogicButton.main.js +6 -6
- package/dist/LogicButton.mjs +7 -7
- package/dist/LogicButton.module.js +6 -6
- package/dist/ToggleButton.main.js +15 -15
- package/dist/ToggleButton.mjs +16 -16
- package/dist/ToggleButton.module.js +15 -15
- package/dist/ar-AE.mjs +1 -1
- package/dist/bg-BG.mjs +1 -1
- package/dist/button_vars_css.mjs +1 -1
- package/dist/cs-CZ.mjs +1 -1
- package/dist/da-DK.mjs +1 -1
- package/dist/de-DE.mjs +1 -1
- package/dist/el-GR.mjs +1 -1
- package/dist/en-US.mjs +1 -1
- package/dist/es-ES.mjs +1 -1
- package/dist/et-EE.mjs +1 -1
- package/dist/fi-FI.mjs +1 -1
- package/dist/fr-FR.mjs +1 -1
- package/dist/he-IL.mjs +1 -1
- package/dist/hr-HR.mjs +1 -1
- package/dist/hu-HU.mjs +1 -1
- package/dist/intlStrings.mjs +1 -1
- package/dist/it-IT.mjs +1 -1
- package/dist/ja-JP.mjs +1 -1
- package/dist/ko-KR.mjs +1 -1
- package/dist/lt-LT.mjs +1 -1
- package/dist/lv-LV.mjs +1 -1
- package/dist/nb-NO.mjs +1 -1
- package/dist/nl-NL.mjs +1 -1
- package/dist/pl-PL.mjs +1 -1
- package/dist/pt-BR.mjs +1 -1
- package/dist/pt-PT.mjs +1 -1
- package/dist/ro-RO.mjs +1 -1
- package/dist/ru-RU.mjs +1 -1
- package/dist/sk-SK.mjs +1 -1
- package/dist/sl-SI.mjs +1 -1
- package/dist/sr-SP.mjs +1 -1
- package/dist/sv-SE.mjs +1 -1
- package/dist/tr-TR.mjs +1 -1
- package/dist/types.d.ts +2 -2
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.mjs +1 -1
- package/dist/zh-CN.mjs +1 -1
- package/dist/zh-TW.mjs +1 -1
- package/package.json +15 -15
- package/src/Button.tsx +14 -1
- package/src/FieldButton.tsx +3 -3
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,62 +96,71 @@ 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
|
+
let isPendingProps = isPending ? {
|
|
110
|
+
onClick: (e)=>{
|
|
111
|
+
if (e.currentTarget instanceof HTMLButtonElement) e.preventDefault();
|
|
112
|
+
}
|
|
113
|
+
} : {
|
|
114
|
+
// no-op.
|
|
115
|
+
// Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.
|
|
116
|
+
onClick: ()=>{}
|
|
117
|
+
};
|
|
109
118
|
return /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$FocusRing), {
|
|
110
|
-
focusRingClass: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
119
|
+
focusRingClass: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'focus-ring'),
|
|
111
120
|
autoFocus: autoFocus
|
|
112
121
|
}, /*#__PURE__*/ (0, $l1zrX$react).createElement(Element, {
|
|
113
122
|
...styleProps,
|
|
114
|
-
...(0, $l1zrX$mergeProps)(buttonProps, hoverProps, focusProps),
|
|
123
|
+
...(0, $l1zrX$mergeProps)(buttonProps, hoverProps, focusProps, isPendingProps),
|
|
115
124
|
id: buttonId,
|
|
116
125
|
ref: domRef,
|
|
117
126
|
"data-variant": variant,
|
|
118
127
|
"data-style": style,
|
|
119
128
|
"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
|
-
|
|
129
|
+
"aria-disabled": isPending ? 'true' : undefined,
|
|
130
|
+
"aria-label": isPending ? isPendingAriaLiveLabel : buttonProps['aria-label'],
|
|
131
|
+
"aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby'],
|
|
132
|
+
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Button', {
|
|
133
|
+
'spectrum-Button--iconOnly': hasIcon && !hasLabel,
|
|
134
|
+
'is-disabled': isDisabled || isProgressVisible,
|
|
135
|
+
'is-active': isPressed,
|
|
136
|
+
'is-hovered': isHovered,
|
|
137
|
+
'spectrum-Button--pending': isProgressVisible
|
|
129
138
|
}, styleProps.className)
|
|
130
139
|
}, /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$SlotProvider), {
|
|
131
140
|
slots: {
|
|
132
141
|
icon: {
|
|
133
142
|
id: iconId,
|
|
134
|
-
size:
|
|
135
|
-
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
143
|
+
size: 'S',
|
|
144
|
+
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Icon')
|
|
136
145
|
},
|
|
137
146
|
text: {
|
|
138
147
|
id: textId,
|
|
139
|
-
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
148
|
+
UNSAFE_className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Button-label')
|
|
140
149
|
}
|
|
141
150
|
}
|
|
142
|
-
}, typeof children ===
|
|
151
|
+
}, typeof children === 'string' ? /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$Text), null, children) : children, isPending && /*#__PURE__*/ (0, $l1zrX$react).createElement("div", {
|
|
143
152
|
"aria-hidden": "true",
|
|
144
153
|
style: {
|
|
145
|
-
visibility: isProgressVisible ?
|
|
154
|
+
visibility: isProgressVisible ? 'visible' : 'hidden'
|
|
146
155
|
},
|
|
147
|
-
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))),
|
|
156
|
+
className: (0, $l1zrX$classNames)((0, ($parcel$interopDefault($l1zrX$button_vars_cssmodulejs))), 'spectrum-Button-circleLoader')
|
|
148
157
|
}, /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$ProgressCircle), {
|
|
149
158
|
"aria-label": isPendingAriaLiveLabel,
|
|
150
159
|
isIndeterminate: true,
|
|
151
160
|
size: "S",
|
|
152
161
|
staticColor: staticColor
|
|
153
162
|
})), isPending && /*#__PURE__*/ (0, $l1zrX$react).createElement((0, $l1zrX$react).Fragment, null, /*#__PURE__*/ (0, $l1zrX$react).createElement("div", {
|
|
154
|
-
"aria-live": isFocused ? ariaLive :
|
|
163
|
+
"aria-live": isFocused ? ariaLive : 'off'
|
|
155
164
|
}, isProgressVisible && /*#__PURE__*/ (0, $l1zrX$react).createElement("div", {
|
|
156
165
|
role: "img",
|
|
157
166
|
"aria-labelledby": isPendingAriaLiveLabelledby
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/button/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n classNames,\n SlotProvider,\n useFocusableRef,\n useHasChild,\n useSlotProps,\n useStyleProps\n} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {isAppleDevice, isFirefox, mergeProps, useId} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ElementType, ReactElement, useEffect, useState} from 'react';\nimport {SpectrumButtonProps} from '@react-types/button';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {useButton} from '@react-aria/button';\nimport {useFocus, useHover} from '@react-aria/interactions';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction disablePendingProps(props) {\n // Don't allow interaction while isPending is true\n if (props.isPending) {\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n props.onKeyDown = undefined;\n props.onKeyUp = undefined;\n props.onClick = undefined;\n props.href = undefined;\n }\n return props;\n}\n\nfunction Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useSlotProps(props, 'button');\n props = disablePendingProps(props);\n let {\n elementType: Element = 'button',\n children,\n variant,\n style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',\n staticColor,\n isDisabled,\n isPending,\n autoFocus,\n ...otherProps\n } = props;\n let domRef = useFocusableRef(ref);\n let {buttonProps, isPressed} = useButton(props, domRef);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let [isFocused, onFocusChange] = useState(false);\n let {focusProps} = useFocus({onFocusChange, isDisabled});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');\n let {styleProps} = useStyleProps(otherProps);\n let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);\n let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);\n // an aria label will block children and their labels from being read, this is undesirable for pending state\n let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n let backupButtonId = useId();\n let buttonId = buttonProps.id || backupButtonId;\n let iconId = useId();\n let textId = useId();\n let spinnerId = useId();\n\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n if (variant === 'cta') {\n variant = 'accent';\n } else if (variant === 'overBackground') {\n variant = 'primary';\n staticColor = 'white';\n }\n\n const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();\n const isPendingAriaLiveLabelledby = hasAriaLabel ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId) : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();\n\n let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';\n if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {\n ariaLive = 'off';\n }\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n <Element\n {...styleProps}\n {...mergeProps(buttonProps, hoverProps, focusProps)}\n id={buttonId}\n ref={domRef}\n data-variant={variant}\n data-style={style}\n data-static-color={staticColor || undefined}\n aria-disabled={isPending ? 'true' : undefined}\n aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}\n aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}\n className={\n classNames(\n styles,\n 'spectrum-Button',\n {\n 'spectrum-Button--iconOnly': hasIcon && !hasLabel,\n 'is-disabled': isDisabled || isProgressVisible,\n 'is-active': isPressed,\n 'is-hovered': isHovered,\n 'spectrum-Button--pending': isProgressVisible\n },\n styleProps.className\n )\n }>\n <SlotProvider\n slots={{\n icon: {\n id: iconId,\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n id: textId,\n UNSAFE_className: classNames(styles, 'spectrum-Button-label')\n }\n }}>\n {typeof children === 'string'\n ? <Text>{children}</Text>\n : children}\n {isPending && (\n <div\n aria-hidden=\"true\"\n style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}\n className={classNames(styles, 'spectrum-Button-circleLoader')}>\n <ProgressCircle\n aria-label={isPendingAriaLiveLabel}\n isIndeterminate\n size=\"S\"\n staticColor={staticColor} />\n </div>\n )}\n {isPending &&\n <>\n <div aria-live={isFocused ? ariaLive : 'off'}>\n {isProgressVisible &&\n <div role=\"img\" aria-labelledby={isPendingAriaLiveLabelledby} />\n }\n </div>\n {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.\n Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button\n https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari\n The aria-live may cause extra announcements in other browsers. */}\n <div id={spinnerId} role=\"img\" aria-label={isPendingAriaLiveLabel} />\n </>\n }\n </SlotProvider>\n </Element>\n </FocusRing>\n );\n}\n\n/**\n * Buttons allow users to perform an action or to navigate to another page.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nlet _Button = React.forwardRef(Button) as <T extends ElementType = 'button'>(props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_Button as Button};\n"],"names":[],"version":3,"file":"Button.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/button/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n classNames,\n SlotProvider,\n useFocusableRef,\n useHasChild,\n useSlotProps,\n useStyleProps\n} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {isAppleDevice, isFirefox, mergeProps, useId} from '@react-aria/utils';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {ElementType, ReactElement, useEffect, useState} from 'react';\nimport {SpectrumButtonProps} from '@react-types/button';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {useButton} from '@react-aria/button';\nimport {useFocus, useHover} from '@react-aria/interactions';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\nfunction disablePendingProps(props) {\n // Don't allow interaction while isPending is true\n if (props.isPending) {\n props.onPress = undefined;\n props.onPressStart = undefined;\n props.onPressEnd = undefined;\n props.onPressChange = undefined;\n props.onPressUp = undefined;\n props.onKeyDown = undefined;\n props.onKeyUp = undefined;\n props.onClick = undefined;\n props.href = undefined;\n }\n return props;\n}\n\nfunction Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useSlotProps(props, 'button');\n props = disablePendingProps(props);\n let {\n elementType: Element = 'button',\n children,\n variant,\n style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',\n staticColor,\n isDisabled,\n isPending,\n autoFocus,\n ...otherProps\n } = props;\n let domRef = useFocusableRef(ref);\n let {buttonProps, isPressed} = useButton(props, domRef);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let [isFocused, onFocusChange] = useState(false);\n let {focusProps} = useFocus({onFocusChange, isDisabled});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');\n let {styleProps} = useStyleProps(otherProps);\n let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);\n let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);\n // an aria label will block children and their labels from being read, this is undesirable for pending state\n let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n let backupButtonId = useId();\n let buttonId = buttonProps.id || backupButtonId;\n let iconId = useId();\n let textId = useId();\n let spinnerId = useId();\n\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n if (variant === 'cta') {\n variant = 'accent';\n } else if (variant === 'overBackground') {\n variant = 'primary';\n staticColor = 'white';\n }\n\n const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();\n const isPendingAriaLiveLabelledby = hasAriaLabel ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId) : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();\n\n let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';\n if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {\n ariaLive = 'off';\n }\n\n let isPendingProps = isPending ? {\n onClick: (e) => {\n if (e.currentTarget instanceof HTMLButtonElement) {\n e.preventDefault();\n }\n }\n } : {\n // no-op. \n // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.\n onClick: () => {}\n };\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n <Element\n {...styleProps}\n {...mergeProps(buttonProps, hoverProps, focusProps, isPendingProps)}\n id={buttonId}\n ref={domRef}\n data-variant={variant}\n data-style={style}\n data-static-color={staticColor || undefined}\n aria-disabled={isPending ? 'true' : undefined}\n aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}\n aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}\n className={\n classNames(\n styles,\n 'spectrum-Button',\n {\n 'spectrum-Button--iconOnly': hasIcon && !hasLabel,\n 'is-disabled': isDisabled || isProgressVisible,\n 'is-active': isPressed,\n 'is-hovered': isHovered,\n 'spectrum-Button--pending': isProgressVisible\n },\n styleProps.className\n )\n }>\n <SlotProvider\n slots={{\n icon: {\n id: iconId,\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n id: textId,\n UNSAFE_className: classNames(styles, 'spectrum-Button-label')\n }\n }}>\n {typeof children === 'string'\n ? <Text>{children}</Text>\n : children}\n {isPending && (\n <div\n aria-hidden=\"true\"\n style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}\n className={classNames(styles, 'spectrum-Button-circleLoader')}>\n <ProgressCircle\n aria-label={isPendingAriaLiveLabel}\n isIndeterminate\n size=\"S\"\n staticColor={staticColor} />\n </div>\n )}\n {isPending &&\n <>\n <div aria-live={isFocused ? ariaLive : 'off'}>\n {isProgressVisible &&\n <div role=\"img\" aria-labelledby={isPendingAriaLiveLabelledby} />\n }\n </div>\n {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.\n Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button\n https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari\n The aria-live may cause extra announcements in other browsers. */}\n <div id={spinnerId} role=\"img\" aria-label={isPendingAriaLiveLabel} />\n </>\n }\n </SlotProvider>\n </Element>\n </FocusRing>\n );\n}\n\n/**\n * Buttons allow users to perform an action or to navigate to another page.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nlet _Button = React.forwardRef(Button) as <T extends ElementType = 'button'>(props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_Button as Button};\n"],"names":[],"version":3,"file":"Button.module.js.map"}
|
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
|
}
|
|
@@ -67,4 +67,4 @@ let $dd24e555a16de2ae$export$13ec83e50bf04290 = /*#__PURE__*/ (0, $d0kJV$react).
|
|
|
67
67
|
|
|
68
68
|
|
|
69
69
|
export {$dd24e555a16de2ae$export$13ec83e50bf04290 as ClearButton};
|
|
70
|
-
//# sourceMappingURL=ClearButton.
|
|
70
|
+
//# sourceMappingURL=ClearButton.module.js.map
|
|
@@ -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)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAoBD,WAAW;AACX,SAAS,kCAAY,KAAuB,EAAE,GAAiB;IAC7D,QAAQ,CAAA,GAAA,sCAAW,EAAE,OAAO;IAC5B,IAAI,WACF,OAAO,cACP,UAAU,mBACV,eAAe,aACf,SAAS,YACT,QAAQ,aACR,SAAS,YACT,QAAQ,kBACR,cAAc,EACd,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,eAAC,WAAW,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gCAAQ,EAAE,OAAO;IAChD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,qBACE,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,cAAc;QAAiB,WAAW;qBACtF,0DAAC;QACE,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;QACvC,KAAK;QACL,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,wBACA;YACE,+BAA+B;YAC/B,aAAa,YAAY;YACzB,eAAe;YACf,iCAAiC,aAAa,oBAAoB;YAClE,cAAc;QAChB,GACA,WAAW,SAAS;qBAGxB,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,MAAM;gBACJ,MAAM;gBACN,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACvC;QACF;OACC;AAKX;AAEA,IAAI,0DAAe,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/button/src/FieldButton.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonProps} from '@react-types/button';\nimport {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, FocusableRef, StyleProps} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAoBD,WAAW;AACX,SAAS,kCAAY,KAAuB,EAAE,GAAiB;IAC7D,QAAQ,CAAA,GAAA,sCAAW,EAAE,OAAO;IAC5B,IAAI,WACF,OAAO,cACP,UAAU,mBACV,eAAe,aACf,SAAS,YACT,QAAQ,aACR,SAAS,YACT,QAAQ,kBACR,cAAc,EACd,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,eAAC,WAAW,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gCAAQ,EAAE,OAAO;IAChD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,qBACE,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG,cAAc;QAAiB,WAAW;qBACtF,0DAAC;QACE,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;QACvC,KAAK;QACL,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,wBACA;YACE,+BAA+B;YAC/B,aAAa,YAAY;YACzB,eAAe;YACf,iCAAiC,aAAa,oBAAoB;YAClE,cAAc;QAChB,GACA,WAAW,SAAS;qBAGxB,0DAAC,CAAA,GAAA,sCAAW;QACV,OAAO;YACL,MAAM;gBACJ,MAAM;gBACN,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACvC;QACF;OACC;AAKX;AAEA,IAAI,0DAAe,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/button/src/FieldButton.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonProps} from '@react-types/button';\nimport {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, FocusableRef, RefObject, StyleProps} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {useButton} from '@react-aria/button';\nimport {useHover} from '@react-aria/interactions';\n\ninterface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {\n isQuiet?: boolean,\n isActive?: boolean,\n validationState?: 'valid' | 'invalid',\n isInvalid?: boolean,\n focusRingClass?: string\n}\n\n// @private\nfunction FieldButton(props: FieldButtonProps, ref: FocusableRef) {\n props = useSlotProps(props, 'button');\n let {\n isQuiet,\n isDisabled,\n validationState,\n isInvalid,\n children,\n autoFocus,\n isActive,\n focusRingClass,\n ...otherProps\n } = props;\n let domRef = useFocusableRef(ref) as RefObject<HTMLButtonElement | null>;\n let {buttonProps, isPressed} = useButton(props, domRef);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let {styleProps} = useStyleProps(otherProps);\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring', focusRingClass)} autoFocus={autoFocus}>\n <button\n {...mergeProps(buttonProps, hoverProps)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-FieldButton',\n {\n 'spectrum-FieldButton--quiet': isQuiet,\n 'is-active': isActive || isPressed,\n 'is-disabled': isDisabled,\n 'spectrum-FieldButton--invalid': isInvalid || validationState === 'invalid',\n 'is-hovered': isHovered\n },\n styleProps.className\n )\n }>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n }\n }}>\n {children}\n </SlotProvider>\n </button>\n </FocusRing>\n );\n}\n\nlet _FieldButton = React.forwardRef(FieldButton);\nexport {_FieldButton as FieldButton};\n"],"names":[],"version":3,"file":"FieldButton.main.js.map"}
|
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)));
|
|
@@ -64,4 +64,4 @@ let $b43bd559b476d0c4$export$47dc48f595b075da = /*#__PURE__*/ (0, $b8ZoF$react).
|
|
|
64
64
|
|
|
65
65
|
|
|
66
66
|
export {$b43bd559b476d0c4$export$47dc48f595b075da as FieldButton};
|
|
67
|
-
//# sourceMappingURL=FieldButton.
|
|
67
|
+
//# sourceMappingURL=FieldButton.module.js.map
|
|
@@ -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)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAoBD,WAAW;AACX,SAAS,kCAAY,KAAuB,EAAE,GAAiB;IAC7D,QAAQ,CAAA,GAAA,mBAAW,EAAE,OAAO;IAC5B,IAAI,WACF,OAAO,cACP,UAAU,mBACV,eAAe,aACf,SAAS,YACT,QAAQ,aACR,SAAS,YACT,QAAQ,kBACR,cAAc,EACd,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,eAAC,WAAW,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ,EAAE,OAAO;IAChD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAEjC,qBACE,gCAAC,CAAA,GAAA,gBAAQ;QAAE,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG,cAAc;QAAiB,WAAW;qBACtF,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QACvC,KAAK;QACL,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,wDAAK,GACL,wBACA;YACE,+BAA+B;YAC/B,aAAa,YAAY;YACzB,eAAe;YACf,iCAAiC,aAAa,oBAAoB;YAClE,cAAc;QAChB,GACA,WAAW,SAAS;qBAGxB,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,MAAM;gBACJ,MAAM;gBACN,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YACvC;QACF;OACC;AAKX;AAEA,IAAI,0DAAe,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/button/src/FieldButton.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonProps} from '@react-types/button';\nimport {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, FocusableRef, StyleProps} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAoBD,WAAW;AACX,SAAS,kCAAY,KAAuB,EAAE,GAAiB;IAC7D,QAAQ,CAAA,GAAA,mBAAW,EAAE,OAAO;IAC5B,IAAI,WACF,OAAO,cACP,UAAU,mBACV,eAAe,aACf,SAAS,YACT,QAAQ,aACR,SAAS,YACT,QAAQ,kBACR,cAAc,EACd,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,eAAC,WAAW,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ,EAAE,OAAO;IAChD,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAEjC,qBACE,gCAAC,CAAA,GAAA,gBAAQ;QAAE,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG,cAAc;QAAiB,WAAW;qBACtF,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QACvC,KAAK;QACL,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,wDAAK,GACL,wBACA;YACE,+BAA+B;YAC/B,aAAa,YAAY;YACzB,eAAe;YACf,iCAAiC,aAAa,oBAAoB;YAClE,cAAc;QAChB,GACA,WAAW,SAAS;qBAGxB,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,MAAM;gBACJ,MAAM;gBACN,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YACvC;QACF;OACC;AAKX;AAEA,IAAI,0DAAe,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/button/src/FieldButton.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonProps} from '@react-types/button';\nimport {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, FocusableRef, RefObject, StyleProps} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {useButton} from '@react-aria/button';\nimport {useHover} from '@react-aria/interactions';\n\ninterface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {\n isQuiet?: boolean,\n isActive?: boolean,\n validationState?: 'valid' | 'invalid',\n isInvalid?: boolean,\n focusRingClass?: string\n}\n\n// @private\nfunction FieldButton(props: FieldButtonProps, ref: FocusableRef) {\n props = useSlotProps(props, 'button');\n let {\n isQuiet,\n isDisabled,\n validationState,\n isInvalid,\n children,\n autoFocus,\n isActive,\n focusRingClass,\n ...otherProps\n } = props;\n let domRef = useFocusableRef(ref) as RefObject<HTMLButtonElement | null>;\n let {buttonProps, isPressed} = useButton(props, domRef);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let {styleProps} = useStyleProps(otherProps);\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring', focusRingClass)} autoFocus={autoFocus}>\n <button\n {...mergeProps(buttonProps, hoverProps)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-FieldButton',\n {\n 'spectrum-FieldButton--quiet': isQuiet,\n 'is-active': isActive || isPressed,\n 'is-disabled': isDisabled,\n 'spectrum-FieldButton--invalid': isInvalid || validationState === 'invalid',\n 'is-hovered': isHovered\n },\n styleProps.className\n )\n }>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n }\n }}>\n {children}\n </SlotProvider>\n </button>\n </FocusRing>\n );\n}\n\nlet _FieldButton = React.forwardRef(FieldButton);\nexport {_FieldButton as FieldButton};\n"],"names":[],"version":3,"file":"FieldButton.module.js.map"}
|
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
|
/**
|
|
@@ -62,4 +62,4 @@ function $45108e3c482ee88b$var$LogicButton(props, ref) {
|
|
|
62
62
|
|
|
63
63
|
|
|
64
64
|
export {$45108e3c482ee88b$export$9b0b80fed00ba8b1 as LogicButton};
|
|
65
|
-
//# sourceMappingURL=LogicButton.
|
|
65
|
+
//# sourceMappingURL=LogicButton.module.js.map
|
|
@@ -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
|
/**
|