pebble-web 2.18.0-alpha.0 → 2.19.0

package/dist/pebble-web.es.js

@@ -9,7 +9,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';
+import { Transition, animated } from 'react-spring/renderprops.cjs';
 import { Manager, Reference, Popper } from 'react-popper';
 import { Rifm } from 'rifm';
 import format from 'date-fns/format';
@@ -994,7 +994,7 @@ const animationConfig = {
     transform: "scale(0.95)",
     pointerEvents: "none"
   },
-  config: (_show, _index, state) => state === "leave" ? {
+  config: (_a, motion) => motion === "leave" ? {
     duration: 80
   } : {
     duration: 200
@@ -1002,15 +1002,9 @@ const animationConfig = {
 };
 
 const MountTransition = props => {
-  return /*#__PURE__*/createElement(Transition
-  , Object.assign({
+  return /*#__PURE__*/createElement(Transition, Object.assign({
     items: props.visible
-  }, animationConfig, props), (styles, show, {
-    phase
-  }, index) => {
-    if (!show) return null;
-    return props.children(styles, phase, index);
-  });
+  }, animationConfig, props), (show, state, index) => show && (styles => props.children(styles, state, index)));
 };
 
 class DropDown extends PureComponent {
@@ -1085,11 +1079,11 @@ class DropDown extends PureComponent {
       const popperWrapperStyle = { ...style,
         ...transitionStyles,
         backgroundColor: colors.white.base,
-        transform: transitionStyles.transform.to(t => `${style.transform || ""} ${t || ""}`),
+        transform: `${style.transform || ""} ${transitionStyles.transform || ""}`,
         transformOrigin: `${arrowProps.style.left || 0}px ${arrowProps.style.top || 0}px`,
         padding
       };
-      return /*#__PURE__*/createElement(animated.div, {
+      return /*#__PURE__*/createElement("div", {
         className: cx(dropDownStyle, dropDownClassName),
         ref: ref,
         style: popperWrapperStyle,
@@ -1759,7 +1753,7 @@ class Toast extends PureComponent {
         ...customStyles[position].transitions.leave
       },
       config: animationConfig.config
-    }, (styles, show) => show && /*#__PURE__*/createElement(animated.div, {
+    }, show => show && (styles => /*#__PURE__*/createElement(animated.div, {
       className: cx(toastWrapper, this.props.className),
       style: {
         backgroundColor: bColor,
@@ -1768,7 +1762,7 @@ class Toast extends PureComponent {
       }
     }, /*#__PURE__*/createElement("i", {
       className: iconClass
-    }), this.state.text));
+    }), this.state.text)));
   }
 }
 
@@ -1846,16 +1840,15 @@ class Modal extends PureComponent {
     /*#__PURE__*/
     createElement(MountTransition, {
       visible: visible
-    }, transitionStyles => /*#__PURE__*/createElement(animated.div, {
+    }, transitionStyles => /*#__PURE__*/createElement("div", {
       style: {
         opacity: transitionStyles.opacity
       },
       className: cx(modalContainer, backDropClassName)
-    }, /*#__PURE__*/createElement(animated.div, {
-      style: {
+    }, /*#__PURE__*/createElement("div", {
+      className: cx( /*#__PURE__*/css({
         transform: transitionStyles.transform
-      },
-      className: modalClassName
+      }, ";label:Modal;" + ( "" )), modalClassName)
     }, children))), node);
   }
 }
@@ -2645,10 +2638,10 @@ class PebblePopper extends PureComponent {
       const wrapperStyle = { ...style,
         ...transitionStyles,
         backgroundColor: popperBackgroundColor,
-        transform: transitionStyles.transform.to(t => `${style.transform || ""} ${t || ""}`),
+        transform: `${style.transform || ""} ${transitionStyles.transform || ""}`,
         transformOrigin: `${arrowProps.style.left || 0}px ${arrowProps.style.top || 0}px`
       };
-      return /*#__PURE__*/createElement(animated.div, {
+      return /*#__PURE__*/createElement("div", {
         className: cx(popperStyle, popperClassName),
         ref: ref,
         style: wrapperStyle,
@@ -4123,7 +4116,8 @@ class TypeAhead extends PureComponent {
       onFocus: this.onFocus,
       value
     }, this.props), /*#__PURE__*/createElement(MountTransition, {
-      visible: showSuggestions
+      visible: showSuggestions,
+      native: true
     }, transitionStyles => /*#__PURE__*/createElement(animated.div, {
       style: transitionStyles,
       className: cx(optionsWrapper$1, dropdownClassName)