@react-spectrum/menu 3.18.2-nightly.4534 → 3.18.2-nightly.4543

package/dist/import.mjs

@@ -133,6 +133,10 @@ $parcel$export($286d1cb34bb7dc84$exports, "is-open", () => $286d1cb34bb7dc84$exp
 $parcel$export($286d1cb34bb7dc84$exports, "is-selectable", () => $286d1cb34bb7dc84$export$fbd22ba224473193, (v) => $286d1cb34bb7dc84$export$fbd22ba224473193 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "is-selected", () => $286d1cb34bb7dc84$export$1e0fb04f31d3c22a, (v) => $286d1cb34bb7dc84$export$1e0fb04f31d3c22a = v);
 $parcel$export($286d1cb34bb7dc84$exports, "keyboard", () => $286d1cb34bb7dc84$export$cfdd767f5a513509, (v) => $286d1cb34bb7dc84$export$cfdd767f5a513509 = v);
+$parcel$export($286d1cb34bb7dc84$exports, "slideInFromLeft", () => $286d1cb34bb7dc84$export$cd927b4666be507, (v) => $286d1cb34bb7dc84$export$cd927b4666be507 = v);
+$parcel$export($286d1cb34bb7dc84$exports, "slideInFromRight", () => $286d1cb34bb7dc84$export$18c5d97e4260ebf8, (v) => $286d1cb34bb7dc84$export$18c5d97e4260ebf8 = v);
+$parcel$export($286d1cb34bb7dc84$exports, "slideOutToLeft", () => $286d1cb34bb7dc84$export$288baa3931e3ffec, (v) => $286d1cb34bb7dc84$export$288baa3931e3ffec = v);
+$parcel$export($286d1cb34bb7dc84$exports, "slideOutToRight", () => $286d1cb34bb7dc84$export$37de59e6c58ecf84, (v) => $286d1cb34bb7dc84$export$37de59e6c58ecf84 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-FocusRing-ring", () => $286d1cb34bb7dc84$export$4109102f950813a6, (v) => $286d1cb34bb7dc84$export$4109102f950813a6 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-FocusRing", () => $286d1cb34bb7dc84$export$24c7f46a6e3605dd, (v) => $286d1cb34bb7dc84$export$24c7f46a6e3605dd = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-FocusRing--quiet", () => $286d1cb34bb7dc84$export$2927016961429360, (v) => $286d1cb34bb7dc84$export$2927016961429360 = v);
@@ -163,6 +167,9 @@ $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Submenu-heading", () => $286
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Submenu-headingWrapper", () => $286d1cb34bb7dc84$export$d3fc690f61339a08, (v) => $286d1cb34bb7dc84$export$d3fc690f61339a08 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Submenu-popover", () => $286d1cb34bb7dc84$export$fe967dac6207a986, (v) => $286d1cb34bb7dc84$export$fe967dac6207a986 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "spectrum-Submenu-wrapper", () => $286d1cb34bb7dc84$export$158cbd6607d36c4e, (v) => $286d1cb34bb7dc84$export$158cbd6607d36c4e = v);
+$parcel$export($286d1cb34bb7dc84$exports, "spectrum-Submenu-wrapper--isMobile", () => $286d1cb34bb7dc84$export$6b954168165460e7, (v) => $286d1cb34bb7dc84$export$6b954168165460e7 = v);
+$parcel$export($286d1cb34bb7dc84$exports, "spectrum-TraySubmenu-enter", () => $286d1cb34bb7dc84$export$6eb7afb010e5a05e, (v) => $286d1cb34bb7dc84$export$6eb7afb010e5a05e = v);
+$parcel$export($286d1cb34bb7dc84$exports, "spectrum-TraySubmenu-exit", () => $286d1cb34bb7dc84$export$f55221e0121f82e3, (v) => $286d1cb34bb7dc84$export$f55221e0121f82e3 = v);
 $parcel$export($286d1cb34bb7dc84$exports, "text", () => $286d1cb34bb7dc84$export$6f093cfa640b7166, (v) => $286d1cb34bb7dc84$export$6f093cfa640b7166 = v);
 var $286d1cb34bb7dc84$export$292abbf31ed842a;
 var $286d1cb34bb7dc84$export$980c1089c0604ea3;
@@ -181,6 +188,10 @@ var $286d1cb34bb7dc84$export$a9781837241c946d;
 var $286d1cb34bb7dc84$export$fbd22ba224473193;
 var $286d1cb34bb7dc84$export$1e0fb04f31d3c22a;
 var $286d1cb34bb7dc84$export$cfdd767f5a513509;
+var $286d1cb34bb7dc84$export$cd927b4666be507;
+var $286d1cb34bb7dc84$export$18c5d97e4260ebf8;
+var $286d1cb34bb7dc84$export$288baa3931e3ffec;
+var $286d1cb34bb7dc84$export$37de59e6c58ecf84;
 var $286d1cb34bb7dc84$export$4109102f950813a6;
 var $286d1cb34bb7dc84$export$24c7f46a6e3605dd;
 var $286d1cb34bb7dc84$export$2927016961429360;
@@ -211,6 +222,9 @@ var $286d1cb34bb7dc84$export$c830d2588e34dae1;
 var $286d1cb34bb7dc84$export$d3fc690f61339a08;
 var $286d1cb34bb7dc84$export$fe967dac6207a986;
 var $286d1cb34bb7dc84$export$158cbd6607d36c4e;
+var $286d1cb34bb7dc84$export$6b954168165460e7;
+var $286d1cb34bb7dc84$export$6eb7afb010e5a05e;
+var $286d1cb34bb7dc84$export$f55221e0121f82e3;
 var $286d1cb34bb7dc84$export$6f093cfa640b7166;
 $286d1cb34bb7dc84$export$292abbf31ed842a = `Q7FggG_checkmark`;
 $286d1cb34bb7dc84$export$980c1089c0604ea3 = `Q7FggG_chevron`;
@@ -229,6 +243,14 @@ $286d1cb34bb7dc84$export$a9781837241c946d = `Q7FggG_is-open`;
 $286d1cb34bb7dc84$export$fbd22ba224473193 = `Q7FggG_is-selectable`;
 $286d1cb34bb7dc84$export$1e0fb04f31d3c22a = `Q7FggG_is-selected`;
 $286d1cb34bb7dc84$export$cfdd767f5a513509 = `Q7FggG_keyboard`;
+$286d1cb34bb7dc84$export$cd927b4666be507 = `Q7FggG_slideInFromLeft`;
+$286d1cb34bb7dc84$export$cd927b4666be507;
+$286d1cb34bb7dc84$export$18c5d97e4260ebf8 = `Q7FggG_slideInFromRight`;
+$286d1cb34bb7dc84$export$18c5d97e4260ebf8;
+$286d1cb34bb7dc84$export$288baa3931e3ffec = `Q7FggG_slideOutToLeft`;
+$286d1cb34bb7dc84$export$288baa3931e3ffec;
+$286d1cb34bb7dc84$export$37de59e6c58ecf84 = `Q7FggG_slideOutToRight`;
+$286d1cb34bb7dc84$export$37de59e6c58ecf84;
 $286d1cb34bb7dc84$export$4109102f950813a6 = `Q7FggG_spectrum-FocusRing-ring`;
 $286d1cb34bb7dc84$export$24c7f46a6e3605dd = `Q7FggG_spectrum-FocusRing ${$286d1cb34bb7dc84$export$4109102f950813a6}`;
 $286d1cb34bb7dc84$export$2927016961429360 = `Q7FggG_spectrum-FocusRing--quiet`;
@@ -259,6 +281,9 @@ $286d1cb34bb7dc84$export$c830d2588e34dae1 = `Q7FggG_spectrum-Submenu-heading`;
 $286d1cb34bb7dc84$export$d3fc690f61339a08 = `Q7FggG_spectrum-Submenu-headingWrapper`;
 $286d1cb34bb7dc84$export$fe967dac6207a986 = `Q7FggG_spectrum-Submenu-popover`;
 $286d1cb34bb7dc84$export$158cbd6607d36c4e = `Q7FggG_spectrum-Submenu-wrapper`;
+$286d1cb34bb7dc84$export$6b954168165460e7 = `Q7FggG_spectrum-Submenu-wrapper--isMobile`;
+$286d1cb34bb7dc84$export$6eb7afb010e5a05e = `Q7FggG_spectrum-TraySubmenu-enter`;
+$286d1cb34bb7dc84$export$f55221e0121f82e3 = `Q7FggG_spectrum-TraySubmenu-exit`;
 $286d1cb34bb7dc84$export$6f093cfa640b7166 = `Q7FggG_text`;
 
 
@@ -810,7 +835,6 @@ function $49b26f4b606348f6$var$Menu(props, ref) {
         },
         isDisabled: isSubmenu || !hasOpenSubmenu
     });
