@react-spectrum/button 3.16.9 → 3.16.11
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 +3 -7
- package/dist/ActionButton.main.js.map +1 -1
- package/dist/ActionButton.mjs +3 -7
- package/dist/ActionButton.module.js +3 -7
- package/dist/ActionButton.module.js.map +1 -1
- package/dist/Button.main.js +3 -8
- package/dist/Button.main.js.map +1 -1
- package/dist/Button.mjs +3 -8
- package/dist/Button.module.js +3 -8
- package/dist/Button.module.js.map +1 -1
- package/dist/ClearButton.main.js +3 -4
- package/dist/ClearButton.main.js.map +1 -1
- package/dist/ClearButton.mjs +3 -4
- package/dist/ClearButton.module.js +3 -4
- package/dist/ClearButton.module.js.map +1 -1
- package/dist/FieldButton.main.js +3 -5
- package/dist/FieldButton.main.js.map +1 -1
- package/dist/FieldButton.mjs +3 -5
- package/dist/FieldButton.module.js +3 -5
- package/dist/FieldButton.module.js.map +1 -1
- package/dist/LogicButton.main.js +3 -6
- package/dist/LogicButton.main.js.map +1 -1
- package/dist/LogicButton.mjs +3 -6
- package/dist/LogicButton.module.js +3 -6
- package/dist/LogicButton.module.js.map +1 -1
- package/dist/ToggleButton.main.js +3 -7
- package/dist/ToggleButton.main.js.map +1 -1
- package/dist/ToggleButton.mjs +3 -7
- package/dist/ToggleButton.module.js +3 -7
- package/dist/ToggleButton.module.js.map +1 -1
- package/dist/types.d.ts +6 -6
- package/dist/types.d.ts.map +1 -1
- package/dist/{vars.6caec7fe.css → vars.98146794.css} +3 -3
- package/dist/{vars.6caec7fe.css.map → vars.98146794.css.map} +1 -1
- package/package.json +14 -14
- package/src/ActionButton.tsx +6 -9
- package/src/Button.tsx +7 -10
- package/src/ClearButton.tsx +2 -5
- package/src/FieldButton.tsx +2 -5
- package/src/LogicButton.tsx +5 -8
- package/src/ToggleButton.tsx +6 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAqBM,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAAuB,EAAE,GAAiB;IACzG,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","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\nexport const FieldButton = React.forwardRef(function 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"],"names":[],"version":3,"file":"FieldButton.module.js.map"}
|
package/dist/LogicButton.main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
require("./vars.
|
|
1
|
+
require("./vars.98146794.css");
|
|
2
2
|
var $afc5a4514aca2340$exports = require("./button_vars_css.main.js");
|
|
3
3
|
var $adWKT$reactspectrumutils = require("@react-spectrum/utils");
|
|
4
4
|
var $adWKT$reactariafocus = require("@react-aria/focus");
|
|
@@ -36,7 +36,7 @@ $parcel$export(module.exports, "LogicButton", () => $3bd294eda342b0c4$export$9b0
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
const $3bd294eda342b0c4$export$9b0b80fed00ba8b1 = /*#__PURE__*/ (0, ($parcel$interopDefault($adWKT$react))).forwardRef(function LogicButton(props, ref) {
|
|
40
40
|
props = (0, $adWKT$reactspectrumprovider.useProviderProps)(props);
|
|
41
41
|
let { variant: variant, children: children, isDisabled: isDisabled, autoFocus: autoFocus, ...otherProps } = props;
|
|
42
42
|
let domRef = (0, $adWKT$reactspectrumutils.useFocusableRef)(ref);
|
|
@@ -61,10 +61,7 @@ function $3bd294eda342b0c4$var$LogicButton(props, ref) {
|
|
|
61
61
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($adWKT$react))).createElement("span", {
|
|
62
62
|
className: (0, $adWKT$reactspectrumutils.classNames)((0, ($parcel$interopDefault($afc5a4514aca2340$exports))), 'spectrum-Button-label')
|
|
63
63
|
}, children)));
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* A LogicButton displays an operator within a boolean logic sequence.
|
|
67
|
-
*/ let $3bd294eda342b0c4$export$9b0b80fed00ba8b1 = /*#__PURE__*/ (0, ($parcel$interopDefault($adWKT$react))).forwardRef($3bd294eda342b0c4$var$LogicButton);
|
|
64
|
+
});
|
|
68
65
|
|
|
69
66
|
|
|
70
67
|
//# sourceMappingURL=LogicButton.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAgBM,MAAM,0DAAc,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAAoC;IACpI,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,WACF,OAAO,YACP,QAAQ,cACR,UAAU,aACV,SAAS,EACT,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;QAAe,WAAW;qBACtE,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;QACvC,KAAK;QACL,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,wBACA;YACE,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE;YACtC,eAAe;YACf,aAAa;YACb,cAAc;QAChB,GACA,WAAW,SAAS;qBAGxB,0DAAC;QAAK,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;OAA2B;AAIvE","sources":["packages/@react-spectrum/button/src/LogicButton.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 {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React from 'react';\nimport {SpectrumLogicButtonProps} from '@react-types/button';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {useButton} from '@react-aria/button';\nimport {useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * A LogicButton displays an operator within a boolean logic sequence.\n */\nexport const LogicButton = React.forwardRef(function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n props = useProviderProps(props);\n let {\n variant,\n children,\n isDisabled,\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 {styleProps} = useStyleProps(otherProps);\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n <button\n {...styleProps}\n {...mergeProps(buttonProps, hoverProps)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-LogicButton',\n {\n [`spectrum-LogicButton--${variant}`]: variant,\n 'is-disabled': isDisabled,\n 'is-active': isPressed,\n 'is-hovered': isHovered\n },\n styleProps.className\n )\n }>\n <span className={classNames(styles, 'spectrum-Button-label')}>{children}</span>\n </button>\n </FocusRing>\n );\n});\n"],"names":[],"version":3,"file":"LogicButton.main.js.map"}
|
package/dist/LogicButton.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.98146794.css";
|
|
2
2
|
import $g8O0d$button_vars_cssmodulejs from "./button_vars_css.mjs";
|
|
3
3
|
import {useFocusableRef as $g8O0d$useFocusableRef, useStyleProps as $g8O0d$useStyleProps, classNames as $g8O0d$classNames} from "@react-spectrum/utils";
|
|
4
4
|
import {FocusRing as $g8O0d$FocusRing} from "@react-aria/focus";
|
|
@@ -30,7 +30,7 @@ function $parcel$interopDefault(a) {
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
const $45108e3c482ee88b$export$9b0b80fed00ba8b1 = /*#__PURE__*/ (0, $g8O0d$react).forwardRef(function LogicButton(props, ref) {
|
|
34
34
|
props = (0, $g8O0d$useProviderProps)(props);
|
|
35
35
|
let { variant: variant, children: children, isDisabled: isDisabled, autoFocus: autoFocus, ...otherProps } = props;
|
|
36
36
|
let domRef = (0, $g8O0d$useFocusableRef)(ref);
|
|
@@ -55,10 +55,7 @@ function $45108e3c482ee88b$var$LogicButton(props, ref) {
|
|
|
55
55
|
}, /*#__PURE__*/ (0, $g8O0d$react).createElement("span", {
|
|
56
56
|
className: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))), 'spectrum-Button-label')
|
|
57
57
|
}, children)));
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* A LogicButton displays an operator within a boolean logic sequence.
|
|
61
|
-
*/ let $45108e3c482ee88b$export$9b0b80fed00ba8b1 = /*#__PURE__*/ (0, $g8O0d$react).forwardRef($45108e3c482ee88b$var$LogicButton);
|
|
58
|
+
});
|
|
62
59
|
|
|
63
60
|
|
|
64
61
|
export {$45108e3c482ee88b$export$9b0b80fed00ba8b1 as LogicButton};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.98146794.css";
|
|
2
2
|
import $g8O0d$button_vars_cssmodulejs from "./button_vars_css.module.js";
|
|
3
3
|
import {useFocusableRef as $g8O0d$useFocusableRef, useStyleProps as $g8O0d$useStyleProps, classNames as $g8O0d$classNames} from "@react-spectrum/utils";
|
|
4
4
|
import {FocusRing as $g8O0d$FocusRing} from "@react-aria/focus";
|
|
@@ -30,7 +30,7 @@ function $parcel$interopDefault(a) {
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
const $45108e3c482ee88b$export$9b0b80fed00ba8b1 = /*#__PURE__*/ (0, $g8O0d$react).forwardRef(function LogicButton(props, ref) {
|
|
34
34
|
props = (0, $g8O0d$useProviderProps)(props);
|
|
35
35
|
let { variant: variant, children: children, isDisabled: isDisabled, autoFocus: autoFocus, ...otherProps } = props;
|
|
36
36
|
let domRef = (0, $g8O0d$useFocusableRef)(ref);
|
|
@@ -55,10 +55,7 @@ function $45108e3c482ee88b$var$LogicButton(props, ref) {
|
|
|
55
55
|
}, /*#__PURE__*/ (0, $g8O0d$react).createElement("span", {
|
|
56
56
|
className: (0, $g8O0d$classNames)((0, ($parcel$interopDefault($g8O0d$button_vars_cssmodulejs))), 'spectrum-Button-label')
|
|
57
57
|
}, children)));
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* A LogicButton displays an operator within a boolean logic sequence.
|
|
61
|
-
*/ let $45108e3c482ee88b$export$9b0b80fed00ba8b1 = /*#__PURE__*/ (0, $g8O0d$react).forwardRef($45108e3c482ee88b$var$LogicButton);
|
|
58
|
+
});
|
|
62
59
|
|
|
63
60
|
|
|
64
61
|
export {$45108e3c482ee88b$export$9b0b80fed00ba8b1 as LogicButton};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAgBM,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAAoC;IACpI,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,IAAI,WACF,OAAO,YACP,QAAQ,cACR,UAAU,aACV,SAAS,EACT,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;QAAe,WAAW;qBACtE,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QACvC,KAAK;QACL,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,wDAAK,GACL,wBACA;YACE,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE;YACtC,eAAe;YACf,aAAa;YACb,cAAc;QAChB,GACA,WAAW,SAAS;qBAGxB,gCAAC;QAAK,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;OAA2B;AAIvE","sources":["packages/@react-spectrum/button/src/LogicButton.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 {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React from 'react';\nimport {SpectrumLogicButtonProps} from '@react-types/button';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {useButton} from '@react-aria/button';\nimport {useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * A LogicButton displays an operator within a boolean logic sequence.\n */\nexport const LogicButton = React.forwardRef(function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n props = useProviderProps(props);\n let {\n variant,\n children,\n isDisabled,\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 {styleProps} = useStyleProps(otherProps);\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n <button\n {...styleProps}\n {...mergeProps(buttonProps, hoverProps)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-LogicButton',\n {\n [`spectrum-LogicButton--${variant}`]: variant,\n 'is-disabled': isDisabled,\n 'is-active': isPressed,\n 'is-hovered': isHovered\n },\n styleProps.className\n )\n }>\n <span className={classNames(styles, 'spectrum-Button-label')}>{children}</span>\n </button>\n </FocusRing>\n );\n});\n"],"names":[],"version":3,"file":"LogicButton.module.js.map"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
require("./vars.
|
|
1
|
+
require("./vars.98146794.css");
|
|
2
2
|
var $afc5a4514aca2340$exports = require("./button_vars_css.main.js");
|
|
3
3
|
var $58xyJ$reactspectrumutils = require("@react-spectrum/utils");
|
|
4
4
|
var $58xyJ$reactariafocus = require("@react-aria/focus");
|
|
@@ -40,7 +40,7 @@ $parcel$export(module.exports, "ToggleButton", () => $b5c927da7d8f1be6$export$d2
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
const $b5c927da7d8f1be6$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, ($parcel$interopDefault($58xyJ$react))).forwardRef(function ToggleButton(props, ref) {
|
|
44
44
|
props = (0, $58xyJ$reactspectrumprovider.useProviderProps)(props);
|
|
45
45
|
let { isQuiet: isQuiet, isDisabled: isDisabled, isEmphasized: isEmphasized, staticColor: staticColor, children: children, autoFocus: autoFocus, ...otherProps } = props;
|
|
46
46
|
let domRef = (0, $58xyJ$reactspectrumutils.useFocusableRef)(ref);
|
|
@@ -80,11 +80,7 @@ function $b5c927da7d8f1be6$var$ToggleButton(props, ref) {
|
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
}, typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, ($parcel$interopDefault($58xyJ$react))).createElement((0, $58xyJ$reactspectrumtext.Text), null, children) : children)));
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* ToggleButtons allow users to toggle a selection on or off, for example
|
|
86
|
-
* switching between two states or modes.
|
|
87
|
-
*/ let $b5c927da7d8f1be6$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, ($parcel$interopDefault($58xyJ$react))).forwardRef($b5c927da7d8f1be6$var$ToggleButton);
|
|
83
|
+
});
|
|
88
84
|
|
|
89
85
|
|
|
90
86
|
//# sourceMappingURL=ToggleButton.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAmBM,MAAM,0DAAe,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,aAAa,KAAgC,EAAE,GAAoC;IACvI,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,WACF,OAAO,cACP,UAAU,gBACV,YAAY,eACZ,WAAW,YACX,QAAQ,aACR,SAAS,EACT,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,QAAQ,CAAA,GAAA,wCAAa,EAAE;IAC3B,IAAI,eAAC,WAAW,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,sCAAc,EAAE,OAAO,OAAO;IAC7D,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,aAAa,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,0DAAC,CAAA,GAAA,+BAAQ;QAAE,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAAe,WAAW;qBACtE,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,gCAAS,EAAE,aAAa,WAAW;QACvC,KAAK;QACL,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,yBACA;YACE,gCAAgC;YAChC,qCAAqC;YACrC,sCAAsC,CAAC,CAAC;YACxC,sCAAsC,gBAAgB;YACtD,sCAAsC,gBAAgB;YACtD,aAAa;YACb,eAAe;YACf,cAAc;YACd,eAAe,MAAM,UAAU;QACjC,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;YACA,MAAM;gBACJ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;YACvC;QACF;OACC,OAAO,aAAa,YAAY,2BAC7B,0DAAC,CAAA,GAAA,6BAAG,SAAG,YACP;AAKd","sources":["packages/@react-spectrum/button/src/ToggleButton.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 {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React from 'react';\nimport {SpectrumToggleButtonProps} from '@react-types/button';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useToggleButton} from '@react-aria/button';\nimport {useToggleState} from '@react-stately/toggle';\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = React.forwardRef(function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n props = useProviderProps(props);\n let {\n isQuiet,\n isDisabled,\n isEmphasized,\n staticColor,\n children,\n autoFocus,\n ...otherProps\n } = props;\n\n let domRef = useFocusableRef(ref);\n let state = useToggleState(props);\n let {buttonProps, isPressed} = useToggleButton(props, state, domRef);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let {styleProps} = useStyleProps(otherProps);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n <button\n {...styleProps}\n {...mergeProps(buttonProps, hoverProps)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-ActionButton',\n {\n 'spectrum-ActionButton--quiet': isQuiet,\n 'spectrum-ActionButton--emphasized': isEmphasized,\n 'spectrum-ActionButton--staticColor': !!staticColor,\n 'spectrum-ActionButton--staticWhite': staticColor === 'white',\n 'spectrum-ActionButton--staticBlack': staticColor === 'black',\n 'is-active': isPressed,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-selected': state.isSelected\n },\n styleProps.className\n )\n }>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-ActionButton-label')\n }\n }}>\n {typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children}\n </SlotProvider>\n </button>\n </FocusRing>\n );\n});\n"],"names":[],"version":3,"file":"ToggleButton.main.js.map"}
|
package/dist/ToggleButton.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.98146794.css";
|
|
2
2
|
import $3XyjH$button_vars_cssmodulejs from "./button_vars_css.mjs";
|
|
3
3
|
import {useFocusableRef as $3XyjH$useFocusableRef, useStyleProps as $3XyjH$useStyleProps, classNames as $3XyjH$classNames, SlotProvider as $3XyjH$SlotProvider} from "@react-spectrum/utils";
|
|
4
4
|
import {FocusRing as $3XyjH$FocusRing} from "@react-aria/focus";
|
|
@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
const $3979c7c23b0bd270$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3XyjH$react).forwardRef(function ToggleButton(props, ref) {
|
|
38
38
|
props = (0, $3XyjH$useProviderProps)(props);
|
|
39
39
|
let { isQuiet: isQuiet, isDisabled: isDisabled, isEmphasized: isEmphasized, staticColor: staticColor, children: children, autoFocus: autoFocus, ...otherProps } = props;
|
|
40
40
|
let domRef = (0, $3XyjH$useFocusableRef)(ref);
|
|
@@ -74,11 +74,7 @@ function $3979c7c23b0bd270$var$ToggleButton(props, ref) {
|
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}, typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, $3XyjH$react).createElement((0, $3XyjH$Text), null, children) : children)));
|
|
77
|
-
}
|
|
78
|
-
/**
|
|
79
|
-
* ToggleButtons allow users to toggle a selection on or off, for example
|
|
80
|
-
* switching between two states or modes.
|
|
81
|
-
*/ let $3979c7c23b0bd270$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3XyjH$react).forwardRef($3979c7c23b0bd270$var$ToggleButton);
|
|
77
|
+
});
|
|
82
78
|
|
|
83
79
|
|
|
84
80
|
export {$3979c7c23b0bd270$export$d2b052e7b4be1756 as ToggleButton};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.98146794.css";
|
|
2
2
|
import $3XyjH$button_vars_cssmodulejs from "./button_vars_css.module.js";
|
|
3
3
|
import {useFocusableRef as $3XyjH$useFocusableRef, useStyleProps as $3XyjH$useStyleProps, classNames as $3XyjH$classNames, SlotProvider as $3XyjH$SlotProvider} from "@react-spectrum/utils";
|
|
4
4
|
import {FocusRing as $3XyjH$FocusRing} from "@react-aria/focus";
|
|
@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
const $3979c7c23b0bd270$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3XyjH$react).forwardRef(function ToggleButton(props, ref) {
|
|
38
38
|
props = (0, $3XyjH$useProviderProps)(props);
|
|
39
39
|
let { isQuiet: isQuiet, isDisabled: isDisabled, isEmphasized: isEmphasized, staticColor: staticColor, children: children, autoFocus: autoFocus, ...otherProps } = props;
|
|
40
40
|
let domRef = (0, $3XyjH$useFocusableRef)(ref);
|
|
@@ -74,11 +74,7 @@ function $3979c7c23b0bd270$var$ToggleButton(props, ref) {
|
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
}, typeof children === 'string' || isTextOnly ? /*#__PURE__*/ (0, $3XyjH$react).createElement((0, $3XyjH$Text), null, children) : children)));
|
|
77
|
-
}
|
|
78
|
-
/**
|
|
79
|
-
* ToggleButtons allow users to toggle a selection on or off, for example
|
|
80
|
-
* switching between two states or modes.
|
|
81
|
-
*/ let $3979c7c23b0bd270$export$d2b052e7b4be1756 = /*#__PURE__*/ (0, $3XyjH$react).forwardRef($3979c7c23b0bd270$var$ToggleButton);
|
|
77
|
+
});
|
|
82
78
|
|
|
83
79
|
|
|
84
80
|
export {$3979c7c23b0bd270$export$d2b052e7b4be1756 as ToggleButton};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAmBM,MAAM,0DAAe,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,aAAa,KAAgC,EAAE,GAAoC;IACvI,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,IAAI,WACF,OAAO,cACP,UAAU,gBACV,YAAY,eACZ,WAAW,YACX,QAAQ,aACR,SAAS,EACT,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,QAAQ,CAAA,GAAA,qBAAa,EAAE;IAC3B,IAAI,eAAC,WAAW,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,OAAO;IAC7D,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAAC;IAAU;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,aAAa,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,YAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gCAAC,CAAA,GAAA,gBAAQ;QAAE,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;QAAe,WAAW;qBACtE,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,iBAAS,EAAE,aAAa,WAAW;QACvC,KAAK;QACL,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,wDAAK,GACL,yBACA;YACE,gCAAgC;YAChC,qCAAqC;YACrC,sCAAsC,CAAC,CAAC;YACxC,sCAAsC,gBAAgB;YACtD,sCAAsC,gBAAgB;YACtD,aAAa;YACb,eAAe;YACf,cAAc;YACd,eAAe,MAAM,UAAU;QACjC,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;YACA,MAAM;gBACJ,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,wDAAK,GAAG;YACvC;QACF;OACC,OAAO,aAAa,YAAY,2BAC7B,gCAAC,CAAA,GAAA,WAAG,SAAG,YACP;AAKd","sources":["packages/@react-spectrum/button/src/ToggleButton.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 {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {FocusableRef} from '@react-types/shared';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport React from 'react';\nimport {SpectrumToggleButtonProps} from '@react-types/button';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {Text} from '@react-spectrum/text';\nimport {useHover} from '@react-aria/interactions';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useToggleButton} from '@react-aria/button';\nimport {useToggleState} from '@react-stately/toggle';\n\n/**\n * ToggleButtons allow users to toggle a selection on or off, for example\n * switching between two states or modes.\n */\nexport const ToggleButton = React.forwardRef(function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n props = useProviderProps(props);\n let {\n isQuiet,\n isDisabled,\n isEmphasized,\n staticColor,\n children,\n autoFocus,\n ...otherProps\n } = props;\n\n let domRef = useFocusableRef(ref);\n let state = useToggleState(props);\n let {buttonProps, isPressed} = useToggleButton(props, state, domRef);\n let {hoverProps, isHovered} = useHover({isDisabled});\n let {styleProps} = useStyleProps(otherProps);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n <button\n {...styleProps}\n {...mergeProps(buttonProps, hoverProps)}\n ref={domRef}\n className={\n classNames(\n styles,\n 'spectrum-ActionButton',\n {\n 'spectrum-ActionButton--quiet': isQuiet,\n 'spectrum-ActionButton--emphasized': isEmphasized,\n 'spectrum-ActionButton--staticColor': !!staticColor,\n 'spectrum-ActionButton--staticWhite': staticColor === 'white',\n 'spectrum-ActionButton--staticBlack': staticColor === 'black',\n 'is-active': isPressed,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered,\n 'is-selected': state.isSelected\n },\n styleProps.className\n )\n }>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-ActionButton-label')\n }\n }}>\n {typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children}\n </SlotProvider>\n </button>\n </FocusRing>\n );\n});\n"],"names":[],"version":3,"file":"ToggleButton.module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -6,14 +6,14 @@ import { SpectrumButtonProps, SpectrumActionButtonProps, ButtonProps, SpectrumLo
|
|
|
6
6
|
* They have multiple styles for various needs, and are ideal for calling attention to
|
|
7
7
|
* where a user needs to do something in order to move forward in a flow.
|
|
8
8
|
*/
|
|
9
|
-
export
|
|
9
|
+
export const Button: <T extends ElementType = "button">(props: SpectrumButtonProps<T> & {
|
|
10
10
|
ref?: FocusableRef<HTMLElement>;
|
|
11
11
|
}) => ReactElement;
|
|
12
12
|
/**
|
|
13
13
|
* ActionButtons allow users to perform an action.
|
|
14
14
|
* They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
|
|
15
15
|
*/
|
|
16
|
-
export
|
|
16
|
+
export const ActionButton: React.ForwardRefExoticComponent<SpectrumActionButtonProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
|
|
17
17
|
interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {
|
|
18
18
|
isQuiet?: boolean;
|
|
19
19
|
isActive?: boolean;
|
|
@@ -21,23 +21,23 @@ interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {
|
|
|
21
21
|
isInvalid?: boolean;
|
|
22
22
|
focusRingClass?: string;
|
|
23
23
|
}
|
|
24
|
-
export
|
|
24
|
+
export const FieldButton: React.ForwardRefExoticComponent<FieldButtonProps & React.RefAttributes<FocusableRefValue<HTMLElement, HTMLElement>>>;
|
|
25
25
|
/**
|
|
26
26
|
* A LogicButton displays an operator within a boolean logic sequence.
|
|
27
27
|
*/
|
|
28
|
-
export
|
|
28
|
+
export const LogicButton: React.ForwardRefExoticComponent<SpectrumLogicButtonProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
|
|
29
29
|
interface ClearButtonProps<T extends ElementType = 'button'> extends ButtonProps, AriaButtonElementTypeProps<T>, DOMProps, StyleProps {
|
|
30
30
|
focusClassName?: string;
|
|
31
31
|
variant?: 'overBackground';
|
|
32
32
|
excludeFromTabOrder?: boolean;
|
|
33
33
|
preventFocus?: boolean;
|
|
34
34
|
}
|
|
35
|
-
export
|
|
35
|
+
export const ClearButton: React.ForwardRefExoticComponent<ClearButtonProps<"button"> & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
|
|
36
36
|
/**
|
|
37
37
|
* ToggleButtons allow users to toggle a selection on or off, for example
|
|
38
38
|
* switching between two states or modes.
|
|
39
39
|
*/
|
|
40
|
-
export
|
|
40
|
+
export const ToggleButton: React.ForwardRefExoticComponent<SpectrumToggleButtonProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
|
|
41
41
|
export type { SpectrumActionButtonProps, SpectrumButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps } from '@react-types/button';
|
|
42
42
|
|
|
43
43
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;
|
|
1
|
+
{"mappings":";;;AAmDA;;;;GAIG;AACH,OAAO,MAAM,QAsJP,CAAC,CAAgC,SAAtB,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,WAAW,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;ACrL5H;;;GAGG;AACH,OAAO,MAAM,uJA0EX,CAAC;ACjFH,0BAA2B,SAAQ,WAAW,EAAE,QAAQ,EAAE,UAAU;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAGD,OAAO,MAAM,iIAiDX,CAAC;ACzDH;;GAEG;AACH,OAAO,MAAM,qJAqCX,CAAC;ACxCH,2BAA2B,CAAC,SAAS,WAAW,GAAG,QAAQ,CAAE,SAAQ,WAAW,EAAE,2BAA2B,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU;IACnI,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,OAAO,MAAM,uJA+CX,CAAC;ACpDH;;;GAGG;AACH,OAAO,MAAM,uJA4DX,CAAC;ACvEH,YAAY,EAAC,yBAAyB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,yBAAyB,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/Button.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/ActionButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/FieldButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/LogicButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/ClearButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/ToggleButton.tsx","packages/@react-spectrum/button/src/packages/@react-spectrum/button/src/index.ts","packages/@react-spectrum/button/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\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/// <reference types=\"css-module-types\" />\nexport {Button} from './Button';\nexport {ActionButton} from './ActionButton';\nexport {FieldButton} from './FieldButton';\nexport {LogicButton} from './LogicButton';\nexport {ClearButton} from './ClearButton';\nexport {ToggleButton} from './ToggleButton';\nexport type {SpectrumActionButtonProps, SpectrumButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps} from '@react-types/button';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -130,23 +130,23 @@ button.ntVziG_spectrum-BaseButton {
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
.ntVziG_spectrum-BaseButton .ntVziG_spectrum-Icon {
|
|
133
|
+
max-block-size: 100%;
|
|
133
134
|
transition: background var(--spectrum-global-animation-duration-100, .13s) ease-out, fill var(--spectrum-global-animation-duration-100, .13s) ease-out;
|
|
134
135
|
box-sizing: initial;
|
|
135
136
|
flex-shrink: 0;
|
|
136
137
|
order: 0;
|
|
137
|
-
max-block-size: 100%;
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
.ntVziG_spectrum-Button {
|
|
141
141
|
--spectrum-button-border-radius: var(--spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large));
|
|
142
142
|
--spectrum-button-border-width: var(--spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick));
|
|
143
143
|
min-block-size: var(--spectrum-button-primary-height, var(--spectrum-alias-single-line-height));
|
|
144
|
+
block-size: 0%;
|
|
144
145
|
min-inline-size: var(--spectrum-button-primary-min-width);
|
|
145
146
|
padding: var(--spectrum-global-dimension-size-50) calc(var(--spectrum-button-primary-padding-x, var(--spectrum-global-dimension-size-200)) - var(--spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick)));
|
|
146
147
|
font-size: var(--spectrum-button-primary-text-size, var(--spectrum-alias-pill-button-text-size));
|
|
147
148
|
font-weight: var(--spectrum-button-primary-text-font-weight, var(--spectrum-global-font-weight-bold));
|
|
148
149
|
border-style: solid;
|
|
149
|
-
block-size: 0%;
|
|
150
150
|
padding-block-start: calc(var(--spectrum-global-dimension-size-50) - 1px);
|
|
151
151
|
padding-block-end: calc(var(--spectrum-global-dimension-size-50) + 1px);
|
|
152
152
|
}
|
|
@@ -1642,4 +1642,4 @@ a.ntVziG_spectrum-Button, a.ntVziG_spectrum-ActionButton {
|
|
|
1642
1642
|
--spectrum-actionbutton-static-color-selected-disabled: ButtonFace;
|
|
1643
1643
|
}
|
|
1644
1644
|
}
|
|
1645
|
-
/*# sourceMappingURL=vars.
|
|
1645
|
+
/*# sourceMappingURL=vars.98146794.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/spectrum-css-temp/components/button/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/spectrum-css-temp/components/button/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.98146794.css.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/button",
|
|
3
|
-
"version": "3.16.
|
|
3
|
+
"version": "3.16.11",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,18 +36,18 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/button": "^3.
|
|
40
|
-
"@react-aria/focus": "^3.
|
|
41
|
-
"@react-aria/i18n": "^3.12.
|
|
42
|
-
"@react-aria/interactions": "^3.
|
|
43
|
-
"@react-aria/utils": "^3.
|
|
44
|
-
"@react-spectrum/progress": "^3.7.
|
|
45
|
-
"@react-spectrum/text": "^3.5.
|
|
46
|
-
"@react-spectrum/utils": "^3.12.
|
|
47
|
-
"@react-stately/toggle": "^3.8.
|
|
48
|
-
"@react-types/button": "^3.
|
|
49
|
-
"@react-types/shared": "^3.
|
|
50
|
-
"@spectrum-icons/ui": "^3.6.
|
|
39
|
+
"@react-aria/button": "^3.12.0",
|
|
40
|
+
"@react-aria/focus": "^3.20.0",
|
|
41
|
+
"@react-aria/i18n": "^3.12.6",
|
|
42
|
+
"@react-aria/interactions": "^3.24.0",
|
|
43
|
+
"@react-aria/utils": "^3.28.0",
|
|
44
|
+
"@react-spectrum/progress": "^3.7.13",
|
|
45
|
+
"@react-spectrum/text": "^3.5.12",
|
|
46
|
+
"@react-spectrum/utils": "^3.12.2",
|
|
47
|
+
"@react-stately/toggle": "^3.8.2",
|
|
48
|
+
"@react-types/button": "^3.11.0",
|
|
49
|
+
"@react-types/shared": "^3.28.0",
|
|
50
|
+
"@spectrum-icons/ui": "^3.6.13",
|
|
51
51
|
"@swc/helpers": "^0.5.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
|
|
66
66
|
}
|
package/src/ActionButton.tsx
CHANGED
|
@@ -23,7 +23,11 @@ import {useButton} from '@react-aria/button';
|
|
|
23
23
|
import {useHover} from '@react-aria/interactions';
|
|
24
24
|
import {useProviderProps} from '@react-spectrum/provider';
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
/**
|
|
27
|
+
* ActionButtons allow users to perform an action.
|
|
28
|
+
* They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
|
|
29
|
+
*/
|
|
30
|
+
export const ActionButton = React.forwardRef(function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
|
|
27
31
|
props = useProviderProps(props);
|
|
28
32
|
props = useSlotProps(props, 'actionButton');
|
|
29
33
|
let textProps = useSlotProps({UNSAFE_className: classNames(styles, 'spectrum-ActionButton-label')}, 'text');
|
|
@@ -97,11 +101,4 @@ function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLBu
|
|
|
97
101
|
</button>
|
|
98
102
|
</FocusRing>
|
|
99
103
|
);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
* ActionButtons allow users to perform an action.
|
|
104
|
-
* They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
|
|
105
|
-
*/
|
|
106
|
-
let _ActionButton = React.forwardRef(ActionButton);
|
|
107
|
-
export {_ActionButton as ActionButton};
|
|
104
|
+
});
|
package/src/Button.tsx
CHANGED
|
@@ -49,7 +49,12 @@ function disablePendingProps(props) {
|
|
|
49
49
|
return props;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
/**
|
|
53
|
+
* Buttons allow users to perform an action or to navigate to another page.
|
|
54
|
+
* They have multiple styles for various needs, and are ideal for calling attention to
|
|
55
|
+
* where a user needs to do something in order to move forward in a flow.
|
|
56
|
+
*/
|
|
57
|
+
export const Button = React.forwardRef(function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>, ref: FocusableRef<HTMLElement>) {
|
|
53
58
|
props = useProviderProps(props);
|
|
54
59
|
props = useSlotProps(props, 'button');
|
|
55
60
|
props = disablePendingProps(props);
|
|
@@ -199,12 +204,4 @@ function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>,
|
|
|
199
204
|
</Element>
|
|
200
205
|
</FocusRing>
|
|
201
206
|
);
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
/**
|
|
205
|
-
* Buttons allow users to perform an action or to navigate to another page.
|
|
206
|
-
* They have multiple styles for various needs, and are ideal for calling attention to
|
|
207
|
-
* where a user needs to do something in order to move forward in a flow.
|
|
208
|
-
*/
|
|
209
|
-
let _Button = React.forwardRef(Button) as <T extends ElementType = 'button'>(props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
|
|
210
|
-
export {_Button as Button};
|
|
207
|
+
}) as <T extends ElementType = 'button'>(props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
|
package/src/ClearButton.tsx
CHANGED
|
@@ -28,7 +28,7 @@ interface ClearButtonProps<T extends ElementType = 'button'> extends ButtonProps
|
|
|
28
28
|
preventFocus?: boolean
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
|
|
31
|
+
export const ClearButton = React.forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
|
|
32
32
|
let {
|
|
33
33
|
children = <CrossSmall UNSAFE_className={styles['spectrum-Icon']} />,
|
|
34
34
|
focusClassName,
|
|
@@ -75,7 +75,4 @@ function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElemen
|
|
|
75
75
|
</ElementType>
|
|
76
76
|
</FocusRing>
|
|
77
77
|
);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
let _ClearButton = React.forwardRef(ClearButton);
|
|
81
|
-
export {_ClearButton as ClearButton};
|
|
78
|
+
});
|
package/src/FieldButton.tsx
CHANGED
|
@@ -29,7 +29,7 @@ interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
// @private
|
|
32
|
-
function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
|
|
32
|
+
export const FieldButton = React.forwardRef(function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
|
|
33
33
|
props = useSlotProps(props, 'button');
|
|
34
34
|
let {
|
|
35
35
|
isQuiet,
|
|
@@ -78,7 +78,4 @@ function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
|
|
|
78
78
|
</button>
|
|
79
79
|
</FocusRing>
|
|
80
80
|
);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
let _FieldButton = React.forwardRef(FieldButton);
|
|
84
|
-
export {_FieldButton as FieldButton};
|
|
81
|
+
});
|
package/src/LogicButton.tsx
CHANGED
|
@@ -21,7 +21,10 @@ import {useButton} from '@react-aria/button';
|
|
|
21
21
|
import {useHover} from '@react-aria/interactions';
|
|
22
22
|
import {useProviderProps} from '@react-spectrum/provider';
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
/**
|
|
25
|
+
* A LogicButton displays an operator within a boolean logic sequence.
|
|
26
|
+
*/
|
|
27
|
+
export const LogicButton = React.forwardRef(function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef<HTMLButtonElement>) {
|
|
25
28
|
props = useProviderProps(props);
|
|
26
29
|
let {
|
|
27
30
|
variant,
|
|
@@ -58,10 +61,4 @@ function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef<HTMLButt
|
|
|
58
61
|
</button>
|
|
59
62
|
</FocusRing>
|
|
60
63
|
);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* A LogicButton displays an operator within a boolean logic sequence.
|
|
65
|
-
*/
|
|
66
|
-
let _LogicButton = React.forwardRef(LogicButton);
|
|
67
|
-
export {_LogicButton as LogicButton};
|
|
64
|
+
});
|
package/src/ToggleButton.tsx
CHANGED
|
@@ -23,7 +23,11 @@ import {useProviderProps} from '@react-spectrum/provider';
|
|
|
23
23
|
import {useToggleButton} from '@react-aria/button';
|
|
24
24
|
import {useToggleState} from '@react-stately/toggle';
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
/**
|
|
27
|
+
* ToggleButtons allow users to toggle a selection on or off, for example
|
|
28
|
+
* switching between two states or modes.
|
|
29
|
+
*/
|
|
30
|
+
export const ToggleButton = React.forwardRef(function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
|
|
27
31
|
props = useProviderProps(props);
|
|
28
32
|
let {
|
|
29
33
|
isQuiet,
|
|
@@ -83,11 +87,4 @@ function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef<HTMLBu
|
|
|
83
87
|
</button>
|
|
84
88
|
</FocusRing>
|
|
85
89
|
);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
* ToggleButtons allow users to toggle a selection on or off, for example
|
|
90
|
-
* switching between two states or modes.
|
|
91
|
-
*/
|
|
92
|
-
let _ToggleButton = React.forwardRef(ToggleButton);
|
|
93
|
-
export {_ToggleButton as ToggleButton};
|
|
90
|
+
});
|