pebble-web 2.19.0 → 3.0.0-alpha.0

package/dist/pebble-web.js

@@ -23,7 +23,7 @@ var addDays = _interopDefault(require('date-fns/addDays'));
 var startOfDay = _interopDefault(require('date-fns/startOfDay'));
 var endOfDay = _interopDefault(require('date-fns/endOfDay'));
 var isSameDay = _interopDefault(require('date-fns/isSameDay'));
-var renderprops_cjs = require('react-spring/renderprops.cjs');
+var reactSpring = require('react-spring');
 var reactPopper = require('react-popper');
 var rifm = require('rifm');
 var format = _interopDefault(require('date-fns/format'));
@@ -1047,8 +1047,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
@@ -1057,12 +1057,13 @@ var animationConfig = {
 };
 
 var MountTransition = function MountTransition(props) {
-  return /*#__PURE__*/React.createElement(renderprops_cjs.Transition, Object.assign({
+  return /*#__PURE__*/React.createElement(reactSpring.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);
   });
 };
 
@@ -1134,7 +1135,7 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
       }), /*#__PURE__*/React.createElement(MountTransition, {
         visible: _isDropDownOpen
       }, function (transitionStyles) {
-        return /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
+        return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
           className: emotion.cx(dropDownStyle, dropDownClassName),
           style: _objectSpread$6({
             padding: padding
@@ -1148,11 +1149,13 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
               arrowProps = _ref2.arrowProps;
           var popperWrapperStyle = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, style), transitionStyles), {}, {
             backgroundColor: pebbleShared.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__*/React.createElement("div", {
+          return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
             className: emotion.cx(dropDownStyle, dropDownClassName),
             ref: ref,
             style: popperWrapperStyle,
@@ -1875,7 +1878,7 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
         "pi-close-circle-filled": this.state.type === "error"
       });
       var position = this.state.position || this.props.defaultPosition || "BOTTOM";
-      return /*#__PURE__*/React.createElement(renderprops_cjs.Transition, {
+      return /*#__PURE__*/React.createElement(reactSpring.Transition, {
         native: true,
         items: this.state.show,
         key: position,
@@ -1890,17 +1893,15 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
           pointerEvents: "none"
         }, customStyles[position].transitions.leave),
         config: animationConfig.config
-      }, function (show) {
-        return show && function (styles) {
-          return /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
-            className: emotion.cx(toastWrapper, _this2.props.className),
-            style: _objectSpread$b(_objectSpread$b({
-              backgroundColor: bColor
-            }, styles), customStyles[position].style)
-          }, /*#__PURE__*/React.createElement("i", {
-            className: iconClass
-          }), _this2.state.text);
-        };
+      }, function (styles, show) {
+        return show && /*#__PURE__*/React.createElement(reactSpring.animated.div, {
+          className: emotion.cx(toastWrapper, _this2.props.className),
+          style: _objectSpread$b(_objectSpread$b({
+            backgroundColor: bColor
+          }, styles), customStyles[position].style)
+        }, /*#__PURE__*/React.createElement("i", {
+          className: iconClass
+        }), _this2.state.text);
       });
     }
   }], [{
@@ -2015,15 +2016,16 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
       React.createElement(MountTransition, {
         visible: visible
       }, function (transitionStyles) {
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
           style: {
             opacity: transitionStyles.opacity
           },
           className: emotion.cx(modalContainer, backDropClassName)
-        }, /*#__PURE__*/React.createElement("div", {
-          className: emotion.cx( /*#__PURE__*/emotion.css({
+        }, /*#__PURE__*/React.createElement(reactSpring.animated.div, {
+          style: {
             transform: transitionStyles.transform
-          }, ";label:Modal;" + ( "" )), modalClassName)
+          },
+          className: modalClassName
         }, children));
       }), node);
     }
@@ -2881,10 +2883,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__*/React.createElement("div", {
+          return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
             className: emotion.cx(popperStyle, popperClassName),
             ref: ref,
             style: wrapperStyle,
@@ -3632,14 +3636,14 @@ var SideBar = /*#__PURE__*/function (_React$PureComponent) {
       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, {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(reactSpring.animated.div, {
           style: {
             opacity: styles.opacity
           },
           className: sidebarWrapperStyle,
           onClick: onOutsideClick || closeOnOutsideClick ? _this2.onOutsideClick : undefined,
           "data-testid": "shadowArea"
-        }), /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
+        }), /*#__PURE__*/React.createElement(reactSpring.animated.div, {
           className: _sidebarStyle,
           style: styles
         }, /*#__PURE__*/React.createElement("div", {
@@ -4476,10 +4480,9 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
         onFocus: this.onFocus,
         value: value
       }, this.props), /*#__PURE__*/React.createElement(MountTransition, {
-        visible: showSuggestions,
-        native: true
+        visible: showSuggestions
       }, function (transitionStyles) {
-        return /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
+        return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
           style: transitionStyles,
           className: emotion.cx(optionsWrapper$1, dropdownClassName)
         }, /*#__PURE__*/React.createElement(OptionGroupRadio, {