pebble-web 2.6.0 → 2.7.1

package/dist/pebble-web.es.js

@@ -994,7 +994,7 @@ const animationConfig = {
     pointerEvents: "none"
   },
   config: (_a, motion) => motion === "leave" ? {
-    duration: 0.1
+    duration: 80
   } : {
     duration: 200
   }
@@ -2202,6 +2202,7 @@ const optionGroupCheckBoxWrap = /*#__PURE__*/css({
   position: "relative"
 }, ";label:optionGroupCheckBoxWrap;" + ( "" ));
 const optionGroupCheckBoxButtonWrap = /*#__PURE__*/css({ ...flexSpaceBetween,
+  gap: 60,
   padding: optionGroupCheckBoxButtonWrapPadding,
   paddingTop: optionGroupCheckBoxButtonWrapPaddingTop,
   backgroundColor: colors.white.base
@@ -3199,7 +3200,6 @@ const closeStyle = /*#__PURE__*/css({
   }
 }, ";label:closeStyle;" + ( "" ));
 const sidebarStyle = /*#__PURE__*/css({
-  transition: `transform 200ms ${constants.animationCurve}`,
   backgroundColor: colors.white.base,
   position: "fixed",
   top: 0,
@@ -3216,13 +3216,17 @@ const sidebarStyle = /*#__PURE__*/css({
 
 const 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"
   }
 };
 class SideBar extends PureComponent {
@@ -3264,38 +3268,32 @@ class SideBar extends PureComponent {
       onOutsideClick,
       closeOnOutsideClick
     } = this.props;
-    const _sidebarOverride = /*#__PURE__*/css({
-      width,
-      transform: isOpen ? `translateX(0)` : `translateX(${width}px)`
-    }, ";label:SideBar;" + ( "" ));
-    const _sidebarStyle = cx(_sidebarOverride, sidebarStyle, /*#__PURE__*/css({
-      transform: isOpen ? `translateX(0)` : `translateX(100%)`
+    const _sidebarStyle = cx(sidebarStyle, /*#__PURE__*/css({
+      width
     }, ";label:SideBar;" + ( "" )));
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Transition, Object.assign({
-      items: isOpen
-    }, transitionProps, {
-      config: animationConfig.config
-    }), show => show && (styles => /*#__PURE__*/createElement(animated.div, {
-      style: styles,
+    return /*#__PURE__*/createElement(MountTransition, Object.assign({
+      visible: isOpen
+    }, transitionProps), styles => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(animated.div, {
+      style: {
+        opacity: styles.opacity
+      },
       className: sidebarWrapperStyle,
       onClick: onOutsideClick || closeOnOutsideClick ? this.onOutsideClick : undefined,
       "data-testid": "shadowArea"
-    }))), /*#__PURE__*/createElement("div", {
-      className: _sidebarStyle
-    }, /*#__PURE__*/createElement(Transition, Object.assign({
-      items: isOpen
-    }, transitionProps), show => show && (styles => /*#__PURE__*/createElement(animated.div, {
-      style: styles,
+    }), /*#__PURE__*/createElement(animated.div, {
+      className: _sidebarStyle,
+      style: styles
+    }, /*#__PURE__*/createElement("div", {
       className: closeStyle,
       onClick: onClose
     }, /*#__PURE__*/createElement("i", {
       className: "pi pi-close"
-    }), /*#__PURE__*/createElement(Ink, null)))), isOpen && /*#__PURE__*/createElement("div", {
+    }), /*#__PURE__*/createElement(Ink, null)), /*#__PURE__*/createElement("div", {
       style: {
         overflowY: "scroll",
         height: "100vh"
       }
-    }, children)));
+    }, children))));
   }
 }
 SideBar.defaultProps = {