@react-spectrum/overlays 5.8.2 → 5.9.1
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/OpenTransition.main.js +1 -4
- package/dist/OpenTransition.main.js.map +1 -1
- package/dist/OpenTransition.mjs +1 -4
- package/dist/OpenTransition.module.js +1 -4
- package/dist/OpenTransition.module.js.map +1 -1
- package/dist/Tray.main.js +6 -2
- package/dist/Tray.main.js.map +1 -1
- package/dist/Tray.mjs +6 -2
- package/dist/Tray.module.js +6 -2
- package/dist/Tray.module.js.map +1 -1
- package/dist/Underlay.main.js +14 -1
- package/dist/Underlay.main.js.map +1 -1
- package/dist/Underlay.mjs +14 -1
- package/dist/Underlay.module.js +14 -1
- package/dist/Underlay.module.js.map +1 -1
- package/dist/{overlays.09a708f1.css → overlays.c765f49e.css} +28 -28
- package/dist/{overlays.09a708f1.css.map → overlays.c765f49e.css.map} +1 -1
- package/dist/{overlays.31d3453e.css → overlays.f1e5a60e.css} +40 -39
- package/dist/overlays.f1e5a60e.css.map +1 -0
- package/dist/tray_vars_css.main.js +15 -15
- package/dist/tray_vars_css.mjs +15 -15
- package/dist/tray_vars_css.module.js +15 -15
- package/dist/underlay_vars_css.main.js +14 -14
- package/dist/underlay_vars_css.mjs +14 -14
- package/dist/underlay_vars_css.module.js +14 -14
- package/package.json +9 -9
- package/src/OpenTransition.tsx +1 -1
- package/src/Tray.tsx +5 -1
- package/src/Underlay.tsx +18 -1
- package/dist/overlays.31d3453e.css.map +0 -1
|
@@ -28,10 +28,7 @@ const $13f51cdc44d228b9$var$OPEN_STATES = {
|
|
|
28
28
|
entered: true
|
|
29
29
|
};
|
|
30
30
|
function $13f51cdc44d228b9$export$b847a40ee92eff38(props) {
|
|
31
|
-
|
|
32
|
-
if (process.env.CHROMATIC) return (0, ($parcel$interopDefault($3kGU5$react))).Children.map(props.children, (child)=>child && /*#__PURE__*/ (0, ($parcel$interopDefault($3kGU5$react))).cloneElement(child, {
|
|
33
|
-
isOpen: props.in
|
|
34
|
-
}));
|
|
31
|
+
var child;
|
|
35
32
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($3kGU5$react))).createElement((0, $3kGU5$reacttransitiongroup.Transition), {
|
|
36
33
|
timeout: {
|
|
37
34
|
enter: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;AAKD,MAAM,oCAAc;IAClB,UAAU;IACV,SAAS;AACX;AAeO,SAAS,0CACd,KAAU;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;AAKD,MAAM,oCAAc;IAClB,UAAU;IACV,SAAS;AACX;AAeO,SAAS,0CACd,KAAU;QAIkC;IAG5C,qBACE,0DAAC,CAAA,GAAA,sCAAS;QAAE,SAAS;YAAC,OAAO;YAAG,MAAM;QAAG;QAAI,GAAG,KAAK;OAClD,CAAC,QAAU,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,QAAQ,EAAE,CAAA,QAAS,uBAAS,CAAA,GAAA,sCAAI,EAAE,YAAY,CAAC,OAAO;gBAAC,QAAQ,CAAC,CAAC,iCAAW,CAAC,MAAM;YAAA;AAG9H","sources":["packages/@react-spectrum/overlays/src/OpenTransition.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 React, {JSX, JSXElementConstructor, ReactElement} from 'react';\nimport {Transition} from 'react-transition-group';\n\nconst OPEN_STATES = {\n entering: false,\n entered: true\n};\n\n/**\n * Timeout issues adding css animations to enter may be related to\n * https://github.com/reactjs/react-transition-group/issues/189 or\n * https://github.com/reactjs/react-transition-group/issues/22\n * my VM isn't good enough to debug accurately and get a better answer.\n *\n * As a result, use enter 0 so that is-open is applied once entered\n * it doesn't matter if we know when the css-animation is done on entering\n * for exiting though, give time for the css-animation to play\n * before removing from the DOM\n * **note** hitting esc bypasses exit animation for anyone testing.\n */\n\nexport function OpenTransition(\n props: any\n): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[] {\n // Do not apply any transition if in chromatic.\n if (typeof process !== 'undefined' && process.env.CHROMATIC) {\n return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));\n }\n\n return (\n <Transition timeout={{enter: 0, exit: 350}} {...props}>\n {(state) => React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: !!OPEN_STATES[state]}))}\n </Transition>\n );\n}\n"],"names":[],"version":3,"file":"OpenTransition.main.js.map"}
|
package/dist/OpenTransition.mjs
CHANGED
|
@@ -18,10 +18,7 @@ const $bc765a7a041310da$var$OPEN_STATES = {
|
|
|
18
18
|
entered: true
|
|
19
19
|
};
|
|
20
20
|
function $bc765a7a041310da$export$b847a40ee92eff38(props) {
|
|
21
|
-
|
|
22
|
-
if (process.env.CHROMATIC) return (0, $8XmPE$react).Children.map(props.children, (child)=>child && /*#__PURE__*/ (0, $8XmPE$react).cloneElement(child, {
|
|
23
|
-
isOpen: props.in
|
|
24
|
-
}));
|
|
21
|
+
var child;
|
|
25
22
|
return /*#__PURE__*/ (0, $8XmPE$react).createElement((0, $8XmPE$Transition), {
|
|
26
23
|
timeout: {
|
|
27
24
|
enter: 0,
|
|
@@ -18,10 +18,7 @@ const $bc765a7a041310da$var$OPEN_STATES = {
|
|
|
18
18
|
entered: true
|
|
19
19
|
};
|
|
20
20
|
function $bc765a7a041310da$export$b847a40ee92eff38(props) {
|
|
21
|
-
|
|
22
|
-
if (process.env.CHROMATIC) return (0, $8XmPE$react).Children.map(props.children, (child)=>child && /*#__PURE__*/ (0, $8XmPE$react).cloneElement(child, {
|
|
23
|
-
isOpen: props.in
|
|
24
|
-
}));
|
|
21
|
+
var child;
|
|
25
22
|
return /*#__PURE__*/ (0, $8XmPE$react).createElement((0, $8XmPE$Transition), {
|
|
26
23
|
timeout: {
|
|
27
24
|
enter: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAKD,MAAM,oCAAc;IAClB,UAAU;IACV,SAAS;AACX;AAeO,SAAS,0CACd,KAAU;
|
|
1
|
+
{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAKD,MAAM,oCAAc;IAClB,UAAU;IACV,SAAS;AACX;AAeO,SAAS,0CACd,KAAU;QAIkC;IAG5C,qBACE,gCAAC,CAAA,GAAA,iBAAS;QAAE,SAAS;YAAC,OAAO;YAAG,MAAM;QAAG;QAAI,GAAG,KAAK;OAClD,CAAC,QAAU,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,QAAQ,EAAE,CAAA,QAAS,uBAAS,CAAA,GAAA,YAAI,EAAE,YAAY,CAAC,OAAO;gBAAC,QAAQ,CAAC,CAAC,iCAAW,CAAC,MAAM;YAAA;AAG9H","sources":["packages/@react-spectrum/overlays/src/OpenTransition.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 React, {JSX, JSXElementConstructor, ReactElement} from 'react';\nimport {Transition} from 'react-transition-group';\n\nconst OPEN_STATES = {\n entering: false,\n entered: true\n};\n\n/**\n * Timeout issues adding css animations to enter may be related to\n * https://github.com/reactjs/react-transition-group/issues/189 or\n * https://github.com/reactjs/react-transition-group/issues/22\n * my VM isn't good enough to debug accurately and get a better answer.\n *\n * As a result, use enter 0 so that is-open is applied once entered\n * it doesn't matter if we know when the css-animation is done on entering\n * for exiting though, give time for the css-animation to play\n * before removing from the DOM\n * **note** hitting esc bypasses exit animation for anyone testing.\n */\n\nexport function OpenTransition(\n props: any\n): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[] {\n // Do not apply any transition if in chromatic.\n if (typeof process !== 'undefined' && process.env.CHROMATIC) {\n return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));\n }\n\n return (\n <Transition timeout={{enter: 0, exit: 350}} {...props}>\n {(state) => React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: !!OPEN_STATES[state]}))}\n </Transition>\n );\n}\n"],"names":[],"version":3,"file":"OpenTransition.module.js.map"}
|
package/dist/Tray.main.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var $2aebdc186fd41e87$exports = require("./Overlay.main.js");
|
|
2
2
|
require("./overlays.f8d97b78.css");
|
|
3
3
|
var $e9a663ccb19ed1b0$exports = require("./overlays_css.main.js");
|
|
4
|
-
require("./overlays.
|
|
4
|
+
require("./overlays.f1e5a60e.css");
|
|
5
5
|
var $3ba16c5c57f2a636$exports = require("./tray_vars_css.main.js");
|
|
6
6
|
var $b900e75089bdd9cd$exports = require("./Underlay.main.js");
|
|
7
7
|
var $fWgpJ$reactariaoverlays = require("@react-aria/overlays");
|
|
@@ -68,7 +68,11 @@ let $6b386deda21be662$var$TrayWrapper = /*#__PURE__*/ (0, $fWgpJ$react.forwardRe
|
|
|
68
68
|
// is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
|
|
69
69
|
let viewport = (0, $fWgpJ$reactariautils.useViewportSize)();
|
|
70
70
|
let wrapperStyle = {
|
|
71
|
-
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
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
|
|
72
76
|
};
|
|
73
77
|
let wrapperClassName = (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3ba16c5c57f2a636$exports))), 'spectrum-Tray-wrapper');
|
|
74
78
|
let className = (0, $fWgpJ$reactspectrumutils.classNames)((0, ($parcel$interopDefault($3ba16c5c57f2a636$exports))), 'spectrum-Tray', {
|
package/dist/Tray.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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;
|
|
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
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {Overlay as $70305dc5fb729c3b$export$c6fdb837b070b4ff} from "./Overlay.mjs";
|
|
2
2
|
import "./overlays.f8d97b78.css";
|
|
3
3
|
import $3XF9U$overlays_cssmodulejs from "./overlays_css.mjs";
|
|
4
|
-
import "./overlays.
|
|
4
|
+
import "./overlays.f1e5a60e.css";
|
|
5
5
|
import $3XF9U$tray_vars_cssmodulejs from "./tray_vars_css.mjs";
|
|
6
6
|
import {Underlay as $76a452f4e3df11be$export$f360afc887607b02} from "./Underlay.mjs";
|
|
7
7
|
import {useModalOverlay as $3XF9U$useModalOverlay, DismissButton as $3XF9U$DismissButton} from "@react-aria/overlays";
|
|
@@ -62,7 +62,11 @@ let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ (0, $3XF9U$forwardRef)(fun
|
|
|
62
62
|
// is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
|
|
63
63
|
let viewport = (0, $3XF9U$useViewportSize)();
|
|
64
64
|
let wrapperStyle = {
|
|
65
|
-
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
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
|
|
66
70
|
};
|
|
67
71
|
let wrapperClassName = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))), 'spectrum-Tray-wrapper');
|
|
68
72
|
let className = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))), 'spectrum-Tray', {
|
package/dist/Tray.module.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {Overlay as $70305dc5fb729c3b$export$c6fdb837b070b4ff} from "./Overlay.module.js";
|
|
2
2
|
import "./overlays.f8d97b78.css";
|
|
3
3
|
import $3XF9U$overlays_cssmodulejs from "./overlays_css.module.js";
|
|
4
|
-
import "./overlays.
|
|
4
|
+
import "./overlays.f1e5a60e.css";
|
|
5
5
|
import $3XF9U$tray_vars_cssmodulejs from "./tray_vars_css.module.js";
|
|
6
6
|
import {Underlay as $76a452f4e3df11be$export$f360afc887607b02} from "./Underlay.module.js";
|
|
7
7
|
import {useModalOverlay as $3XF9U$useModalOverlay, DismissButton as $3XF9U$DismissButton} from "@react-aria/overlays";
|
|
@@ -62,7 +62,11 @@ let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ (0, $3XF9U$forwardRef)(fun
|
|
|
62
62
|
// is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
|
|
63
63
|
let viewport = (0, $3XF9U$useViewportSize)();
|
|
64
64
|
let wrapperStyle = {
|
|
65
|
-
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
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
|
|
66
70
|
};
|
|
67
71
|
let wrapperClassName = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))), 'spectrum-Tray-wrapper');
|
|
68
72
|
let className = (0, $3XF9U$classNames)((0, ($parcel$interopDefault($3XF9U$tray_vars_cssmodulejs))), 'spectrum-Tray', {
|
package/dist/Tray.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBM,MAAM,0DAAO,CAAA,GAAA,iBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,IAAI,YAAC,QAAQ,SAAE,KAAK,EAAE,GAAG,YAAW,GAAG;IACvC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IAExC,qBACE,gCAAC,CAAA,GAAA,yCAAM;QAAG,GAAG,UAAU;QAAE,QAAQ,MAAM,MAAM;QAAE,SAAS;qBACtD,gCAAC;QAAa,GAAG,KAAK;QAAE,YAAY;QAAY,KAAK;OAClD;AAIT;AAEA,IAAI,kDAAc,CAAA,GAAA,iBAAS,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,oBAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,mBAAW,EAAE;IAE1B,IAAI,cAAC,UAAU,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,sBAAc,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,sBAAc;IAC7B,IAAI,eAAoB;QACtB,qCAAqC,SAAS,MAAM,GAAG;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyBM,MAAM,0DAAO,CAAA,GAAA,iBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,IAAI,YAAC,QAAQ,SAAE,KAAK,EAAE,GAAG,YAAW,GAAG;IACvC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,aAAK,EAAkB;IAExC,qBACE,gCAAC,CAAA,GAAA,yCAAM;QAAG,GAAG,UAAU;QAAE,QAAQ,MAAM,MAAM;QAAE,SAAS;qBACtD,gCAAC;QAAa,GAAG,KAAK;QAAE,YAAY;QAAY,KAAK;OAClD;AAIT;AAEA,IAAI,kDAAc,CAAA,GAAA,iBAAS,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,oBAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,mBAAW,EAAE;IAE1B,IAAI,cAAC,UAAU,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,sBAAc,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,sBAAc;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,iBAAS,EAC9B,CAAA,GAAA,sDAAS,GACT;IAGF,IAAI,YAAY,CAAA,GAAA,iBAAS,EACvB,CAAA,GAAA,sDAAS,GACT,iBACA;QACE,WAAW;QACX,8BAA8B;IAChC,GACA,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,qDAAa,GACb,iBACA,wBAEF,WAAW,SAAS;IAGtB,4LAA4L;IAC5L,qBACE,gCAAC;QAAI,KAAK;qBACR,gCAAC,CAAA,GAAA,yCAAO;QAAG,GAAG,aAAa;QAAE,QAAQ;sBACrC,gCAAC;QAAI,WAAW;QAAkB,OAAO;qBACvC,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,UAAU;QACd,WAAW;QACX,KAAK;QACL,eAAY;qBACZ,gCAAC,CAAA,GAAA,oBAAY;QAAE,WAAW,MAAM,KAAK;QACpC,wBACD,gCAAC,CAAA,GAAA,oBAAY;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.module.js.map"}
|
package/dist/Underlay.main.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
require("./overlays.
|
|
1
|
+
require("./overlays.c765f49e.css");
|
|
2
2
|
var $42908e91b4c5f428$exports = require("./underlay_vars_css.main.js");
|
|
3
3
|
var $hjXq7$reactspectrumutils = require("@react-spectrum/utils");
|
|
4
|
+
var $hjXq7$reactariautils = require("@react-aria/utils");
|
|
4
5
|
var $hjXq7$react = require("react");
|
|
5
6
|
|
|
6
7
|
|
|
@@ -26,10 +27,22 @@ $parcel$export(module.exports, "Underlay", () => $b900e75089bdd9cd$export$f360af
|
|
|
26
27
|
*/
|
|
27
28
|
|
|
28
29
|
|
|
30
|
+
|
|
29
31
|
function $b900e75089bdd9cd$export$f360afc887607b02({ isOpen: isOpen, isTransparent: isTransparent, ...otherProps }) {
|
|
32
|
+
let pageHeight = undefined;
|
|
33
|
+
if (typeof document !== 'undefined') {
|
|
34
|
+
let scrollingElement = (0, $hjXq7$reactariautils.isScrollable)(document.body) ? document.body : document.scrollingElement || document.documentElement;
|
|
35
|
+
// Prevent Firefox from adding scrollbars when the page has a fractional height.
|
|
36
|
+
let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
|
|
37
|
+
pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
|
|
38
|
+
}
|
|
30
39
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($hjXq7$react))).createElement("div", {
|
|
31
40
|
"data-testid": "underlay",
|
|
32
41
|
...otherProps,
|
|
42
|
+
// Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
|
|
43
|
+
style: {
|
|
44
|
+
height: pageHeight
|
|
45
|
+
},
|
|
33
46
|
className: (0, $hjXq7$reactspectrumutils.classNames)((0, ($parcel$interopDefault($42908e91b4c5f428$exports))), 'spectrum-Underlay', {
|
|
34
47
|
'is-open': isOpen,
|
|
35
48
|
'spectrum-Underlay--transparent': isTransparent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAYM,SAAS,0CAAS,UAAC,MAAM,iBAAE,aAAa,EAAE,GAAG,YAA0B;IAC5E,IAAI,aAAiC;IACrC,IAAI,OAAO,aAAa,aAAa;QACnC,IAAI,mBAAmB,CAAA,GAAA,kCAAW,EAAE,SAAS,IAAI,IAAI,SAAS,IAAI,GAAG,SAAS,gBAAgB,IAAI,SAAS,eAAe;QAC1H,gFAAgF;QAChF,IAAI,6BAA6B,iBAAiB,qBAAqB,GAAG,MAAM,GAAG;QACnF,aAAa,iBAAiB,YAAY,GAAG;IAC/C;IAEA,qBACE,0DAAC;QACC,eAAY;QACX,GAAG,UAAU;QACd,8FAA8F;QAC9F,OAAO;YAAC,QAAQ;QAAU;QAC1B,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAa,GAAG,qBAAqB;YACzD,WAAW;YACX,kCAAkC;QACpC;;AAEN","sources":["packages/@react-spectrum/overlays/src/Underlay.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {isScrollable} from '@react-aria/utils';\nimport React, {JSX} from 'react';\nimport underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';\n\ninterface UnderlayProps {\n isOpen?: boolean,\n isTransparent?: boolean\n}\n\nexport function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element {\n let pageHeight: number | undefined = undefined;\n if (typeof document !== 'undefined') {\n let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;\n // Prevent Firefox from adding scrollbars when the page has a fractional height.\n let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;\n pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;\n }\n\n return (\n <div\n data-testid=\"underlay\"\n {...otherProps}\n // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.\n style={{height: pageHeight}}\n className={classNames(underlayStyles, 'spectrum-Underlay', {\n 'is-open': isOpen,\n 'spectrum-Underlay--transparent': isTransparent\n })} />\n );\n}\n"],"names":[],"version":3,"file":"Underlay.main.js.map"}
|
package/dist/Underlay.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import "./overlays.
|
|
1
|
+
import "./overlays.c765f49e.css";
|
|
2
2
|
import $j2iDu$underlay_vars_cssmodulejs from "./underlay_vars_css.mjs";
|
|
3
3
|
import {classNames as $j2iDu$classNames} from "@react-spectrum/utils";
|
|
4
|
+
import {isScrollable as $j2iDu$isScrollable} from "@react-aria/utils";
|
|
4
5
|
import $j2iDu$react from "react";
|
|
5
6
|
|
|
6
7
|
|
|
@@ -20,10 +21,22 @@ function $parcel$interopDefault(a) {
|
|
|
20
21
|
*/
|
|
21
22
|
|
|
22
23
|
|
|
24
|
+
|
|
23
25
|
function $76a452f4e3df11be$export$f360afc887607b02({ isOpen: isOpen, isTransparent: isTransparent, ...otherProps }) {
|
|
26
|
+
let pageHeight = undefined;
|
|
27
|
+
if (typeof document !== 'undefined') {
|
|
28
|
+
let scrollingElement = (0, $j2iDu$isScrollable)(document.body) ? document.body : document.scrollingElement || document.documentElement;
|
|
29
|
+
// Prevent Firefox from adding scrollbars when the page has a fractional height.
|
|
30
|
+
let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
|
|
31
|
+
pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
|
|
32
|
+
}
|
|
24
33
|
return /*#__PURE__*/ (0, $j2iDu$react).createElement("div", {
|
|
25
34
|
"data-testid": "underlay",
|
|
26
35
|
...otherProps,
|
|
36
|
+
// Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
|
|
37
|
+
style: {
|
|
38
|
+
height: pageHeight
|
|
39
|
+
},
|
|
27
40
|
className: (0, $j2iDu$classNames)((0, ($parcel$interopDefault($j2iDu$underlay_vars_cssmodulejs))), 'spectrum-Underlay', {
|
|
28
41
|
'is-open': isOpen,
|
|
29
42
|
'spectrum-Underlay--transparent': isTransparent
|
package/dist/Underlay.module.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import "./overlays.
|
|
1
|
+
import "./overlays.c765f49e.css";
|
|
2
2
|
import $j2iDu$underlay_vars_cssmodulejs from "./underlay_vars_css.module.js";
|
|
3
3
|
import {classNames as $j2iDu$classNames} from "@react-spectrum/utils";
|
|
4
|
+
import {isScrollable as $j2iDu$isScrollable} from "@react-aria/utils";
|
|
4
5
|
import $j2iDu$react from "react";
|
|
5
6
|
|
|
6
7
|
|
|
@@ -20,10 +21,22 @@ function $parcel$interopDefault(a) {
|
|
|
20
21
|
*/
|
|
21
22
|
|
|
22
23
|
|
|
24
|
+
|
|
23
25
|
function $76a452f4e3df11be$export$f360afc887607b02({ isOpen: isOpen, isTransparent: isTransparent, ...otherProps }) {
|
|
26
|
+
let pageHeight = undefined;
|
|
27
|
+
if (typeof document !== 'undefined') {
|
|
28
|
+
let scrollingElement = (0, $j2iDu$isScrollable)(document.body) ? document.body : document.scrollingElement || document.documentElement;
|
|
29
|
+
// Prevent Firefox from adding scrollbars when the page has a fractional height.
|
|
30
|
+
let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
|
|
31
|
+
pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
|
|
32
|
+
}
|
|
24
33
|
return /*#__PURE__*/ (0, $j2iDu$react).createElement("div", {
|
|
25
34
|
"data-testid": "underlay",
|
|
26
35
|
...otherProps,
|
|
36
|
+
// Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
|
|
37
|
+
style: {
|
|
38
|
+
height: pageHeight
|
|
39
|
+
},
|
|
27
40
|
className: (0, $j2iDu$classNames)((0, ($parcel$interopDefault($j2iDu$underlay_vars_cssmodulejs))), 'spectrum-Underlay', {
|
|
28
41
|
'is-open': isOpen,
|
|
29
42
|
'spectrum-Underlay--transparent': isTransparent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAYM,SAAS,0CAAS,UAAC,MAAM,iBAAE,aAAa,EAAE,GAAG,YAA0B;IAC5E,IAAI,aAAiC;IACrC,IAAI,OAAO,aAAa,aAAa;QACnC,IAAI,mBAAmB,CAAA,GAAA,mBAAW,EAAE,SAAS,IAAI,IAAI,SAAS,IAAI,GAAG,SAAS,gBAAgB,IAAI,SAAS,eAAe;QAC1H,gFAAgF;QAChF,IAAI,6BAA6B,iBAAiB,qBAAqB,GAAG,MAAM,GAAG;QACnF,aAAa,iBAAiB,YAAY,GAAG;IAC/C;IAEA,qBACE,gCAAC;QACC,eAAY;QACX,GAAG,UAAU;QACd,8FAA8F;QAC9F,OAAO;YAAC,QAAQ;QAAU;QAC1B,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,0DAAa,GAAG,qBAAqB;YACzD,WAAW;YACX,kCAAkC;QACpC;;AAEN","sources":["packages/@react-spectrum/overlays/src/Underlay.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {classNames} from '@react-spectrum/utils';\nimport {isScrollable} from '@react-aria/utils';\nimport React, {JSX} from 'react';\nimport underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';\n\ninterface UnderlayProps {\n isOpen?: boolean,\n isTransparent?: boolean\n}\n\nexport function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element {\n let pageHeight: number | undefined = undefined;\n if (typeof document !== 'undefined') {\n let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;\n // Prevent Firefox from adding scrollbars when the page has a fractional height.\n let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;\n pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;\n }\n\n return (\n <div\n data-testid=\"underlay\"\n {...otherProps}\n // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.\n style={{height: pageHeight}}\n className={classNames(underlayStyles, 'spectrum-Underlay', {\n 'is-open': isOpen,\n 'spectrum-Underlay--transparent': isTransparent\n })} />\n );\n}\n"],"names":[],"version":3,"file":"Underlay.module.js.map"}
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
.
|
|
1
|
+
.fdFt3W_i18nFontFamily {
|
|
2
2
|
font-synthesis: weight;
|
|
3
3
|
font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
6
|
+
.fdFt3W_i18nFontFamily:lang(ar) {
|
|
7
7
|
font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.fdFt3W_i18nFontFamily:lang(he) {
|
|
11
11
|
font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.fdFt3W_i18nFontFamily:lang(zh) {
|
|
15
15
|
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
.fdFt3W_i18nFontFamily:lang(zh-Hans) {
|
|
19
19
|
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.
|
|
22
|
+
.fdFt3W_i18nFontFamily:lang(zh-Hant) {
|
|
23
23
|
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.
|
|
26
|
+
.fdFt3W_i18nFontFamily:lang(zh-SG), .fdFt3W_i18nFontFamily:lang(zh-CN) {
|
|
27
27
|
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.
|
|
30
|
+
.fdFt3W_i18nFontFamily:lang(ko) {
|
|
31
31
|
font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.
|
|
34
|
+
.fdFt3W_i18nFontFamily:lang(ja) {
|
|
35
35
|
font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
.
|
|
38
|
+
.fdFt3W_spectrum-FocusRing-ring {
|
|
39
39
|
--spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
40
40
|
--spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
|
|
41
41
|
--spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
--spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
.
|
|
46
|
+
.fdFt3W_spectrum-FocusRing-ring:after {
|
|
47
47
|
border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
|
|
48
48
|
content: "";
|
|
49
49
|
margin: calc(-1 * var(--spectrum-focus-ring-border-size));
|
|
@@ -54,78 +54,78 @@
|
|
|
54
54
|
inset: 0;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.
|
|
57
|
+
.fdFt3W_spectrum-FocusRing.fdFt3W_focus-ring:after {
|
|
58
58
|
margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
|
|
59
59
|
box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
.
|
|
62
|
+
.fdFt3W_spectrum-FocusRing--quiet:after {
|
|
63
63
|
border-radius: 0;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
.
|
|
66
|
+
.fdFt3W_spectrum-FocusRing--quiet.fdFt3W_focus-ring:after {
|
|
67
67
|
margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size)) 0;
|
|
68
68
|
box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
@media (forced-colors: active) {
|
|
72
|
-
.
|
|
72
|
+
.fdFt3W_spectrum-FocusRing, .fdFt3W_spectrum-FocusRing-ring, .fdFt3W_spectrum-FocusRing--quiet {
|
|
73
73
|
--spectrum-high-contrast-focus-ring-color: Highlight;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
:is(.
|
|
76
|
+
:is(.fdFt3W_spectrum-FocusRing, .fdFt3W_spectrum-FocusRing-ring, .fdFt3W_spectrum-FocusRing--quiet):after {
|
|
77
77
|
forced-color-adjust: none;
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
.
|
|
81
|
+
.fdFt3W_spectrum-overlay {
|
|
82
82
|
visibility: hidden;
|
|
83
83
|
opacity: 0;
|
|
84
84
|
transition: transform var(--spectrum-global-animation-duration-100, .13s) ease-in-out, opacity var(--spectrum-global-animation-duration-100, .13s) ease-in-out, visibility 0s linear var(--spectrum-global-animation-duration-100, .13s);
|
|
85
85
|
pointer-events: none;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
.
|
|
88
|
+
.fdFt3W_spectrum-overlay--open {
|
|
89
89
|
visibility: visible;
|
|
90
90
|
opacity: .9999;
|
|
91
91
|
pointer-events: auto;
|
|
92
92
|
transition-delay: 0s;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
.
|
|
95
|
+
.fdFt3W_spectrum-overlay--bottom--open {
|
|
96
96
|
transform: translateY(var(--spectrum-overlay-positive-transform-distance));
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
.
|
|
99
|
+
.fdFt3W_spectrum-overlay--top--open {
|
|
100
100
|
transform: translateY(var(--spectrum-overlay-negative-transform-distance));
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
.
|
|
103
|
+
.fdFt3W_spectrum-overlay--right--open {
|
|
104
104
|
transform: translateX(var(--spectrum-overlay-positive-transform-distance));
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
.
|
|
107
|
+
.fdFt3W_spectrum-overlay--left--open {
|
|
108
108
|
transform: translateX(var(--spectrum-overlay-negative-transform-distance));
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
.
|
|
111
|
+
.fdFt3W_spectrum-Underlay {
|
|
112
112
|
z-index: 1;
|
|
113
113
|
transition: opacity var(--spectrum-dialog-background-exit-animation-duration, var(--spectrum-global-animation-duration-300)) cubic-bezier(.5, 0, 1, 1) var(--spectrum-dialog-background-exit-animation-delay, var(--spectrum-global-animation-duration-200)), visibility 0s linear calc(var(--spectrum-dialog-background-exit-animation-delay, var(--spectrum-global-animation-duration-200)) + var(--spectrum-dialog-background-exit-animation-duration, var(--spectrum-global-animation-duration-300)));
|
|
114
|
-
position:
|
|
114
|
+
position: absolute;
|
|
115
115
|
inset: 0;
|
|
116
116
|
overflow: hidden;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
.
|
|
119
|
+
.fdFt3W_spectrum-Underlay.fdFt3W_spectrum-Underlay--transparent {
|
|
120
120
|
background: none;
|
|
121
121
|
transition: none;
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
.
|
|
124
|
+
.fdFt3W_is-open {
|
|
125
125
|
transition: opacity var(--spectrum-dialog-background-entry-animation-duration, var(--spectrum-global-animation-duration-600)) cubic-bezier(0, 0, .4, 1) 0s;
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
.
|
|
128
|
+
.fdFt3W_spectrum-Underlay {
|
|
129
129
|
background: var(--spectrum-dialog-underlay-background-color, var(--spectrum-alias-background-color-modal-overlay));
|
|
130
130
|
}
|
|
131
|
-
/*# sourceMappingURL=overlays.
|
|
131
|
+
/*# sourceMappingURL=overlays.c765f49e.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAkBJ;;;;;;;AAYA;;;;;;;AAWA;;;;AAIA;;;;AAUA;;;;AAIA;;;;AAIA;;;;;;;;
|
|
1
|
+
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAkBJ;;;;;;;AAYA;;;;;;;AAWA;;;;AAIA;;;;AAUA;;;;AAIA;;;;AAIA;;;;;;;;AAmBE;;;;;AAMF;;;;AAmBA","sources":["packages/@adobe/spectrum-css-temp/components/underlay/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"overlays.c765f49e.css.map"}
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
.
|
|
1
|
+
.tsH6yq_i18nFontFamily {
|
|
2
2
|
font-synthesis: weight;
|
|
3
3
|
font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
6
|
+
.tsH6yq_i18nFontFamily:lang(ar) {
|
|
7
7
|
font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.tsH6yq_i18nFontFamily:lang(he) {
|
|
11
11
|
font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.tsH6yq_i18nFontFamily:lang(zh) {
|
|
15
15
|
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
.tsH6yq_i18nFontFamily:lang(zh-Hans) {
|
|
19
19
|
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.
|
|
22
|
+
.tsH6yq_i18nFontFamily:lang(zh-Hant) {
|
|
23
23
|
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.
|
|
26
|
+
.tsH6yq_i18nFontFamily:lang(zh-SG), .tsH6yq_i18nFontFamily:lang(zh-CN) {
|
|
27
27
|
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.
|
|
30
|
+
.tsH6yq_i18nFontFamily:lang(ko) {
|
|
31
31
|
font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.
|
|
34
|
+
.tsH6yq_i18nFontFamily:lang(ja) {
|
|
35
35
|
font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
.
|
|
38
|
+
.tsH6yq_spectrum-FocusRing-ring {
|
|
39
39
|
--spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
40
40
|
--spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
|
|
41
41
|
--spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
--spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
.
|
|
46
|
+
.tsH6yq_spectrum-FocusRing-ring:after {
|
|
47
47
|
border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
|
|
48
48
|
content: "";
|
|
49
49
|
margin: calc(-1 * var(--spectrum-focus-ring-border-size));
|
|
@@ -54,130 +54,131 @@
|
|
|
54
54
|
inset: 0;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.
|
|
57
|
+
.tsH6yq_spectrum-FocusRing.tsH6yq_focus-ring:after {
|
|
58
58
|
margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
|
|
59
59
|
box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
.
|
|
62
|
+
.tsH6yq_spectrum-FocusRing--quiet:after {
|
|
63
63
|
border-radius: 0;
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
.
|
|
66
|
+
.tsH6yq_spectrum-FocusRing--quiet.tsH6yq_focus-ring:after {
|
|
67
67
|
margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size)) 0;
|
|
68
68
|
box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
@media (forced-colors: active) {
|
|
72
|
-
.
|
|
72
|
+
.tsH6yq_spectrum-FocusRing, .tsH6yq_spectrum-FocusRing-ring, .tsH6yq_spectrum-FocusRing--quiet {
|
|
73
73
|
--spectrum-high-contrast-focus-ring-color: Highlight;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
:is(.
|
|
76
|
+
:is(.tsH6yq_spectrum-FocusRing, .tsH6yq_spectrum-FocusRing-ring, .tsH6yq_spectrum-FocusRing--quiet):after {
|
|
77
77
|
forced-color-adjust: none;
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
.
|
|
81
|
+
.tsH6yq_spectrum-overlay {
|
|
82
82
|
visibility: hidden;
|
|
83
83
|
opacity: 0;
|
|
84
84
|
transition: transform var(--spectrum-global-animation-duration-100, .13s) ease-in-out, opacity var(--spectrum-global-animation-duration-100, .13s) ease-in-out, visibility 0s linear var(--spectrum-global-animation-duration-100, .13s);
|
|
85
85
|
pointer-events: none;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
.
|
|
88
|
+
.tsH6yq_spectrum-overlay--open {
|
|
89
89
|
visibility: visible;
|
|
90
90
|
opacity: .9999;
|
|
91
91
|
pointer-events: auto;
|
|
92
92
|
transition-delay: 0s;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
.
|
|
95
|
+
.tsH6yq_spectrum-overlay--bottom--open {
|
|
96
96
|
transform: translateY(var(--spectrum-overlay-positive-transform-distance));
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
.
|
|
99
|
+
.tsH6yq_spectrum-overlay--top--open {
|
|
100
100
|
transform: translateY(var(--spectrum-overlay-negative-transform-distance));
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
.
|
|
103
|
+
.tsH6yq_spectrum-overlay--right--open {
|
|
104
104
|
transform: translateX(var(--spectrum-overlay-positive-transform-distance));
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
.
|
|
107
|
+
.tsH6yq_spectrum-overlay--left--open {
|
|
108
108
|
transform: translateX(var(--spectrum-overlay-negative-transform-distance));
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
.
|
|
111
|
+
.tsH6yq_spectrum-Tray-wrapper {
|
|
112
112
|
pointer-events: none;
|
|
113
113
|
z-index: 2;
|
|
114
114
|
justify-content: center;
|
|
115
115
|
width: 100%;
|
|
116
|
-
height:
|
|
116
|
+
height: 100dvh;
|
|
117
117
|
display: flex;
|
|
118
|
-
position:
|
|
118
|
+
position: absolute;
|
|
119
119
|
top: 0;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
-
.
|
|
122
|
+
.tsH6yq_spectrum-Tray-wrapper:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
123
123
|
left: 0;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
.
|
|
126
|
+
.tsH6yq_spectrum-Tray-wrapper:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
127
127
|
left: 0;
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
-
.
|
|
130
|
+
.tsH6yq_spectrum-Tray-wrapper:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
131
131
|
right: 0;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
.
|
|
134
|
+
.tsH6yq_spectrum-Tray-wrapper:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
135
135
|
right: 0;
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
-
.
|
|
138
|
+
.tsH6yq_spectrum-Tray {
|
|
139
139
|
--spectrum-tray-margin-top: 64px;
|
|
140
140
|
--spectrum-tray-max-width: 450px;
|
|
141
141
|
width: var(--spectrum-tray-width, 100%);
|
|
142
142
|
max-width: var(--spectrum-tray-max-width, 375px);
|
|
143
143
|
min-height: var(--spectrum-tray-min-height, var(--spectrum-global-dimension-static-size-800));
|
|
144
144
|
max-height: calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));
|
|
145
|
-
padding-bottom: max(calc(
|
|
145
|
+
padding-bottom: calc(max(calc(100dvh - var(--spectrum-visual-viewport-height)), env(safe-area-inset-bottom)) + 100vh);
|
|
146
146
|
border-radius: var(--spectrum-tray-full-width-border-radius, var(--spectrum-alias-border-radius-regular)) var(--spectrum-tray-full-width-border-radius, var(--spectrum-alias-border-radius-regular)) var(--spectrum-tray-border-radius, 0px) var(--spectrum-tray-border-radius, 0px);
|
|
147
147
|
transition: opacity var(--spectrum-dialog-exit-animation-duration, var(--spectrum-global-animation-duration-100)) cubic-bezier(.5, 0, 1, 1) 0s, transform var(--spectrum-dialog-exit-animation-duration, var(--spectrum-global-animation-duration-100)) cubic-bezier(.5, 0, 1, 1) 0s;
|
|
148
|
+
box-sizing: content-box;
|
|
148
149
|
outline: none;
|
|
149
150
|
flex-direction: column;
|
|
150
151
|
display: flex;
|
|
151
152
|
position: absolute;
|
|
152
|
-
bottom:
|
|
153
|
+
bottom: -100vh;
|
|
153
154
|
overflow: hidden auto;
|
|
154
|
-
transform: translateY(100%);
|
|
155
|
+
transform: translateY(calc(100% - 100vh));
|
|
155
156
|
}
|
|
156
157
|
|
|
157
|
-
.
|
|
158
|
+
.tsH6yq_is-open {
|
|
158
159
|
transition: transform var(--spectrum-dialog-entry-animation-duration, var(--spectrum-global-animation-duration-500)) cubic-bezier(0, 0, .4, 1) var(--spectrum-dialog-entry-animation-delay, var(--spectrum-global-animation-duration-200)), opacity var(--spectrum-dialog-entry-animation-duration, var(--spectrum-global-animation-duration-500)) cubic-bezier(0, 0, .4, 1) var(--spectrum-dialog-entry-animation-delay, var(--spectrum-global-animation-duration-200));
|
|
159
160
|
transform: translateY(0);
|
|
160
161
|
}
|
|
161
162
|
|
|
162
|
-
.
|
|
163
|
+
.tsH6yq_spectrum-Tray--fixedHeight {
|
|
163
164
|
height: calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));
|
|
164
165
|
top: var(--spectrum-tray-margin-top);
|
|
165
166
|
}
|
|
166
167
|
|
|
167
168
|
@media (width <= 450px) {
|
|
168
|
-
.
|
|
169
|
+
.tsH6yq_spectrum-Tray {
|
|
169
170
|
border-radius: var(--spectrum-tray-border-radius, 0px);
|
|
170
171
|
}
|
|
171
172
|
}
|
|
172
173
|
|
|
173
174
|
@media (forced-colors: active) {
|
|
174
|
-
.
|
|
175
|
+
.tsH6yq_spectrum-Tray {
|
|
175
176
|
border-width: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));
|
|
176
177
|
border-style: solid solid none;
|
|
177
178
|
}
|
|
178
179
|
}
|
|
179
180
|
|
|
180
|
-
.
|
|
181
|
+
.tsH6yq_spectrum-Tray {
|
|
181
182
|
background-color: var(--spectrum-tray-background-color);
|
|
182
183
|
}
|
|
183
|
-
/*# sourceMappingURL=overlays.
|
|
184
|
+
/*# sourceMappingURL=overlays.f1e5a60e.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAkBJ;;;;;;;AAYA;;;;;;;AAWA;;;;AAIA;;;;AAUA;;;;AAIA;;;;AAIA;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAiBA;;;;;;;;;;;;;;;;;;;;AA4CA;;;;;AAUA;;;;;AAOA;EACE;;;;;AAKF;EACE;;;;;;AAkBF","sources":["packages/@adobe/spectrum-css-temp/components/tray/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"overlays.f1e5a60e.css.map"}
|
|
@@ -33,21 +33,21 @@ var $3ba16c5c57f2a636$export$a96755f239de61ee;
|
|
|
33
33
|
var $3ba16c5c57f2a636$export$a85c0c6b6cf8598c;
|
|
34
34
|
var $3ba16c5c57f2a636$export$85aaa87e65e040bf;
|
|
35
35
|
var $3ba16c5c57f2a636$export$b9768db7ffc1bc2;
|
|
36
|
-
$3ba16c5c57f2a636$export$f39a09f249340e2a = `
|
|
37
|
-
$3ba16c5c57f2a636$export$8c4ee2c50c22c514 = `
|
|
38
|
-
$3ba16c5c57f2a636$export$a397eb58038aa381 = `
|
|
39
|
-
$3ba16c5c57f2a636$export$a9781837241c946d = `
|
|
40
|
-
$3ba16c5c57f2a636$export$4109102f950813a6 = `
|
|
41
|
-
$3ba16c5c57f2a636$export$24c7f46a6e3605dd = `
|
|
42
|
-
$3ba16c5c57f2a636$export$2927016961429360 = `
|
|
43
|
-
$3ba16c5c57f2a636$export$39eed38e2296a1d6 = `
|
|
44
|
-
$3ba16c5c57f2a636$export$ce0704cd084c4f0d = `
|
|
45
|
-
$3ba16c5c57f2a636$export$79bfb05e59a300b = `
|
|
46
|
-
$3ba16c5c57f2a636$export$641b9b70c23dce66 = `
|
|
47
|
-
$3ba16c5c57f2a636$export$a96755f239de61ee = `
|
|
48
|
-
$3ba16c5c57f2a636$export$a85c0c6b6cf8598c = `
|
|
49
|
-
$3ba16c5c57f2a636$export$85aaa87e65e040bf = `
|
|
50
|
-
$3ba16c5c57f2a636$export$b9768db7ffc1bc2 = `
|
|
36
|
+
$3ba16c5c57f2a636$export$f39a09f249340e2a = `tsH6yq_focus-ring`;
|
|
37
|
+
$3ba16c5c57f2a636$export$8c4ee2c50c22c514 = `tsH6yq_i18nFontFamily`;
|
|
38
|
+
$3ba16c5c57f2a636$export$a397eb58038aa381 = `tsH6yq_spectrum-overlay--open`;
|
|
39
|
+
$3ba16c5c57f2a636$export$a9781837241c946d = `tsH6yq_is-open ${$3ba16c5c57f2a636$export$a397eb58038aa381}`;
|
|
40
|
+
$3ba16c5c57f2a636$export$4109102f950813a6 = `tsH6yq_spectrum-FocusRing-ring`;
|
|
41
|
+
$3ba16c5c57f2a636$export$24c7f46a6e3605dd = `tsH6yq_spectrum-FocusRing ${$3ba16c5c57f2a636$export$4109102f950813a6}`;
|
|
42
|
+
$3ba16c5c57f2a636$export$2927016961429360 = `tsH6yq_spectrum-FocusRing--quiet`;
|
|
43
|
+
$3ba16c5c57f2a636$export$39eed38e2296a1d6 = `tsH6yq_spectrum-overlay`;
|
|
44
|
+
$3ba16c5c57f2a636$export$ce0704cd084c4f0d = `tsH6yq_spectrum-Tray ${$3ba16c5c57f2a636$export$39eed38e2296a1d6}`;
|
|
45
|
+
$3ba16c5c57f2a636$export$79bfb05e59a300b = `tsH6yq_spectrum-Tray--fixedHeight`;
|
|
46
|
+
$3ba16c5c57f2a636$export$641b9b70c23dce66 = `tsH6yq_spectrum-Tray-wrapper`;
|
|
47
|
+
$3ba16c5c57f2a636$export$a96755f239de61ee = `tsH6yq_spectrum-overlay--bottom--open`;
|
|
48
|
+
$3ba16c5c57f2a636$export$a85c0c6b6cf8598c = `tsH6yq_spectrum-overlay--left--open`;
|
|
49
|
+
$3ba16c5c57f2a636$export$85aaa87e65e040bf = `tsH6yq_spectrum-overlay--right--open`;
|
|
50
|
+
$3ba16c5c57f2a636$export$b9768db7ffc1bc2 = `tsH6yq_spectrum-overlay--top--open`;
|
|
51
51
|
|
|
52
52
|
|
|
53
53
|
//# sourceMappingURL=tray_vars_css.main.js.map
|
package/dist/tray_vars_css.mjs
CHANGED
|
@@ -34,21 +34,21 @@ var $930b2f4095bb11d1$export$a96755f239de61ee;
|
|
|
34
34
|
var $930b2f4095bb11d1$export$a85c0c6b6cf8598c;
|
|
35
35
|
var $930b2f4095bb11d1$export$85aaa87e65e040bf;
|
|
36
36
|
var $930b2f4095bb11d1$export$b9768db7ffc1bc2;
|
|
37
|
-
$930b2f4095bb11d1$export$f39a09f249340e2a = `
|
|
38
|
-
$930b2f4095bb11d1$export$8c4ee2c50c22c514 = `
|
|
39
|
-
$930b2f4095bb11d1$export$a397eb58038aa381 = `
|
|
40
|
-
$930b2f4095bb11d1$export$a9781837241c946d = `
|
|
41
|
-
$930b2f4095bb11d1$export$4109102f950813a6 = `
|
|
42
|
-
$930b2f4095bb11d1$export$24c7f46a6e3605dd = `
|
|
43
|
-
$930b2f4095bb11d1$export$2927016961429360 = `
|
|
44
|
-
$930b2f4095bb11d1$export$39eed38e2296a1d6 = `
|
|
45
|
-
$930b2f4095bb11d1$export$ce0704cd084c4f0d = `
|
|
46
|
-
$930b2f4095bb11d1$export$79bfb05e59a300b = `
|
|
47
|
-
$930b2f4095bb11d1$export$641b9b70c23dce66 = `
|
|
48
|
-
$930b2f4095bb11d1$export$a96755f239de61ee = `
|
|
49
|
-
$930b2f4095bb11d1$export$a85c0c6b6cf8598c = `
|
|
50
|
-
$930b2f4095bb11d1$export$85aaa87e65e040bf = `
|
|
51
|
-
$930b2f4095bb11d1$export$b9768db7ffc1bc2 = `
|
|
37
|
+
$930b2f4095bb11d1$export$f39a09f249340e2a = `tsH6yq_focus-ring`;
|
|
38
|
+
$930b2f4095bb11d1$export$8c4ee2c50c22c514 = `tsH6yq_i18nFontFamily`;
|
|
39
|
+
$930b2f4095bb11d1$export$a397eb58038aa381 = `tsH6yq_spectrum-overlay--open`;
|
|
40
|
+
$930b2f4095bb11d1$export$a9781837241c946d = `tsH6yq_is-open ${$930b2f4095bb11d1$export$a397eb58038aa381}`;
|
|
41
|
+
$930b2f4095bb11d1$export$4109102f950813a6 = `tsH6yq_spectrum-FocusRing-ring`;
|
|
42
|
+
$930b2f4095bb11d1$export$24c7f46a6e3605dd = `tsH6yq_spectrum-FocusRing ${$930b2f4095bb11d1$export$4109102f950813a6}`;
|
|
43
|
+
$930b2f4095bb11d1$export$2927016961429360 = `tsH6yq_spectrum-FocusRing--quiet`;
|
|
44
|
+
$930b2f4095bb11d1$export$39eed38e2296a1d6 = `tsH6yq_spectrum-overlay`;
|
|
45
|
+
$930b2f4095bb11d1$export$ce0704cd084c4f0d = `tsH6yq_spectrum-Tray ${$930b2f4095bb11d1$export$39eed38e2296a1d6}`;
|
|
46
|
+
$930b2f4095bb11d1$export$79bfb05e59a300b = `tsH6yq_spectrum-Tray--fixedHeight`;
|
|
47
|
+
$930b2f4095bb11d1$export$641b9b70c23dce66 = `tsH6yq_spectrum-Tray-wrapper`;
|
|
48
|
+
$930b2f4095bb11d1$export$a96755f239de61ee = `tsH6yq_spectrum-overlay--bottom--open`;
|
|
49
|
+
$930b2f4095bb11d1$export$a85c0c6b6cf8598c = `tsH6yq_spectrum-overlay--left--open`;
|
|
50
|
+
$930b2f4095bb11d1$export$85aaa87e65e040bf = `tsH6yq_spectrum-overlay--right--open`;
|
|
51
|
+
$930b2f4095bb11d1$export$b9768db7ffc1bc2 = `tsH6yq_spectrum-overlay--top--open`;
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
export {$930b2f4095bb11d1$exports as default};
|
|
@@ -34,21 +34,21 @@ var $930b2f4095bb11d1$export$a96755f239de61ee;
|
|
|
34
34
|
var $930b2f4095bb11d1$export$a85c0c6b6cf8598c;
|
|
35
35
|
var $930b2f4095bb11d1$export$85aaa87e65e040bf;
|
|
36
36
|
var $930b2f4095bb11d1$export$b9768db7ffc1bc2;
|
|
37
|
-
$930b2f4095bb11d1$export$f39a09f249340e2a = `
|
|
38
|
-
$930b2f4095bb11d1$export$8c4ee2c50c22c514 = `
|
|
39
|
-
$930b2f4095bb11d1$export$a397eb58038aa381 = `
|
|
40
|
-
$930b2f4095bb11d1$export$a9781837241c946d = `
|
|
41
|
-
$930b2f4095bb11d1$export$4109102f950813a6 = `
|
|
42
|
-
$930b2f4095bb11d1$export$24c7f46a6e3605dd = `
|
|
43
|
-
$930b2f4095bb11d1$export$2927016961429360 = `
|
|
44
|
-
$930b2f4095bb11d1$export$39eed38e2296a1d6 = `
|
|
45
|
-
$930b2f4095bb11d1$export$ce0704cd084c4f0d = `
|
|
46
|
-
$930b2f4095bb11d1$export$79bfb05e59a300b = `
|
|
47
|
-
$930b2f4095bb11d1$export$641b9b70c23dce66 = `
|
|
48
|
-
$930b2f4095bb11d1$export$a96755f239de61ee = `
|
|
49
|
-
$930b2f4095bb11d1$export$a85c0c6b6cf8598c = `
|
|
50
|
-
$930b2f4095bb11d1$export$85aaa87e65e040bf = `
|
|
51
|
-
$930b2f4095bb11d1$export$b9768db7ffc1bc2 = `
|
|
37
|
+
$930b2f4095bb11d1$export$f39a09f249340e2a = `tsH6yq_focus-ring`;
|
|
38
|
+
$930b2f4095bb11d1$export$8c4ee2c50c22c514 = `tsH6yq_i18nFontFamily`;
|
|
39
|
+
$930b2f4095bb11d1$export$a397eb58038aa381 = `tsH6yq_spectrum-overlay--open`;
|
|
40
|
+
$930b2f4095bb11d1$export$a9781837241c946d = `tsH6yq_is-open ${$930b2f4095bb11d1$export$a397eb58038aa381}`;
|
|
41
|
+
$930b2f4095bb11d1$export$4109102f950813a6 = `tsH6yq_spectrum-FocusRing-ring`;
|
|
42
|
+
$930b2f4095bb11d1$export$24c7f46a6e3605dd = `tsH6yq_spectrum-FocusRing ${$930b2f4095bb11d1$export$4109102f950813a6}`;
|
|
43
|
+
$930b2f4095bb11d1$export$2927016961429360 = `tsH6yq_spectrum-FocusRing--quiet`;
|
|
44
|
+
$930b2f4095bb11d1$export$39eed38e2296a1d6 = `tsH6yq_spectrum-overlay`;
|
|
45
|
+
$930b2f4095bb11d1$export$ce0704cd084c4f0d = `tsH6yq_spectrum-Tray ${$930b2f4095bb11d1$export$39eed38e2296a1d6}`;
|
|
46
|
+
$930b2f4095bb11d1$export$79bfb05e59a300b = `tsH6yq_spectrum-Tray--fixedHeight`;
|
|
47
|
+
$930b2f4095bb11d1$export$641b9b70c23dce66 = `tsH6yq_spectrum-Tray-wrapper`;
|
|
48
|
+
$930b2f4095bb11d1$export$a96755f239de61ee = `tsH6yq_spectrum-overlay--bottom--open`;
|
|
49
|
+
$930b2f4095bb11d1$export$a85c0c6b6cf8598c = `tsH6yq_spectrum-overlay--left--open`;
|
|
50
|
+
$930b2f4095bb11d1$export$85aaa87e65e040bf = `tsH6yq_spectrum-overlay--right--open`;
|
|
51
|
+
$930b2f4095bb11d1$export$b9768db7ffc1bc2 = `tsH6yq_spectrum-overlay--top--open`;
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
export {$930b2f4095bb11d1$exports as default};
|
|
@@ -31,20 +31,20 @@ var $42908e91b4c5f428$export$a96755f239de61ee;
|
|
|
31
31
|
var $42908e91b4c5f428$export$a85c0c6b6cf8598c;
|
|
32
32
|
var $42908e91b4c5f428$export$85aaa87e65e040bf;
|
|
33
33
|
var $42908e91b4c5f428$export$b9768db7ffc1bc2;
|
|
34
|
-
$42908e91b4c5f428$export$f39a09f249340e2a = `
|
|
35
|
-
$42908e91b4c5f428$export$8c4ee2c50c22c514 = `
|
|
36
|
-
$42908e91b4c5f428$export$a397eb58038aa381 = `
|
|
37
|
-
$42908e91b4c5f428$export$a9781837241c946d = `
|
|
38
|
-
$42908e91b4c5f428$export$4109102f950813a6 = `
|
|
39
|
-
$42908e91b4c5f428$export$24c7f46a6e3605dd = `
|
|
40
|
-
$42908e91b4c5f428$export$2927016961429360 = `
|
|
41
|
-
$42908e91b4c5f428$export$39eed38e2296a1d6 = `
|
|
42
|
-
$42908e91b4c5f428$export$74470528f463af97 = `
|
|
43
|
-
$42908e91b4c5f428$export$8eb3860104039b44 = `
|
|
44
|
-
$42908e91b4c5f428$export$a96755f239de61ee = `
|
|
45
|
-
$42908e91b4c5f428$export$a85c0c6b6cf8598c = `
|
|
46
|
-
$42908e91b4c5f428$export$85aaa87e65e040bf = `
|
|
47
|
-
$42908e91b4c5f428$export$b9768db7ffc1bc2 = `
|
|
34
|
+
$42908e91b4c5f428$export$f39a09f249340e2a = `fdFt3W_focus-ring`;
|
|
35
|
+
$42908e91b4c5f428$export$8c4ee2c50c22c514 = `fdFt3W_i18nFontFamily`;
|
|
36
|
+
$42908e91b4c5f428$export$a397eb58038aa381 = `fdFt3W_spectrum-overlay--open`;
|
|
37
|
+
$42908e91b4c5f428$export$a9781837241c946d = `fdFt3W_is-open ${$42908e91b4c5f428$export$a397eb58038aa381}`;
|
|
38
|
+
$42908e91b4c5f428$export$4109102f950813a6 = `fdFt3W_spectrum-FocusRing-ring`;
|
|
39
|
+
$42908e91b4c5f428$export$24c7f46a6e3605dd = `fdFt3W_spectrum-FocusRing ${$42908e91b4c5f428$export$4109102f950813a6}`;
|
|
40
|
+
$42908e91b4c5f428$export$2927016961429360 = `fdFt3W_spectrum-FocusRing--quiet`;
|
|
41
|
+
$42908e91b4c5f428$export$39eed38e2296a1d6 = `fdFt3W_spectrum-overlay`;
|
|
42
|
+
$42908e91b4c5f428$export$74470528f463af97 = `fdFt3W_spectrum-Underlay ${$42908e91b4c5f428$export$39eed38e2296a1d6}`;
|
|
43
|
+
$42908e91b4c5f428$export$8eb3860104039b44 = `fdFt3W_spectrum-Underlay--transparent`;
|
|
44
|
+
$42908e91b4c5f428$export$a96755f239de61ee = `fdFt3W_spectrum-overlay--bottom--open`;
|
|
45
|
+
$42908e91b4c5f428$export$a85c0c6b6cf8598c = `fdFt3W_spectrum-overlay--left--open`;
|
|
46
|
+
$42908e91b4c5f428$export$85aaa87e65e040bf = `fdFt3W_spectrum-overlay--right--open`;
|
|
47
|
+
$42908e91b4c5f428$export$b9768db7ffc1bc2 = `fdFt3W_spectrum-overlay--top--open`;
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
//# sourceMappingURL=underlay_vars_css.main.js.map
|
|
@@ -32,20 +32,20 @@ var $c77d7b73b2bbd0fb$export$a96755f239de61ee;
|
|
|
32
32
|
var $c77d7b73b2bbd0fb$export$a85c0c6b6cf8598c;
|
|
33
33
|
var $c77d7b73b2bbd0fb$export$85aaa87e65e040bf;
|
|
34
34
|
var $c77d7b73b2bbd0fb$export$b9768db7ffc1bc2;
|
|
35
|
-
$c77d7b73b2bbd0fb$export$f39a09f249340e2a = `
|
|
36
|
-
$c77d7b73b2bbd0fb$export$8c4ee2c50c22c514 = `
|
|
37
|
-
$c77d7b73b2bbd0fb$export$a397eb58038aa381 = `
|
|
38
|
-
$c77d7b73b2bbd0fb$export$a9781837241c946d = `
|
|
39
|
-
$c77d7b73b2bbd0fb$export$4109102f950813a6 = `
|
|
40
|
-
$c77d7b73b2bbd0fb$export$24c7f46a6e3605dd = `
|
|
41
|
-
$c77d7b73b2bbd0fb$export$2927016961429360 = `
|
|
42
|
-
$c77d7b73b2bbd0fb$export$39eed38e2296a1d6 = `
|
|
43
|
-
$c77d7b73b2bbd0fb$export$74470528f463af97 = `
|
|
44
|
-
$c77d7b73b2bbd0fb$export$8eb3860104039b44 = `
|
|
45
|
-
$c77d7b73b2bbd0fb$export$a96755f239de61ee = `
|
|
46
|
-
$c77d7b73b2bbd0fb$export$a85c0c6b6cf8598c = `
|
|
47
|
-
$c77d7b73b2bbd0fb$export$85aaa87e65e040bf = `
|
|
48
|
-
$c77d7b73b2bbd0fb$export$b9768db7ffc1bc2 = `
|
|
35
|
+
$c77d7b73b2bbd0fb$export$f39a09f249340e2a = `fdFt3W_focus-ring`;
|
|
36
|
+
$c77d7b73b2bbd0fb$export$8c4ee2c50c22c514 = `fdFt3W_i18nFontFamily`;
|
|
37
|
+
$c77d7b73b2bbd0fb$export$a397eb58038aa381 = `fdFt3W_spectrum-overlay--open`;
|
|
38
|
+
$c77d7b73b2bbd0fb$export$a9781837241c946d = `fdFt3W_is-open ${$c77d7b73b2bbd0fb$export$a397eb58038aa381}`;
|
|
39
|
+
$c77d7b73b2bbd0fb$export$4109102f950813a6 = `fdFt3W_spectrum-FocusRing-ring`;
|
|
40
|
+
$c77d7b73b2bbd0fb$export$24c7f46a6e3605dd = `fdFt3W_spectrum-FocusRing ${$c77d7b73b2bbd0fb$export$4109102f950813a6}`;
|
|
41
|
+
$c77d7b73b2bbd0fb$export$2927016961429360 = `fdFt3W_spectrum-FocusRing--quiet`;
|
|
42
|
+
$c77d7b73b2bbd0fb$export$39eed38e2296a1d6 = `fdFt3W_spectrum-overlay`;
|
|
43
|
+
$c77d7b73b2bbd0fb$export$74470528f463af97 = `fdFt3W_spectrum-Underlay ${$c77d7b73b2bbd0fb$export$39eed38e2296a1d6}`;
|
|
44
|
+
$c77d7b73b2bbd0fb$export$8eb3860104039b44 = `fdFt3W_spectrum-Underlay--transparent`;
|
|
45
|
+
$c77d7b73b2bbd0fb$export$a96755f239de61ee = `fdFt3W_spectrum-overlay--bottom--open`;
|
|
46
|
+
$c77d7b73b2bbd0fb$export$a85c0c6b6cf8598c = `fdFt3W_spectrum-overlay--left--open`;
|
|
47
|
+
$c77d7b73b2bbd0fb$export$85aaa87e65e040bf = `fdFt3W_spectrum-overlay--right--open`;
|
|
48
|
+
$c77d7b73b2bbd0fb$export$b9768db7ffc1bc2 = `fdFt3W_spectrum-overlay--top--open`;
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
export {$c77d7b73b2bbd0fb$exports as default};
|
|
@@ -32,20 +32,20 @@ var $c77d7b73b2bbd0fb$export$a96755f239de61ee;
|
|
|
32
32
|
var $c77d7b73b2bbd0fb$export$a85c0c6b6cf8598c;
|
|
33
33
|
var $c77d7b73b2bbd0fb$export$85aaa87e65e040bf;
|
|
34
34
|
var $c77d7b73b2bbd0fb$export$b9768db7ffc1bc2;
|
|
35
|
-
$c77d7b73b2bbd0fb$export$f39a09f249340e2a = `
|
|
36
|
-
$c77d7b73b2bbd0fb$export$8c4ee2c50c22c514 = `
|
|
37
|
-
$c77d7b73b2bbd0fb$export$a397eb58038aa381 = `
|
|
38
|
-
$c77d7b73b2bbd0fb$export$a9781837241c946d = `
|
|
39
|
-
$c77d7b73b2bbd0fb$export$4109102f950813a6 = `
|
|
40
|
-
$c77d7b73b2bbd0fb$export$24c7f46a6e3605dd = `
|
|
41
|
-
$c77d7b73b2bbd0fb$export$2927016961429360 = `
|
|
42
|
-
$c77d7b73b2bbd0fb$export$39eed38e2296a1d6 = `
|
|
43
|
-
$c77d7b73b2bbd0fb$export$74470528f463af97 = `
|
|
44
|
-
$c77d7b73b2bbd0fb$export$8eb3860104039b44 = `
|
|
45
|
-
$c77d7b73b2bbd0fb$export$a96755f239de61ee = `
|
|
46
|
-
$c77d7b73b2bbd0fb$export$a85c0c6b6cf8598c = `
|
|
47
|
-
$c77d7b73b2bbd0fb$export$85aaa87e65e040bf = `
|
|
48
|
-
$c77d7b73b2bbd0fb$export$b9768db7ffc1bc2 = `
|
|
35
|
+
$c77d7b73b2bbd0fb$export$f39a09f249340e2a = `fdFt3W_focus-ring`;
|
|
36
|
+
$c77d7b73b2bbd0fb$export$8c4ee2c50c22c514 = `fdFt3W_i18nFontFamily`;
|
|
37
|
+
$c77d7b73b2bbd0fb$export$a397eb58038aa381 = `fdFt3W_spectrum-overlay--open`;
|
|
38
|
+
$c77d7b73b2bbd0fb$export$a9781837241c946d = `fdFt3W_is-open ${$c77d7b73b2bbd0fb$export$a397eb58038aa381}`;
|
|
39
|
+
$c77d7b73b2bbd0fb$export$4109102f950813a6 = `fdFt3W_spectrum-FocusRing-ring`;
|
|
40
|
+
$c77d7b73b2bbd0fb$export$24c7f46a6e3605dd = `fdFt3W_spectrum-FocusRing ${$c77d7b73b2bbd0fb$export$4109102f950813a6}`;
|
|
41
|
+
$c77d7b73b2bbd0fb$export$2927016961429360 = `fdFt3W_spectrum-FocusRing--quiet`;
|
|
42
|
+
$c77d7b73b2bbd0fb$export$39eed38e2296a1d6 = `fdFt3W_spectrum-overlay`;
|
|
43
|
+
$c77d7b73b2bbd0fb$export$74470528f463af97 = `fdFt3W_spectrum-Underlay ${$c77d7b73b2bbd0fb$export$39eed38e2296a1d6}`;
|
|
44
|
+
$c77d7b73b2bbd0fb$export$8eb3860104039b44 = `fdFt3W_spectrum-Underlay--transparent`;
|
|
45
|
+
$c77d7b73b2bbd0fb$export$a96755f239de61ee = `fdFt3W_spectrum-overlay--bottom--open`;
|
|
46
|
+
$c77d7b73b2bbd0fb$export$a85c0c6b6cf8598c = `fdFt3W_spectrum-overlay--left--open`;
|
|
47
|
+
$c77d7b73b2bbd0fb$export$85aaa87e65e040bf = `fdFt3W_spectrum-overlay--right--open`;
|
|
48
|
+
$c77d7b73b2bbd0fb$export$b9768db7ffc1bc2 = `fdFt3W_spectrum-overlay--top--open`;
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
export {$c77d7b73b2bbd0fb$exports as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/overlays",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.9.1",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
"url": "https://github.com/adobe/react-spectrum"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@react-aria/interactions": "^3.
|
|
44
|
-
"@react-aria/overlays": "^3.
|
|
45
|
-
"@react-aria/utils": "^3.
|
|
46
|
-
"@react-spectrum/utils": "^3.12.
|
|
47
|
-
"@react-stately/overlays": "^3.6.
|
|
48
|
-
"@react-types/overlays": "^3.9.
|
|
49
|
-
"@react-types/shared": "^3.32.
|
|
43
|
+
"@react-aria/interactions": "^3.26.0",
|
|
44
|
+
"@react-aria/overlays": "^3.31.0",
|
|
45
|
+
"@react-aria/utils": "^3.32.0",
|
|
46
|
+
"@react-spectrum/utils": "^3.12.10",
|
|
47
|
+
"@react-stately/overlays": "^3.6.21",
|
|
48
|
+
"@react-types/overlays": "^3.9.2",
|
|
49
|
+
"@react-types/shared": "^3.32.1",
|
|
50
50
|
"@swc/helpers": "^0.5.0",
|
|
51
51
|
"react-transition-group": "^4.4.5"
|
|
52
52
|
},
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"publishConfig": {
|
|
62
62
|
"access": "public"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "4d838da5bfe36abb35aed166995a9ef63825370f"
|
|
65
65
|
}
|
package/src/OpenTransition.tsx
CHANGED
|
@@ -35,7 +35,7 @@ export function OpenTransition(
|
|
|
35
35
|
props: any
|
|
36
36
|
): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[] {
|
|
37
37
|
// Do not apply any transition if in chromatic.
|
|
38
|
-
if (process.env.CHROMATIC) {
|
|
38
|
+
if (typeof process !== 'undefined' && process.env.CHROMATIC) {
|
|
39
39
|
return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));
|
|
40
40
|
}
|
|
41
41
|
|
package/src/Tray.tsx
CHANGED
|
@@ -72,7 +72,11 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: ForwardedRe
|
|
|
72
72
|
// is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
|
|
73
73
|
let viewport = useViewportSize();
|
|
74
74
|
let wrapperStyle: any = {
|
|
75
|
-
'--spectrum-visual-viewport-height': viewport.height + 'px'
|
|
75
|
+
'--spectrum-visual-viewport-height': viewport.height + 'px',
|
|
76
|
+
// position: fixed elements are clipped by Safari on iOS 26, so we use
|
|
77
|
+
// position: absolute and manually set the top to the scrollY.
|
|
78
|
+
// The page can't scroll while the tray is open so this doesn't need to update.
|
|
79
|
+
top: typeof window !== 'undefined' ? window.scrollY : 0
|
|
76
80
|
};
|
|
77
81
|
|
|
78
82
|
let wrapperClassName = classNames(
|
package/src/Underlay.tsx
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import {classNames} from '@react-spectrum/utils';
|
|
14
|
+
import {isScrollable} from '@react-aria/utils';
|
|
14
15
|
import React, {JSX} from 'react';
|
|
15
16
|
import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';
|
|
16
17
|
|
|
@@ -20,7 +21,23 @@ interface UnderlayProps {
|
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element {
|
|
24
|
+
let pageHeight: number | undefined = undefined;
|
|
25
|
+
if (typeof document !== 'undefined') {
|
|
26
|
+
let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;
|
|
27
|
+
// Prevent Firefox from adding scrollbars when the page has a fractional height.
|
|
28
|
+
let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
|
|
29
|
+
pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
|
|
30
|
+
}
|
|
31
|
+
|
|
23
32
|
return (
|
|
24
|
-
<div
|
|
33
|
+
<div
|
|
34
|
+
data-testid="underlay"
|
|
35
|
+
{...otherProps}
|
|
36
|
+
// Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
|
|
37
|
+
style={{height: pageHeight}}
|
|
38
|
+
className={classNames(underlayStyles, 'spectrum-Underlay', {
|
|
39
|
+
'is-open': isOpen,
|
|
40
|
+
'spectrum-Underlay--transparent': isTransparent
|
|
41
|
+
})} />
|
|
25
42
|
);
|
|
26
43
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAkBJ;;;;;;;AAYA;;;;;;;AAWA;;;;AAIA;;;;AAUA;;;;AAIA;;;;AAIA;;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAkBA;;;;;;;;;;;;;;;;;;;AAwCA;;;;;AAUA;;;;;AAOA;EACE;;;;;AAKF;EACE;;;;;;AAkBF","sources":["packages/@adobe/spectrum-css-temp/components/tray/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"overlays.31d3453e.css.map"}
|