@react-spring/animated - npm Package Compare versions

Comparing version 9.0.0-beta.21 to 9.0.0-beta.23

index.cjs.js

@@ -8,4 +8,6 @@ 'use strict';
 var shared = require('@react-spring/shared');
+var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
+var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
 var G = require('@react-spring/shared/globals');
-var tslib_1 = require('tslib');
+var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
 var React = require('react');
@@ -15,74 +17,143 @@ var React__default = _interopDefault(React);
 function isAnimated(val) {
-    return val instanceof Animated;
+  return val instanceof Animated;
 }
-class Animated {
-    constructor() {
-        this.children = [];
+var Animated =
+/*#__PURE__*/
+function () {
+  function Animated() {
+    this.children = [];
+  }
+
+  var _proto = Animated.prototype;
+
+  _proto.getAnimatedValue = function getAnimatedValue() {
+    return this.getValue();
+  };
+
+  _proto.getPayload = function getPayload() {
+    return this.payload || this;
+  };
+
+  _proto.attach = function attach() {};
+
+  _proto.detach = function detach() {};
+
+  _proto.getChildren = function getChildren() {
+    return this.children;
+  };
+
+  _proto.addChild = function addChild(child) {
+    if (this.children.length === 0) this.attach();
+    this.children.push(child);
+  };
+
+  _proto.removeChild = function removeChild(child) {
+    var index = this.children.indexOf(child);
+    this.children.splice(index, 1);
+    if (this.children.length === 0) this.detach();
+  };
+
+  return Animated;
+}();
+var AnimatedArray =
+/*#__PURE__*/
+function (_Animated) {
+  _inheritsLoose(AnimatedArray, _Animated);
+
+  function AnimatedArray() {
+    return _Animated.apply(this, arguments) || this;
+  }
+
+  var _proto2 = AnimatedArray.prototype;
+
+  _proto2.attach = function attach() {
+    var _this = this;
+
+    this.payload.forEach(function (p) {
+      return isAnimated(p) && p.addChild(_this);
+    });
+  };
+
+  _proto2.detach = function detach() {
+    var _this2 = this;
+
+    this.payload.forEach(function (p) {
+      return isAnimated(p) && p.removeChild(_this2);
+    });
+  };
+
+  return AnimatedArray;
+}(Animated);
+var AnimatedObject =
+/*#__PURE__*/
+function (_Animated2) {
+  _inheritsLoose(AnimatedObject, _Animated2);
+
+  function AnimatedObject(payload) {
+    var _this3;
+
+    _this3 = _Animated2.call(this) || this;
+    _this3.payload = payload;
+    return _this3;
+  }
+
+  var _proto3 = AnimatedObject.prototype;
+
+  _proto3.getValue = function getValue(animated) {
+    if (animated === void 0) {
+      animated = false;
     }
-    getAnimatedValue() {
-        return this.getValue();
+
+    var payload = {};
+
+    for (var key in this.payload) {
+      var value = this.payload[key];
+      if (animated && !isAnimated(value)) continue;
+      payload[key] = isAnimated(value) ? value[animated ? 'getAnimatedValue' : 'getValue']() : value;
     }
-    getPayload() {
-        return this.payload || this;
-    }
-    attach() { }
-    detach() { }
-    getChildren() {
-        return this.children;
-    }
-    addChild(child) {
-        if (this.children.length === 0)
-            this.attach();
-        this.children.push(child);
-    }
-    removeChild(child) {
-        const index = this.children.indexOf(child);
-        this.children.splice(index, 1);
-        if (this.children.length === 0)
-            this.detach();
-    }
-}
-class AnimatedArray extends Animated {
-    attach() {
-        this.payload.forEach(p => isAnimated(p) && p.addChild(this));
-    }
-    detach() {
-        this.payload.forEach(p => isAnimated(p) && p.removeChild(this));
-    }
-}
-class AnimatedObject extends Animated {
-    constructor(payload) {
-        super();
-        this.payload = payload;
-    }
-    getValue(animated = false) {
-        const payload = {};
-        for (const key in this.payload) {
-            const value = this.payload[key];
-            if (animated && !isAnimated(value))
-                continue;
-            payload[key] = isAnimated(value)
-                ? value[animated ? 'getAnimatedValue' : 'getValue']()
-                : value;
-        }
-        return payload;
-    }
-    getAnimatedValue() {
-        return this.getValue(true);
-    }
-    attach() {
-        Object.values(this.payload).forEach(s => isAnimated(s) && s.addChild(this));
-    }
-    detach() {
-        Object.values(this.payload).forEach(s => isAnimated(s) && s.removeChild(this));
-    }
-}
 
-class AnimatedStyle extends AnimatedObject {
-    constructor(style = {}) {
-        super(style.transform && G.createAnimatedTransform
-            ? Object.assign({}, style, { transform: G.createAnimatedTransform(style.transform) }) : style);
+    return payload;
+  };
+
+  _proto3.getAnimatedValue = function getAnimatedValue() {
+    return this.getValue(true);
+  };
+
+  _proto3.attach = function attach() {
+    var _this4 = this;
+
+    Object.values(this.payload).forEach(function (s) {
+      return isAnimated(s) && s.addChild(_this4);
+    });
+  };
+
+  _proto3.detach = function detach() {
+    var _this5 = this;
+
+    Object.values(this.payload).forEach(function (s) {
+      return isAnimated(s) && s.removeChild(_this5);
+    });
+  };
+
+  return AnimatedObject;
+}(Animated);
+
+var AnimatedStyle =
+/*#__PURE__*/
+function (_AnimatedObject) {
+  _inheritsLoose(AnimatedStyle, _AnimatedObject);
+
+  function AnimatedStyle(style) {
+    if (style === void 0) {
+      style = {};
     }
-}
 
+    return _AnimatedObject.call(this, style.transform && G.createAnimatedTransform ? _extends({}, style, {
+      transform: G.createAnimatedTransform(style.transform)
+    }) : style) || this;
+  }
+
+  return AnimatedStyle;
+}(AnimatedObject);
+
 /**
@@ -110,103 +181,189 @@ * Animated works by building a directed acyclic graph of dependencies
  */
+
 function addAnimatedStyles(node, styles) {
-    if ('update' in node) {
-        styles.add(node);
-    }
-    else {
-        node.getChildren().forEach(child => addAnimatedStyles(child, styles));
-    }
+  if ('update' in node) {
+    styles.add(node);
+  } else {
+    node.getChildren().forEach(function (child) {
+      return addAnimatedStyles(child, styles);
+    });
+  }
 }
-class AnimatedValue extends Animated {
-    constructor(value) {
-        super();
-        this.animatedStyles = new Set();
-        this.done = false;
-        this.setValue = (value, flush = true) => {
-            this.value = value;
-            if (flush)
-                this.flush();
-        };
-        this.value = value;
-        if (shared.is.num(value)) {
-            this.startPosition = value;
-            this.lastPosition = value;
-        }
+
+var AnimatedValue =
+/*#__PURE__*/
+function (_Animated) {
+  _inheritsLoose(AnimatedValue, _Animated);
+
+  function AnimatedValue(value) {
+    var _this;
+
+    _this = _Animated.call(this) || this;
+    _this.animatedStyles = new Set();
+    _this.done = false;
+
+    _this.setValue = function (value, flush) {
+      if (flush === void 0) {
+        flush = true;
+      }
+
+      _this.value = value;
+      if (flush) _this.flush();
+    };
+
+    _this.value = value;
+
+    if (shared.is.num(value)) {
+      _this.startPosition = value;
+      _this.lastPosition = value;
     }
-    static from(value) {
-        return isAnimated(value) ? value : new AnimatedValue(value);
+
+    return _this;
+  }
+
+  AnimatedValue.from = function from(value) {
+    return isAnimated(value) ? value : new AnimatedValue(value);
+  };
+
+  var _proto = AnimatedValue.prototype;
+
+  _proto.getValue = function getValue() {
+    return this.value;
+  };
+
+  _proto.interpolate = function interpolate() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    getValue() {
-        return this.value;
+
+    return G.createAnimatedInterpolation.apply(void 0, [this].concat(args));
+  };
+
+  _proto.reset = function reset(isActive) {
+    if (shared.is.num(this.value)) {
+      this.startPosition = this.value;
+      this.lastPosition = this.value;
+      this.lastVelocity = isActive ? this.lastVelocity : undefined;
+      this.lastTime = isActive ? this.lastTime : undefined;
+      this.startTime = G.now();
     }
-    interpolate(...args) {
-        return G.createAnimatedInterpolation(this, ...args);
+
+    this.done = false;
+    this.animatedStyles.clear();
+  };
+
+  _proto.clearStyles = function clearStyles() {
+    this.animatedStyles.clear();
+  };
+
+  _proto.flush = function flush() {
+    if (this.animatedStyles.size === 0) {
+      addAnimatedStyles(this, this.animatedStyles);
     }
-    reset(isActive) {
-        if (shared.is.num(this.value)) {
-            this.startPosition = this.value;
-            this.lastPosition = this.value;
-            this.lastVelocity = isActive ? this.lastVelocity : undefined;
-            this.lastTime = isActive ? this.lastTime : undefined;
-            this.startTime = G.now();
-        }
-        this.done = false;
-        this.animatedStyles.clear();
+
+    this.animatedStyles.forEach(function (animatedStyle) {
+      return animatedStyle.update();
+    });
+  };
+
+  return AnimatedValue;
+}(Animated);
+
+var AnimatedValueArray =
+/*#__PURE__*/
+function (_AnimatedArray) {
+  _inheritsLoose(AnimatedValueArray, _AnimatedArray);
+
+  function AnimatedValueArray(values) {
+    var _this;
+
+    _this = _AnimatedArray.call(this) || this;
+    _this.payload = values;
+    return _this;
+  }
+
+  var _proto = AnimatedValueArray.prototype;
+
+  _proto.getValue = function getValue() {
+    return this.payload.map(function (v) {
+      return v.getValue();
+    });
+  };
+
+  _proto.setValue = function setValue(value, flush) {
+    var _this2 = this;
+
+    if (flush === void 0) {
+      flush = true;
     }
-    clearStyles() {
-        this.animatedStyles.clear();
+
+    if (shared.is.arr(value)) {
+      if (value.length === this.payload.length) {
+        value.forEach(function (v, i) {
+          return _this2.payload[i].setValue(v, flush);
+        });
+      }
+    } else {
+      this.payload.forEach(function (p) {
+        return p.setValue(value, flush);
+      });
     }
-    flush() {
-        if (this.animatedStyles.size === 0) {
-            addAnimatedStyles(this, this.animatedStyles);
-        }
-        this.animatedStyles.forEach(animatedStyle => animatedStyle.update());
+  };
+
+  _proto.interpolate = function interpolate() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-}
 
-class AnimatedValueArray extends AnimatedArray {
-    constructor(values) {
-        super();
-        this.payload = values;
+    return G.createAnimatedInterpolation.apply(void 0, [this].concat(args));
+  };
+
+  return AnimatedValueArray;
+}(AnimatedArray);
+
+var AnimatedInterpolation =
+/*#__PURE__*/
+function (_AnimatedArray) {
+  _inheritsLoose(AnimatedInterpolation, _AnimatedArray);
+
+  function AnimatedInterpolation(parents, args) {
+    var _this;
+
+    _this = _AnimatedArray.call(this) || this;
+    _this.calc = shared.createInterpolator.apply(void 0, args);
+    _this.payload = Array.isArray(parents) ? parents.map(AnimatedValue.from) : parents instanceof AnimatedValueArray ? parents.getPayload() : [parents];
+    return _this;
+  }
+
+  var _proto = AnimatedInterpolation.prototype;
+
+  _proto.getValue = function getValue() {
+    var args = this.payload.map(function (value) {
+      return value.getValue();
+    });
+    return this.calc.apply(this, args);
+  };
+
+  _proto.interpolate = function interpolate() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    getValue() {
-        return this.payload.map(v => v.getValue());
-    }
-    setValue(value, flush = true) {
-        if (shared.is.arr(value)) {
-            if (value.length === this.payload.length) {
-                value.forEach((v, i) => this.payload[i].setValue(v, flush));
-            }
-        }
-        else {
-            this.payload.forEach(p => p.setValue(value, flush));
-        }
-    }
-    interpolate(...args) {
-        return G.createAnimatedInterpolation(this, ...args);
-    }
-}
 
-class AnimatedInterpolation extends AnimatedArray {
-    constructor(parents, args) {
-        super();
-        this.calc = shared.createInterpolator(...args);
-        this.payload = Array.isArray(parents)
-            ? parents.map(AnimatedValue.from)
-            : parents instanceof AnimatedValueArray
-                ? parents.getPayload()
-                : [parents];
+    return G.createAnimatedInterpolation.apply(void 0, [this].concat(args));
+  };
+
+  return AnimatedInterpolation;
+}(AnimatedArray);
+
+shared.Globals.assign({
+  createAnimatedStyle: function createAnimatedStyle(style) {
+    return new AnimatedStyle(style);
+  },
+  createAnimatedInterpolation: function createAnimatedInterpolation(parents) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
     }
-    getValue() {
-        const args = this.payload.map(value => value.getValue());
-        return this.calc(...args);
-    }
-    interpolate(...args) {
-        return G.createAnimatedInterpolation(this, ...args);
-    }
-}
 
-// Sane defaults
-shared.Globals.assign({
-    createAnimatedStyle: style => new AnimatedStyle(style),
-    createAnimatedInterpolation: (parents, ...args) => new AnimatedInterpolation(parents, args),
+    return new AnimatedInterpolation(parents, args);
+  }
 });
@@ -217,87 +374,123 @@
  */
-class AnimatedProps extends AnimatedObject {
-    constructor(props, callback) {
-        super(props.style && G.createAnimatedStyle
-            ? Object.assign({}, props, { style: G.createAnimatedStyle(props.style) }) : props);
-        this.update = callback;
-        this.attach();
-    }
-}
 
-const createAnimatedComponent = Component => React.forwardRef((props, ref) => {
-    const propsAnimated = React.useRef(null);
-    const forceUpdate = shared.useForceUpdate();
-    const node = React.useRef(null);
-    const attachProps = React.useCallback(props => {
-        const oldPropsAnimated = propsAnimated.current;
-        const callback = () => {
-            const didUpdate = !!node.current &&
-                G.applyAnimatedValues(node.current, propsAnimated.current.getAnimatedValue());
-            // If no referenced node has been found, or the update target didn't have a
-            // native-responder, then forceUpdate the animation ...
-            if (didUpdate === false)
-                forceUpdate();
-        };
-        propsAnimated.current = new AnimatedProps(props, callback);
-        oldPropsAnimated && oldPropsAnimated.detach();
-        return propsAnimated.current.getValue();
+var AnimatedProps =
+/*#__PURE__*/
+function (_AnimatedObject) {
+  _inheritsLoose(AnimatedProps, _AnimatedObject);
+
+  function AnimatedProps(props, callback) {
+    var _this;
+
+    _this = _AnimatedObject.call(this, props.style && G.createAnimatedStyle ? _extends({}, props, {
+      style: G.createAnimatedStyle(props.style)
+    }) : props) || this;
+    _this.update = callback;
+
+    _this.attach();
+
+    return _this;
+  }
+
+  return AnimatedProps;
+}(AnimatedObject);
+
+var createAnimatedComponent = function createAnimatedComponent(Component) {
+  return React.forwardRef(function (props, ref) {
+    var propsAnimated = React.useRef(null);
+    var forceUpdate = shared.useForceUpdate();
+    var node = React.useRef(null);
+    var attachProps = React.useCallback(function (props) {
+      var oldPropsAnimated = propsAnimated.current;
+
+      var callback = function callback() {
+        var didUpdate = !!node.current && G.applyAnimatedValues(node.current, propsAnimated.current.getAnimatedValue()); // If no referenced node has been found, or the update target didn't have a
+        // native-responder, then forceUpdate the animation ...
+
+        if (didUpdate === false) forceUpdate();
+      };
+
+      propsAnimated.current = new AnimatedProps(props, callback);
+      oldPropsAnimated && oldPropsAnimated.detach();
+      return propsAnimated.current.getValue();
     }, []);
-    shared.useOnce(() => () => {
+    shared.useOnce(function () {
+      return function () {
         propsAnimated.current && propsAnimated.current.detach();
-    });
-    // TODO: Avoid special case for scrollTop/scrollLeft
-    const _a = attachProps(props), animatedProps = tslib_1.__rest(_a, ["scrollTop", "scrollLeft"]);
-    // Functions cannot have refs (see #569)
-    const refFn = !shared.is.fun(Component) || Component.prototype.isReactComponent
-        ? (value) => (node.current = updateRef(ref, value))
-        : void 0;
-    return React__default.createElement(Component, Object.assign({}, animatedProps, { ref: refFn }));
-});
+      };
+    }); // TODO: Avoid special case for scrollTop/scrollLeft
+
+    var _attachProps = attachProps(props),
+        scrollTop = _attachProps.scrollTop,
+        scrollLeft = _attachProps.scrollLeft,
+        animatedProps = _objectWithoutPropertiesLoose(_attachProps, ["scrollTop", "scrollLeft"]); // Functions cannot have refs (see #569)
+
+
+    var refFn = !shared.is.fun(Component) || Component.prototype.isReactComponent ? function (value) {
+      return node.current = updateRef(ref, value);
+    } : void 0;
+    return React__default.createElement(Component, Object.assign({}, animatedProps, {
+      ref: refFn
+    }));
+  });
+};
+
 function updateRef(ref, value) {
-    if (ref) {
-        if (shared.is.fun(ref))
-            ref(value);
-        else
-            ref.current = value;
-    }
-    return value;
+  if (ref) {
+    if (shared.is.fun(ref)) ref(value);else ref.current = value;
+  }
+
+  return value;
 }
 /** Add an `extend` method to your `animated` factory function */
-function withExtend(animated, options = {}) {
-    const self = animated;
-    const extend = (arg, overrideKey) => {
-        // Arrays avoid passing their index to `extend`
-        if (shared.is.arr(arg)) {
-            return arg.forEach(arg => extend(arg));
-        }
-        // Object keys are always used over value inspection
-        if (shared.is.obj(arg)) {
-            for (const key in arg)
-                extend(arg[key], key);
-            return;
-        }
-        // Use the `overrideKey` or inspect the value for a key
-        let key = shared.is.str(overrideKey)
-            ? overrideKey
-            : shared.is.str(arg)
-                ? arg
-                : arg && shared.is.str(arg.displayName)
-                    ? arg.displayName
-                    : shared.is.fun(arg)
-                        ? arg.name
-                        : '';
-        // This lowercases the first letter of the key
-        if (options.lowercase) {
-            key = key[0].toLowerCase() + key.slice(1);
-        }
-        // NOTE(typescript): Properties are not yet inferred from the arguments of
-        // the `extend` method and then attached to the `animated` function via
-        // the return type.
-        self[key] = animated(arg);
-    };
-    self.extend = (...args) => {
-        args.forEach(arg => extend(arg));
-        return self;
-    };
+
+
+function withExtend(animated, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var self = animated;
+
+  var extend = function extend(arg, overrideKey) {
+    // Arrays avoid passing their index to `extend`
+    if (shared.is.arr(arg)) {
+      return arg.forEach(function (arg) {
+        return extend(arg);
+      });
+    } // Object keys are always used over value inspection
+
+
+    if (shared.is.obj(arg)) {
+      for (var _key in arg) {
+        extend(arg[_key], _key);
+      }
+
+      return;
+    } // Use the `overrideKey` or inspect the value for a key
+
+
+    var key = shared.is.str(overrideKey) ? overrideKey : shared.is.str(arg) ? arg : arg && shared.is.str(arg.displayName) ? arg.displayName : shared.is.fun(arg) ? arg.name : ''; // This lowercases the first letter of the key
+
+    if (options.lowercase) {
+      key = key[0].toLowerCase() + key.slice(1);
+    } // NOTE(typescript): Properties are not yet inferred from the arguments of
+    // the `extend` method and then attached to the `animated` function via
+    // the return type.
+
+
+    self[key] = animated(arg);
+  };
+
+  self.extend = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    args.forEach(function (arg) {
+      return extend(arg);
+    });
     return self;
+  };
+
+  return self;
 }
@@ -304,0 +497,0 @@

index.js

 import { is, createInterpolator, Globals, useForceUpdate, useOnce } from '@react-spring/shared';
+import _extends from '@babel/runtime/helpers/esm/extends';
 import { createAnimatedTransform, createAnimatedInterpolation, now, createAnimatedStyle, applyAnimatedValues } from '@react-spring/shared/globals';
 export { createAnimatedInterpolation as interpolate } from '@react-spring/shared/globals';
-import { __rest } from 'tslib';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 import React, { forwardRef, useRef, useCallback } from 'react';
 
 function isAnimated(val) {
-    return val instanceof Animated;
+  return val instanceof Animated;
 }
 class Animated {
-    constructor() {
-        this.children = [];
-    }
-    getAnimatedValue() {
-        return this.getValue();
-    }
-    getPayload() {
-        return this.payload || this;
-    }
-    attach() { }
-    detach() { }
-    getChildren() {
-        return this.children;
-    }
-    addChild(child) {
-        if (this.children.length === 0)
-            this.attach();
-        this.children.push(child);
-    }
-    removeChild(child) {
-        const index = this.children.indexOf(child);
-        this.children.splice(index, 1);
-        if (this.children.length === 0)
-            this.detach();
-    }
+  constructor() {
+    this.children = [];
+  }
+
+  getAnimatedValue() {
+    return this.getValue();
+  }
+
+  getPayload() {
+    return this.payload || this;
+  }
+
+  attach() {}
+
+  detach() {}
+
+  getChildren() {
+    return this.children;
+  }
+
+  addChild(child) {
+    if (this.children.length === 0) this.attach();
+    this.children.push(child);
+  }
+
+  removeChild(child) {
+    const index = this.children.indexOf(child);
+    this.children.splice(index, 1);
+    if (this.children.length === 0) this.detach();
+  }
+
 }
 class AnimatedArray extends Animated {
-    attach() {
-        this.payload.forEach(p => isAnimated(p) && p.addChild(this));
-    }
-    detach() {
-        this.payload.forEach(p => isAnimated(p) && p.removeChild(this));
-    }
+  attach() {
+    this.payload.forEach(p => isAnimated(p) && p.addChild(this));
+  }
+
+  detach() {
+    this.payload.forEach(p => isAnimated(p) && p.removeChild(this));
+  }
+
 }
 class AnimatedObject extends Animated {
-    constructor(payload) {
-        super();
-        this.payload = payload;
+  constructor(payload) {
+    super();
+    this.payload = payload;
+  }
+
+  getValue(animated) {
+    if (animated === void 0) {
+      animated = false;
     }
-    getValue(animated = false) {
-        const payload = {};
-        for (const key in this.payload) {
-            const value = this.payload[key];
-            if (animated && !isAnimated(value))
-                continue;
-            payload[key] = isAnimated(value)
-                ? value[animated ? 'getAnimatedValue' : 'getValue']()
-                : value;
-        }
-        return payload;
+
+    const payload = {};
+
+    for (const key in this.payload) {
+      const value = this.payload[key];
+      if (animated && !isAnimated(value)) continue;
+      payload[key] = isAnimated(value) ? value[animated ? 'getAnimatedValue' : 'getValue']() : value;
     }
-    getAnimatedValue() {
-        return this.getValue(true);
-    }
-    attach() {
-        Object.values(this.payload).forEach(s => isAnimated(s) && s.addChild(this));
-    }
-    detach() {
-        Object.values(this.payload).forEach(s => isAnimated(s) && s.removeChild(this));
-    }
+
+    return payload;
+  }
+
+  getAnimatedValue() {
+    return this.getValue(true);
+  }
+
+  attach() {
+    Object.values(this.payload).forEach(s => isAnimated(s) && s.addChild(this));
+  }
+
+  detach() {
+    Object.values(this.payload).forEach(s => isAnimated(s) && s.removeChild(this));
+  }
+
 }
 
 class AnimatedStyle extends AnimatedObject {
-    constructor(style = {}) {
-        super(style.transform && createAnimatedTransform
-            ? Object.assign({}, style, { transform: createAnimatedTransform(style.transform) }) : style);
+  constructor(style) {
+    if (style === void 0) {
+      style = {};
     }
+
+    super(style.transform && createAnimatedTransform ? _extends({}, style, {
+      transform: createAnimatedTransform(style.transform)
+    }) : style);
+  }
+
 }
@@ -102,103 +125,145 @@
  */
+
 function addAnimatedStyles(node, styles) {
-    if ('update' in node) {
-        styles.add(node);
-    }
-    else {
-        node.getChildren().forEach(child => addAnimatedStyles(child, styles));
-    }
+  if ('update' in node) {
+    styles.add(node);
+  } else {
+    node.getChildren().forEach(child => addAnimatedStyles(child, styles));
+  }
 }
+
 class AnimatedValue extends Animated {
-    constructor(value) {
-        super();
-        this.animatedStyles = new Set();
-        this.done = false;
-        this.setValue = (value, flush = true) => {
-            this.value = value;
-            if (flush)
-                this.flush();
-        };
-        this.value = value;
-        if (is.num(value)) {
-            this.startPosition = value;
-            this.lastPosition = value;
-        }
+  constructor(value) {
+    var _this;
+
+    super();
+    _this = this;
+    this.animatedStyles = new Set();
+    this.done = false;
+
+    this.setValue = function (value, flush) {
+      if (flush === void 0) {
+        flush = true;
+      }
+
+      _this.value = value;
+      if (flush) _this.flush();
+    };
+
+    this.value = value;
+
+    if (is.num(value)) {
+      this.startPosition = value;
+      this.lastPosition = value;
     }
-    static from(value) {
-        return isAnimated(value) ? value : new AnimatedValue(value);
+  }
+
+  static from(value) {
+    return isAnimated(value) ? value : new AnimatedValue(value);
+  }
+
+  getValue() {
+    return this.value;
+  }
+
+  interpolate() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    getValue() {
-        return this.value;
+
+    return createAnimatedInterpolation(this, ...args);
+  }
+
+  reset(isActive) {
+    if (is.num(this.value)) {
+      this.startPosition = this.value;
+      this.lastPosition = this.value;
+      this.lastVelocity = isActive ? this.lastVelocity : undefined;
+      this.lastTime = isActive ? this.lastTime : undefined;
+      this.startTime = now();
     }
-    interpolate(...args) {
-        return createAnimatedInterpolation(this, ...args);
+
+    this.done = false;
+    this.animatedStyles.clear();
+  }
+
+  clearStyles() {
+    this.animatedStyles.clear();
+  }
+
+  flush() {
+    if (this.animatedStyles.size === 0) {
+      addAnimatedStyles(this, this.animatedStyles);
     }
-    reset(isActive) {
-        if (is.num(this.value)) {
-            this.startPosition = this.value;
-            this.lastPosition = this.value;
-            this.lastVelocity = isActive ? this.lastVelocity : undefined;
-            this.lastTime = isActive ? this.lastTime : undefined;
-            this.startTime = now();
-        }
-        this.done = false;
-        this.animatedStyles.clear();
-    }
-    clearStyles() {
-        this.animatedStyles.clear();
-    }
-    flush() {
-        if (this.animatedStyles.size === 0) {
-            addAnimatedStyles(this, this.animatedStyles);
-        }
-        this.animatedStyles.forEach(animatedStyle => animatedStyle.update());
-    }
+
+    this.animatedStyles.forEach(animatedStyle => animatedStyle.update());
+  }
+
 }
 
 class AnimatedValueArray extends AnimatedArray {
-    constructor(values) {
-        super();
-        this.payload = values;
+  constructor(values) {
+    super();
+    this.payload = values;
+  }
+
+  getValue() {
+    return this.payload.map(v => v.getValue());
+  }
+
+  setValue(value, flush) {
+    if (flush === void 0) {
+      flush = true;
     }
-    getValue() {
-        return this.payload.map(v => v.getValue());
+
+    if (is.arr(value)) {
+      if (value.length === this.payload.length) {
+        value.forEach((v, i) => this.payload[i].setValue(v, flush));
+      }
+    } else {
+      this.payload.forEach(p => p.setValue(value, flush));
     }
-    setValue(value, flush = true) {
-        if (is.arr(value)) {
-            if (value.length === this.payload.length) {
-                value.forEach((v, i) => this.payload[i].setValue(v, flush));
-            }
-        }
-        else {
-            this.payload.forEach(p => p.setValue(value, flush));
-        }
+  }
+
+  interpolate() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    interpolate(...args) {
-        return createAnimatedInterpolation(this, ...args);
-    }
+
+    return createAnimatedInterpolation(this, ...args);
+  }
+
 }
 
 class AnimatedInterpolation extends AnimatedArray {
-    constructor(parents, args) {
-        super();
-        this.calc = createInterpolator(...args);
-        this.payload = Array.isArray(parents)
-            ? parents.map(AnimatedValue.from)
-            : parents instanceof AnimatedValueArray
-                ? parents.getPayload()
-                : [parents];
+  constructor(parents, args) {
+    super();
+    this.calc = createInterpolator(...args);
+    this.payload = Array.isArray(parents) ? parents.map(AnimatedValue.from) : parents instanceof AnimatedValueArray ? parents.getPayload() : [parents];
+  }
+
+  getValue() {
+    const args = this.payload.map(value => value.getValue());
+    return this.calc(...args);
+  }
+
+  interpolate() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    getValue() {
-        const args = this.payload.map(value => value.getValue());
-        return this.calc(...args);
-    }
-    interpolate(...args) {
-        return createAnimatedInterpolation(this, ...args);
-    }
+
+    return createAnimatedInterpolation(this, ...args);
+  }
+
 }
 
-// Sane defaults
 Globals.assign({
-    createAnimatedStyle: style => new AnimatedStyle(style),
-    createAnimatedInterpolation: (parents, ...args) => new AnimatedInterpolation(parents, args),
+  createAnimatedStyle: style => new AnimatedStyle(style),
+  createAnimatedInterpolation: function createAnimatedInterpolation(parents) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    return new AnimatedInterpolation(parents, args);
+  }
 });
@@ -209,87 +274,101 @@
  */
+
 class AnimatedProps extends AnimatedObject {
-    constructor(props, callback) {
-        super(props.style && createAnimatedStyle
-            ? Object.assign({}, props, { style: createAnimatedStyle(props.style) }) : props);
-        this.update = callback;
-        this.attach();
-    }
+  constructor(props, callback) {
+    super(props.style && createAnimatedStyle ? _extends({}, props, {
+      style: createAnimatedStyle(props.style)
+    }) : props);
+    this.update = callback;
+    this.attach();
+  }
+
 }
 
 const createAnimatedComponent = Component => forwardRef((props, ref) => {
-    const propsAnimated = useRef(null);
-    const forceUpdate = useForceUpdate();
-    const node = useRef(null);
-    const attachProps = useCallback(props => {
-        const oldPropsAnimated = propsAnimated.current;
-        const callback = () => {
-            const didUpdate = !!node.current &&
-                applyAnimatedValues(node.current, propsAnimated.current.getAnimatedValue());
-            // If no referenced node has been found, or the update target didn't have a
-            // native-responder, then forceUpdate the animation ...
-            if (didUpdate === false)
-                forceUpdate();
-        };
-        propsAnimated.current = new AnimatedProps(props, callback);
-        oldPropsAnimated && oldPropsAnimated.detach();
-        return propsAnimated.current.getValue();
-    }, []);
-    useOnce(() => () => {
-        propsAnimated.current && propsAnimated.current.detach();
-    });
-    // TODO: Avoid special case for scrollTop/scrollLeft
-    const _a = attachProps(props), animatedProps = __rest(_a, ["scrollTop", "scrollLeft"]);
-    // Functions cannot have refs (see #569)
-    const refFn = !is.fun(Component) || Component.prototype.isReactComponent
-        ? (value) => (node.current = updateRef(ref, value))
-        : void 0;
-    return React.createElement(Component, Object.assign({}, animatedProps, { ref: refFn }));
+  const propsAnimated = useRef(null);
+  const forceUpdate = useForceUpdate();
+  const node = useRef(null);
+  const attachProps = useCallback(props => {
+    const oldPropsAnimated = propsAnimated.current;
+
+    const callback = () => {
+      const didUpdate = !!node.current && applyAnimatedValues(node.current, propsAnimated.current.getAnimatedValue()); // If no referenced node has been found, or the update target didn't have a
+      // native-responder, then forceUpdate the animation ...
+
+      if (didUpdate === false) forceUpdate();
+    };
+
+    propsAnimated.current = new AnimatedProps(props, callback);
+    oldPropsAnimated && oldPropsAnimated.detach();
+    return propsAnimated.current.getValue();
+  }, []);
+  useOnce(() => () => {
+    propsAnimated.current && propsAnimated.current.detach();
+  }); // TODO: Avoid special case for scrollTop/scrollLeft
+
+  const _attachProps = attachProps(props),
+        scrollTop = _attachProps.scrollTop,
+        scrollLeft = _attachProps.scrollLeft,
+        animatedProps = _objectWithoutPropertiesLoose(_attachProps, ["scrollTop", "scrollLeft"]); // Functions cannot have refs (see #569)
+
+
+  const refFn = !is.fun(Component) || Component.prototype.isReactComponent ? value => node.current = updateRef(ref, value) : void 0;
+  return React.createElement(Component, Object.assign({}, animatedProps, {
+    ref: refFn
+  }));
 });
+
 function updateRef(ref, value) {
-    if (ref) {
-        if (is.fun(ref))
-            ref(value);
-        else
-            ref.current = value;
-    }
-    return value;
+  if (ref) {
+    if (is.fun(ref)) ref(value);else ref.current = value;
+  }
+
+  return value;
 }
 /** Add an `extend` method to your `animated` factory function */
-function withExtend(animated, options = {}) {
-    const self = animated;
-    const extend = (arg, overrideKey) => {
-        // Arrays avoid passing their index to `extend`
-        if (is.arr(arg)) {
-            return arg.forEach(arg => extend(arg));
-        }
-        // Object keys are always used over value inspection
-        if (is.obj(arg)) {
-            for (const key in arg)
-                extend(arg[key], key);
-            return;
-        }
-        // Use the `overrideKey` or inspect the value for a key
-        let key = is.str(overrideKey)
-            ? overrideKey
-            : is.str(arg)
-                ? arg
-                : arg && is.str(arg.displayName)
-                    ? arg.displayName
-                    : is.fun(arg)
-                        ? arg.name
-                        : '';
-        // This lowercases the first letter of the key
-        if (options.lowercase) {
-            key = key[0].toLowerCase() + key.slice(1);
-        }
-        // NOTE(typescript): Properties are not yet inferred from the arguments of
-        // the `extend` method and then attached to the `animated` function via
-        // the return type.
-        self[key] = animated(arg);
-    };
-    self.extend = (...args) => {
-        args.forEach(arg => extend(arg));
-        return self;
-    };
+
+
+function withExtend(animated, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  const self = animated;
+
+  const extend = (arg, overrideKey) => {
+    // Arrays avoid passing their index to `extend`
+    if (is.arr(arg)) {
+      return arg.forEach(arg => extend(arg));
+    } // Object keys are always used over value inspection
+
+
+    if (is.obj(arg)) {
+      for (const key in arg) extend(arg[key], key);
+
+      return;
+    } // Use the `overrideKey` or inspect the value for a key
+
+
+    let key = is.str(overrideKey) ? overrideKey : is.str(arg) ? arg : arg && is.str(arg.displayName) ? arg.displayName : is.fun(arg) ? arg.name : ''; // This lowercases the first letter of the key
+
+    if (options.lowercase) {
+      key = key[0].toLowerCase() + key.slice(1);
+    } // NOTE(typescript): Properties are not yet inferred from the arguments of
+    // the `extend` method and then attached to the `animated` function via
+    // the return type.
+
+
+    self[key] = animated(arg);
+  };
+
+  self.extend = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    args.forEach(arg => extend(arg));
     return self;
+  };
+
+  return self;
 }
@@ -296,0 +375,0 @@

package.json

 {
   "name": "@react-spring/animated",
-  "version": "9.0.0-beta.21",
+  "version": "9.0.0-beta.23",
   "description": "Animated component props for React",
@@ -31,4 +31,3 @@ "keywords": [
     "@babel/runtime": "^7.3.1",
-    "@react-spring/shared": "^9.0.0-beta.21",
-    "tslib": "^1.9.3"
+    "@react-spring/shared": "^9.0.0-beta.23"
   },
@@ -35,0 +34,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60048

increased by7.58%

Dependency count

2

decreased by-33.33%

Lines of code

1184

increased by9.23%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• - Removedtslib@^1.9.3

• - Removedtslib@1.14.1(transitive)

• Updated@react-spring/shared@^9.0.0-beta.23