pebble-web 2.6.0 → 2.7.0

package/dist/pebble-web.umd.js

@@ -7128,7 +7128,7 @@
     },
     config: function config(_a, motion) {
       return motion === "leave" ? {
-        duration: 0.1
+        duration: 80
       } : {
         duration: 200
       };
@@ -13174,7 +13174,6 @@
     }
   }, ";label:closeStyle;" + ( "" ));
   var sidebarStyle = /*#__PURE__*/css({
-    transition: "transform 200ms ".concat(constants.animationCurve),
     backgroundColor: colors.white.base,
     position: "fixed",
     top: 0,
@@ -13193,13 +13192,17 @@
   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) {
@@ -13253,46 +13256,34 @@
             onClose = _this$props2.onClose,
             onOutsideClick = _this$props2.onOutsideClick,
             closeOnOutsideClick = _this$props2.closeOnOutsideClick;
-        var _sidebarOverride = /*#__PURE__*/css({
-          width: width,
-          transform: isOpen ? "translateX(0)" : "translateX(".concat(width, "px)")
-        }, ";label:SideBar;" + ( "" ));
-        var _sidebarStyle = cx(_sidebarOverride, sidebarStyle, /*#__PURE__*/css({
-          transform: isOpen ? "translateX(0)" : "translateX(100%)"
+        var _sidebarStyle = cx(sidebarStyle, /*#__PURE__*/css({
+          width: width
         }, ";label:SideBar;" + ( "" )));
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(renderprops_cjs_3, Object.assign({
-          items: isOpen
-        }, transitionProps, {
-          config: animationConfig.config
-        }), function (show) {
-          return show && function (styles) {
-            return /*#__PURE__*/React.createElement(renderprops_cjs_7.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_3, Object.assign({
-          items: isOpen
-        }, transitionProps), function (show) {
-          return show && function (styles) {
-            return /*#__PURE__*/React.createElement(renderprops_cjs_7.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_7.div, {
+            style: {
+              opacity: styles.opacity
+            },
+            className: sidebarWrapperStyle,
+            onClick: onOutsideClick || closeOnOutsideClick ? _this2.onOutsideClick : undefined,
+            "data-testid": "shadowArea"
+          }), /*#__PURE__*/React.createElement(renderprops_cjs_7.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;