pebble-web 2.26.1 → 3.0.0-alpha.1

package/dist/components/shared/MountTransition.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { State, TransitionProps } from "react-spring/renderprops.cjs";
-import { Omit } from "utility-types";
-interface MountTransitionProps extends Omit<Omit<TransitionProps<boolean>, "items">, "children"> {
+import { UseTransitionProps, SpringValues } from "react-spring";
+import { TransitionPhase, AnimationStyle } from "../../utils/animation";
+interface MountTransitionProps extends UseTransitionProps<boolean> {
     visible: boolean;
-    children: (params: React.CSSProperties, state: State, index: number) => React.ReactNode;
+    children: (params: SpringValues<AnimationStyle>, state: TransitionPhase, index: number) => React.ReactNode;
 }
 declare const MountTransition: React.FunctionComponent<MountTransitionProps>;
 export default MountTransition;

package/dist/pebble-web.dev.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'));
@@ -1157,8 +1157,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
@@ -1167,12 +1167,12 @@ 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);
   });
 };
 
@@ -1246,7 +1246,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$7({
             padding: padding
@@ -1260,11 +1260,13 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
               arrowProps = _ref2.arrowProps;
           var popperWrapperStyle = _objectSpread$7(_objectSpread$7(_objectSpread$7({}, 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,
@@ -2042,7 +2044,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,
@@ -2057,17 +2059,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, _this4.props.className),
-            style: _objectSpread$c(_objectSpread$c({
-              backgroundColor: bColor
-            }, styles), customStyles[position].style)
-          }, /*#__PURE__*/React.createElement("i", {
-            className: iconClass
-          }), _this4.state.text);
-        };
+      }, function (styles, show) {
+        return show && /*#__PURE__*/React.createElement(reactSpring.animated.div, {
+          className: emotion.cx(toastWrapper, _this4.props.className),
+          style: _objectSpread$c(_objectSpread$c({
+            backgroundColor: bColor
+          }, styles), customStyles[position].style)
+        }, /*#__PURE__*/React.createElement("i", {
+          className: iconClass
+        }), _this4.state.text);
       });
     }
   }], [{
@@ -2187,15 +2187,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-Modal;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1vZGFsLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQytCIiwiZmlsZSI6Ik1vZGFsLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgbW9kYWxDb250YWluZXIgfSBmcm9tIFwiLi9zdHlsZXMvTW9kYWwuc3R5bGVzXCI7XG5pbXBvcnQgeyBjeCwgY3NzIH0gZnJvbSBcImVtb3Rpb25cIjtcbmltcG9ydCBpc0Jyb3dzZXIgZnJvbSBcImlzLWluLWJyb3dzZXJcIjtcbmltcG9ydCAqIGFzIFJlYWN0RE9NIGZyb20gXCJyZWFjdC1kb21cIjtcbmltcG9ydCBNb3VudFRyYW5zaXRpb24gZnJvbSBcIi4vc2hhcmVkL01vdW50VHJhbnNpdGlvblwiO1xuY2xhc3MgTW9kYWwgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoLi4uYXJndW1lbnRzKTtcbiAgICAgICAgdGhpcy5ub2RlID0gaXNCcm93c2VyID8gZG9jdW1lbnQuY3JlYXRlRWxlbWVudChcImRpdlwiKSA6IG51bGw7XG4gICAgfVxuICAgIGNvbXBvbmVudERpZE1vdW50KCkge1xuICAgICAgICBpZiAodGhpcy5ub2RlKSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRoaXMubm9kZSk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgY29tcG9uZW50V2lsbFVubW91bnQoKSB7XG4gICAgICAgIGlmICh0aGlzLm5vZGUpIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkucmVtb3ZlQ2hpbGQodGhpcy5ub2RlKTtcbiAgICAgICAgfVxuICAgIH1cbiAgICBjb21wb25lbnREaWRVcGRhdGUocHJldlByb3BzKSB7XG4gICAgICAgIGlmIChwcmV2UHJvcHMudmlzaWJsZSA9PT0gdGhpcy5wcm9wcy52aXNpYmxlKVxuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICBpZiAodGhpcy5wcm9wcy52aXNpYmxlKSB7XG4gICAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZShcImJvZHlcIilbMF0uc3R5bGUub3ZlcmZsb3cgPSBcImhpZGRlblwiO1xuICAgICAgICB9XG4gICAgICAgIGVsc2Uge1xuICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoXCJib2R5XCIpWzBdLnN0eWxlLm92ZXJmbG93ID0gXCJcIjtcbiAgICAgICAgfVxuICAgIH1cbiAgICByZW5kZXIoKSB7XG4gICAgICAgIGlmICghaXNCcm93c2VyKVxuICAgICAgICAgICAgcmV0dXJuIG51bGw7XG4gICAgICAgIGNvbnN0IHsgY2hpbGRyZW4sIHZpc2libGUsIGJhY2tEcm9wQ2xhc3NOYW1lLCBtb2RhbENsYXNzTmFtZSB9ID0gdGhpcy5wcm9wcztcbiAgICAgICAgY29uc3Qgbm9kZSA9IHRoaXMubm9kZTtcbiAgICAgICAgcmV0dXJuIFJlYWN0RE9NLmNyZWF0ZVBvcnRhbChcbiAgICAgICAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmpzeC13cmFwLW11bHRpbGluZVxuICAgICAgICA8TW91bnRUcmFuc2l0aW9uIHZpc2libGU9e3Zpc2libGV9PlxuICAgICAgICB7dHJhbnNpdGlvblN0eWxlcyA9PiAoPGRpdiBzdHlsZT17e1xuICAgICAgICAgICAgb3BhY2l0eTogdHJhbnNpdGlvblN0eWxlcy5vcGFjaXR5XG4gICAgICAgIH19IGNsYXNzTmFtZT17Y3gobW9kYWxDb250YWluZXIsIGJhY2tEcm9wQ2xhc3NOYW1lKX0+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y3goY3NzKHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogdHJhbnNpdGlvblN0eWxlcy50cmFuc2Zvcm1cbiAgICAgICAgfSksIG1vZGFsQ2xhc3NOYW1lKX0+XG4gICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2Pil9XG4gICAgICA8L01vdW50VHJhbnNpdGlvbj4sIG5vZGUpO1xuICAgIH1cbn1cbmV4cG9ydCBkZWZhdWx0IE1vZGFsO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9TW9kYWwuanN4Lm1hcCJdfQ== */")), modalClassName)
+          },
+          className: modalClassName
         }, children));
       }), node);
     }