-    // TODO: add slide transition
     return /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $d94604d52c3e3feb$export$24aad8519b95b41b).Provider, {
         value: {
             popoverContainer: popoverContainer,
@@ -874,6 +898,25 @@ function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
     let headingId = (0, $9SHwR$useSlotId)();
     let isMobile = (0, $9SHwR$useIsMobileDevice)();
     let { direction: direction } = (0, $9SHwR$useLocale)();
+    let [traySubmenuAnimation, setTraySubmenuAnimation] = (0, $9SHwR$useState)("");
+    (0, $9SHwR$useLayoutEffect)(()=>{
+        if (!hasOpenSubmenu) setTraySubmenuAnimation("spectrum-TraySubmenu-enter");
+    }, [
+        hasOpenSubmenu,
+        isMobile
+    ]);
+    let timeoutRef = (0, $9SHwR$useRef)(null);
+    let handleBackButtonPress = ()=>{
+        setTraySubmenuAnimation("spectrum-TraySubmenu-exit");
+        timeoutRef.current = setTimeout(()=>{
+            onBackButtonPress();
+        }, 220); // Matches transition duration
+    };
+    (0, $9SHwR$useEffect)(()=>{
+        return ()=>{
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        };
+    }, []);
     return /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$react).Fragment, null, /*#__PURE__*/ (0, $9SHwR$react).createElement("div", {
         role: headingId ? "dialog" : undefined,
         "aria-labelledby": headingId,
@@ -881,18 +924,21 @@ function $49b26f4b606348f6$export$3dfe97b5c32d8d8c(props) {
         "data-testid": "menu-wrapper",
         className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Menu-wrapper", {
             "spectrum-Menu-wrapper--isMobile": isMobile,
-            "is-expanded": hasOpenSubmenu
+            "is-expanded": hasOpenSubmenu,
+            [traySubmenuAnimation]: isMobile
         })
     }, /*#__PURE__*/ (0, $9SHwR$react).createElement("div", {
         role: "presentation",
-        className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Submenu-wrapper"),
+        className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Submenu-wrapper", {
+            "spectrum-Submenu-wrapper--isMobile": isMobile
+        }),
         onKeyDown: wrapperKeyDown
     }, isMobile && isSubmenu && !hasOpenSubmenu && /*#__PURE__*/ (0, $9SHwR$react).createElement("div", {
         className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), "spectrum-Submenu-headingWrapper")
     }, /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$ActionButton), {
         "aria-label": backButtonLabel,
         isQuiet: true,
-        onPress: onBackButtonPress
+        onPress: handleBackButtonPress
     }, direction === "rtl" ? /*#__PURE__*/ (0, $9SHwR$react).createElement((0, $9SHwR$spectrumiconsuiArrowDownSmall), {
         UNSAFE_style: {
             rotate: "270deg"
@@ -1024,13 +1070,20 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
         isDisabled: !isUnavailable
     }, submenuTriggerState, triggerRef);
     let isMobile = (0, $9SHwR$useIsMobileDevice)();
+    let [traySubmenuAnimation, setTraySubmenuAnimation] = (0, $9SHwR$useState)("");
+    (0, $9SHwR$useEffect)(()=>{
+        if (submenuTriggerState.isOpen) setTraySubmenuAnimation("spectrum-TraySubmenu-enter");
+    }, [
+        submenuTriggerState.isOpen
+    ]);
     let slots = {};
     if (isUnavailable) slots = {
         dialog: {
             UNSAFE_className: (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c487b1d738ebeac2$exports))), "react-spectrum-ContextualHelp-dialog", {
                 "react-spectrum-ContextualHelp-dialog--isMobile": isMobile
             }, (0, $9SHwR$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($286d1cb34bb7dc84$exports))), {
-                "spectrum-Menu-subdialog": !isMobile
+                "spectrum-Menu-subdialog": !isMobile,
+                [traySubmenuAnimation]: isMobile
             }))
         },
         content: {
@@ -1051,8 +1104,11 @@ function $726fb1b478e356bf$var$ContextualHelpTrigger(props) {
     let overlay;
     let tray;
     let onBackButtonPress = ()=>{
-        submenuTriggerState.close();
-        if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) parentMenuRef.current.focus();
+        setTraySubmenuAnimation("spectrum-TraySubmenu-exit");
+        setTimeout(()=>{
+            submenuTriggerState.close();
+            if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) parentMenuRef.current.focus();
+        }, 220); // Matches transition duration
     };
     let [offset, setOffset] = (0, $9SHwR$useState)(0);
     (0, $9SHwR$useLayoutEffect)(()=>{

package/dist/main.css

@@ -269,13 +269,20 @@
   overflow: auto;
 }
 
+.Q7FggG_spectrum-Menu-wrapper .Q7FggG_spectrum-Submenu-wrapper.Q7FggG_spectrum-Submenu-wrapper--isMobile {
+  overflow-x: hidden;
+}
+
 .Q7FggG_spectrum-Menu-wrapper.Q7FggG_spectrum-Menu-wrapper--isMobile {
   background-color: unset;
+  opacity: 1;
+  transition: opacity var(--spectrum-global-animation-duration-600, .3s) var(--spectrum-global-animation-ease-out, cubic-bezier(0, 0, .4, 1));
   border: none;
   width: 100%;
 }
 
 .Q7FggG_spectrum-Menu-wrapper.Q7FggG_spectrum-Menu-wrapper--isMobile.Q7FggG_is-expanded {
+  opacity: 0;
   border: 0;
   height: 0;
   position: absolute;
@@ -370,6 +377,76 @@
   color: var(--spectrum-heading-subtitle3-text-color, var(--spectrum-global-color-gray-700));
 }
 
+@keyframes Q7FggG_slideInFromRight {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes Q7FggG_slideOutToRight {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes Q7FggG_slideInFromLeft {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes Q7FggG_slideOutToLeft {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+.Q7FggG_spectrum-TraySubmenu-enter {
+  animation-name: Q7FggG_slideInFromRight;
+  animation-duration: var(--spectrum-global-animation-duration-400, .22s);
+  animation-fill-mode: forwards;
+  animation-timing-function: var(--spectrum-global-animation-ease-out, cubic-bezier(0, 0, .4, 1));
+}
+
+.Q7FggG_spectrum-TraySubmenu-enter:-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)) {
+  animation-name: Q7FggG_slideInFromLeft;
+}
+
+.Q7FggG_spectrum-TraySubmenu-enter: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)) {
+  animation-name: Q7FggG_slideInFromLeft;
+}
+
+.Q7FggG_spectrum-TraySubmenu-exit {
+  animation-name: Q7FggG_slideOutToRight;
+  animation-duration: var(--spectrum-global-animation-duration-400, .22s);
+  animation-fill-mode: forwards;
+  animation-timing-function: var(--spectrum-global-animation-ease-in, cubic-bezier(.5, 0, 1, 1));
+}
+
+.Q7FggG_spectrum-TraySubmenu-exit:-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)) {
+  animation-name: Q7FggG_slideOutToLeft;
+}
+
+.Q7FggG_spectrum-TraySubmenu-exit: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)) {
+  animation-name: Q7FggG_slideOutToLeft;
+}
+
 @media (forced-colors: active) {
   .Q7FggG_spectrum-Menu-divider {
     forced-color-adjust: none;

package/dist/main.css.map

@@ -1 +1 @@
-{"mappings":"AC4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;AAWA;;;;AAIA;;;;;;;;;;;;;AAmBE;;;;;AAMA;;;;AAKF;;;;;;AAUA;;;;;;;;;;;;;AAgBE;;;;AAIA;;;;AAIA;;;;AAKE;;;;AAKF;;;;AAMF;;;;;;AAMA;;;;;;AAMA;;;;;;AAOA;;;;;;;;;AAaA;;;;;;;;;;;;AAcE;;;;AAGA;;;;AAKF;;;;;AAMA;;;;;;;;;;AAgBE;;;;AAOF;;;;;;AAOA;;;;;;AAOA;;;;;;AAOA;;;;;;AAMA;;;;;;;;AAUA;;;;;;;;AASA;;;;AAGE;;;;;;AAMA;;;;;;AAKE;;;;;;;AAOA;;;;;AAIE;;;;;;;;;;AAyBN;;;;;;;AAWA;;;;;AAKA;;;;AAIA;;;;;AAIE;;;;;;AAOA;;;;;AASE;;;;AAKF;;;;AAKA;;;;;;;AACE;;;;AAUJ;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAQA;;;;AAIA;EACE;;;;;EAIA;;;;;;;;;;;;;;;;;;;EAkBE;;;;EAGA;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;;ACphBN;;;;;;;AAME;;;;;AAMF;;;;;;AAKE;;;;AAGA;;;;AAIA","sources":["a9fc8bc1f173f181","packages/@adobe/spectrum-css-temp/components/menu/vars.css","packages/@adobe/spectrum-css-temp/components/contextualhelp/vars.css"],"sourcesContent":["@import \"6db3b9521f7e2230\";\n@import \"f7266180796234ae\";\n","/*\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","/*\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":"main.css.map"}
+{"mappings":"AC4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;AAWA;;;;AAIA;;;;;;;;;;;;;AAmBE;;;;;AAMA;;;;AAKF;;;;;;AAUA;;;;;;;;;;;;;AAgBE;;;;AAIA;;;;AAIA;;;;AAKE;;;;AAKF;;;;AAMF;;;;;;AAMA;;;;;;AAMA;;;;;;AAOA;;;;;;;;;AAaA;;;;;;;;;;;;AAcE;;;;AAGA;;;;AAKF;;;;;AAMA;;;;;;;;;;AAgBE;;;;AAOF;;;;;;AAOA;;;;;;AAOA;;;;;;AAOA;;;;;;AAMA;;;;;;;;AAUA;;;;;;;;AASA;;;;AAGE;;;;;;AAKE;;;;AAKF;;;;;;;;AAOE;;;;;;;;AAQA;;;;;AAIE;;;;;;;;;;AAyBN;;;;;;;AAWA;;;;;AAKA;;;;AAIA;;;;;AAIE;;;;;;AAOA;;;;;AASE;;;;AAKF;;;;AAKA;;;;;;;AACE;;;;AAUJ;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAQA;;;;AAIA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;;;;AASA;;;;;;;AAKE;;;;AAAA;;;;AAKF;;;;;;;AAKE;;;;AAAA;;;;AAKF;EACE;;;;;EAIA;;;;;;;;;;;;;;;;;;;EAkBE;;;;EAGA;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;EAXF;;;;;EAOI;;;;EAIF;;;;;;ACnlBN;;;;;;;AAME;;;;;AAMF;;;;;;AAKE;;;;AAGA;;;;AAIA","sources":["a9fc8bc1f173f181","packages/@adobe/spectrum-css-temp/components/menu/vars.css","packages/@adobe/spectrum-css-temp/components/contextualhelp/vars.css"],"sourcesContent":["@import \"6db3b9521f7e2230\";\n@import \"f7266180796234ae\";\n","/*\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","/*\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":"main.css.map"}

package/dist/main.js

@@ -141,6 +141,10 @@ $parcel$export($3deee0fd2b46e64f$exports, "is-open", () => $3deee0fd2b46e64f$exp
 $parcel$export($3deee0fd2b46e64f$exports, "is-selectable", () => $3deee0fd2b46e64f$export$fbd22ba224473193, (v) => $3deee0fd2b46e64f$export$fbd22ba224473193 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "is-selected", () => $3deee0fd2b46e64f$export$1e0fb04f31d3c22a, (v) => $3deee0fd2b46e64f$export$1e0fb04f31d3c22a = v);
 $parcel$export($3deee0fd2b46e64f$exports, "keyboard", () => $3deee0fd2b46e64f$export$cfdd767f5a513509, (v) => $3deee0fd2b46e64f$export$cfdd767f5a513509 = v);
+$parcel$export($3deee0fd2b46e64f$exports, "slideInFromLeft", () => $3deee0fd2b46e64f$export$cd927b4666be507, (v) => $3deee0fd2b46e64f$export$cd927b4666be507 = v);
+$parcel$export($3deee0fd2b46e64f$exports, "slideInFromRight", () => $3deee0fd2b46e64f$export$18c5d97e4260ebf8, (v) => $3deee0fd2b46e64f$export$18c5d97e4260ebf8 = v);
+$parcel$export($3deee0fd2b46e64f$exports, "slideOutToLeft", () => $3deee0fd2b46e64f$export$288baa3931e3ffec, (v) => $3deee0fd2b46e64f$export$288baa3931e3ffec = v);
+$parcel$export($3deee0fd2b46e64f$exports, "slideOutToRight", () => $3deee0fd2b46e64f$export$37de59e6c58ecf84, (v) => $3deee0fd2b46e64f$export$37de59e6c58ecf84 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-FocusRing-ring", () => $3deee0fd2b46e64f$export$4109102f950813a6, (v) => $3deee0fd2b46e64f$export$4109102f950813a6 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-FocusRing", () => $3deee0fd2b46e64f$export$24c7f46a6e3605dd, (v) => $3deee0fd2b46e64f$export$24c7f46a6e3605dd = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-FocusRing--quiet", () => $3deee0fd2b46e64f$export$2927016961429360, (v) => $3deee0fd2b46e64f$export$2927016961429360 = v);
@@ -171,6 +175,9 @@ $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Submenu-heading", () => $3de
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Submenu-headingWrapper", () => $3deee0fd2b46e64f$export$d3fc690f61339a08, (v) => $3deee0fd2b46e64f$export$d3fc690f61339a08 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Submenu-popover", () => $3deee0fd2b46e64f$export$fe967dac6207a986, (v) => $3deee0fd2b46e64f$export$fe967dac6207a986 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "spectrum-Submenu-wrapper", () => $3deee0fd2b46e64f$export$158cbd6607d36c4e, (v) => $3deee0fd2b46e64f$export$158cbd6607d36c4e = v);
+$parcel$export($3deee0fd2b46e64f$exports, "spectrum-Submenu-wrapper--isMobile", () => $3deee0fd2b46e64f$export$6b954168165460e7, (v) => $3deee0fd2b46e64f$export$6b954168165460e7 = v);
+$parcel$export($3deee0fd2b46e64f$exports, "spectrum-TraySubmenu-enter", () => $3deee0fd2b46e64f$export$6eb7afb010e5a05e, (v) => $3deee0fd2b46e64f$export$6eb7afb010e5a05e = v);
+$parcel$export($3deee0fd2b46e64f$exports, "spectrum-TraySubmenu-exit", () => $3deee0fd2b46e64f$export$f55221e0121f82e3, (v) => $3deee0fd2b46e64f$export$f55221e0121f82e3 = v);
 $parcel$export($3deee0fd2b46e64f$exports, "text", () => $3deee0fd2b46e64f$export$6f093cfa640b7166, (v) => $3deee0fd2b46e64f$export$6f093cfa640b7166 = v);
 var $3deee0fd2b46e64f$export$292abbf31ed842a;
 var $3deee0fd2b46e64f$export$980c1089c0604ea3;
@@ -189,6 +196,10 @@ var $3deee0fd2b46e64f$export$a9781837241c946d;
 var $3deee0fd2b46e64f$export$fbd22ba224473193;
 var $3deee0fd2b46e64f$export$1e0fb04f31d3c22a;
 var $3deee0fd2b46e64f$export$cfdd767f5a513509;
+var $3deee0fd2b46e64f$export$cd927b4666be507;
+var $3deee0fd2b46e64f$export$18c5d97e4260ebf8;
+var $3deee0fd2b46e64f$export$288baa3931e3ffec;
+var $3deee0fd2b46e64f$export$37de59e6c58ecf84;
 var $3deee0fd2b46e64f$export$4109102f950813a6;
 var $3deee0fd2b46e64f$export$24c7f46a6e3605dd;
 var $3deee0fd2b46e64f$export$2927016961429360;
@@ -219,6 +230,9 @@ var $3deee0fd2b46e64f$export$c830d2588e34dae1;
 var $3deee0fd2b46e64f$export$d3fc690f61339a08;
 var $3deee0fd2b46e64f$export$fe967dac6207a986;
 var $3deee0fd2b46e64f$export$158cbd6607d36c4e;
+var $3deee0fd2b46e64f$export$6b954168165460e7;
+var $3deee0fd2b46e64f$export$6eb7afb010e5a05e;
+var $3deee0fd2b46e64f$export$f55221e0121f82e3;
 var $3deee0fd2b46e64f$export$6f093cfa640b7166;
 $3deee0fd2b46e64f$export$292abbf31ed842a = `Q7FggG_checkmark`;
 $3deee0fd2b46e64f$export$980c1089c0604ea3 = `Q7FggG_chevron`;
@@ -237,6 +251,14 @@ $3deee0fd2b46e64f$export$a9781837241c946d = `Q7FggG_is-open`;
 $3deee0fd2b46e64f$export$fbd22ba224473193 = `Q7FggG_is-selectable`;
 $3deee0fd2b46e64f$export$1e0fb04f31d3c22a = `Q7FggG_is-selected`;
 $3deee0fd2b46e64f$export$cfdd767f5a513509 = `Q7FggG_keyboard`;
+$3deee0fd2b46e64f$export$cd927b4666be507 = `Q7FggG_slideInFromLeft`;
+$3deee0fd2b46e64f$export$cd927b4666be507;
+$3deee0fd2b46e64f$export$18c5d97e4260ebf8 = `Q7FggG_slideInFromRight`;
+$3deee0fd2b46e64f$export$18c5d97e4260ebf8;
+$3deee0fd2b46e64f$export$288baa3931e3ffec = `Q7FggG_slideOutToLeft`;
+$3deee0fd2b46e64f$export$288baa3931e3ffec;
+$3deee0fd2b46e64f$export$37de59e6c58ecf84 = `Q7FggG_slideOutToRight`;
+$3deee0fd2b46e64f$export$37de59e6c58ecf84;
 $3deee0fd2b46e64f$export$4109102f950813a6 = `Q7FggG_spectrum-FocusRing-ring`;
 $3deee0fd2b46e64f$export$24c7f46a6e3605dd = `Q7FggG_spectrum-FocusRing ${$3deee0fd2b46e64f$export$4109102f950813a6}`;
 $3deee0fd2b46e64f$export$2927016961429360 = `Q7FggG_spectrum-FocusRing--quiet`;
@@ -267,6 +289,9 @@ $3deee0fd2b46e64f$export$c830d2588e34dae1 = `Q7FggG_spectrum-Submenu-heading`;
 $3deee0fd2b46e64f$export$d3fc690f61339a08 = `Q7FggG_spectrum-Submenu-headingWrapper`;
 $3deee0fd2b46e64f$export$fe967dac6207a986 = `Q7FggG_spectrum-Submenu-popover`;
 $3deee0fd2b46e64f$export$158cbd6607d36c4e = `Q7FggG_spectrum-Submenu-wrapper`;
+$3deee0fd2b46e64f$export$6b954168165460e7 = `Q7FggG_spectrum-Submenu-wrapper--isMobile`;
+$3deee0fd2b46e64f$export$6eb7afb010e5a05e = `Q7FggG_spectrum-TraySubmenu-enter`;
+$3deee0fd2b46e64f$export$f55221e0121f82e3 = `Q7FggG_spectrum-TraySubmenu-exit`;
 $3deee0fd2b46e64f$export$6f093cfa640b7166 = `Q7FggG_text`;
 
 
@@ -818,7 +843,6 @@ function $63a7dff9cbe2d046$var$Menu(props, ref) {
         },
         isDisabled: isSubmenu || !hasOpenSubmenu
     });
-    // TODO: add slide transition
     return /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $cac834c4bc0a51d3$export$24aad8519b95b41b).Provider, {
         value: {
             popoverContainer: popoverContainer,
@@ -882,6 +906,25 @@ function $63a7dff9cbe2d046$export$3dfe97b5c32d8d8c(props) {
     let headingId = (0, $3ThwF$reactariautils.useSlotId)();
     let isMobile = (0, $3ThwF$reactspectrumutils.useIsMobileDevice)();
     let { direction: direction } = (0, $3ThwF$reactariai18n.useLocale)();
+    let [traySubmenuAnimation, setTraySubmenuAnimation] = (0, $3ThwF$react.useState)("");
+    (0, $3ThwF$reactariautils.useLayoutEffect)(()=>{
+        if (!hasOpenSubmenu) setTraySubmenuAnimation("spectrum-TraySubmenu-enter");
+    }, [
+        hasOpenSubmenu,
+        isMobile
+    ]);
+    let timeoutRef = (0, $3ThwF$react.useRef)(null);
+    let handleBackButtonPress = ()=>{
+        setTraySubmenuAnimation("spectrum-TraySubmenu-exit");
+        timeoutRef.current = setTimeout(()=>{
+            onBackButtonPress();
+        }, 220); // Matches transition duration
+    };
+    (0, $3ThwF$react.useEffect)(()=>{
+        return ()=>{
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        };
+    }, []);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("div", {
         role: headingId ? "dialog" : undefined,
         "aria-labelledby": headingId,
@@ -889,18 +932,21 @@ function $63a7dff9cbe2d046$export$3dfe97b5c32d8d8c(props) {
         "data-testid": "menu-wrapper",
         className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), "spectrum-Menu-wrapper", {
             "spectrum-Menu-wrapper--isMobile": isMobile,
-            "is-expanded": hasOpenSubmenu
+            "is-expanded": hasOpenSubmenu,
+            [traySubmenuAnimation]: isMobile
         })
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("div", {
         role: "presentation",
-        className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), "spectrum-Submenu-wrapper"),
+        className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), "spectrum-Submenu-wrapper", {
+            "spectrum-Submenu-wrapper--isMobile": isMobile
+        }),
         onKeyDown: wrapperKeyDown
     }, isMobile && isSubmenu && !hasOpenSubmenu && /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement("div", {
         className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), "spectrum-Submenu-headingWrapper")
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, $3ThwF$reactspectrumbutton.ActionButton), {
         "aria-label": backButtonLabel,
         isQuiet: true,
-        onPress: onBackButtonPress
+        onPress: handleBackButtonPress
     }, direction === "rtl" ? /*#__PURE__*/ (0, ($parcel$interopDefault($3ThwF$react))).createElement((0, ($parcel$interopDefault($3ThwF$spectrumiconsuiArrowDownSmall))), {
         UNSAFE_style: {
             rotate: "270deg"
@@ -1032,13 +1078,20 @@ function $db380858d398b658$var$ContextualHelpTrigger(props) {
         isDisabled: !isUnavailable
     }, submenuTriggerState, triggerRef);
     let isMobile = (0, $3ThwF$reactspectrumutils.useIsMobileDevice)();
+    let [traySubmenuAnimation, setTraySubmenuAnimation] = (0, $3ThwF$react.useState)("");
+    (0, $3ThwF$react.useEffect)(()=>{
+        if (submenuTriggerState.isOpen) setTraySubmenuAnimation("spectrum-TraySubmenu-enter");
+    }, [
+        submenuTriggerState.isOpen
+    ]);
     let slots = {};
     if (isUnavailable) slots = {
         dialog: {
             UNSAFE_className: (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($a10e565ec42bcf96$exports))), "react-spectrum-ContextualHelp-dialog", {
                 "react-spectrum-ContextualHelp-dialog--isMobile": isMobile
             }, (0, $3ThwF$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3deee0fd2b46e64f$exports))), {
-                "spectrum-Menu-subdialog": !isMobile
+                "spectrum-Menu-subdialog": !isMobile,
+                [traySubmenuAnimation]: isMobile
             }))
         },
         content: {
@@ -1059,8 +1112,11 @@ function $db380858d398b658$var$ContextualHelpTrigger(props) {
     let overlay;
     let tray;
     let onBackButtonPress = ()=>{
-        submenuTriggerState.close();
-        if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) parentMenuRef.current.focus();
+        setTraySubmenuAnimation("spectrum-TraySubmenu-exit");
+        setTimeout(()=>{
+            submenuTriggerState.close();
+            if (parentMenuRef.current && !parentMenuRef.current.contains(document.activeElement)) parentMenuRef.current.focus();
+        }, 220); // Matches transition duration
     };
     let [offset, setOffset] = (0, $3ThwF$react.useState)(0);
     (0, $3ThwF$reactariautils.useLayoutEffect)(()=>{