pebble-web 2.18.0-alpha.0 → 2.18.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 reactSpring = require('react-spring');
+var renderprops_cjs = require('react-spring/renderprops.cjs');
 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(_show, _index, state) {
-    return state === "leave" ? {
+  config: function config(_a, motion) {
+    return motion === "leave" ? {
       duration: 80
     } : {
       duration: 200
@@ -1057,13 +1057,12 @@ var animationConfig = {
 };
 
 var MountTransition = function MountTransition(props) {
-  return /*#__PURE__*/React.createElement(reactSpring.Transition
-  , Object.assign({
+  return /*#__PURE__*/React.createElement(renderprops_cjs.Transition, Object.assign({
     items: props.visible
-  }, animationConfig, props), function (styles, show, _ref, index) {
-    var phase = _ref.phase;
-    if (!show) return null;
-    return props.children(styles, phase, index);
+  }, animationConfig, props), function (show, state, index) {
+    return show && function (styles) {
+      return props.children(styles, state, index);
+    };
   });
 };
 
@@ -1135,7 +1134,7 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
       }), /*#__PURE__*/React.createElement(MountTransition, {
         visible: _isDropDownOpen
       }, function (transitionStyles) {
-        return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
+        return /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
           className: emotion.cx(dropDownStyle, dropDownClassName),
           style: _objectSpread$6({
             padding: padding
@@ -1149,13 +1148,11 @@ 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: transitionStyles.transform.to(function (t) {
-              return "".concat(style.transform || "", " ").concat(t || "");
-            }),
+            transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
             transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px"),
             padding: padding
           });
-          return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
+          return /*#__PURE__*/React.createElement("div", {
             className: emotion.cx(dropDownStyle, dropDownClassName),
             ref: ref,
             style: popperWrapperStyle,
@@ -1878,7 +1875,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(reactSpring.Transition, {
+      return /*#__PURE__*/React.createElement(renderprops_cjs.Transition, {
         native: true,
         items: this.state.show,
         key: position,
@@ -1893,15 +1890,17 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
           pointerEvents: "none"
         }, customStyles[position].transitions.leave),
         config: animationConfig.config
-      }, 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);
+      }, 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);
+        };
       });
     }
   }], [{
@@ -2016,16 +2015,15 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
       React.createElement(MountTransition, {
         visible: visible
       }, function (transitionStyles) {
-        return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
+        return /*#__PURE__*/React.createElement("div", {
           style: {
             opacity: transitionStyles.opacity
           },
           className: emotion.cx(modalContainer, backDropClassName)
-        }, /*#__PURE__*/React.createElement(reactSpring.animated.div, {
-          style: {
+        }, /*#__PURE__*/React.createElement("div", {
+          className: emotion.cx( /*#__PURE__*/emotion.css({
             transform: transitionStyles.transform
-          },
-          className: modalClassName
+          }, ";label:Modal;" + ( "" )), modalClassName)
         }, children));
       }), node);
     }
@@ -2883,12 +2881,10 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
               arrowProps = _ref2.arrowProps;
           var wrapperStyle = _objectSpread$i(_objectSpread$i(_objectSpread$i({}, style), transitionStyles), {}, {
             backgroundColor: popperBackgroundColor,
-            transform: transitionStyles.transform.to(function (t) {
-              return "".concat(style.transform || "", " ").concat(t || "");
-            }),
+            transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
             transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px")
           });
-          return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
+          return /*#__PURE__*/React.createElement("div", {
             className: emotion.cx(popperStyle, popperClassName),
             ref: ref,
             style: wrapperStyle,
@@ -3636,14 +3632,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(reactSpring.animated.div, {
+        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(reactSpring.animated.div, {
+        }), /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
           className: _sidebarStyle,
           style: styles
         }, /*#__PURE__*/React.createElement("div", {
@@ -4480,9 +4476,10 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
         onFocus: this.onFocus,
         value: value
       }, this.props), /*#__PURE__*/React.createElement(MountTransition, {
-        visible: showSuggestions
+        visible: showSuggestions,
+        native: true
       }, function (transitionStyles) {
-        return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
+        return /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
           style: transitionStyles,
           className: emotion.cx(optionsWrapper$1, dropdownClassName)
         }, /*#__PURE__*/React.createElement(OptionGroupRadio, {