pebble-web 2.18.0 → 3.0.0-alpha.0

package/dist/pebble-web.module.js

@@ -17,7 +17,7 @@ import addDays from 'date-fns/addDays';
 import startOfDay from 'date-fns/startOfDay';
 import endOfDay from 'date-fns/endOfDay';
 import isSameDay from 'date-fns/isSameDay';
-import { Transition, animated } from 'react-spring/renderprops.cjs';
+import { Transition, animated } from 'react-spring';
 import { Manager, Reference, Popper } from 'react-popper';
 import { Rifm } from 'rifm';
 import format from 'date-fns/format';
@@ -1041,8 +1041,8 @@ var animationConfig = {
     transform: "scale(0.95)",
     pointerEvents: "none"
   },
-  config: function config(_a, motion) {
-    return motion === "leave" ? {
+  config: function config(_show, _index, state) {
+    return state === "leave" ? {
       duration: 80
     } : {
       duration: 200
@@ -1051,12 +1051,13 @@ var animationConfig = {
 };
 
 var MountTransition = function MountTransition(props) {
-  return /*#__PURE__*/createElement(Transition, Object.assign({
+  return /*#__PURE__*/createElement(Transition
+  , Object.assign({
     items: props.visible
-  }, animationConfig, props), function (show, state, index) {
-    return show && function (styles) {
-      return props.children(styles, state, index);
-    };
+  }, animationConfig, props), function (styles, show, _ref, index) {
+    var phase = _ref.phase;
+    if (!show) return null;
+    return props.children(styles, phase, index);
   });
 };
 
@@ -1142,11 +1143,13 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
               arrowProps = _ref2.arrowProps;
           var popperWrapperStyle = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, style), transitionStyles), {}, {
             backgroundColor: colors.white.base,
-            transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
+            transform: transitionStyles.transform.to(function (t) {
+              return "".concat(style.transform || "", " ").concat(t || "");
+            }),
             transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px"),
             padding: padding
           });
-          return /*#__PURE__*/createElement("div", {
+          return /*#__PURE__*/createElement(animated.div, {
             className: cx(dropDownStyle, dropDownClassName),
             ref: ref,
             style: popperWrapperStyle,
@@ -1884,17 +1887,15 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
           pointerEvents: "none"
         }, customStyles[position].transitions.leave),
         config: animationConfig.config
-      }, function (show) {
-        return show && function (styles) {
-          return /*#__PURE__*/createElement(animated.div, {
-            className: cx(toastWrapper, _this2.props.className),
-            style: _objectSpread$b(_objectSpread$b({
-              backgroundColor: bColor
-            }, styles), customStyles[position].style)
-          }, /*#__PURE__*/createElement("i", {
-            className: iconClass
-          }), _this2.state.text);
-        };
+      }, function (styles, show) {
+        return show && /*#__PURE__*/createElement(animated.div, {
+          className: cx(toastWrapper, _this2.props.className),
+          style: _objectSpread$b(_objectSpread$b({
+            backgroundColor: bColor
+          }, styles), customStyles[position].style)
+        }, /*#__PURE__*/createElement("i", {
+          className: iconClass
+        }), _this2.state.text);
       });
     }
   }], [{
@@ -2009,15 +2010,16 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
       createElement(MountTransition, {
         visible: visible
       }, function (transitionStyles) {
-        return /*#__PURE__*/createElement("div", {
+        return /*#__PURE__*/createElement(animated.div, {
           style: {
             opacity: transitionStyles.opacity
           },
           className: cx(modalContainer, backDropClassName)
-        }, /*#__PURE__*/createElement("div", {
-          className: cx( /*#__PURE__*/css({
+        }, /*#__PURE__*/createElement(animated.div, {
+          style: {
             transform: transitionStyles.transform
-          }, ";label:Modal;" + ( "" )), modalClassName)
+          },
+          className: modalClassName
         }, children));
       }), node);
     }
@@ -2875,10 +2877,12 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
               arrowProps = _ref2.arrowProps;
           var wrapperStyle = _objectSpread$i(_objectSpread$i(_objectSpread$i({}, style), transitionStyles), {}, {
             backgroundColor: popperBackgroundColor,
-            transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
+            transform: transitionStyles.transform.to(function (t) {
+              return "".concat(style.transform || "", " ").concat(t || "");
+            }),
             transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px")
           });
-          return /*#__PURE__*/createElement("div", {
+          return /*#__PURE__*/createElement(animated.div, {
             className: cx(popperStyle, popperClassName),
             ref: ref,
             style: wrapperStyle,
@@ -4470,8 +4474,7 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
         onFocus: this.onFocus,
         value: value
       }, this.props), /*#__PURE__*/createElement(MountTransition, {
-        visible: showSuggestions,
-        native: true
+        visible: showSuggestions
       }, function (transitionStyles) {
         return /*#__PURE__*/createElement(animated.div, {
           style: transitionStyles,