@@ -3107,10 +3108,12 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
               arrowProps = _ref2.arrowProps;
           var wrapperStyle = _objectSpread$j(_objectSpread$j(_objectSpread$j({}, 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,
@@ -3890,18 +3893,18 @@ var SideBar = /*#__PURE__*/function (_React$PureComponent) {
           closeOnOutsideClick = _this$props2.closeOnOutsideClick;
       var _sidebarStyle = emotion.cx(sidebarStyle, /*#__PURE__*/emotion.css({
         width: width
-      }, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpZGViYXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDK0MiLCJmaWxlIjoiU2lkZWJhci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNsb3NlU3R5bGUsIHNpZGViYXJTdHlsZSwgc2lkZWJhcldyYXBwZXJTdHlsZSB9IGZyb20gXCIuL3N0eWxlcy9TaWRlYmFyLnN0eWxlc1wiO1xuaW1wb3J0IHsgYW5pbWF0ZWQgfSBmcm9tIFwicmVhY3Qtc3ByaW5nL3JlbmRlcnByb3BzLmNqc1wiO1xuaW1wb3J0IEluayBmcm9tIFwicmVhY3QtaW5rXCI7XG5pbXBvcnQgeyBjc3MsIGN4IH0gZnJvbSBcImVtb3Rpb25cIjtcbmltcG9ydCB7IGRpc2FibGVTY3JvbGxZIH0gZnJvbSBcIi4uL3RoZW1lL3N0eWxlc1wiO1xuaW1wb3J0IE1vdW50VHJhbnNpdGlvbiBmcm9tIFwiLi9zaGFyZWQvTW91bnRUcmFuc2l0aW9uXCI7XG5jb25zdCB0cmFuc2l0aW9uUHJvcHMgPSB7XG4gICAgZnJvbTogeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWCgxMDAlKVwiIH0sXG4gICAgZW50ZXI6IHsgb3BhY2l0eTogMSwgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVgoMClcIiB9LFxuICAgIGxlYXZlOiB7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDEwMCUpXCIsIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiIH1cbn07XG5jbGFzcyBTaWRlQmFyIGV4dGVuZHMgUmVhY3QuUHVyZUNvbXBvbmVudCB7XG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgICAgIHN1cGVyKC4uLmFyZ3VtZW50cyk7XG4gICAgICAgIHRoaXMub25PdXRzaWRlQ2xpY2sgPSAoKSA9PiB7XG4gICAgICAgICAgICBjb25zdCB7IG9uT3V0c2lkZUNsaWNrLCBjbG9zZU9uT3V0c2lkZUNsaWNrLCBvbkNsb3NlIH0gPSB0aGlzLnByb3BzO1xuICAgICAgICAgICAgaWYgKGNsb3NlT25PdXRzaWRlQ2xpY2spIHtcbiAgICAgICAgICAgICAgICBvbkNsb3NlKCk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBpZiAob25PdXRzaWRlQ2xpY2spXG4gICAgICAgICAgICAgICAgb25PdXRzaWRlQ2xpY2soKTtcbiAgICAgICAgfTtcbiAgICB9XG4gICAgY29tcG9uZW50RGlkTW91bnQoKSB7XG4gICAgICAgIGlmICh0aGlzLnByb3BzLmlzT3BlbilcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZChkaXNhYmxlU2Nyb2xsWSk7XG4gICAgfVxuICAgIGNvbXBvbmVudERpZFVwZGF0ZSgpIHtcbiAgICAgICAgaWYgKHRoaXMucHJvcHMuaXNPcGVuKSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5hZGQoZGlzYWJsZVNjcm9sbFkpO1xuICAgICAgICB9XG4gICAgICAgIGVsc2Uge1xuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QucmVtb3ZlKGRpc2FibGVTY3JvbGxZKTtcbiAgICAgICAgfVxuICAgIH1cbiAgICBjb21wb25lbnRXaWxsVW5tb3VudCgpIHtcbiAgICAgICAgaWYgKHRoaXMucHJvcHMuaXNPcGVuKSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUoZGlzYWJsZVNjcm9sbFkpO1xuICAgICAgICB9XG4gICAgfVxuICAgIHJlbmRlcigpIHtcbiAgICAgICAgY29uc3QgeyB3aWR0aCwgaXNPcGVuLCBjaGlsZHJlbiwgb25DbG9zZSwgb25PdXRzaWRlQ2xpY2ssIGNsb3NlT25PdXRzaWRlQ2xpY2sgfSA9IHRoaXMucHJvcHM7XG4gICAgICAgIGNvbnN0IF9zaWRlYmFyU3R5bGUgPSBjeChzaWRlYmFyU3R5bGUsIGNzcyh7IHdpZHRoIH0pKTtcbiAgICAgICAgcmV0dXJuICg8TW91bnRUcmFuc2l0aW9uIHZpc2libGU9e2lzT3Blbn0gey4uLnRyYW5zaXRpb25Qcm9wc30+XG4gICAgICAgIHtzdHlsZXMgPT4gKDw+XG4gICAgICAgICAgICA8YW5pbWF0ZWQuZGl2IHN0eWxlPXt7IG9wYWNpdHk6IHN0eWxlcy5vcGFjaXR5IH19IGNsYXNzTmFtZT17c2lkZWJhcldyYXBwZXJTdHlsZX0gb25DbGljaz17b25PdXRzaWRlQ2xpY2sgfHwgY2xvc2VPbk91dHNpZGVDbGlja1xuICAgICAgICAgICAgPyB0aGlzLm9uT3V0c2lkZUNsaWNrXG4gICAgICAgICAgICA6IHVuZGVmaW5lZH0gZGF0YS10ZXN0aWQ9XCJzaGFkb3dBcmVhXCIvPlxuXG4gICAgICAgICAgICA8YW5pbWF0ZWQuZGl2IGNsYXNzTmFtZT17X3NpZGViYXJTdHlsZX0gc3R5bGU9e3N0eWxlc30+XG4gICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtjbG9zZVN0eWxlfSBvbkNsaWNrPXtvbkNsb3NlfT5cbiAgICAgICAgICAgICAgICA8aSBjbGFzc05hbWU9XCJwaSBwaS1jbG9zZVwiLz5cbiAgICAgICAgICAgICAgICA8SW5rIC8+XG4gICAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICAgIDxkaXYgc3R5bGU9e3sgb3ZlcmZsb3dZOiBcImF1dG9cIiwgaGVpZ2h0OiBcIjEwMCVcIiB9fT5cbiAgICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9hbmltYXRlZC5kaXY+XG4gICAgICAgICAgPC8+KX1cbiAgICAgIDwvTW91bnRUcmFuc2l0aW9uPik7XG4gICAgfVxufVxuU2lkZUJhci5kZWZhdWx0UHJvcHMgPSB7XG4gICAgY2xvc2VPbk91dHNpZGVDbGljazogdHJ1ZVxufTtcbmV4cG9ydCBkZWZhdWx0IFNpZGVCYXI7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1TaWRlYmFyLmpzeC5tYXAiXX0= */")));
+      }, ";label:Sidebar-SideBar;" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpZGViYXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDK0MiLCJmaWxlIjoiU2lkZWJhci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNsb3NlU3R5bGUsIHNpZGViYXJTdHlsZSwgc2lkZWJhcldyYXBwZXJTdHlsZSB9IGZyb20gXCIuL3N0eWxlcy9TaWRlYmFyLnN0eWxlc1wiO1xuaW1wb3J0IHsgYW5pbWF0ZWQgfSBmcm9tIFwicmVhY3Qtc3ByaW5nXCI7XG5pbXBvcnQgSW5rIGZyb20gXCJyZWFjdC1pbmtcIjtcbmltcG9ydCB7IGNzcywgY3ggfSBmcm9tIFwiZW1vdGlvblwiO1xuaW1wb3J0IHsgZGlzYWJsZVNjcm9sbFkgfSBmcm9tIFwiLi4vdGhlbWUvc3R5bGVzXCI7XG5pbXBvcnQgTW91bnRUcmFuc2l0aW9uIGZyb20gXCIuL3NoYXJlZC9Nb3VudFRyYW5zaXRpb25cIjtcbmNvbnN0IHRyYW5zaXRpb25Qcm9wcyA9IHtcbiAgICBmcm9tOiB7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDEwMCUpXCIgfSxcbiAgICBlbnRlcjogeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWCgwKVwiIH0sXG4gICAgbGVhdmU6IHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZVgoMTAwJSlcIiwgcG9pbnRlckV2ZW50czogXCJub25lXCIgfVxufTtcbmNsYXNzIFNpZGVCYXIgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50IHtcbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgc3VwZXIoLi4uYXJndW1lbnRzKTtcbiAgICAgICAgdGhpcy5vbk91dHNpZGVDbGljayA9ICgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IHsgb25PdXRzaWRlQ2xpY2ssIGNsb3NlT25PdXRzaWRlQ2xpY2ssIG9uQ2xvc2UgfSA9IHRoaXMucHJvcHM7XG4gICAgICAgICAgICBpZiAoY2xvc2VPbk91dHNpZGVDbGljaykge1xuICAgICAgICAgICAgICAgIG9uQ2xvc2UoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGlmIChvbk91dHNpZGVDbGljaylcbiAgICAgICAgICAgICAgICBvbk91dHNpZGVDbGljaygpO1xuICAgICAgICB9O1xuICAgIH1cbiAgICBjb21wb25lbnREaWRNb3VudCgpIHtcbiAgICAgICAgaWYgKHRoaXMucHJvcHMuaXNPcGVuKVxuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QuYWRkKGRpc2FibGVTY3JvbGxZKTtcbiAgICB9XG4gICAgY29tcG9uZW50RGlkVXBkYXRlKCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZChkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUoZGlzYWJsZVNjcm9sbFkpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuICAgICAgICBpZiAodGhpcy5wcm9wcy5pc09wZW4pIHtcbiAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnJlbW92ZShkaXNhYmxlU2Nyb2xsWSk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgcmVuZGVyKCkge1xuICAgICAgICBjb25zdCB7IHdpZHRoLCBpc09wZW4sIGNoaWxkcmVuLCBvbkNsb3NlLCBvbk91dHNpZGVDbGljaywgY2xvc2VPbk91dHNpZGVDbGljayB9ID0gdGhpcy5wcm9wcztcbiAgICAgICAgY29uc3QgX3NpZGViYXJTdHlsZSA9IGN4KHNpZGViYXJTdHlsZSwgY3NzKHsgd2lkdGggfSkpO1xuICAgICAgICByZXR1cm4gKDxNb3VudFRyYW5zaXRpb24gdmlzaWJsZT17aXNPcGVufSB7Li4udHJhbnNpdGlvblByb3BzfT5cbiAgICAgICAge3N0eWxlcyA9PiAoPD5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgc3R5bGU9e3sgb3BhY2l0eTogc3R5bGVzLm9wYWNpdHkgfX0gY2xhc3NOYW1lPXtzaWRlYmFyV3JhcHBlclN0eWxlfSBvbkNsaWNrPXtvbk91dHNpZGVDbGljayB8fCBjbG9zZU9uT3V0c2lkZUNsaWNrXG4gICAgICAgICAgICA/IHRoaXMub25PdXRzaWRlQ2xpY2tcbiAgICAgICAgICAgIDogdW5kZWZpbmVkfSBkYXRhLXRlc3RpZD1cInNoYWRvd0FyZWFcIi8+XG5cbiAgICAgICAgICAgIDxhbmltYXRlZC5kaXYgY2xhc3NOYW1lPXtfc2lkZWJhclN0eWxlfSBzdHlsZT17c3R5bGVzfT5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Nsb3NlU3R5bGV9IG9uQ2xpY2s9e29uQ2xvc2V9PlxuICAgICAgICAgICAgICAgIDxpIGNsYXNzTmFtZT1cInBpIHBpLWNsb3NlXCIvPlxuICAgICAgICAgICAgICAgIDxJbmsgLz5cbiAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgPGRpdiBzdHlsZT17eyBvdmVyZmxvd1k6IFwiYXV0b1wiLCBoZWlnaHQ6IFwiMTAwJVwiIH19PlxuICAgICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2FuaW1hdGVkLmRpdj5cbiAgICAgICAgICA8Lz4pfVxuICAgICAgPC9Nb3VudFRyYW5zaXRpb24+KTtcbiAgICB9XG59XG5TaWRlQmFyLmRlZmF1bHRQcm9wcyA9IHtcbiAgICBjbG9zZU9uT3V0c2lkZUNsaWNrOiB0cnVlXG59O1xuZXhwb3J0IGRlZmF1bHQgU2lkZUJhcjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVNpZGViYXIuanN4Lm1hcCJdfQ== */")));
       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", {
@@ -4784,10 +4787,9 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
       }, _objectSpread$v(_objectSpread$v({}, this.props), {}, {
         testId: testIds.searchBoxId
       })), /*#__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, {