pebble-web 2.18.0-alpha.0 → 2.18.0

package/dist/utils/animation.d.ts

@@ -1,5 +1,4 @@
-import { TransitionState } from "react-spring";
-export declare type TransitionPhase = TransitionState["phase"];
+import { State } from "react-spring";
 export declare const animationConfig: {
     from: {
         opacity: number;
@@ -14,11 +13,7 @@ export declare const animationConfig: {
         transform: string;
         pointerEvents: string;
     };
-    config: (_show: boolean, _index: number, state: TransitionPhase) => {
+    config: (_a: boolean, motion: State) => {
         duration: number;
     };
 };
-export declare type AnimationStyle = {
-    opacity: number;
-    transform: string;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.18.0-alpha.0",
+  "version": "2.18.0",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -37,19 +37,19 @@
     "react-calendar": "^2.19.2",
     "react-ink": "^6.4.0",
     "react-popper": "^1.3.6",
-    "react-spring": "^9.7.4",
+    "react-spring": "^8.0.27",
     "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.18.0-alpha.0"
+    "pebble-shared": "^2.18.0"
   },
   "greenkeeper": {
     "ignore": [
       "rheostat"
     ]
   },
-  "gitHead": "eaa5929a264358381b79fbf6f045799fb5da1ee9"
+  "gitHead": "e2964db9563088aa2562132283f3973e01d447a3"
 }

package/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";
+import { animated } from "react-spring/renderprops.cjs";
 import MountTransition from "./shared/MountTransition";
 import { Manager, Reference, Popper } from "react-popper";
 import { colors } from "pebble-shared";
@@ -103,9 +103,9 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                       ...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`,
@@ -113,7 +113,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                     };
 
                     return (
-                      <animated.div
+                      <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
                         })}
-                      </animated.div>
+                      </div>
                     );
                   }}
                 </Popper>

package/src/components/Modal.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
 import { ModalProps } from "./typings/Modal";
 import { modalContainer } from "./styles/Modal.styles";
-import { cx } from "emotion";
+import { cx, css } 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;
@@ -42,21 +41,23 @@ class Modal extends React.PureComponent<ModalProps> {
       // tslint:disable-next-line:jsx-wrap-multiline
       <MountTransition visible={visible}>
         {transitionStyles => (
-          <animated.div
+          <div
             style={{
               opacity: transitionStyles.opacity
             }}
             className={cx(modalContainer, backDropClassName)}
           >
-            <animated.div
-              style={{
-                transform: transitionStyles.transform
-              }}
-              className={modalClassName}
+            <div
+              className={cx(
+                css({
+                  transform: transitionStyles.transform
+                }),
+                modalClassName
+              )}
             >
               {children}
-            </animated.div>
-          </animated.div>
+            </div>
+          </div>
         )}
       </MountTransition>,
       node as NonNullable<typeof node>

package/src/components/Popper.tsx

@@ -6,7 +6,6 @@ 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,
@@ -72,16 +71,16 @@ export default class PebblePopper extends React.PureComponent<
                     ...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 (
-                    <animated.div
+                    <div
                       className={cx(popperStyle, popperClassName)}
                       ref={ref}
                       style={wrapperStyle}
@@ -102,7 +101,7 @@ export default class PebblePopper extends React.PureComponent<
                       >
                         ▶
                       </div>
-                    </animated.div>
+                    </div>
                   );
                 }}
               </Popper>

package/src/components/Sidebar.tsx

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

package/src/components/Toast.tsx

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

package/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";
+import { animated } from "react-spring/renderprops.cjs";
 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}>
+        <MountTransition visible={showSuggestions} native>
           {transitionStyles => (
             <animated.div
               style={transitionStyles}

package/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",
       }
     }

package/src/components/shared/MountTransition.tsx

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

package/src/utils/animation.ts

@@ -1,18 +1,9 @@
-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"];
+import { State } from "react-spring";
 
 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: (_show: boolean, _index: number, state: TransitionPhase) =>
-    state === "leave" ? { duration: 80 } : { duration: 200 }
-};
-
-export type AnimationStyle = {
-  opacity: number;
-  transform: string;
+  config: (_a: boolean, motion: State) =>
+    motion === "leave" ? { duration: 80 } : { duration: 200 }
 };