upgrade react-spring

.storybook/webpack.config.js

@@ -38,6 +38,13 @@ module.exports = ({ config, mode }) => {
     enforce: "pre"
   });
 
+  // transpile @react-spring/* packages
+  config.module.rules.push({
+    test: /\.js$/,
+    include: /node_modules\/@react-spring/,
+    use: ["babel-loader"]
+  });
+
   config.plugins.unshift(
     new ForkTsCheckerWebpackPlugin({
       typescript: {

package.json

@@ -100,7 +100,7 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.1.1",
     "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-filesize": "^9.0.2",
+    "rollup-plugin-filesize": "^9.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.6.2",
     "rollup-plugin-terser": "^6.1.0",

packages/pebble-shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-shared",
-  "version": "2.17.0",
+  "version": "2.18.0-alpha.0",
   "license": "MIT",
   "main": "dist/pebble-shared.js",
   "files": [

packages/pebble-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.17.0",
+  "version": "2.18.0-alpha.0",
   "author": "ritz078 <[email protected]>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -37,14 +37,14 @@
     "react-calendar": "^2.19.2",
     "react-ink": "^6.4.0",
     "react-popper": "^1.3.6",
-    "react-spring": "^8.0.27",
+    "react-spring": "^9.7.4",
     "rheostat": "2.2.0",
     "rifm": "^0.12.0",
     "scroll-into-view-if-needed": "^2.2.25",
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "pebble-shared": "^2.17.0"
+    "pebble-shared": "^2.18.0-alpha.0"
   },
   "greenkeeper": {
     "ignore": [

packages/pebble-web/src/components/DropDown.tsx

@@ -4,7 +4,7 @@ import { DropDownButton } from "./Button";
 import { dropDownStyle, wrapperStyle } from "./styles/Dropdown.styles";
 import { cx } from "emotion";
 import OutsideClick from "./OutsideClick";
-import { animated } from "react-spring/renderprops.cjs";
+import { animated } from "react-spring";
 import MountTransition from "./shared/MountTransition";
 import { Manager, Reference, Popper } from "react-popper";
 import { colors } from "pebble-shared";
@@ -103,17 +103,17 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                       ...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 (
-                      <div
+                      <animated.div
                         className={cx(dropDownStyle, dropDownClassName)}
                         ref={ref}
                         style={popperWrapperStyle}
@@ -123,7 +123,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                           toggle: this.toggleDropdown,
                           isOpen: _isDropDownOpen
                         })}
-                      </div>
+                      </animated.div>
                     );
                   }}
                 </Popper>

packages/pebble-web/src/components/Modal.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { ModalProps } from "./typings/Modal";
 import { modalContainer } from "./styles/Modal.styles";
-import { cx, css } from "emotion";
+import { cx } from "emotion";
 import isBrowser from "is-in-browser";
 import * as ReactDOM from "react-dom";
 import MountTransition from "./shared/MountTransition";
+import { animated } from "react-spring";
 
 class Modal extends React.PureComponent<ModalProps> {
   private node = isBrowser ? document.createElement("div") : null;
@@ -41,23 +42,21 @@ class Modal extends React.PureComponent<ModalProps> {
       // tslint:disable-next-line:jsx-wrap-multiline
       <MountTransition visible={visible}>
         {transitionStyles => (
-          <div
+          <animated.div
             style={{
               opacity: transitionStyles.opacity
             }}
             className={cx(modalContainer, backDropClassName)}
           >
-            <div
-              className={cx(
-                css({
-                  transform: transitionStyles.transform
-                }),
-                modalClassName
-              )}
+            <animated.div
+              style={{
+                transform: transitionStyles.transform
+              }}
+              className={modalClassName}
             >
               {children}
-            </div>
-          </div>
+            </animated.div>
+          </animated.div>
         )}
       </MountTransition>,
       node as NonNullable<typeof node>

packages/pebble-web/src/components/Popper.tsx

@@ -6,6 +6,7 @@ import { colors } from "pebble-shared";
 import { cx } from "emotion";
 import OutsideClick from "./OutsideClick";
 import MountTransition from "./shared/MountTransition";
+import { animated } from "react-spring";
 
 export default class PebblePopper extends React.PureComponent<
   PopperProps,
@@ -71,16 +72,16 @@ export default class PebblePopper extends React.PureComponent<
                     ...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 (
-                    <div
+                    <animated.div
                       className={cx(popperStyle, popperClassName)}
                       ref={ref}
                       style={wrapperStyle}
@@ -101,7 +102,7 @@ export default class PebblePopper extends React.PureComponent<
                       >
                         ▶
                       </div>
-                    </div>
+                    </animated.div>
                   );
                 }}
               </Popper>

packages/pebble-web/src/components/Sidebar.tsx

@@ -5,7 +5,7 @@ import {
   sidebarWrapperStyle
 } from "./styles/Sidebar.styles";
 import { SidebarProps } from "./typings/Sidebar";
-import { animated } from "react-spring/renderprops.cjs";
+import { animated } from "react-spring";
 import Ink from "react-ink";
 import { css, cx } from "emotion";
 import { disableScrollY } from "../theme/styles";

packages/pebble-web/src/components/Toast.tsx

@@ -7,7 +7,7 @@ import {
   ToastType,
   ToastPosition
 } from "./typings/Toast";
-import { Transition, animated } from "react-spring/renderprops.cjs";
+import { Transition, animated } from "react-spring";
 import { cx } from "emotion";
 import mitt from "mitt";
 import { animationConfig } from "../utils/animation";
@@ -188,9 +188,8 @@ class Toast extends React.PureComponent<ToastProps, ToastState> {
         }}
         config={animationConfig.config}
       >
