pebble-web 2.6.0 → 2.7.0

package/dist/pebble-web.js

@@ -1048,7 +1048,7 @@ var animationConfig = {
   },
   config: function config(_a, motion) {
     return motion === "leave" ? {
-      duration: 0.1
+      duration: 80
     } : {
       duration: 200
     };
@@ -3510,7 +3510,6 @@ var closeStyle = /*#__PURE__*/emotion.css({
   }
 }, ";label:closeStyle;" + ( "" ));
 var sidebarStyle = /*#__PURE__*/emotion.css({
-  transition: "transform 200ms ".concat(constants.animationCurve),
   backgroundColor: pebbleShared.colors.white.base,
   position: "fixed",
   top: 0,
@@ -3529,13 +3528,17 @@ function _createSuper$m(Derived) { var hasNativeReflectConstruct = _isNativeRefl
 function _isNativeReflectConstruct$m() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var transitionProps = {
   from: {
-    opacity: 0
+    opacity: 0,
+    transform: "translateX(100%)"
   },
   enter: {
-    opacity: 1
+    opacity: 1,
+    transform: "translateX(0)"
   },
   leave: {
-    opacity: 0
+    opacity: 0,
+    transform: "translateX(100%)",
+    pointerEvents: "none"
   }
 };
 var SideBar = /*#__PURE__*/function (_React$PureComponent) {
@@ -3589,46 +3592,34 @@ var SideBar = /*#__PURE__*/function (_React$PureComponent) {
           onClose = _this$props2.onClose,
           onOutsideClick = _this$props2.onOutsideClick,
           closeOnOutsideClick = _this$props2.closeOnOutsideClick;
-      var _sidebarOverride = /*#__PURE__*/emotion.css({
-        width: width,
-        transform: isOpen ? "translateX(0)" : "translateX(".concat(width, "px)")
-      }, ";label:SideBar;" + ( "" ));
-      var _sidebarStyle = emotion.cx(_sidebarOverride, sidebarStyle, /*#__PURE__*/emotion.css({
-        transform: isOpen ? "translateX(0)" : "translateX(100%)"
+      var _sidebarStyle = emotion.cx(sidebarStyle, /*#__PURE__*/emotion.css({
+        width: width
       }, ";label:SideBar;" + ( "" )));
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(renderprops_cjs.Transition, Object.assign({
-        items: isOpen
-      }, transitionProps, {
-        config: animationConfig.config
-      }), function (show) {
-        return show && function (styles) {
-          return /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
-            style: styles,
-            className: sidebarWrapperStyle,
-            onClick: onOutsideClick || closeOnOutsideClick ? _this2.onOutsideClick : undefined,
-            "data-testid": "shadowArea"
-          });
-        };
-      }), /*#__PURE__*/React.createElement("div", {
-        className: _sidebarStyle
-      }, /*#__PURE__*/React.createElement(renderprops_cjs.Transition, Object.assign({
-        items: isOpen
-      }, transitionProps), function (show) {
-        return show && function (styles) {
-          return /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
-            style: styles,
-            className: closeStyle,
-            onClick: onClose
-          }, /*#__PURE__*/React.createElement("i", {
-            className: "pi pi-close"
-          }), /*#__PURE__*/React.createElement(Ink, null));
-        };
-      }), isOpen && /*#__PURE__*/React.createElement("div", {
-        style: {
-          overflowY: "scroll",
-          height: "100vh"
-        }
-      }, children)));
+      return /*#__PURE__*/React.createElement(MountTransition, Object.assign({
+        visible: isOpen
+      }, transitionProps), function (styles) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
+          style: {
+            opacity: styles.opacity
+          },
+          className: sidebarWrapperStyle,
+          onClick: onOutsideClick || closeOnOutsideClick ? _this2.onOutsideClick : undefined,
+          "data-testid": "shadowArea"
+        }), /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
+          className: _sidebarStyle,
+          style: styles
+        }, /*#__PURE__*/React.createElement("div", {
+          className: closeStyle,
+          onClick: onClose
+        }, /*#__PURE__*/React.createElement("i", {
+          className: "pi pi-close"
+        }), /*#__PURE__*/React.createElement(Ink, null)), /*#__PURE__*/React.createElement("div", {
+          style: {
+            overflowY: "scroll",
+            height: "100vh"
+          }
+        }, children)));
+      });
     }
   }]);
   return SideBar;