@react-spectrum/overlays 5.9.2 → 5.10.0

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.
Files changed (82) hide show
  1. package/dist/import.mjs +6 -6
  2. package/dist/main.js +10 -10
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +6 -6
  5. package/dist/module.js.map +1 -1
  6. package/dist/types/src/index.d.ts +6 -0
  7. package/package.json +13 -33
  8. package/src/index.ts +7 -5
  9. package/dist/Modal.main.js +0 -93
  10. package/dist/Modal.main.js.map +0 -1
  11. package/dist/Modal.mjs +0 -88
  12. package/dist/Modal.module.js +0 -88
  13. package/dist/Modal.module.js.map +0 -1
  14. package/dist/OpenTransition.main.js +0 -44
  15. package/dist/OpenTransition.main.js.map +0 -1
  16. package/dist/OpenTransition.mjs +0 -35
  17. package/dist/OpenTransition.module.js +0 -35
  18. package/dist/OpenTransition.module.js.map +0 -1
  19. package/dist/Overlay.main.js +0 -75
  20. package/dist/Overlay.main.js.map +0 -1
  21. package/dist/Overlay.mjs +0 -66
  22. package/dist/Overlay.module.js +0 -66
  23. package/dist/Overlay.module.js.map +0 -1
  24. package/dist/Popover.main.js +0 -206
  25. package/dist/Popover.main.js.map +0 -1
  26. package/dist/Popover.mjs +0 -201
  27. package/dist/Popover.module.js +0 -201
  28. package/dist/Popover.module.js.map +0 -1
  29. package/dist/Tray.main.js +0 -105
  30. package/dist/Tray.main.js.map +0 -1
  31. package/dist/Tray.mjs +0 -100
  32. package/dist/Tray.module.js +0 -100
  33. package/dist/Tray.module.js.map +0 -1
  34. package/dist/Underlay.main.js +0 -54
  35. package/dist/Underlay.main.js.map +0 -1
  36. package/dist/Underlay.mjs +0 -49
  37. package/dist/Underlay.module.js +0 -49
  38. package/dist/Underlay.module.js.map +0 -1
  39. package/dist/modal_vars_css.main.js +0 -59
  40. package/dist/modal_vars_css.main.js.map +0 -1
  41. package/dist/modal_vars_css.mjs +0 -61
  42. package/dist/modal_vars_css.module.js +0 -61
  43. package/dist/modal_vars_css.module.js.map +0 -1
  44. package/dist/overlays.c765f49e.css +0 -131
  45. package/dist/overlays.c765f49e.css.map +0 -1
  46. package/dist/overlays.ec5cd7e2.css +0 -210
  47. package/dist/overlays.ec5cd7e2.css.map +0 -1
  48. package/dist/overlays.ef39a1b9.css +0 -197
  49. package/dist/overlays.ef39a1b9.css.map +0 -1
  50. package/dist/overlays.f1e5a60e.css +0 -184
  51. package/dist/overlays.f1e5a60e.css.map +0 -1
  52. package/dist/overlays.f8d97b78.css +0 -12
  53. package/dist/overlays.f8d97b78.css.map +0 -1
  54. package/dist/overlays_css.main.js +0 -35
  55. package/dist/overlays_css.main.js.map +0 -1
  56. package/dist/overlays_css.mjs +0 -37
  57. package/dist/overlays_css.module.js +0 -37
  58. package/dist/overlays_css.module.js.map +0 -1
  59. package/dist/popover_vars_css.main.js +0 -83
  60. package/dist/popover_vars_css.main.js.map +0 -1
  61. package/dist/popover_vars_css.mjs +0 -85
  62. package/dist/popover_vars_css.module.js +0 -85
  63. package/dist/popover_vars_css.module.js.map +0 -1
  64. package/dist/tray_vars_css.main.js +0 -53
  65. package/dist/tray_vars_css.main.js.map +0 -1
  66. package/dist/tray_vars_css.mjs +0 -55
  67. package/dist/tray_vars_css.module.js +0 -55
  68. package/dist/tray_vars_css.module.js.map +0 -1
  69. package/dist/types.d.ts +0 -51
  70. package/dist/types.d.ts.map +0 -1
  71. package/dist/underlay_vars_css.main.js +0 -50
  72. package/dist/underlay_vars_css.main.js.map +0 -1
  73. package/dist/underlay_vars_css.mjs +0 -52
  74. package/dist/underlay_vars_css.module.js +0 -52
  75. package/dist/underlay_vars_css.module.js.map +0 -1
  76. package/src/Modal.tsx +0 -109
  77. package/src/OpenTransition.tsx +0 -47
  78. package/src/Overlay.tsx +0 -77
  79. package/src/Popover.tsx +0 -253
  80. package/src/Tray.tsx +0 -120
  81. package/src/Underlay.tsx +0 -43
  82. package/src/overlays.css +0 -32
