pebble-web 2.23.0 → 2.24.0-alpha.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/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';
@@ -994,7 +994,7 @@ const animationConfig = {
     transform: "scale(0.95)",
     pointerEvents: "none"
   },
-  config: (_a, motion) => motion === "leave" ? {
+  config: (_show, _index, state) => state === "leave" ? {
     duration: 80
   } : {
     duration: 200
@@ -1004,7 +1004,12 @@ const animationConfig = {
 const MountTransition = props => {
   return /*#__PURE__*/createElement(Transition, Object.assign({
     items: props.visible
-  }, animationConfig, props), (show, state, index) => show && (styles => props.children(styles, state, index)));
+  }, animationConfig, props), (styles, show, {
+    phase
+  }, index) => {
+    if (!show) return null;
+    return props.children(styles, phase, index);
+  });
 };
 
 class DropDown extends PureComponent {
@@ -1079,11 +1084,11 @@ class DropDown extends PureComponent {
       const popperWrapperStyle = { ...style,
         ...transitionStyles,
         backgroundColor: colors.white.base,
-        transform: `${style.transform || ""} ${transitionStyles.transform || ""}`,
+        transform: transitionStyles.transform.to(t => `${style.transform || ""} ${t || ""}`),
         transformOrigin: `${arrowProps.style.left || 0}px ${arrowProps.style.top || 0}px`,
         padding
       };
-      return /*#__PURE__*/createElement("div", {
+      return /*#__PURE__*/createElement(animated.div, {
         className: cx(dropDownStyle, dropDownClassName),
         ref: ref,
         style: popperWrapperStyle,
@@ -1753,7 +1758,7 @@ class Toast extends PureComponent {
         ...customStyles[position].transitions.leave
       },
       config: animationConfig.config
-    }, show => show && (styles => /*#__PURE__*/createElement(animated.div, {
+    }, (styles, show) => show && /*#__PURE__*/createElement(animated.div, {
       className: cx(toastWrapper, this.props.className),
       style: {
         backgroundColor: bColor,
@@ -1762,7 +1767,7 @@ class Toast extends PureComponent {
       }
     }, /*#__PURE__*/createElement("i", {
       className: iconClass
-    }), this.state.text)));
+    }), this.state.text));
   }
 }
 
@@ -1840,15 +1845,16 @@ class Modal extends PureComponent {
     /*#__PURE__*/
     createElement(MountTransition, {
       visible: visible
-    }, transitionStyles => /*#__PURE__*/createElement("div", {
+    }, transitionStyles => /*#__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);
   }
 }
@@ -2638,10 +2644,10 @@ class PebblePopper extends PureComponent {
       const wrapperStyle = { ...style,
         ...transitionStyles,
         backgroundColor: popperBackgroundColor,
-        transform: `${style.transform || ""} ${transitionStyles.transform || ""}`,
+        transform: transitionStyles.transform.to(t => `${style.transform || ""} ${t || ""}`),
         transformOrigin: `${arrowProps.style.left || 0}px ${arrowProps.style.top || 0}px`
       };
-      return /*#__PURE__*/createElement("div", {
+      return /*#__PURE__*/createElement(animated.div, {
         className: cx(popperStyle, popperClassName),
         ref: ref,
         style: wrapperStyle,
@@ -4116,8 +4122,7 @@ class TypeAhead extends PureComponent {
       onFocus: this.onFocus,
       value
     }, this.props), /*#__PURE__*/createElement(MountTransition, {
-      visible: showSuggestions,
-      native: true
+      visible: showSuggestions
     }, transitionStyles => /*#__PURE__*/createElement(animated.div, {
       style: transitionStyles,
       className: cx(optionsWrapper$1, dropdownClassName)