-        {show =>
-          show &&
-          (styles => (
+        {(styles, show) =>
+          show && (
             <animated.div
               className={cx(toastWrapper, this.props.className)}
               style={{
@@ -202,7 +201,7 @@ class Toast extends React.PureComponent<ToastProps, ToastState> {
               <i className={iconClass} />
               {this.state.text}
             </animated.div>
-          ))
+          )
         }
       </Transition>
     );

packages/pebble-web/src/components/TypeAhead.tsx

@@ -10,7 +10,7 @@ import Input from "./Input";
 import { optionsWrapper, wrapper } from "./styles/TypeAhead.styles";
 import OutsideClick from "./OutsideClick";
 import OptionGroupRadio from "./OptionGroupRadio";
-import { animated } from "react-spring/renderprops.cjs";
+import { animated } from "react-spring";
 import MountTransition from "./shared/MountTransition";
 
 function defaultSearchBox<OptionType>(
@@ -121,7 +121,7 @@ export default class TypeAhead<OptionType> extends React.PureComponent<
           this.props
         )}
 
-        <MountTransition visible={showSuggestions} native>
+        <MountTransition visible={showSuggestions}>
           {transitionStyles => (
             <animated.div
               style={transitionStyles}

packages/pebble-web/src/components/__tests__/__snapshots__/popper.test.tsx.snap

@@ -142,7 +142,7 @@ exports[`Component: Popper snapshot 1`] = `
         "pointerEvents": "none",
         "position": "absolute",
         "top": 0,
-        "transform": " scale(0.95)",
+        "transform": "  scale(0.95)",
         "transformOrigin": "0px 0px",
       }
     }

packages/pebble-web/src/components/shared/MountTransition.tsx

@@ -1,29 +1,36 @@
 import * as React from "react";
+import { Transition, UseTransitionProps, SpringValues } from "react-spring";
 import {
-  State,
-  Transition,
-  TransitionProps
-} from "react-spring/renderprops.cjs";
-import { animationConfig } from "../../utils/animation";
-import { Omit } from "utility-types";
+  animationConfig,
+  TransitionPhase,
+  AnimationStyle
+} from "../../utils/animation";
 
-interface MountTransitionProps
-  extends Omit<Omit<TransitionProps<boolean>, "items">, "children"> {
+interface MountTransitionProps extends UseTransitionProps<boolean> {
   visible: boolean;
   children: (
-    params: React.CSSProperties,
-    state: State,
+    params: SpringValues<AnimationStyle>,
+    state: TransitionPhase,
     index: number
   ) => React.ReactNode;
 }
 
 const MountTransition: React.FunctionComponent<MountTransitionProps> = props => {
   return (
-    <Transition items={props.visible} {...animationConfig} {...props}>
-      {(show, state, index) =>
-        show &&
-        (styles => props.children(styles as React.CSSProperties, state, index))
-      }
+    <Transition
+      // @ts-expect-error
+      items={props.visible}
+      {...animationConfig}
+      {...props}
+    >
+      {(styles, show, { phase }, index) => {
+        if (!show) return null;
+        return props.children(
+          styles as SpringValues<AnimationStyle>,
+          phase,
+          index
+        );
+      }}
     </Transition>
   );
 };

packages/pebble-web/src/utils/animation.ts

@@ -1,9 +1,18 @@
-import { State } from "react-spring";
+import { TransitionState } from "react-spring";
+
+// TransitionPhase enum is not exported by react-spring package
+// so we alias it as a type here
+export type TransitionPhase = TransitionState["phase"];
 
 export const animationConfig = {
   from: { opacity: 0, transform: "scale(0.95)" },
   enter: { opacity: 1, transform: "scale(1)" },
   leave: { opacity: 0, transform: "scale(0.95)", pointerEvents: "none" },
-  config: (_a: boolean, motion: State) =>
-    motion === "leave" ? { duration: 80 } : { duration: 200 }
+  config: (_show: boolean, _index: number, state: TransitionPhase) =>
+    state === "leave" ? { duration: 80 } : { duration: 200 }
+};
+
+export type AnimationStyle = {
+  opacity: number;
+  transform: string;
 };