react-aria-components 3.0.0-nightly-9e79420c1-240919 → 3.0.0-nightly-9421c1409-240921
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/Button.main.js +67 -10
- package/dist/Button.main.js.map +1 -1
- package/dist/Button.mjs +69 -12
- package/dist/Button.module.js +69 -12
- package/dist/Button.module.js.map +1 -1
- package/dist/Disclosure.main.js +127 -0
- package/dist/Disclosure.main.js.map +1 -0
- package/dist/Disclosure.mjs +115 -0
- package/dist/Disclosure.module.js +115 -0
- package/dist/Disclosure.module.js.map +1 -0
- package/dist/ToggleButton.main.js.map +1 -1
- package/dist/ToggleButton.module.js.map +1 -1
- package/dist/import.mjs +3 -1
- package/dist/main.js +6 -0
- package/dist/main.js.map +1 -1
- package/dist/module.js +3 -1
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +134 -85
- package/dist/types.d.ts.map +1 -1
- package/package.json +30 -26
- package/src/Button.tsx +98 -9
- package/src/Disclosure.tsx +150 -0
- package/src/ToggleButton.tsx +1 -1
- package/src/index.ts +2 -0
package/dist/Button.main.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
var $c5ccf687772c0422$exports = require("./utils.main.js");
|
|
2
|
+
var $0d6436f6a1b0b001$exports = require("./ProgressBar.main.js");
|
|
3
|
+
var $3vfYa$reactarialiveannouncer = require("@react-aria/live-announcer");
|
|
2
4
|
var $3vfYa$reactaria = require("react-aria");
|
|
3
5
|
var $3vfYa$reactariacollections = require("@react-aria/collections");
|
|
4
6
|
var $3vfYa$reactariautils = require("@react-aria/utils");
|
|
@@ -30,6 +32,8 @@ $parcel$export(module.exports, "Button", () => $b856e6788a7ea5bf$export$353f5b6f
|
|
|
30
32
|
|
|
31
33
|
|
|
32
34
|
|
|
35
|
+
|
|
36
|
+
|
|
33
37
|
const $b856e6788a7ea5bf$var$additionalButtonHTMLAttributes = new Set([
|
|
34
38
|
'form',
|
|
35
39
|
'formAction',
|
|
@@ -43,35 +47,88 @@ const $b856e6788a7ea5bf$var$additionalButtonHTMLAttributes = new Set([
|
|
|
43
47
|
const $b856e6788a7ea5bf$export$24d547caef80ccd1 = /*#__PURE__*/ (0, $3vfYa$react.createContext)({});
|
|
44
48
|
function $b856e6788a7ea5bf$var$Button(props, ref) {
|
|
45
49
|
[props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, $b856e6788a7ea5bf$export$24d547caef80ccd1);
|
|
50
|
+
props = $b856e6788a7ea5bf$var$disablePendingProps(props);
|
|
46
51
|
let ctx = props;
|
|
52
|
+
let { isPending: isPending } = ctx;
|
|
47
53
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $3vfYa$reactaria.useButton)(props, ref);
|
|
48
54
|
let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $3vfYa$reactaria.useFocusRing)(props);
|
|
49
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $3vfYa$reactaria.useHover)(
|
|
55
|
+
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $3vfYa$reactaria.useHover)({
|
|
56
|
+
...props,
|
|
57
|
+
isDisabled: props.isDisabled || isPending
|
|
58
|
+
});
|
|
59
|
+
let renderValues = {
|
|
60
|
+
isHovered: isHovered,
|
|
61
|
+
isPressed: (ctx.isPressed || isPressed) && !isPending,
|
|
62
|
+
isFocused: isFocused,
|
|
63
|
+
isFocusVisible: isFocusVisible,
|
|
64
|
+
isDisabled: props.isDisabled || false,
|
|
65
|
+
isPending: isPending
|
|
66
|
+
};
|
|
50
67
|
let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
|
|
51
68
|
...props,
|
|
52
|
-
values:
|
|
53
|
-
isHovered: isHovered,
|
|
54
|
-
isPressed: isPressed,
|
|
55
|
-
isFocused: isFocused,
|
|
56
|
-
isFocusVisible: isFocusVisible,
|
|
57
|
-
isDisabled: props.isDisabled || false
|
|
58
|
-
},
|
|
69
|
+
values: renderValues,
|
|
59
70
|
defaultClassName: 'react-aria-Button'
|
|
60
71
|
});
|
|
72
|
+
let buttonId = (0, $3vfYa$reactaria.useId)(buttonProps.id);
|
|
73
|
+
let progressId = (0, $3vfYa$reactaria.useId)();
|
|
74
|
+
let ariaLabelledby = buttonProps['aria-labelledby'];
|
|
75
|
+
if (isPending) {
|
|
76
|
+
// aria-labelledby wins over aria-label
|
|
77
|
+
// https://www.w3.org/TR/accname-1.2/#computation-steps
|
|
78
|
+
if (ariaLabelledby) ariaLabelledby = `${ariaLabelledby} ${progressId}`;
|
|
79
|
+
else if (buttonProps['aria-label']) ariaLabelledby = `${buttonId} ${progressId}`;
|
|
80
|
+
}
|
|
81
|
+
let wasPending = (0, $3vfYa$react.useRef)(isPending);
|
|
82
|
+
(0, $3vfYa$react.useEffect)(()=>{
|
|
83
|
+
let message = {
|
|
84
|
+
'aria-labelledby': ariaLabelledby || buttonId
|
|
85
|
+
};
|
|
86
|
+
if (!wasPending.current && isFocused && isPending) (0, $3vfYa$reactarialiveannouncer.announce)(message, 'assertive');
|
|
87
|
+
else if (wasPending.current && isFocused && !isPending) (0, $3vfYa$reactarialiveannouncer.announce)(message, 'assertive');
|
|
88
|
+
wasPending.current = isPending;
|
|
89
|
+
}, [
|
|
90
|
+
isPending,
|
|
91
|
+
isFocused,
|
|
92
|
+
ariaLabelledby,
|
|
93
|
+
buttonId
|
|
94
|
+
]);
|
|
61
95
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($3vfYa$react))).createElement("button", {
|
|
62
96
|
...(0, $3vfYa$reactariautils.filterDOMProps)(props, {
|
|
63
97
|
propNames: $b856e6788a7ea5bf$var$additionalButtonHTMLAttributes
|
|
64
98
|
}),
|
|
65
99
|
...(0, $3vfYa$reactaria.mergeProps)(buttonProps, focusProps, hoverProps),
|
|
66
100
|
...renderProps,
|
|
101
|
+
id: buttonId,
|
|
67
102
|
ref: ref,
|
|
103
|
+
"aria-labelledby": ariaLabelledby,
|
|
68
104
|
slot: props.slot || undefined,
|
|
105
|
+
"aria-disabled": isPending ? 'true' : buttonProps['aria-disabled'],
|
|
69
106
|
"data-disabled": props.isDisabled || undefined,
|
|
70
|
-
"data-pressed":
|
|
107
|
+
"data-pressed": renderValues.isPressed || undefined,
|
|
71
108
|
"data-hovered": isHovered || undefined,
|
|
72
109
|
"data-focused": isFocused || undefined,
|
|
110
|
+
"data-pending": isPending || undefined,
|
|
73
111
|
"data-focus-visible": isFocusVisible || undefined
|
|
74
|
-
})
|
|
112
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($3vfYa$react))).createElement((0, $0d6436f6a1b0b001$exports.ProgressBarContext).Provider, {
|
|
113
|
+
value: {
|
|
114
|
+
id: progressId
|
|
115
|
+
}
|
|
116
|
+
}, renderProps.children));
|
|
117
|
+
}
|
|
118
|
+
function $b856e6788a7ea5bf$var$disablePendingProps(props) {
|
|
119
|
+
// Don't allow interaction while isPending is true
|
|
120
|
+
if (props.isPending) {
|
|
121
|
+
props.onPress = undefined;
|
|
122
|
+
props.onPressStart = undefined;
|
|
123
|
+
props.onPressEnd = undefined;
|
|
124
|
+
props.onPressChange = undefined;
|
|
125
|
+
props.onPressUp = undefined;
|
|
126
|
+
props.onKeyDown = undefined;
|
|
127
|
+
props.onKeyUp = undefined;
|
|
128
|
+
props.onClick = undefined;
|
|
129
|
+
props.href = undefined;
|
|
130
|
+
}
|
|
131
|
+
return props;
|
|
75
132
|
}
|
|
76
133
|
/**
|
|
77
134
|
* A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
|
package/dist/Button.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA0FD,MAAM,uDAAiC,IAAI,IAAI;IAAC;IAAQ;IAAc;IAAe;IAAc;IAAkB;IAAc;IAAQ;CAAQ;AAE5I,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAAuD,CAAC;AAEjG,SAAS,6BAAO,KAAkB,EAAE,GAAoC;IACtE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,QAAQ,0CAAoB;IAC5B,IAAI,MAAM;IACV,IAAI,aAAC,SAAS,EAAC,GAAG;IAClB,IAAI,eAAC,WAAW,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,0BAAQ,EAAE,OAAO;IAChD,IAAI,cAAC,UAAU,aAAE,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,6BAAW,EAAE;IAC3D,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,yBAAO,EAAE;QACrC,GAAG,KAAK;QACR,YAAY,MAAM,UAAU,IAAI;IAClC;IACA,IAAI,eAAe;mBACjB;QACA,WAAW,AAAC,CAAA,IAAI,SAAS,IAAI,SAAQ,KAAM,CAAC;mBAC5C;wBACA;QACA,YAAY,MAAM,UAAU,IAAI;mBAChC;IACF;IAEA,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;QACR,kBAAkB;IACpB;IAEA,IAAI,WAAW,CAAA,GAAA,sBAAI,EAAE,YAAY,EAAE;IACnC,IAAI,aAAa,CAAA,GAAA,sBAAI;IAErB,IAAI,iBAAiB,WAAW,CAAC,kBAAkB;IACnD,IAAI,WAAW;QACb,uCAAuC;QACvC,uDAAuD;QACvD,IAAI,gBACF,iBAAiB,CAAC,EAAE,eAAe,CAAC,EAAE,WAAW,CAAC;aAC7C,IAAI,WAAW,CAAC,aAAa,EAClC,iBAAiB,CAAC,EAAE,SAAS,CAAC,EAAE,WAAW,CAAC;IAEhD;IAEA,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAE;IACxB,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,UAAU;YAAC,mBAAmB,kBAAkB;QAAQ;QAC5D,IAAI,CAAC,WAAW,OAAO,IAAI,aAAa,WACtC,CAAA,GAAA,sCAAO,EAAE,SAAS;aACb,IAAI,WAAW,OAAO,IAAI,aAAa,CAAC,WAC7C,CAAA,GAAA,sCAAO,EAAE,SAAS;QAEpB,WAAW,OAAO,GAAG;IACvB,GAAG;QAAC;QAAW;QAAW;QAAgB;KAAS;IAEnD,qBACE,0DAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,OAAO;YAAC,WAAW;QAA8B,EAAE;QACrE,GAAG,CAAA,GAAA,2BAAS,EAAE,aAAa,YAAY,WAAW;QAClD,GAAG,WAAW;QACf,IAAI;QACJ,KAAK;QACL,mBAAiB;QACjB,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,YAAY,SAAS,WAAW,CAAC,gBAAgB;QAChE,iBAAe,MAAM,UAAU,IAAI;QACnC,gBAAc,aAAa,SAAS,IAAI;QACxC,gBAAc,aAAa;QAC3B,gBAAc,aAAa;QAC3B,gBAAc,aAAa;QAC3B,sBAAoB,kBAAkB;qBACtC,0DAAC,CAAA,GAAA,4CAAiB,EAAE,QAAQ;QAAC,OAAO;YAAC,IAAI;QAAU;OAChD,YAAY,QAAQ;AAI7B;AAEA,SAAS,0CAAoB,KAAK;IAChC,kDAAkD;IAClD,IAAI,MAAM,SAAS,EAAE;QACnB,MAAM,OAAO,GAAG;QAChB,MAAM,YAAY,GAAG;QACrB,MAAM,UAAU,GAAG;QACnB,MAAM,aAAa,GAAG;QACtB,MAAM,SAAS,GAAG;QAClB,MAAM,SAAS,GAAG;QAClB,MAAM,OAAO,GAAG;QAChB,MAAM,OAAO,GAAG;QAChB,MAAM,IAAI,GAAG;IACf;IACA,OAAO;AACT;AAEA;;CAEC,GACD,MAAM,4CAAU,WAAW,GAAG,CAAA,GAAA,mDAAsB,EAAE","sources":["packages/react-aria-components/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {announce} from '@react-aria/live-announcer';\nimport {\n AriaButtonProps,\n HoverEvents,\n mergeProps,\n useButton,\n useFocusRing,\n useHover,\n useId\n} from 'react-aria';\nimport {\n ContextValue,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {createHideableComponent} from '@react-aria/collections';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {ProgressBarContext} from './ProgressBar';\nimport React, {createContext, ForwardedRef, useEffect, useRef} from 'react';\n\nexport interface ButtonRenderProps {\n /**\n * Whether the button is currently hovered with a mouse.\n * @selector [data-hovered]\n */\n isHovered: boolean,\n /**\n * Whether the button is currently in a pressed state.\n * @selector [data-pressed]\n */\n isPressed: boolean,\n /**\n * Whether the button is focused, either via a mouse or keyboard.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the button is keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the button is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * If the button is currently in the `isPending` state.\n * @selector [data-pending]\n */\n isPending?: boolean\n}\n\nexport interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ButtonRenderProps> {\n /**\n * The `<form>` element to associate the button with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n */\n form?: string,\n /**\n * The URL that processes the information submitted by the button.\n * Overrides the action attribute of the button's form owner.\n */\n formAction?: string,\n /** Indicates how to encode the form data that is submitted. */\n formEncType?: string,\n /** Indicates the HTTP method used to submit the form. */\n formMethod?: string,\n /** Indicates that the form is not to be validated when it is submitted. */\n formNoValidate?: boolean,\n /** Overrides the target attribute of the button's form owner. */\n formTarget?: string,\n /** Submitted as a pair with the button's value as part of the form data. */\n name?: string,\n /** The value associated with the button's name when it's submitted with the form data. */\n value?: string,\n /**\n * Whether to disable events immediately and display the `ProgressBar`.\n */\n isPending?: boolean\n}\n\ninterface ButtonContextValue extends ButtonProps {\n isPressed?: boolean\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nexport const ButtonContext = createContext<ContextValue<ButtonContextValue, HTMLButtonElement>>({});\n\nfunction Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {\n [props, ref] = useContextProps(props, ref, ButtonContext);\n props = disablePendingProps(props);\n let ctx = props as ButtonContextValue;\n let {isPending} = ctx;\n let {buttonProps, isPressed} = useButton(props, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n let {hoverProps, isHovered} = useHover({\n ...props,\n isDisabled: props.isDisabled || isPending\n });\n let renderValues = {\n isHovered,\n isPressed: (ctx.isPressed || isPressed) && !isPending,\n isFocused,\n isFocusVisible,\n isDisabled: props.isDisabled || false,\n isPending\n };\n\n let renderProps = useRenderProps({\n ...props,\n values: renderValues,\n defaultClassName: 'react-aria-Button'\n });\n\n let buttonId = useId(buttonProps.id);\n let progressId = useId();\n\n let ariaLabelledby = buttonProps['aria-labelledby'];\n if (isPending) {\n // aria-labelledby wins over aria-label\n // https://www.w3.org/TR/accname-1.2/#computation-steps\n if (ariaLabelledby) {\n ariaLabelledby = `${ariaLabelledby} ${progressId}`;\n } else if (buttonProps['aria-label']) {\n ariaLabelledby = `${buttonId} ${progressId}`;\n }\n }\n\n let wasPending = useRef(isPending);\n useEffect(() => {\n let message = {'aria-labelledby': ariaLabelledby || buttonId};\n if (!wasPending.current && isFocused && isPending) {\n announce(message, 'assertive');\n } else if (wasPending.current && isFocused && !isPending) {\n announce(message, 'assertive');\n }\n wasPending.current = isPending;\n }, [isPending, isFocused, ariaLabelledby, buttonId]);\n\n return (\n <button\n {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n {...mergeProps(buttonProps, focusProps, hoverProps)}\n {...renderProps}\n id={buttonId}\n ref={ref}\n aria-labelledby={ariaLabelledby}\n slot={props.slot || undefined}\n aria-disabled={isPending ? 'true' : buttonProps['aria-disabled']}\n data-disabled={props.isDisabled || undefined}\n data-pressed={renderValues.isPressed || undefined}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-pending={isPending || undefined}\n data-focus-visible={isFocusVisible || undefined}>\n <ProgressBarContext.Provider value={{id: progressId}}>\n {renderProps.children}\n </ProgressBarContext.Provider>\n </button>\n );\n}\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\n/**\n * A button allows a user to perform an action, with mouse, touch, and keyboard interactions.\n */\nconst _Button = /*#__PURE__*/ createHideableComponent(Button);\nexport {_Button as Button};\n"],"names":[],"version":3,"file":"Button.main.js.map"}
|
package/dist/Button.mjs
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import {useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.mjs";
|
|
2
|
-
import {
|
|
2
|
+
import {ProgressBarContext as $0393f8ab869a0f1a$export$e9f3bf65a26ce129} from "./ProgressBar.mjs";
|
|
3
|
+
import {announce as $fM325$announce} from "@react-aria/live-announcer";
|
|
4
|
+
import {useButton as $fM325$useButton, useFocusRing as $fM325$useFocusRing, useHover as $fM325$useHover, useId as $fM325$useId, mergeProps as $fM325$mergeProps} from "react-aria";
|
|
3
5
|
import {createHideableComponent as $fM325$createHideableComponent} from "@react-aria/collections";
|
|
4
6
|
import {filterDOMProps as $fM325$filterDOMProps} from "@react-aria/utils";
|
|
5
|
-
import $fM325$react, {createContext as $fM325$createContext} from "react";
|
|
7
|
+
import $fM325$react, {createContext as $fM325$createContext, useRef as $fM325$useRef, useEffect as $fM325$useEffect} from "react";
|
|
6
8
|
|
|
7
9
|
/*
|
|
8
10
|
* Copyright 2022 Adobe. All rights reserved.
|
|
@@ -19,6 +21,8 @@ import $fM325$react, {createContext as $fM325$createContext} from "react";
|
|
|
19
21
|
|
|
20
22
|
|
|
21
23
|
|
|
24
|
+
|
|
25
|
+
|
|
22
26
|
const $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes = new Set([
|
|
23
27
|
'form',
|
|
24
28
|
'formAction',
|
|
@@ -32,35 +36,88 @@ const $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes = new Set([
|
|
|
32
36
|
const $d2b4bc8c273e7be6$export$24d547caef80ccd1 = /*#__PURE__*/ (0, $fM325$createContext)({});
|
|
33
37
|
function $d2b4bc8c273e7be6$var$Button(props, ref) {
|
|
34
38
|
[props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $d2b4bc8c273e7be6$export$24d547caef80ccd1);
|
|
39
|
+
props = $d2b4bc8c273e7be6$var$disablePendingProps(props);
|
|
35
40
|
let ctx = props;
|
|
41
|
+
let { isPending: isPending } = ctx;
|
|
36
42
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $fM325$useButton)(props, ref);
|
|
37
43
|
let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $fM325$useFocusRing)(props);
|
|
38
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $fM325$useHover)(
|
|
44
|
+
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $fM325$useHover)({
|
|
45
|
+
...props,
|
|
46
|
+
isDisabled: props.isDisabled || isPending
|
|
47
|
+
});
|
|
48
|
+
let renderValues = {
|
|
49
|
+
isHovered: isHovered,
|
|
50
|
+
isPressed: (ctx.isPressed || isPressed) && !isPending,
|
|
51
|
+
isFocused: isFocused,
|
|
52
|
+
isFocusVisible: isFocusVisible,
|
|
53
|
+
isDisabled: props.isDisabled || false,
|
|
54
|
+
isPending: isPending
|
|
55
|
+
};
|
|
39
56
|
let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
40
57
|
...props,
|
|
41
|
-
values:
|
|
42
|
-
isHovered: isHovered,
|
|
43
|
-
isPressed: isPressed,
|
|
44
|
-
isFocused: isFocused,
|
|
45
|
-
isFocusVisible: isFocusVisible,
|
|
46
|
-
isDisabled: props.isDisabled || false
|
|
47
|
-
},
|
|
58
|
+
values: renderValues,
|
|
48
59
|
defaultClassName: 'react-aria-Button'
|
|
49
60
|
});
|
|
61
|
+
let buttonId = (0, $fM325$useId)(buttonProps.id);
|
|
62
|
+
let progressId = (0, $fM325$useId)();
|
|
63
|
+
let ariaLabelledby = buttonProps['aria-labelledby'];
|
|
64
|
+
if (isPending) {
|
|
65
|
+
// aria-labelledby wins over aria-label
|
|
66
|
+
// https://www.w3.org/TR/accname-1.2/#computation-steps
|
|
67
|
+
if (ariaLabelledby) ariaLabelledby = `${ariaLabelledby} ${progressId}`;
|
|
68
|
+
else if (buttonProps['aria-label']) ariaLabelledby = `${buttonId} ${progressId}`;
|
|
69
|
+
}
|
|
70
|
+
let wasPending = (0, $fM325$useRef)(isPending);
|
|
71
|
+
(0, $fM325$useEffect)(()=>{
|
|
72
|
+
let message = {
|
|
73
|
+
'aria-labelledby': ariaLabelledby || buttonId
|
|
74
|
+
};
|
|
75
|
+
if (!wasPending.current && isFocused && isPending) (0, $fM325$announce)(message, 'assertive');
|
|
76
|
+
else if (wasPending.current && isFocused && !isPending) (0, $fM325$announce)(message, 'assertive');
|
|
77
|
+
wasPending.current = isPending;
|
|
78
|
+
}, [
|
|
79
|
+
isPending,
|
|
80
|
+
isFocused,
|
|
81
|
+
ariaLabelledby,
|
|
82
|
+
buttonId
|
|
83
|
+
]);
|
|
50
84
|
return /*#__PURE__*/ (0, $fM325$react).createElement("button", {
|
|
51
85
|
...(0, $fM325$filterDOMProps)(props, {
|
|
52
86
|
propNames: $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes
|
|
53
87
|
}),
|
|
54
88
|
...(0, $fM325$mergeProps)(buttonProps, focusProps, hoverProps),
|
|
55
89
|
...renderProps,
|
|
90
|
+
id: buttonId,
|
|
56
91
|
ref: ref,
|
|
92
|
+
"aria-labelledby": ariaLabelledby,
|
|
57
93
|
slot: props.slot || undefined,
|
|
94
|
+
"aria-disabled": isPending ? 'true' : buttonProps['aria-disabled'],
|
|
58
95
|
"data-disabled": props.isDisabled || undefined,
|
|
59
|
-
"data-pressed":
|
|
96
|
+
"data-pressed": renderValues.isPressed || undefined,
|
|
60
97
|
"data-hovered": isHovered || undefined,
|
|
61
98
|
"data-focused": isFocused || undefined,
|
|
99
|
+
"data-pending": isPending || undefined,
|
|
62
100
|
"data-focus-visible": isFocusVisible || undefined
|
|
63
|
-
})
|
|
101
|
+
}, /*#__PURE__*/ (0, $fM325$react).createElement((0, $0393f8ab869a0f1a$export$e9f3bf65a26ce129).Provider, {
|
|
102
|
+
value: {
|
|
103
|
+
id: progressId
|
|
104
|
+
}
|
|
105
|
+
}, renderProps.children));
|
|
106
|
+
}
|
|
107
|
+
function $d2b4bc8c273e7be6$var$disablePendingProps(props) {
|
|
108
|
+
// Don't allow interaction while isPending is true
|
|
109
|
+
if (props.isPending) {
|
|
110
|
+
props.onPress = undefined;
|
|
111
|
+
props.onPressStart = undefined;
|
|
112
|
+
props.onPressEnd = undefined;
|
|
113
|
+
props.onPressChange = undefined;
|
|
114
|
+
props.onPressUp = undefined;
|
|
115
|
+
props.onKeyDown = undefined;
|
|
116
|
+
props.onKeyUp = undefined;
|
|
117
|
+
props.onClick = undefined;
|
|
118
|
+
props.href = undefined;
|
|
119
|
+
}
|
|
120
|
+
return props;
|
|
64
121
|
}
|
|
65
122
|
/**
|
|
66
123
|
* A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
|
package/dist/Button.module.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import {useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.module.js";
|
|
2
|
-
import {
|
|
2
|
+
import {ProgressBarContext as $0393f8ab869a0f1a$export$e9f3bf65a26ce129} from "./ProgressBar.module.js";
|
|
3
|
+
import {announce as $fM325$announce} from "@react-aria/live-announcer";
|
|
4
|
+
import {useButton as $fM325$useButton, useFocusRing as $fM325$useFocusRing, useHover as $fM325$useHover, useId as $fM325$useId, mergeProps as $fM325$mergeProps} from "react-aria";
|
|
3
5
|
import {createHideableComponent as $fM325$createHideableComponent} from "@react-aria/collections";
|
|
4
6
|
import {filterDOMProps as $fM325$filterDOMProps} from "@react-aria/utils";
|
|
5
|
-
import $fM325$react, {createContext as $fM325$createContext} from "react";
|
|
7
|
+
import $fM325$react, {createContext as $fM325$createContext, useRef as $fM325$useRef, useEffect as $fM325$useEffect} from "react";
|
|
6
8
|
|
|
7
9
|
/*
|
|
8
10
|
* Copyright 2022 Adobe. All rights reserved.
|
|
@@ -19,6 +21,8 @@ import $fM325$react, {createContext as $fM325$createContext} from "react";
|
|
|
19
21
|
|
|
20
22
|
|
|
21
23
|
|
|
24
|
+
|
|
25
|
+
|
|
22
26
|
const $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes = new Set([
|
|
23
27
|
'form',
|
|
24
28
|
'formAction',
|
|
@@ -32,35 +36,88 @@ const $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes = new Set([
|
|
|
32
36
|
const $d2b4bc8c273e7be6$export$24d547caef80ccd1 = /*#__PURE__*/ (0, $fM325$createContext)({});
|
|
33
37
|
function $d2b4bc8c273e7be6$var$Button(props, ref) {
|
|
34
38
|
[props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $d2b4bc8c273e7be6$export$24d547caef80ccd1);
|
|
39
|
+
props = $d2b4bc8c273e7be6$var$disablePendingProps(props);
|
|
35
40
|
let ctx = props;
|
|
41
|
+
let { isPending: isPending } = ctx;
|
|
36
42
|
let { buttonProps: buttonProps, isPressed: isPressed } = (0, $fM325$useButton)(props, ref);
|
|
37
43
|
let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $fM325$useFocusRing)(props);
|
|
38
|
-
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $fM325$useHover)(
|
|
44
|
+
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $fM325$useHover)({
|
|
45
|
+
...props,
|
|
46
|
+
isDisabled: props.isDisabled || isPending
|
|
47
|
+
});
|
|
48
|
+
let renderValues = {
|
|
49
|
+
isHovered: isHovered,
|
|
50
|
+
isPressed: (ctx.isPressed || isPressed) && !isPending,
|
|
51
|
+
isFocused: isFocused,
|
|
52
|
+
isFocusVisible: isFocusVisible,
|
|
53
|
+
isDisabled: props.isDisabled || false,
|
|
54
|
+
isPending: isPending
|
|
55
|
+
};
|
|
39
56
|
let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
40
57
|
...props,
|
|
41
|
-
values:
|
|
42
|
-
isHovered: isHovered,
|
|
43
|
-
isPressed: isPressed,
|
|
44
|
-
isFocused: isFocused,
|
|
45
|
-
isFocusVisible: isFocusVisible,
|
|
46
|
-
isDisabled: props.isDisabled || false
|
|
47
|
-
},
|
|
58
|
+
values: renderValues,
|
|
48
59
|
defaultClassName: 'react-aria-Button'
|
|
49
60
|
});
|
|
61
|
+
let buttonId = (0, $fM325$useId)(buttonProps.id);
|
|
62
|
+
let progressId = (0, $fM325$useId)();
|
|
63
|
+
let ariaLabelledby = buttonProps['aria-labelledby'];
|
|
64
|
+
if (isPending) {
|
|
65
|
+
// aria-labelledby wins over aria-label
|
|
66
|
+
// https://www.w3.org/TR/accname-1.2/#computation-steps
|
|
67
|
+
if (ariaLabelledby) ariaLabelledby = `${ariaLabelledby} ${progressId}`;
|
|
68
|
+
else if (buttonProps['aria-label']) ariaLabelledby = `${buttonId} ${progressId}`;
|
|
69
|
+
}
|
|
70
|
+
let wasPending = (0, $fM325$useRef)(isPending);
|
|
71
|
+
(0, $fM325$useEffect)(()=>{
|
|
72
|
+
let message = {
|
|
73
|
+
'aria-labelledby': ariaLabelledby || buttonId
|
|
74
|
+
};
|
|
75
|
+
if (!wasPending.current && isFocused && isPending) (0, $fM325$announce)(message, 'assertive');
|
|
76
|
+
else if (wasPending.current && isFocused && !isPending) (0, $fM325$announce)(message, 'assertive');
|
|
77
|
+
wasPending.current = isPending;
|
|
78
|
+
}, [
|
|
79
|
+
isPending,
|
|
80
|
+
isFocused,
|
|
81
|
+
ariaLabelledby,
|
|
82
|
+
buttonId
|
|
83
|
+
]);
|
|
50
84
|
return /*#__PURE__*/ (0, $fM325$react).createElement("button", {
|
|
51
85
|
...(0, $fM325$filterDOMProps)(props, {
|
|
52
86
|
propNames: $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes
|
|
53
87
|
}),
|
|
54
88
|
...(0, $fM325$mergeProps)(buttonProps, focusProps, hoverProps),
|
|
55
89
|
...renderProps,
|
|
90
|
+
id: buttonId,
|
|
56
91
|
ref: ref,
|
|
92
|
+
"aria-labelledby": ariaLabelledby,
|
|
57
93
|
slot: props.slot || undefined,
|
|
94
|
+
"aria-disabled": isPending ? 'true' : buttonProps['aria-disabled'],
|
|
58
95
|
"data-disabled": props.isDisabled || undefined,
|
|
59
|
-
"data-pressed":
|
|
96
|
+
"data-pressed": renderValues.isPressed || undefined,
|
|
60
97
|
"data-hovered": isHovered || undefined,
|
|
61
98
|
"data-focused": isFocused || undefined,
|
|
99
|
+
"data-pending": isPending || undefined,
|
|
62
100
|
"data-focus-visible": isFocusVisible || undefined
|
|
63
|
-
})
|
|
101
|
+
}, /*#__PURE__*/ (0, $fM325$react).createElement((0, $0393f8ab869a0f1a$export$e9f3bf65a26ce129).Provider, {
|
|
102
|
+
value: {
|
|
103
|
+
id: progressId
|
|
104
|
+
}
|
|
105
|
+
}, renderProps.children));
|
|
106
|
+
}
|
|
107
|
+
function $d2b4bc8c273e7be6$var$disablePendingProps(props) {
|
|
108
|
+
// Don't allow interaction while isPending is true
|
|
109
|
+
if (props.isPending) {
|
|
110
|
+
props.onPress = undefined;
|
|
111
|
+
props.onPressStart = undefined;
|
|
112
|
+
props.onPressEnd = undefined;
|
|
113
|
+
props.onPressChange = undefined;
|
|
114
|
+
props.onPressUp = undefined;
|
|
115
|
+
props.onKeyDown = undefined;
|
|
116
|
+
props.onKeyUp = undefined;
|
|
117
|
+
props.onClick = undefined;
|
|
118
|
+
props.href = undefined;
|
|
119
|
+
}
|
|
120
|
+
return props;
|
|
64
121
|
}
|
|
65
122
|
/**
|
|
66
123
|
* A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2022 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 {announce} from '@react-aria/live-announcer';\nimport {\n AriaButtonProps,\n HoverEvents,\n mergeProps,\n useButton,\n useFocusRing,\n useHover,\n useId\n} from 'react-aria';\nimport {\n ContextValue,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {createHideableComponent} from '@react-aria/collections';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {ProgressBarContext} from './ProgressBar';\nimport React, {createContext, ForwardedRef, useEffect, useRef} from 'react';\n\nexport interface ButtonRenderProps {\n /**\n * Whether the button is currently hovered with a mouse.\n * @selector [data-hovered]\n */\n isHovered: boolean,\n /**\n * Whether the button is currently in a pressed state.\n * @selector [data-pressed]\n */\n isPressed: boolean,\n /**\n * Whether the button is focused, either via a mouse or keyboard.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the button is keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the button is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * If the button is currently in the `isPending` state.\n * @selector [data-pending]\n */\n isPending?: boolean\n}\n\nexport interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ButtonRenderProps> {\n /**\n * The `<form>` element to associate the button with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n */\n form?: string,\n /**\n * The URL that processes the information submitted by the button.\n * Overrides the action attribute of the button's form owner.\n */\n formAction?: string,\n /** Indicates how to encode the form data that is submitted. */\n formEncType?: string,\n /** Indicates the HTTP method used to submit the form. */\n formMethod?: string,\n /** Indicates that the form is not to be validated when it is submitted. */\n formNoValidate?: boolean,\n /** Overrides the target attribute of the button's form owner. */\n formTarget?: string,\n /** Submitted as a pair with the button's value as part of the form data. */\n name?: string,\n /** The value associated with the button's name when it's submitted with the form data. */\n value?: string,\n /**\n * Whether to disable events immediately and display the `ProgressBar`.\n */\n isPending?: boolean\n}\n\ninterface ButtonContextValue extends ButtonProps {\n isPressed?: boolean\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nexport const ButtonContext = createContext<ContextValue<ButtonContextValue, HTMLButtonElement>>({});\n\nfunction Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {\n [props, ref] = useContextProps(props, ref, ButtonContext);\n props = disablePendingProps(props);\n let ctx = props as ButtonContextValue;\n let {isPending} = ctx;\n let {buttonProps, isPressed} = useButton(props, ref);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n let {hoverProps, isHovered} = useHover({\n ...props,\n isDisabled: props.isDisabled || isPending\n });\n let renderValues = {\n isHovered,\n isPressed: (ctx.isPressed || isPressed) && !isPending,\n isFocused,\n isFocusVisible,\n isDisabled: props.isDisabled || false,\n isPending\n };\n\n let renderProps = useRenderProps({\n ...props,\n values: renderValues,\n defaultClassName: 'react-aria-Button'\n });\n\n let buttonId = useId(buttonProps.id);\n let progressId = useId();\n\n let ariaLabelledby = buttonProps['aria-labelledby'];\n if (isPending) {\n // aria-labelledby wins over aria-label\n // https://www.w3.org/TR/accname-1.2/#computation-steps\n if (ariaLabelledby) {\n ariaLabelledby = `${ariaLabelledby} ${progressId}`;\n } else if (buttonProps['aria-label']) {\n ariaLabelledby = `${buttonId} ${progressId}`;\n }\n }\n\n let wasPending = useRef(isPending);\n useEffect(() => {\n let message = {'aria-labelledby': ariaLabelledby || buttonId};\n if (!wasPending.current && isFocused && isPending) {\n announce(message, 'assertive');\n } else if (wasPending.current && isFocused && !isPending) {\n announce(message, 'assertive');\n }\n wasPending.current = isPending;\n }, [isPending, isFocused, ariaLabelledby, buttonId]);\n\n return (\n <button\n {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n {...mergeProps(buttonProps, focusProps, hoverProps)}\n {...renderProps}\n id={buttonId}\n ref={ref}\n aria-labelledby={ariaLabelledby}\n slot={props.slot || undefined}\n aria-disabled={isPending ? 'true' : buttonProps['aria-disabled']}\n data-disabled={props.isDisabled || undefined}\n data-pressed={renderValues.isPressed || undefined}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-pending={isPending || undefined}\n data-focus-visible={isFocusVisible || undefined}>\n <ProgressBarContext.Provider value={{id: progressId}}>\n {renderProps.children}\n </ProgressBarContext.Provider>\n </button>\n );\n}\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\n/**\n * A button allows a user to perform an action, with mouse, touch, and keyboard interactions.\n */\nconst _Button = /*#__PURE__*/ createHideableComponent(Button);\nexport {_Button as Button};\n"],"names":[],"version":3,"file":"Button.module.js.map"}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
var $b856e6788a7ea5bf$exports = require("./Button.main.js");
|
|
2
|
+
var $c5ccf687772c0422$exports = require("./utils.main.js");
|
|
3
|
+
var $8afVX$reactariadisclosure = require("@react-aria/disclosure");
|
|
4
|
+
var $8afVX$reactstatelydisclosure = require("@react-stately/disclosure");
|
|
5
|
+
var $8afVX$reactaria = require("react-aria");
|
|
6
|
+
var $8afVX$reactariautils = require("@react-aria/utils");
|
|
7
|
+
var $8afVX$react = require("react");
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
function $parcel$interopDefault(a) {
|
|
11
|
+
return a && a.__esModule ? a.default : a;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function $parcel$export(e, n, v, s) {
|
|
15
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
$parcel$export(module.exports, "DisclosureContext", () => $11c780105231f6ef$export$d665dd135a51b28a);
|
|
19
|
+
$parcel$export(module.exports, "DisclosureStateContext", () => $11c780105231f6ef$export$dab3ea4a6ef094da);
|
|
20
|
+
$parcel$export(module.exports, "Disclosure", () => $11c780105231f6ef$export$74a362b31437ec83);
|
|
21
|
+
$parcel$export(module.exports, "DisclosurePanel", () => $11c780105231f6ef$export$feabaa331e1d464c);
|
|
22
|
+
/*
|
|
23
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
24
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
25
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
26
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
27
|
+
*
|
|
28
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
29
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
30
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
31
|
+
* governing permissions and limitations under the License.
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
const $11c780105231f6ef$export$d665dd135a51b28a = /*#__PURE__*/ (0, $8afVX$react.createContext)(null);
|
|
40
|
+
const $11c780105231f6ef$export$dab3ea4a6ef094da = /*#__PURE__*/ (0, $8afVX$react.createContext)(null);
|
|
41
|
+
const $11c780105231f6ef$var$InternalDisclosureContext = /*#__PURE__*/ (0, $8afVX$react.createContext)(null);
|
|
42
|
+
function $11c780105231f6ef$var$Disclosure(props, ref) {
|
|
43
|
+
[props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, $11c780105231f6ef$export$d665dd135a51b28a);
|
|
44
|
+
let state = (0, $8afVX$reactstatelydisclosure.useDisclosureState)(props);
|
|
45
|
+
let contentRef = (0, ($parcel$interopDefault($8afVX$react))).useRef(null);
|
|
46
|
+
let { buttonProps: buttonProps, contentProps: contentProps } = (0, $8afVX$reactariadisclosure.useDisclosure)(props, state, contentRef);
|
|
47
|
+
let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = (0, $8afVX$reactaria.useFocusRing)({
|
|
48
|
+
within: true
|
|
49
|
+
});
|
|
50
|
+
let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
|
|
51
|
+
...props,
|
|
52
|
+
defaultClassName: 'react-aria-Disclosure',
|
|
53
|
+
values: {
|
|
54
|
+
isExpanded: state.isExpanded,
|
|
55
|
+
isDisabled: props.isDisabled || false,
|
|
56
|
+
isFocusVisibleWithin: isFocusVisibleWithin,
|
|
57
|
+
state: state
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($8afVX$react))).createElement((0, $c5ccf687772c0422$exports.Provider), {
|
|
61
|
+
values: [
|
|
62
|
+
[
|
|
63
|
+
(0, $b856e6788a7ea5bf$exports.ButtonContext),
|
|
64
|
+
{
|
|
65
|
+
slots: {
|
|
66
|
+
[(0, $c5ccf687772c0422$exports.DEFAULT_SLOT)]: {},
|
|
67
|
+
trigger: buttonProps
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
[
|
|
72
|
+
$11c780105231f6ef$var$InternalDisclosureContext,
|
|
73
|
+
{
|
|
74
|
+
contentProps: contentProps,
|
|
75
|
+
contentRef: contentRef
|
|
76
|
+
}
|
|
77
|
+
],
|
|
78
|
+
[
|
|
79
|
+
$11c780105231f6ef$export$dab3ea4a6ef094da,
|
|
80
|
+
state
|
|
81
|
+
]
|
|
82
|
+
]
|
|
83
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($8afVX$react))).createElement("div", {
|
|
84
|
+
ref: ref,
|
|
85
|
+
"data-expanded": state.isExpanded || undefined,
|
|
86
|
+
"data-disabled": props.isDisabled || undefined,
|
|
87
|
+
"data-focus-visible-within": isFocusVisibleWithin || undefined,
|
|
88
|
+
...focusWithinProps,
|
|
89
|
+
...renderProps
|
|
90
|
+
}, renderProps.children));
|
|
91
|
+
}
|
|
92
|
+
function $11c780105231f6ef$var$DisclosurePanel(props, ref) {
|
|
93
|
+
let { role: role = 'group' } = props;
|
|
94
|
+
let { contentProps: contentProps, contentRef: contentRef } = (0, $8afVX$react.useContext)($11c780105231f6ef$var$InternalDisclosureContext);
|
|
95
|
+
let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = (0, $8afVX$reactaria.useFocusRing)({
|
|
96
|
+
within: true
|
|
97
|
+
});
|
|
98
|
+
let renderProps = (0, $c5ccf687772c0422$exports.useRenderProps)({
|
|
99
|
+
...props,
|
|
100
|
+
defaultClassName: 'react-aria-DisclosurePanel',
|
|
101
|
+
values: {
|
|
102
|
+
isFocusVisibleWithin: isFocusVisibleWithin
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($8afVX$react))).createElement("div", {
|
|
106
|
+
role: role,
|
|
107
|
+
// @ts-ignore
|
|
108
|
+
ref: (0, $8afVX$reactariautils.mergeRefs)(ref, contentRef),
|
|
109
|
+
...(0, $8afVX$reactariautils.mergeProps)(contentProps, focusWithinProps),
|
|
110
|
+
...renderProps,
|
|
111
|
+
"data-focus-visible-within": isFocusVisibleWithin || undefined
|
|
112
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($8afVX$react))).createElement((0, $c5ccf687772c0422$exports.Provider), {
|
|
113
|
+
values: [
|
|
114
|
+
[
|
|
115
|
+
(0, $b856e6788a7ea5bf$exports.ButtonContext),
|
|
116
|
+
null
|
|
117
|
+
]
|
|
118
|
+
]
|
|
119
|
+
}, props.children));
|
|
120
|
+
}
|
|
121
|
+
/**
|
|
122
|
+
* A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
|
|
123
|
+
*/ const $11c780105231f6ef$export$74a362b31437ec83 = /*#__PURE__*/ (0, $8afVX$react.forwardRef)($11c780105231f6ef$var$Disclosure);
|
|
124
|
+
const $11c780105231f6ef$export$feabaa331e1d464c = /*#__PURE__*/ (0, $8afVX$react.forwardRef)($11c780105231f6ef$var$DisclosurePanel);
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
//# sourceMappingURL=Disclosure.main.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAmCM,MAAM,0DAAoB,CAAA,GAAA,0BAAY,EAAiD;AACvF,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA0B;AAO5E,MAAM,gEAA4B,CAAA,GAAA,0BAAY,EAAyC;AAEvF,SAAS,iCAAW,KAAsB,EAAE,GAAiC;IAC3E,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,gDAAiB,EAAE;IAC/B,IAAI,aAAa,CAAA,GAAA,sCAAI,EAAE,MAAM,CAAqB;IAClD,IAAI,eAAC,WAAW,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,wCAAY,EAAE,OAAO,OAAO;IAC9D,IAAI,EACF,gBAAgB,oBAAoB,EACpC,YAAY,gBAAgB,EAC7B,GAAG,CAAA,GAAA,6BAAW,EAAE;QAAC,QAAQ;IAAI;IAE9B,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;YAC5B,YAAY,MAAM,UAAU,IAAI;kCAChC;mBACA;QACF;IACF;IAEA,qBACE,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,uCAAY;gBAAG;oBACd,OAAO;wBACL,CAAC,CAAA,GAAA,sCAAW,EAAE,EAAE,CAAC;wBACjB,SAAS;oBACX;gBACF;aAAE;YACF;gBAAC;gBAA2B;kCAAC;gCAAc;gBAAU;aAAE;YACvD;gBAAC;gBAAwB;aAAM;SAChC;qBACD,0DAAC;QACC,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;QACnC,iBAAe,MAAM,UAAU,IAAI;QACnC,6BAA2B,wBAAwB;QAClD,GAAG,gBAAgB;QACnB,GAAG,WAAW;OACd,YAAY,QAAQ;AAI7B;AAWA,SAAS,sCAAgB,KAA2B,EAAE,GAA8B;IAClF,IAAI,QAAC,OAAO,SAAQ,GAAG;IACvB,IAAI,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IAC5C,IAAI,EACF,gBAAgB,oBAAoB,EACpC,YAAY,gBAAgB,EAC7B,GAAG,CAAA,GAAA,6BAAW,EAAE;QAAC,QAAQ;IAAI;IAC9B,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;kCACN;QACF;IACF;IACA,qBACE,0DAAC;QACC,MAAM;QACN,aAAa;QACb,KAAK,CAAA,GAAA,+BAAQ,EAAE,KAAK;QACnB,GAAG,CAAA,GAAA,gCAAS,EAAE,cAAc,iBAAiB;QAC7C,GAAG,WAAW;QACf,6BAA2B,wBAAwB;qBACnD,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,uCAAY;gBAAG;aAAK;SACtB;OACA,MAAM,QAAQ;AAIvB;AAEA;;CAEC,GACD,MAAM,4CAA4B,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB;AAGjE,MAAM,4CAAiC,AAAd,WAAW,GAAI,CAAA,GAAA,uBAAS,EAAqB","sources":["packages/react-aria-components/src/Disclosure.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 {AriaDisclosureProps, useDisclosure} from '@react-aria/disclosure';\nimport {ButtonContext} from './Button';\nimport {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';\nimport {DisclosureState, useDisclosureState} from '@react-stately/disclosure';\nimport {forwardRefType} from '@react-types/shared';\nimport {HoverEvents, useFocusRing} from 'react-aria';\nimport {mergeProps, mergeRefs} from '@react-aria/utils';\nimport React, {createContext, DOMAttributes, ForwardedRef, forwardRef, ReactNode, useContext} from 'react';\n\nexport interface DisclosureProps extends Omit<AriaDisclosureProps, 'children'>, HoverEvents, RenderProps<DisclosureRenderProps>, SlotProps {}\n\nexport interface DisclosureRenderProps {\n /**\n * Whether the disclosure is expanded.\n * @selector [data-expanded]\n */\n isExpanded: boolean,\n /**\n * Whether the disclosure has keyboard focus.\n * @selector [data-focus-visible-within]\n */\n isFocusVisibleWithin: boolean,\n /**\n * Whether the disclosure is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * State of the disclosure.\n */\n state: DisclosureState\n}\n\nexport const DisclosureContext = createContext<ContextValue<DisclosureProps, HTMLDivElement>>(null);\nexport const DisclosureStateContext = createContext<DisclosureState | null>(null);\n\ninterface InternalDisclosureContextValue {\n contentProps: DOMAttributes<HTMLElement>,\n contentRef: React.RefObject<HTMLElement | null>\n}\n\nconst InternalDisclosureContext = createContext<InternalDisclosureContextValue | null>(null);\n\nfunction Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DisclosureContext);\n let state = useDisclosureState(props);\n let contentRef = React.useRef<HTMLElement | null>(null);\n let {buttonProps, contentProps} = useDisclosure(props, state, contentRef);\n let {\n isFocusVisible: isFocusVisibleWithin,\n focusProps: focusWithinProps\n } = useFocusRing({within: true});\n\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-Disclosure',\n values: {\n isExpanded: state.isExpanded,\n isDisabled: props.isDisabled || false,\n isFocusVisibleWithin,\n state\n }\n });\n\n return (\n <Provider\n values={[\n [ButtonContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n trigger: buttonProps\n }\n }],\n [InternalDisclosureContext, {contentProps, contentRef}],\n [DisclosureStateContext, state]\n ]}>\n <div\n ref={ref}\n data-expanded={state.isExpanded || undefined}\n data-disabled={props.isDisabled || undefined}\n data-focus-visible-within={isFocusVisibleWithin || undefined}\n {...focusWithinProps}\n {...renderProps}>\n {renderProps.children}\n </div>\n </Provider>\n );\n}\n\nexport interface DisclosurePanelProps extends RenderProps<{}> {\n /**\n * The accessibility role for the disclosure's panel.\n * @default 'group'\n */\n role?: 'group' | 'region',\n children: ReactNode\n}\n\nfunction DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLElement>) {\n let {role = 'group'} = props;\n let {contentProps, contentRef} = useContext(InternalDisclosureContext)!;\n let {\n isFocusVisible: isFocusVisibleWithin,\n focusProps: focusWithinProps\n } = useFocusRing({within: true});\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-DisclosurePanel',\n values: {\n isFocusVisibleWithin\n }\n });\n return (\n <div\n role={role}\n // @ts-ignore\n ref={mergeRefs(ref, contentRef)}\n {...mergeProps(contentProps, focusWithinProps)}\n {...renderProps}\n data-focus-visible-within={isFocusVisibleWithin || undefined}>\n <Provider\n values={[\n [ButtonContext, null]\n ]}>\n {props.children}\n </Provider>\n </div>\n );\n}\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.\n */\nconst _Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(Disclosure);\nexport {_Disclosure as Disclosure};\n\nconst _DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosurePanel);\nexport {_DisclosurePanel as DisclosurePanel};\n"],"names":[],"version":3,"file":"Disclosure.main.js.map"}
|