package/dist/Popover.mjs DELETED
@@ -1,201 +0,0 @@
1
- import {Overlay as $70305dc5fb729c3b$export$c6fdb837b070b4ff} from "./Overlay.mjs";
2
- import "./overlays.f8d97b78.css";
3
- import $4kQ6h$overlays_cssmodulejs from "./overlays_css.mjs";
4
- import "./overlays.ec5cd7e2.css";
5
- import $4kQ6h$popover_vars_cssmodulejs from "./popover_vars_css.mjs";
6
- import {Underlay as $76a452f4e3df11be$export$f360afc887607b02} from "./Underlay.mjs";
7
- import {usePopover as $4kQ6h$usePopover, DismissButton as $4kQ6h$DismissButton} from "@react-aria/overlays";
8
- import {useDOMRef as $4kQ6h$useDOMRef, useStyleProps as $4kQ6h$useStyleProps, classNames as $4kQ6h$classNames} from "@react-spectrum/utils";
9
- import {useFocusWithin as $4kQ6h$useFocusWithin} from "@react-aria/interactions";
10
- import {useObjectRef as $4kQ6h$useObjectRef, mergeProps as $4kQ6h$mergeProps, useLayoutEffect as $4kQ6h$useLayoutEffect} from "@react-aria/utils";
11
- import $4kQ6h$react, {forwardRef as $4kQ6h$forwardRef, useRef as $4kQ6h$useRef, useState as $4kQ6h$useState} from "react";
12
-
13
-
14
- function $parcel$interopDefault(a) {
15
- return a && a.__esModule ? a.default : a;
16
- }
17
- /*
18
- * Copyright 2020 Adobe. All rights reserved.
19
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
20
- * you may not use this file except in compliance with the License. You may obtain a copy
21
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
22
- *
23
- * Unless required by applicable law or agreed to in writing, software distributed under
24
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
25
- * OF ANY KIND, either express or implied. See the License for the specific language
26
- * governing permissions and limitations under the License.
27
- */
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
- /**
37
- * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
38
- * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
39
- * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
40
- * the path always starts at 0 so that it perfectly overlaps the popover's border.
41
- * See bottom of file for more explanation.
42
- */ let $17b503f7de08fecc$var$arrowPlacement = {
43
- left: 'right',
44
- right: 'right',
45
- top: 'bottom',
46
- bottom: 'bottom'
47
- };
48
- const $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $4kQ6h$forwardRef)(function Popover(props, ref) {
49
- let { children: children, state: state, ...otherProps } = props;
50
- let domRef = (0, $4kQ6h$useDOMRef)(ref);
51
- let wrapperRef = (0, $4kQ6h$useRef)(null);
52
- return /*#__PURE__*/ (0, $4kQ6h$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
53
- ...otherProps,
54
- isOpen: state.isOpen,
55
- nodeRef: wrapperRef
56
- }, /*#__PURE__*/ (0, $4kQ6h$react).createElement($17b503f7de08fecc$var$PopoverWrapper, {
57
- ref: domRef,
58
- ...props,
59
- wrapperRef: wrapperRef
60
- }, children));
61
- });
62
- const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $4kQ6h$forwardRef)((props, ref)=>{
63
- let { children: children, isOpen: isOpen, hideArrow: hideArrow, isNonModal: isNonModal, enableBothDismissButtons: enableBothDismissButtons, state: state, wrapperRef: wrapperRef, onDismissButtonPress: onDismissButtonPress = ()=>state.close() } = props;
64
- let { styleProps: styleProps } = (0, $4kQ6h$useStyleProps)(props);
65
- let objRef = (0, $4kQ6h$useObjectRef)(ref);
66
- let { size: size, borderWidth: borderWidth, arrowRef: arrowRef } = $17b503f7de08fecc$var$useArrowSize();
67
- const borderRadius = $17b503f7de08fecc$var$usePopoverBorderRadius(objRef);
68
- let borderDiagonal = borderWidth * Math.SQRT2;
69
- let primary = size + borderDiagonal;
70
- let secondary = primary * 2;
71
- let { popoverProps: popoverProps, arrowProps: arrowProps, underlayProps: underlayProps, placement: placement } = (0, $4kQ6h$usePopover)({
72
- ...props,
73
- popoverRef: objRef,
74
- maxHeight: undefined,
75
- arrowSize: hideArrow ? 0 : secondary,
76
- arrowBoundaryOffset: borderRadius
77
- }, state);
78
- let { focusWithinProps: focusWithinProps } = (0, $4kQ6h$useFocusWithin)(props);
79
- // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
80
- return /*#__PURE__*/ (0, $4kQ6h$react).createElement("div", {
81
- ref: wrapperRef
82
- }, !isNonModal && /*#__PURE__*/ (0, $4kQ6h$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
83
- isTransparent: true,
84
- ...(0, $4kQ6h$mergeProps)(underlayProps),
85
- isOpen: isOpen
86
- }), /*#__PURE__*/ (0, $4kQ6h$react).createElement("div", {
87
- ...styleProps,
88
- ...(0, $4kQ6h$mergeProps)(popoverProps, focusWithinProps),
89
- style: {
90
- ...styleProps.style,
91
- ...popoverProps.style
92
- },
93
- ref: objRef,
94
- className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
95
- 'spectrum-Popover--withTip': !hideArrow,
96
- 'is-open': isOpen,
97
- [`is-open--${placement}`]: isOpen
98
- }, (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$overlays_cssmodulejs))), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
99
- role: "presentation",
100
- "data-testid": "popover"
101
- }, (!isNonModal || enableBothDismissButtons) && /*#__PURE__*/ (0, $4kQ6h$react).createElement((0, $4kQ6h$DismissButton), {
102
- onDismiss: onDismissButtonPress
103
- }), children, hideArrow ? null : /*#__PURE__*/ (0, $4kQ6h$react).createElement($17b503f7de08fecc$var$Arrow, {
104
- arrowProps: arrowProps,
105
- isLandscape: placement != null ? $17b503f7de08fecc$var$arrowPlacement[placement] === 'bottom' : false,
106
- arrowRef: arrowRef,
107
- primary: primary,
108
- secondary: secondary,
109
- borderDiagonal: borderDiagonal
110
- }), /*#__PURE__*/ (0, $4kQ6h$react).createElement((0, $4kQ6h$DismissButton), {
111
- onDismiss: onDismissButtonPress
112
- })));
113
- });
114
- function $17b503f7de08fecc$var$usePopoverBorderRadius(popoverRef) {
115
- let [borderRadius, setBorderRadius] = (0, $4kQ6h$useState)(0);
116
- (0, $4kQ6h$useLayoutEffect)(()=>{
117
- if (popoverRef.current) {
118
- let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
119
- if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
120
- }
121
- }, [
122
- popoverRef
123
- ]);
124
- return borderRadius;
125
- }
126
- function $17b503f7de08fecc$var$useArrowSize() {
127
- let [size, setSize] = (0, $4kQ6h$useState)(20);
128
- let [borderWidth, setBorderWidth] = (0, $4kQ6h$useState)(1);
129
- let arrowRef = (0, $4kQ6h$useRef)(null);
130
- // get the css value for the tip size and divide it by 2 for this arrow implementation
131
- (0, $4kQ6h$useLayoutEffect)(()=>{
132
- if (arrowRef.current) {
133
- let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-size');
134
- if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
135
- let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
136
- if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
137
- }
138
- }, []);
139
- return {
140
- size: size,
141
- borderWidth: borderWidth,
142
- arrowRef: arrowRef
143
- };
144
- }
145
- function $17b503f7de08fecc$var$Arrow(props) {
146
- let { primary: primary, secondary: secondary, isLandscape: isLandscape, arrowProps: arrowProps, borderDiagonal: borderDiagonal, arrowRef: arrowRef } = props;
147
- let halfBorderDiagonal = borderDiagonal / 2;
148
- let primaryStart = 0;
149
- let primaryEnd = primary - halfBorderDiagonal;
150
- let secondaryStart = halfBorderDiagonal;
151
- let secondaryMiddle = secondary / 2;
152
- let secondaryEnd = secondary - halfBorderDiagonal;
153
- let pathData = isLandscape ? [
154
- 'M',
155
- secondaryStart,
156
- primaryStart,
157
- 'L',
158
- secondaryMiddle,
159
- primaryEnd,
160
- 'L',
161
- secondaryEnd,
162
- primaryStart
163
- ] : [
164
- 'M',
165
- primaryStart,
166
- secondaryStart,
167
- 'L',
168
- primaryEnd,
169
- secondaryMiddle,
170
- 'L',
171
- primaryStart,
172
- secondaryEnd
173
- ];
174
- /* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, $4kQ6h$react).createElement("svg", {
175
- xmlns: "http://www.w3.org/svg/2000",
176
- width: Math.ceil(isLandscape ? secondary : primary),
177
- height: Math.ceil(isLandscape ? primary : secondary),
178
- className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover-tip'),
179
- ref: arrowRef,
180
- ...arrowProps
181
- }, /*#__PURE__*/ (0, $4kQ6h$react).createElement("path", {
182
- className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover-tip-triangle'),
183
- d: pathData.join(' ')
184
- }));
185
- } /**
186
- * More explanation on popover tips.
187
- * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.
188
- * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.
189
- * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.
190
- * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.
191
- * - I tried getting the client bounding box and setting the svg to that partial pixel value
192
- * This didn't work because again the issue was inside the svg
193
- * - I didn't try drawing the svg backwards
194
- * This could still be tried
195
- * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded
196
- * This seems to have done the trick.
197
- */
198
-
199
-
200
- export {$17b503f7de08fecc$export$5b6b19405a83ff9d as Popover};
201
- //# sourceMappingURL=Popover.module.js.map
@@ -1,201 +0,0 @@
1
- import {Overlay as $70305dc5fb729c3b$export$c6fdb837b070b4ff} from "./Overlay.module.js";
2
- import "./overlays.f8d97b78.css";
3
- import $4kQ6h$overlays_cssmodulejs from "./overlays_css.module.js";
4
- import "./overlays.ec5cd7e2.css";
5
- import $4kQ6h$popover_vars_cssmodulejs from "./popover_vars_css.module.js";
6
- import {Underlay as $76a452f4e3df11be$export$f360afc887607b02} from "./Underlay.module.js";
7
- import {usePopover as $4kQ6h$usePopover, DismissButton as $4kQ6h$DismissButton} from "@react-aria/overlays";
8
- import {useDOMRef as $4kQ6h$useDOMRef, useStyleProps as $4kQ6h$useStyleProps, classNames as $4kQ6h$classNames} from "@react-spectrum/utils";
9
- import {useFocusWithin as $4kQ6h$useFocusWithin} from "@react-aria/interactions";
10
- import {useObjectRef as $4kQ6h$useObjectRef, mergeProps as $4kQ6h$mergeProps, useLayoutEffect as $4kQ6h$useLayoutEffect} from "@react-aria/utils";
11
- import $4kQ6h$react, {forwardRef as $4kQ6h$forwardRef, useRef as $4kQ6h$useRef, useState as $4kQ6h$useState} from "react";
12
-
13
-
14
- function $parcel$interopDefault(a) {
15
- return a && a.__esModule ? a.default : a;
16
- }
17
- /*
18
- * Copyright 2020 Adobe. All rights reserved.
19
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
20
- * you may not use this file except in compliance with the License. You may obtain a copy
21
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
22
- *
23
- * Unless required by applicable law or agreed to in writing, software distributed under
24
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
25
- * OF ANY KIND, either express or implied. See the License for the specific language
26
- * governing permissions and limitations under the License.
27
- */
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
- /**
37
- * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
38
- * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
39
- * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
40
- * the path always starts at 0 so that it perfectly overlaps the popover's border.
41
- * See bottom of file for more explanation.
42
- */ let $17b503f7de08fecc$var$arrowPlacement = {
43
- left: 'right',
44
- right: 'right',
45
- top: 'bottom',
46
- bottom: 'bottom'
47
- };
48
- const $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $4kQ6h$forwardRef)(function Popover(props, ref) {
49
- let { children: children, state: state, ...otherProps } = props;
50
- let domRef = (0, $4kQ6h$useDOMRef)(ref);
51
- let wrapperRef = (0, $4kQ6h$useRef)(null);
52
- return /*#__PURE__*/ (0, $4kQ6h$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
53
- ...otherProps,
54
- isOpen: state.isOpen,
55
- nodeRef: wrapperRef
56
- }, /*#__PURE__*/ (0, $4kQ6h$react).createElement($17b503f7de08fecc$var$PopoverWrapper, {
57
- ref: domRef,
58
- ...props,
59
- wrapperRef: wrapperRef
60
- }, children));
61
- });
62
- const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $4kQ6h$forwardRef)((props, ref)=>{
63
- let { children: children, isOpen: isOpen, hideArrow: hideArrow, isNonModal: isNonModal, enableBothDismissButtons: enableBothDismissButtons, state: state, wrapperRef: wrapperRef, onDismissButtonPress: onDismissButtonPress = ()=>state.close() } = props;
64
- let { styleProps: styleProps } = (0, $4kQ6h$useStyleProps)(props);
65
- let objRef = (0, $4kQ6h$useObjectRef)(ref);
66
- let { size: size, borderWidth: borderWidth, arrowRef: arrowRef } = $17b503f7de08fecc$var$useArrowSize();
67
- const borderRadius = $17b503f7de08fecc$var$usePopoverBorderRadius(objRef);
68
- let borderDiagonal = borderWidth * Math.SQRT2;
69
- let primary = size + borderDiagonal;
70
- let secondary = primary * 2;
71
- let { popoverProps: popoverProps, arrowProps: arrowProps, underlayProps: underlayProps, placement: placement } = (0, $4kQ6h$usePopover)({
72
- ...props,
73
- popoverRef: objRef,
74
- maxHeight: undefined,
75
- arrowSize: hideArrow ? 0 : secondary,
76
- arrowBoundaryOffset: borderRadius
77
- }, state);
78
- let { focusWithinProps: focusWithinProps } = (0, $4kQ6h$useFocusWithin)(props);
79
- // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
80
- return /*#__PURE__*/ (0, $4kQ6h$react).createElement("div", {
81
- ref: wrapperRef
82
- }, !isNonModal && /*#__PURE__*/ (0, $4kQ6h$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
83
- isTransparent: true,
84
- ...(0, $4kQ6h$mergeProps)(underlayProps),
85
- isOpen: isOpen
86
- }), /*#__PURE__*/ (0, $4kQ6h$react).createElement("div", {
87
- ...styleProps,
88
- ...(0, $4kQ6h$mergeProps)(popoverProps, focusWithinProps),
89
- style: {
90
- ...styleProps.style,
91
- ...popoverProps.style
92
- },
93
- ref: objRef,
94
- className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
95
- 'spectrum-Popover--withTip': !hideArrow,
96
- 'is-open': isOpen,
97
- [`is-open--${placement}`]: isOpen
98
- }, (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$overlays_cssmodulejs))), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
99
- role: "presentation",
100
- "data-testid": "popover"
101
- }, (!isNonModal || enableBothDismissButtons) && /*#__PURE__*/ (0, $4kQ6h$react).createElement((0, $4kQ6h$DismissButton), {
102
- onDismiss: onDismissButtonPress
103
- }), children, hideArrow ? null : /*#__PURE__*/ (0, $4kQ6h$react).createElement($17b503f7de08fecc$var$Arrow, {
104
- arrowProps: arrowProps,
105
- isLandscape: placement != null ? $17b503f7de08fecc$var$arrowPlacement[placement] === 'bottom' : false,
106
- arrowRef: arrowRef,
107
- primary: primary,
108
- secondary: secondary,
109
- borderDiagonal: borderDiagonal
110
- }), /*#__PURE__*/ (0, $4kQ6h$react).createElement((0, $4kQ6h$DismissButton), {
111
- onDismiss: onDismissButtonPress
112
- })));
113
- });
114
- function $17b503f7de08fecc$var$usePopoverBorderRadius(popoverRef) {
115
- let [borderRadius, setBorderRadius] = (0, $4kQ6h$useState)(0);
116
- (0, $4kQ6h$useLayoutEffect)(()=>{
117
- if (popoverRef.current) {
118
- let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
119
- if (spectrumBorderRadius !== '') setBorderRadius(parseInt(spectrumBorderRadius, 10));
120
- }
121
- }, [
122
- popoverRef
123
- ]);
124
- return borderRadius;
125
- }
126
- function $17b503f7de08fecc$var$useArrowSize() {
127
- let [size, setSize] = (0, $4kQ6h$useState)(20);
128
- let [borderWidth, setBorderWidth] = (0, $4kQ6h$useState)(1);
129
- let arrowRef = (0, $4kQ6h$useRef)(null);
130
- // get the css value for the tip size and divide it by 2 for this arrow implementation
131
- (0, $4kQ6h$useLayoutEffect)(()=>{
132
- if (arrowRef.current) {
133
- let spectrumTipWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-size');
134
- if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
135
- let spectrumBorderWidth = window.getComputedStyle(arrowRef.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
136
- if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
137
- }
138
- }, []);
139
- return {
140
- size: size,
141
- borderWidth: borderWidth,
142
- arrowRef: arrowRef
143
- };
144
- }
145
- function $17b503f7de08fecc$var$Arrow(props) {
146
- let { primary: primary, secondary: secondary, isLandscape: isLandscape, arrowProps: arrowProps, borderDiagonal: borderDiagonal, arrowRef: arrowRef } = props;
147
- let halfBorderDiagonal = borderDiagonal / 2;
148
- let primaryStart = 0;
149
- let primaryEnd = primary - halfBorderDiagonal;
150
- let secondaryStart = halfBorderDiagonal;
151
- let secondaryMiddle = secondary / 2;
152
- let secondaryEnd = secondary - halfBorderDiagonal;
153
- let pathData = isLandscape ? [
154
- 'M',
155
- secondaryStart,
156
- primaryStart,
157
- 'L',
158
- secondaryMiddle,
159
- primaryEnd,
160
- 'L',
161
- secondaryEnd,
162
- primaryStart
163
- ] : [
164
- 'M',
165
- primaryStart,
166
- secondaryStart,
167
- 'L',
168
- primaryEnd,
169
- secondaryMiddle,
170
- 'L',
171
- primaryStart,
172
- secondaryEnd
173
- ];
174
- /* use ceil because the svg needs to always accommodate the path inside it */ return /*#__PURE__*/ (0, $4kQ6h$react).createElement("svg", {
175
- xmlns: "http://www.w3.org/svg/2000",
176
- width: Math.ceil(isLandscape ? secondary : primary),
177
- height: Math.ceil(isLandscape ? primary : secondary),
178
- className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover-tip'),
179
- ref: arrowRef,
180
- ...arrowProps
181
- }, /*#__PURE__*/ (0, $4kQ6h$react).createElement("path", {
182
- className: (0, $4kQ6h$classNames)((0, ($parcel$interopDefault($4kQ6h$popover_vars_cssmodulejs))), 'spectrum-Popover-tip-triangle'),
183
- d: pathData.join(' ')
184
- }));
185
- } /**
186
- * More explanation on popover tips.
187
- * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.
188
- * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.
189
- * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.
190
- * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.
191
- * - I tried getting the client bounding box and setting the svg to that partial pixel value
192
- * This didn't work because again the issue was inside the svg
193
- * - I didn't try drawing the svg backwards
194
- * This could still be tried
195
- * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded
196
- * This seems to have done the trick.
197
- */
198
-
199
-
200
- export {$17b503f7de08fecc$export$5b6b19405a83ff9d as Popover};
201
- //# sourceMappingURL=Popover.module.js.map
@@ -1 +0,0 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/overlays/src/Popover.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 {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, RefObject, StyleProps} from '@react-types/shared';\nimport {FocusWithinProps, useFocusWithin} from '@react-aria/interactions';\nimport {mergeProps, useLayoutEffect, useObjectRef} from '@react-aria/utils';\nimport {Overlay} from './Overlay';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {ForwardedRef, forwardRef, ReactNode, useRef, useState} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/popover/vars.css';\nimport {Underlay} from './Underlay';\n\ninterface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'>, FocusWithinProps, StyleProps {\n children: ReactNode,\n hideArrow?: boolean,\n state: OverlayTriggerState,\n shouldContainFocus?: boolean,\n onEntering?: () => void,\n onEnter?: () => void,\n onEntered?: () => void,\n onExiting?: () => void,\n onExited?: () => void,\n onExit?: () => void,\n container?: HTMLElement,\n disableFocusManagement?: boolean,\n enableBothDismissButtons?: boolean,\n onDismissButtonPress?: () => void\n}\n\ninterface PopoverWrapperProps extends PopoverProps, FocusWithinProps {\n isOpen?: boolean,\n wrapperRef: RefObject<HTMLDivElement | null>\n}\n\ninterface ArrowProps {\n arrowProps: PopoverAria['arrowProps'],\n isLandscape: boolean,\n arrowRef?: RefObject<SVGSVGElement | null>,\n primary: number,\n secondary: number,\n borderDiagonal: number\n}\n\n/**\n * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the\n * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and\n * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that\n * the path always starts at 0 so that it perfectly overlaps the popover's border.\n * See bottom of file for more explanation.\n */\nlet arrowPlacement = {\n left: 'right',\n right: 'right',\n top: 'bottom',\n bottom: 'bottom'\n};\n\nexport const Popover = forwardRef(function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {\n let {\n children,\n state,\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>\n {children}\n </PopoverWrapper>\n </Overlay>\n );\n});\n\nconst PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) => {\n let {\n children,\n isOpen,\n hideArrow,\n isNonModal,\n enableBothDismissButtons,\n state,\n wrapperRef,\n onDismissButtonPress = () => state.close()\n } = props;\n let {styleProps} = useStyleProps(props);\n let objRef = useObjectRef(ref);\n\n let {size, borderWidth, arrowRef} = useArrowSize();\n const borderRadius = usePopoverBorderRadius(objRef);\n let borderDiagonal = borderWidth * Math.SQRT2;\n let primary = size + borderDiagonal;\n let secondary = primary * 2;\n let {\n popoverProps,\n arrowProps,\n underlayProps,\n placement\n } = usePopover({\n ...props,\n popoverRef: objRef,\n maxHeight: undefined,\n arrowSize: hideArrow ? 0 : secondary,\n arrowBoundaryOffset: borderRadius\n }, state);\n let {focusWithinProps} = useFocusWithin(props);\n\n // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n {!isNonModal && <Underlay isTransparent {...mergeProps(underlayProps)} isOpen={isOpen} /> }\n <div\n {...styleProps}\n {...mergeProps(popoverProps, focusWithinProps)}\n style={{\n ...styleProps.style,\n ...popoverProps.style\n }}\n ref={objRef}\n className={\n classNames(\n styles,\n 'spectrum-Popover',\n `spectrum-Popover--${placement}`,\n {\n 'spectrum-Popover--withTip': !hideArrow,\n 'is-open': isOpen,\n [`is-open--${placement}`]: isOpen\n },\n classNames(\n overrideStyles,\n 'spectrum-Popover',\n 'react-spectrum-Popover'\n ),\n styleProps.className\n )\n }\n role=\"presentation\"\n data-testid=\"popover\">\n {(!isNonModal || enableBothDismissButtons) && <DismissButton onDismiss={onDismissButtonPress} />}\n {children}\n {hideArrow ? null : (\n <Arrow\n arrowProps={arrowProps}\n isLandscape={placement != null ? arrowPlacement[placement] === 'bottom' : false}\n arrowRef={arrowRef}\n primary={primary}\n secondary={secondary}\n borderDiagonal={borderDiagonal} />\n )}\n <DismissButton onDismiss={onDismissButtonPress} />\n </div>\n </div>\n );\n});\n\nfunction usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement | null>) {\n let [borderRadius, setBorderRadius] = useState(0);\n useLayoutEffect(() => {\n if (popoverRef.current) {\n let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;\n if (spectrumBorderRadius !== '') {\n setBorderRadius(parseInt(spectrumBorderRadius, 10));\n }\n }\n }, [popoverRef]);\n return borderRadius;\n}\n\nfunction useArrowSize() {\n let [size, setSize] = useState(20);\n let [borderWidth, setBorderWidth] = useState(1);\n let arrowRef = useRef<SVGSVGElement>(null);\n // get the css value for the tip size and divide it by 2 for this arrow implementation\n useLayoutEffect(() => {\n if (arrowRef.current) {\n let spectrumTipWidth = window.getComputedStyle(arrowRef.current)\n .getPropertyValue('--spectrum-popover-tip-size');\n if (spectrumTipWidth !== '') {\n setSize(parseInt(spectrumTipWidth, 10) / 2);\n }\n\n let spectrumBorderWidth = window.getComputedStyle(arrowRef.current)\n .getPropertyValue('--spectrum-popover-tip-borderWidth');\n if (spectrumBorderWidth !== '') {\n setBorderWidth(parseInt(spectrumBorderWidth, 10));\n }\n }\n }, []);\n return {size, borderWidth, arrowRef};\n}\n\nfunction Arrow(props: ArrowProps) {\n let {primary, secondary, isLandscape, arrowProps, borderDiagonal, arrowRef} = props;\n let halfBorderDiagonal = borderDiagonal / 2;\n\n let primaryStart = 0;\n let primaryEnd = primary - halfBorderDiagonal;\n\n let secondaryStart = halfBorderDiagonal;\n let secondaryMiddle = secondary / 2;\n let secondaryEnd = secondary - halfBorderDiagonal;\n\n let pathData = isLandscape ? [\n 'M', secondaryStart, primaryStart,\n 'L', secondaryMiddle, primaryEnd,\n 'L', secondaryEnd, primaryStart\n ] : [\n 'M', primaryStart, secondaryStart,\n 'L', primaryEnd, secondaryMiddle,\n 'L', primaryStart, secondaryEnd\n ];\n\n /* use ceil because the svg needs to always accommodate the path inside it */\n return (\n <svg\n xmlns=\"http://www.w3.org/svg/2000\"\n width={Math.ceil(isLandscape ? secondary : primary)}\n height={Math.ceil(isLandscape ? primary : secondary)}\n className={classNames(styles, 'spectrum-Popover-tip')}\n ref={arrowRef}\n {...arrowProps}>\n <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />\n </svg>\n );\n}\n\n/**\n * More explanation on popover tips.\n * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.\n * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.\n * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.\n * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.\n * - I tried getting the client bounding box and setting the svg to that partial pixel value\n * This didn't work because again the issue was inside the svg\n * - I didn't try drawing the svg backwards\n * This could still be tried\n * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded\n * This seems to have done the trick.\n */\n"],"names":[],"version":3,"file":"Popover.module.js.map"}
package/dist/Tray.main.js DELETED
@@ -1,105 +0,0 @@
1
- var $2aebdc186fd41e87$exports = require("./Overlay.main.js");
2
- require("./overlays.f8d97b78.css");
3
- var $e9a663ccb19ed1b0$exports = require("./overlays_css.main.js");
4
- require("./overlays.f1e5a60e.css");
5
- var $3ba16c5c57f2a636$exports = require("./tray_vars_css.main.js");
6
- var $b900e75089bdd9cd$exports = require("./Underlay.main.js");
7
- var $fWgpJ$reactariaoverlays = require("@react-aria/overlays");
8
- var $fWgpJ$reactspectrumutils = require("@react-spectrum/utils");
9
- var $fWgpJ$react = require("react");
10
- var $fWgpJ$reactariautils = require("@react-aria/utils");
11
-
12
-
13
- function $parcel$interopDefault(a) {
14
- return a && a.__esModule ? a.default : a;
15
- }
16
-
17
- function $parcel$export(e, n, v, s) {
18
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
19
- }
20
-
21
- $parcel$export(module.exports, "Tray", () => $6b386deda21be662$export$4589ed81930b555c);
22
- /*
23
- * Copyright 2020 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
-
40
- const $6b386deda21be662$export$4589ed81930b555c = /*#__PURE__*/ (0, $fWgpJ$react.forwardRef)(function Tray(props, ref) {
41
- let { children: children, state: state, ...otherProps } = props;
42
- let domRef = (0, $fWgpJ$reactspectrumutils.useDOMRef)(ref);
43
- let wrapperRef = (0, $fWgpJ$react.useRef)(null);
44
- return /*#__PURE__*/ (0, ($parcel$interopDefault($fWgpJ$react))).createElement((0, $2aebdc186fd41e87$exports.Overlay), {
45
- ...otherProps,
46
- isOpen: state.isOpen,
47
- nodeRef: wrapperRef
48
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($fWgpJ$react))).createElement($6b386deda21be662$var$TrayWrapper, {
49
- ...props,
50
- wrapperRef: wrapperRef,
51
- ref: domRef
52
- }, children));
53
- });
54
- let $6b386deda21be662$var$TrayWrapper = /*#__PURE__*/ (0, $fWgpJ$react.forwardRef)(function(props, ref) {
55
- let { children: children, isOpen: isOpen, isFixedHeight: isFixedHeight, state: state, wrapperRef: wrapperRef } = props;
56
- let { styleProps: styleProps } = (0, $fWgpJ$reactspectrumutils.useStyleProps)(props);
57
- let objRef = (0, $fWgpJ$reactariautils.useObjectRef)(ref);
58
- let { modalProps: modalProps, underlayProps: underlayProps } = (0, $fWgpJ$reactariaoverlays.useModalOverlay)({
59
- ...props,
60
- isDismissable: true
61
- }, state, objRef);
62
- // We need to measure the window's height in JS rather than using percentages in CSS
63
- // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
64
- // does not work properly because there is nothing to base the percentage on.
65
- // We cannot use vh units because mobile browsers adjust the window height dynamically
66
- // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
67
- // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
68
- // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
69
- let viewport = (0, $fWgpJ$reactariautils.useViewportSize)();
70
- let wrapperStyle = {
71
- '--spectrum-visual-viewport-height': viewport.height + 'px',
72
- // position: fixed elements are clipped by Safari on iOS 26, so we use
73
- // position: absolute and manually set the top to the scrollY.
74
- // The page can't scroll while the tray is open so this doesn't need to update.
75
- top: typeof window !== 'undefined' ? window.scrollY : 0
76
- };
77
- let wrapperClassName = (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3ba16c5c57f2a636$exports))), 'spectrum-Tray-wrapper');
78
- let className = (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3ba16c5c57f2a636$exports))), 'spectrum-Tray', {
79
- 'is-open': isOpen,
80
- 'spectrum-Tray--fixedHeight': isFixedHeight
81
- }, (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e9a663ccb19ed1b0$exports))), 'spectrum-Tray', 'react-spectrum-Tray'), styleProps.className);
82
- // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
83
- return /*#__PURE__*/ (0, ($parcel$interopDefault($fWgpJ$react))).createElement("div", {
84
- ref: wrapperRef
85
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($fWgpJ$react))).createElement((0, $b900e75089bdd9cd$exports.Underlay), {
86
- ...underlayProps,
87
- isOpen: isOpen
88
- }), /*#__PURE__*/ (0, ($parcel$interopDefault($fWgpJ$react))).createElement("div", {
89
- className: wrapperClassName,
90
- style: wrapperStyle
91
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($fWgpJ$react))).createElement("div", {
92
- ...styleProps,
93
- ...modalProps,
94
- className: className,
95
- ref: objRef,
96
- "data-testid": "tray"
97
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($fWgpJ$react))).createElement((0, $fWgpJ$reactariaoverlays.DismissButton), {
98
- onDismiss: state.close
99
- }), children, /*#__PURE__*/ (0, ($parcel$interopDefault($fWgpJ$react))).createElement((0, $fWgpJ$reactariaoverlays.DismissButton), {
100
- onDismiss: state.close
101
- }))));
102
- });
103
-
104
-
105
- //# sourceMappingURL=Tray.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBM,MAAM,0DAAO,CAAA,GAAA,uBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,IAAI,YAAC,QAAQ,SAAE,KAAK,EAAE,GAAG,YAAW,GAAG;IACvC,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,mBAAK,EAAkB;IAExC,qBACE,0DAAC,CAAA,GAAA,iCAAM;QAAG,GAAG,UAAU;QAAE,QAAQ,MAAM,MAAM;QAAE,SAAS;qBACtD,0DAAC;QAAa,GAAG,KAAK;QAAE,YAAY;QAAY,KAAK;OAClD;AAIT;AAEA,IAAI,kDAAc,CAAA,GAAA,uBAAS,EAAE,SAAU,KAAuB,EAAE,GAAwC;IACtG,IAAI,YACF,QAAQ,UACR,MAAM,iBACN,aAAa,SACb,KAAK,cACL,UAAU,EACX,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,kCAAW,EAAE;IAE1B,IAAI,cAAC,UAAU,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,wCAAc,EAAE;QAChD,GAAG,KAAK;QACR,eAAe;IACjB,GAAG,OAAO;IAEV,oFAAoF;IACpF,sFAAsF;IACtF,6EAA6E;IAC7E,sFAAsF;IACtF,uFAAuF;IACvF,0FAA0F;IAC1F,2FAA2F;IAC3F,IAAI,WAAW,CAAA,GAAA,qCAAc;IAC7B,IAAI,eAAoB;QACtB,qCAAqC,SAAS,MAAM,GAAG;QACvD,sEAAsE;QACtE,8DAA8D;QAC9D,+EAA+E;QAC/E,KAAK,OAAO,WAAW,cAAc,OAAO,OAAO,GAAG;IACxD;IAEA,IAAI,mBAAmB,CAAA,GAAA,oCAAS,EAC9B,CAAA,GAAA,mDAAS,GACT;IAGF,IAAI,YAAY,CAAA,GAAA,oCAAS,EACvB,CAAA,GAAA,mDAAS,GACT,iBACA;QACE,WAAW;QACX,8BAA8B;IAChC,GACA,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAa,GACb,iBACA,wBAEF,WAAW,SAAS;IAGtB,4LAA4L;IAC5L,qBACE,0DAAC;QAAI,KAAK;qBACR,0DAAC,CAAA,GAAA,kCAAO;QAAG,GAAG,aAAa;QAAE,QAAQ;sBACrC,0DAAC;QAAI,WAAW;QAAkB,OAAO;qBACvC,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,UAAU;QACd,WAAW;QACX,KAAK;QACL,eAAY;qBACZ,0DAAC,CAAA,GAAA,sCAAY;QAAE,WAAW,MAAM,KAAK;QACpC,wBACD,0DAAC,CAAA,GAAA,sCAAY;QAAE,WAAW,MAAM,KAAK;;AAK/C","sources":["packages/@react-spectrum/overlays/src/Tray.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 {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMRef, RefObject, StyleProps} from '@react-types/shared';\nimport {Overlay} from './Overlay';\nimport {OverlayProps} from '@react-types/overlays';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport overrideStyles from './overlays.css';\nimport React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react';\nimport trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';\nimport {Underlay} from './Underlay';\nimport {useObjectRef, useViewportSize} from '@react-aria/utils';\n\ninterface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {\n children: ReactNode,\n state: OverlayTriggerState,\n isFixedHeight?: boolean\n}\n\ninterface TrayWrapperProps extends TrayProps {\n isOpen?: boolean,\n wrapperRef: RefObject<HTMLDivElement | null>\n}\n\nexport const Tray = forwardRef(function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {\n let {children, state, ...otherProps} = props;\n let domRef = useDOMRef(ref);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n return (\n <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>\n <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>\n {children}\n </TrayWrapper>\n </Overlay>\n );\n});\n\nlet TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) {\n let {\n children,\n isOpen,\n isFixedHeight,\n state,\n wrapperRef\n } = props;\n let {styleProps} = useStyleProps(props);\n let objRef = useObjectRef(ref);\n\n let {modalProps, underlayProps} = useModalOverlay({\n ...props,\n isDismissable: true\n }, state, objRef);\n\n // We need to measure the window's height in JS rather than using percentages in CSS\n // so that contents (e.g. menu) can inherit the max-height properly. Using percentages\n // does not work properly because there is nothing to base the percentage on.\n // We cannot use vh units because mobile browsers adjust the window height dynamically\n // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.\n // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard\n // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.\n let viewport = useViewportSize();\n let wrapperStyle: any = {\n '--spectrum-visual-viewport-height': viewport.height + 'px',\n // position: fixed elements are clipped by Safari on iOS 26, so we use\n // position: absolute and manually set the top to the scrollY.\n // The page can't scroll while the tray is open so this doesn't need to update.\n top: typeof window !== 'undefined' ? window.scrollY : 0\n };\n\n let wrapperClassName = classNames(\n trayStyles,\n 'spectrum-Tray-wrapper'\n );\n\n let className = classNames(\n trayStyles,\n 'spectrum-Tray',\n {\n 'is-open': isOpen,\n 'spectrum-Tray--fixedHeight': isFixedHeight\n },\n classNames(\n overrideStyles,\n 'spectrum-Tray',\n 'react-spectrum-Tray'\n ),\n styleProps.className\n );\n\n // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231\n return (\n <div ref={wrapperRef}>\n <Underlay {...underlayProps} isOpen={isOpen} />\n <div className={wrapperClassName} style={wrapperStyle}>\n <div\n {...styleProps}\n {...modalProps}\n className={className}\n ref={objRef}\n data-testid=\"tray\">\n <DismissButton onDismiss={state.close} />\n {children}\n <DismissButton onDismiss={state.close} />\n </div>\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"Tray.main.js.map"}
package/dist/Tray.mjs DELETED
@@ -1,100 +0,0 @@
1
- import {Overlay as $70305dc5fb729c3b$export$c6fdb837b070b4ff} from "./Overlay.mjs";
2
- import "./overlays.f8d97b78.css";
3
- import $3XF9U$overlays_cssmodulejs from "./overlays_css.mjs";
4
- import "./overlays.f1e5a60e.css";
5
- import $3XF9U$tray_vars_cssmodulejs from "./tray_vars_css.mjs";
6
- import {Underlay as $76a452f4e3df11be$export$f360afc887607b02} from "./Underlay.mjs";
7
- import {useModalOverlay as $3XF9U$useModalOverlay, DismissButton as $3XF9U$DismissButton} from "@react-aria/overlays";
8
- import {useDOMRef as $3XF9U$useDOMRef, useStyleProps as $3XF9U$useStyleProps, classNames as $3XF9U$classNames} from "@react-spectrum/utils";
9
- import $3XF9U$react, {forwardRef as $3XF9U$forwardRef, useRef as $3XF9U$useRef} from "react";
10
- import {useObjectRef as $3XF9U$useObjectRef, useViewportSize as $3XF9U$useViewportSize} from "@react-aria/utils";
11
-
12
-
13
- function $parcel$interopDefault(a) {
14
- return a && a.__esModule ? a.default : a;
15
- }
16
- /*
17
- * Copyright 2020 Adobe. All rights reserved.
18
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
19
- * you may not use this file except in compliance with the License. You may obtain a copy
20
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
21
- *
22
- * Unless required by applicable law or agreed to in writing, software distributed under
23
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
24
- * OF ANY KIND, either express or implied. See the License for the specific language
25
- * governing permissions and limitations under the License.
26
- */
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
- const $1afc87f3d16a5a1c$export$4589ed81930b555c = /*#__PURE__*/ (0, $3XF9U$forwardRef)(function Tray(props, ref) {
35
- let { children: children, state: state, ...otherProps } = props;
36
- let domRef = (0, $3XF9U$useDOMRef)(ref);
37
- let wrapperRef = (0, $3XF9U$useRef)(null);
38
- return /*#__PURE__*/ (0, $3XF9U$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
39
- ...otherProps,
40
- isOpen: state.isOpen,
41
- nodeRef: wrapperRef
42
- }, /*#__PURE__*/ (0, $3XF9U$react).createElement($1afc87f3d16a5a1c$var$TrayWrapper, {
43
- ...props,
44
- wrapperRef: wrapperRef,
45
- ref: domRef
46
- }, children));
47
- });
48
- let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ (0, $3XF9U$forwardRef)(function(props, ref) {
49
- let { children: children, isOpen: isOpen, isFixedHeight: isFixedHeight, state: state, wrapperRef: wrapperRef } = props;
50
- let { styleProps: styleProps } = (0, $3XF9U$useStyleProps)(props);
51
- let objRef = (0, $3XF9U$useObjectRef)(ref);
52
- let { modalProps: modalProps, underlayProps: underlayProps } = (0, $3XF9U$useModalOverlay)({
53
- ...props,
54
- isDismissable: true
55
- }, state, objRef);
56
- // We need to measure the window's height in JS rather than using percentages in CSS
57
- // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
58
- // does not work properly because there is nothing to base the percentage on.
59
- // We cannot use vh units because mobile browsers adjust the window height dynamically
60
- // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
61
- // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
62
- // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
63
- let viewport = (0, $3XF9U$useViewportSize)();
64
- let wrapperStyle = {
65
- '--spectrum-visual-viewport-height': viewport.height + 'px',
66
- // position: fixed elements are clipped by Safari on iOS 26, so we use
67
- // position: absolute and manually set the top to the scrollY.
68
- // The page can't scroll while the tray is open so this doesn't need to update.
69
- top: typeof window !== 'undefined' ? window.scrollY : 0
70
- };
71
- let wrapperClassName = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))), 'spectrum-Tray-wrapper');
72
- let className = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))), 'spectrum-Tray', {
73
- 'is-open': isOpen,
74
- 'spectrum-Tray--fixedHeight': isFixedHeight
75
- }, (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$overlays_cssmodulejs))), 'spectrum-Tray', 'react-spectrum-Tray'), styleProps.className);
76
- // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
77
- return /*#__PURE__*/ (0, $3XF9U$react).createElement("div", {
78
- ref: wrapperRef
79
- }, /*#__PURE__*/ (0, $3XF9U$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
80
- ...underlayProps,
81
- isOpen: isOpen
82
- }), /*#__PURE__*/ (0, $3XF9U$react).createElement("div", {
83
- className: wrapperClassName,
84
- style: wrapperStyle
85
- }, /*#__PURE__*/ (0, $3XF9U$react).createElement("div", {
86
- ...styleProps,
87
- ...modalProps,
88
- className: className,
89
- ref: objRef,
90
- "data-testid": "tray"
91
- }, /*#__PURE__*/ (0, $3XF9U$react).createElement((0, $3XF9U$DismissButton), {
92
- onDismiss: state.close
93
- }), children, /*#__PURE__*/ (0, $3XF9U$react).createElement((0, $3XF9U$DismissButton), {
94
- onDismiss: state.close
95
- }))));
96
- });
97
-
98
-
99
- export {$1afc87f3d16a5a1c$export$4589ed81930b555c as Tray};
100
- //# sourceMappingURL=Tray.module.js.map