@react-spring/web - npm Package Compare versions

Comparing version 9.1.2 to 9.2.0-beta.0

CHANGELOG.md

+# @react-spring/web
+
+## 9.2.0-beta.0
+
+## 9.2.0

dist/declarations/src/animated.d.ts

+import { CSSProperties, ForwardRefExoticComponent, ElementType, ComponentPropsWithRef } from 'react';
+import { FluidValue, FluidProps } from '@react-spring/shared';
+import { Merge } from '@react-spring/types';
+import { Primitives } from './primitives';
+import type * as CSS from 'csstype';
+export type { CSS };
+declare type AnimatedPrimitives = {
+    [Tag in Primitives]: AnimatedComponent<Tag>;
+};
+/** The type of the `animated()` function */
+export declare type WithAnimated = {
+    <T extends ElementType>(wrappedComponent: T): AnimatedComponent<T>;
+} & AnimatedPrimitives;
+/** The type of an `animated()` component */
+export declare type AnimatedComponent<T extends ElementType> = ForwardRefExoticComponent<AnimatedProps<Merge<ComponentPropsWithRef<T>, {
+    style?: StyleProps;
+}>> & FluidProps<{
+    scrollTop?: number;
+    scrollLeft?: number;
+}>>;
+/** The props of an `animated()` component */
+export declare type AnimatedProps<Props extends object> = {
+    [P in keyof Props]: P extends 'ref' | 'key' ? Props[P] : AnimatedProp<Props[P]>;
+};
+declare type StyleProps = Merge<CSSProperties, TransformProps>;
+declare type StylePropKeys = keyof StyleProps;
+declare type ValidStyleProps<T extends object> = {
+    [P in keyof T & StylePropKeys]: T[P] extends StyleProps[P] ? P : never;
+}[keyof T & StylePropKeys];
+declare type AnimatedProp<T> = [T, T] extends [infer T, infer DT] ? [DT] extends [never] ? never : DT extends void ? undefined : DT extends string | number ? DT | AnimatedLeaf<T> : DT extends object ? [ValidStyleProps<DT>] extends [never] ? DT extends ReadonlyArray<any> ? AnimatedStyles<DT> : DT : AnimatedStyle<T> : DT | AnimatedLeaf<T> : never;
+declare type AnimatedStyles<T extends ReadonlyArray<any>> = {
+    [P in keyof T]: [T[P]] extends [infer DT] ? DT extends object ? [ValidStyleProps<DT>] extends [never] ? DT extends ReadonlyArray<any> ? AnimatedStyles<DT> : DT : {
+        [P in keyof DT]: AnimatedProp<DT[P]>;
+    } : DT : never;
+};
+declare type AnimatedStyle<T> = [T, T] extends [infer T, infer DT] ? DT extends void ? undefined : [DT] extends [never] ? never : DT extends string | number ? DT | AnimatedLeaf<T> : DT extends object ? AnimatedObject<DT> : DT | AnimatedLeaf<T> : never;
+declare type AnimatedObject<T extends object> = {
+    [P in keyof T]: AnimatedStyle<T[P]>;
+} | (T extends ReadonlyArray<number | string> ? FluidValue<Readonly<T>> : never);
+declare type AnimatedLeaf<T> = NonObject<T> extends infer U ? [U] extends [never] ? never : FluidValue<U> : never;
+declare type NonObject<T> = Extract<T, string | number | ReadonlyArray<string | number>> | Exclude<T, object | void>;
+declare type Angle = number | string;
+declare type Length = number | string;
+declare type TransformProps = {
+    transform?: string;
+    x?: Length;
+    y?: Length;
+    z?: Length;
+    translate?: Length | readonly [Length, Length];
+    translateX?: Length;
+    translateY?: Length;
+    translateZ?: Length;
+    translate3d?: readonly [Length, Length, Length];
+    rotate?: Angle;
+    rotateX?: Angle;
+    rotateY?: Angle;
+    rotateZ?: Angle;
+    rotate3d?: readonly [number, number, number, Angle];
+    scale?: number | readonly [number, number] | string;
+    scaleX?: number;
+    scaleY?: number;
+    scaleZ?: number;
+    scale3d?: readonly [number, number, number];
+    skew?: Angle | readonly [Angle, Angle];
+    skewX?: Angle;
+    skewY?: Angle;
+    matrix?: readonly [number, number, number, number, number, number];
+    matrix3d?: readonly [
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number
+    ];
+};

dist/declarations/src/AnimatedStyle.d.ts

+import { AnimatedObject } from '@react-spring/animated';
+import { Lookup } from '@react-spring/types';
+/**
+ * This AnimatedStyle will simplify animated components transforms by
+ * interpolating all transform function passed as keys in the style object
+ * including shortcuts such as x, y and z for translateX/Y/Z
+ */
+export declare class AnimatedStyle extends AnimatedObject {
+    constructor({ x, y, z, ...style }: Lookup);
+}

dist/declarations/src/applyAnimatedValues.d.ts

+import { Lookup } from '@react-spring/types';
+declare type Instance = HTMLDivElement & {
+    style?: Lookup;
+};
+export declare function applyAnimatedValues(instance: Instance, props: Lookup): false | undefined;
+export {};

dist/declarations/src/index.d.ts

+import { WithAnimated } from './animated';
+export declare const animated: WithAnimated;
+export { animated as a };
+export * from './animated';
+export * from '@react-spring/core';

dist/declarations/src/primitives.d.ts

+export declare type Primitives = keyof JSX.IntrinsicElements;
+export declare const primitives: Primitives[];

dist/react-spring-web.cjs.d.ts

+export * from "./declarations/src/index";

dist/react-spring-web.cjs.dev.js

+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@react-spring/core');
+var reactDom = require('react-dom');
+var shared = require('@react-spring/shared');
+var animated$1 = require('@react-spring/animated');
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+const isCustomPropRE = /^--/;
+
+function dangerousStyleValue(name, value) {
+  if (value == null || typeof value === 'boolean' || value === '') return '';
+  if (typeof value === 'number' && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) return value + 'px';
+  return ('' + value).trim();
+}
+
+const attributeCache = {};
+function applyAnimatedValues(instance, props) {
+  if (!instance.nodeType || !instance.setAttribute) {
+    return false;
+  }
+
+  const isFilterElement = instance.nodeName === 'filter' || instance.parentNode && instance.parentNode.nodeName === 'filter';
+
+  const _ref = props,
+        {
+    style,
+    children,
+    scrollTop,
+    scrollLeft
+  } = _ref,
+        attributes = _objectWithoutPropertiesLoose(_ref, ["style", "children", "scrollTop", "scrollLeft"]);
+
+  const values = Object.values(attributes);
+  const names = Object.keys(attributes).map(name => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, n => '-' + n.toLowerCase())));
+
+  if (children !== void 0) {
+    instance.textContent = children;
+  }
+
+  for (let name in style) {
+    if (style.hasOwnProperty(name)) {
+      const value = dangerousStyleValue(name, style[name]);
+      if (name === 'float') name = 'cssFloat';else if (isCustomPropRE.test(name)) {
+        instance.style.setProperty(name, value);
+      } else {
+        instance.style[name] = value;
+      }
+    }
+  }
+
+  names.forEach((name, i) => {
+    instance.setAttribute(name, values[i]);
+  });
+
+  if (scrollTop !== void 0) {
+    instance.scrollTop = scrollTop;
+  }
+
+  if (scrollLeft !== void 0) {
+    instance.scrollLeft = scrollLeft;
+  }
+}
+let isUnitlessNumber = {
+  animationIterationCount: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  columns: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowSpan: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnSpan: true,
+  gridColumnStart: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true
+};
+
+const prefixKey = (prefix, key) => prefix + key.charAt(0).toUpperCase() + key.substring(1);
+
+const prefixes = ['Webkit', 'Ms', 'Moz', 'O'];
+isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
+  prefixes.forEach(prefix => acc[prefixKey(prefix, prop)] = acc[prop]);
+  return acc;
+}, isUnitlessNumber);
+
+const domTransforms = /^(matrix|translate|scale|rotate|skew)/;
+const pxTransforms = /^(translate)/;
+const degTransforms = /^(rotate|skew)/;
+
+const addUnit = (value, unit) => shared.is.num(value) && value !== 0 ? value + unit : value;
+
+const isValueIdentity = (value, id) => shared.is.arr(value) ? value.every(v => isValueIdentity(v, id)) : shared.is.num(value) ? value === id : parseFloat(value) === id;
+
+class AnimatedStyle extends animated$1.AnimatedObject {
+  constructor(_ref) {
+    let {
+      x,
+      y,
+      z
+    } = _ref,
+        style = _objectWithoutPropertiesLoose(_ref, ["x", "y", "z"]);
+
+    const inputs = [];
+    const transforms = [];
+
+    if (x || y || z) {
+      inputs.push([x || 0, y || 0, z || 0]);
+      transforms.push(xyz => [`translate3d(${xyz.map(v => addUnit(v, 'px')).join(',')})`, isValueIdentity(xyz, 0)]);
+    }
+
+    shared.eachProp(style, (value, key) => {
+      if (key === 'transform') {
+        inputs.push([value || '']);
+        transforms.push(transform => [transform, transform === '']);
+      } else if (domTransforms.test(key)) {
+        delete style[key];
+        if (shared.is.und(value)) return;
+        const unit = pxTransforms.test(key) ? 'px' : degTransforms.test(key) ? 'deg' : '';
+        inputs.push(shared.toArray(value));
+        transforms.push(key === 'rotate3d' ? ([x, y, z, deg]) => [`rotate3d(${x},${y},${z},${addUnit(deg, unit)})`, isValueIdentity(deg, 0)] : input => [`${key}(${input.map(v => addUnit(v, unit)).join(',')})`, isValueIdentity(input, key.startsWith('scale') ? 1 : 0)]);
+      }
+    });
+
+    if (inputs.length) {
+      style.transform = new FluidTransform(inputs, transforms);
+    }
+
+    super(style);
+  }
+
+}
+
+class FluidTransform extends shared.FluidValue {
+  constructor(inputs, transforms) {
+    super();
+    this._value = null;
+    this.inputs = inputs;
+    this.transforms = transforms;
+  }
+
+  get() {
+    return this._value || (this._value = this._get());
+  }
+
+  _get() {
+    let transform = '';
+    let identity = true;
+    shared.each(this.inputs, (input, i) => {
+      const arg1 = shared.getFluidValue(input[0]);
+      const [t, id] = this.transforms[i](shared.is.arr(arg1) ? arg1 : input.map(shared.getFluidValue));
+      transform += ' ' + t;
+      identity = identity && id;
+    });
+    return identity ? 'none' : transform;
+  }
+
+  observerAdded(count) {
+    if (count == 1) shared.each(this.inputs, input => shared.each(input, value => shared.hasFluidValue(value) && shared.addFluidObserver(value, this)));
+  }
+
+  observerRemoved(count) {
+    if (count == 0) shared.each(this.inputs, input => shared.each(input, value => shared.hasFluidValue(value) && shared.removeFluidObserver(value, this)));
+  }
+
+  eventObserved(event) {
+    if (event.type == 'change') {
+      this._value = null;
+    }
+
+    shared.callFluidObservers(this, event);
+  }
+
+}
+
+const primitives = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', 'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
+
+core.Globals.assign({
+  batchedUpdates: reactDom.unstable_batchedUpdates,
+  createStringInterpolator: shared.createStringInterpolator,
+  colors: shared.colors
+});
+const host = animated$1.createHost(primitives, {
+  applyAnimatedValues,
+  createAnimatedStyle: style => new AnimatedStyle(style),
+  getComponentProps: (_ref) => {
+    let props = _objectWithoutPropertiesLoose(_ref, ["scrollTop", "scrollLeft"]);
+
+    return props;
+  }
+});
+const animated = host.animated;
+
+exports.a = animated;
+exports.animated = animated;
+Object.keys(core).forEach(function (k) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () {
+      return core[k];
+    }
+  });
+});

dist/react-spring-web.cjs.js

+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./react-spring-web.cjs.prod.js");
+} else {
+  module.exports = require("./react-spring-web.cjs.dev.js");
+}

dist/react-spring-web.cjs.prod.js

+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@react-spring/core');
+var reactDom = require('react-dom');
+var shared = require('@react-spring/shared');
+var animated$1 = require('@react-spring/animated');
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+const isCustomPropRE = /^--/;
+
+function dangerousStyleValue(name, value) {
+  if (value == null || typeof value === 'boolean' || value === '') return '';
+  if (typeof value === 'number' && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) return value + 'px';
+  return ('' + value).trim();
+}
+
+const attributeCache = {};
+function applyAnimatedValues(instance, props) {
+  if (!instance.nodeType || !instance.setAttribute) {
+    return false;
+  }
+
+  const isFilterElement = instance.nodeName === 'filter' || instance.parentNode && instance.parentNode.nodeName === 'filter';
+
+  const _ref = props,
+        {
+    style,
+    children,
+    scrollTop,
+    scrollLeft
+  } = _ref,
+        attributes = _objectWithoutPropertiesLoose(_ref, ["style", "children", "scrollTop", "scrollLeft"]);
+
+  const values = Object.values(attributes);
+  const names = Object.keys(attributes).map(name => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, n => '-' + n.toLowerCase())));
+
+  if (children !== void 0) {
+    instance.textContent = children;
+  }
+
+  for (let name in style) {
+    if (style.hasOwnProperty(name)) {
+      const value = dangerousStyleValue(name, style[name]);
+      if (name === 'float') name = 'cssFloat';else if (isCustomPropRE.test(name)) {
+        instance.style.setProperty(name, value);
+      } else {
+        instance.style[name] = value;
+      }
+    }
+  }
+
+  names.forEach((name, i) => {
+    instance.setAttribute(name, values[i]);
+  });
+
+  if (scrollTop !== void 0) {
+    instance.scrollTop = scrollTop;
+  }
+
+  if (scrollLeft !== void 0) {
+    instance.scrollLeft = scrollLeft;
+  }
+}
+let isUnitlessNumber = {
+  animationIterationCount: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  columns: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowSpan: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnSpan: true,
+  gridColumnStart: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true
+};
+
+const prefixKey = (prefix, key) => prefix + key.charAt(0).toUpperCase() + key.substring(1);
+
+const prefixes = ['Webkit', 'Ms', 'Moz', 'O'];
+isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
+  prefixes.forEach(prefix => acc[prefixKey(prefix, prop)] = acc[prop]);
+  return acc;
+}, isUnitlessNumber);
+
+const domTransforms = /^(matrix|translate|scale|rotate|skew)/;
+const pxTransforms = /^(translate)/;
+const degTransforms = /^(rotate|skew)/;
+
+const addUnit = (value, unit) => shared.is.num(value) && value !== 0 ? value + unit : value;
+
+const isValueIdentity = (value, id) => shared.is.arr(value) ? value.every(v => isValueIdentity(v, id)) : shared.is.num(value) ? value === id : parseFloat(value) === id;
+
+class AnimatedStyle extends animated$1.AnimatedObject {
+  constructor(_ref) {
+    let {
+      x,
+      y,
+      z
+    } = _ref,
+        style = _objectWithoutPropertiesLoose(_ref, ["x", "y", "z"]);
+
+    const inputs = [];
+    const transforms = [];
+
+    if (x || y || z) {
+      inputs.push([x || 0, y || 0, z || 0]);
+      transforms.push(xyz => [`translate3d(${xyz.map(v => addUnit(v, 'px')).join(',')})`, isValueIdentity(xyz, 0)]);
+    }
+
+    shared.eachProp(style, (value, key) => {
+      if (key === 'transform') {
+        inputs.push([value || '']);
+        transforms.push(transform => [transform, transform === '']);
+      } else if (domTransforms.test(key)) {
+        delete style[key];
+        if (shared.is.und(value)) return;
+        const unit = pxTransforms.test(key) ? 'px' : degTransforms.test(key) ? 'deg' : '';
+        inputs.push(shared.toArray(value));
+        transforms.push(key === 'rotate3d' ? ([x, y, z, deg]) => [`rotate3d(${x},${y},${z},${addUnit(deg, unit)})`, isValueIdentity(deg, 0)] : input => [`${key}(${input.map(v => addUnit(v, unit)).join(',')})`, isValueIdentity(input, key.startsWith('scale') ? 1 : 0)]);
+      }
+    });
+
+    if (inputs.length) {
+      style.transform = new FluidTransform(inputs, transforms);
+    }
+
+    super(style);
+  }
+
+}
+
+class FluidTransform extends shared.FluidValue {
+  constructor(inputs, transforms) {
+    super();
+    this._value = null;
+    this.inputs = inputs;
+    this.transforms = transforms;
+  }
+
+  get() {
+    return this._value || (this._value = this._get());
+  }
+
+  _get() {
+    let transform = '';
+    let identity = true;
+    shared.each(this.inputs, (input, i) => {
+      const arg1 = shared.getFluidValue(input[0]);
+      const [t, id] = this.transforms[i](shared.is.arr(arg1) ? arg1 : input.map(shared.getFluidValue));
+      transform += ' ' + t;
+      identity = identity && id;
+    });
+    return identity ? 'none' : transform;
+  }
+
+  observerAdded(count) {
+    if (count == 1) shared.each(this.inputs, input => shared.each(input, value => shared.hasFluidValue(value) && shared.addFluidObserver(value, this)));
+  }
+
+  observerRemoved(count) {
+    if (count == 0) shared.each(this.inputs, input => shared.each(input, value => shared.hasFluidValue(value) && shared.removeFluidObserver(value, this)));
+  }
+
+  eventObserved(event) {
+    if (event.type == 'change') {
+      this._value = null;
+    }
+
+    shared.callFluidObservers(this, event);
+  }
+
+}
+
+const primitives = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', 'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
+
+core.Globals.assign({
+  batchedUpdates: reactDom.unstable_batchedUpdates,
+  createStringInterpolator: shared.createStringInterpolator,
+  colors: shared.colors
+});
+const host = animated$1.createHost(primitives, {
+  applyAnimatedValues,
+  createAnimatedStyle: style => new AnimatedStyle(style),
+  getComponentProps: (_ref) => {
+    let props = _objectWithoutPropertiesLoose(_ref, ["scrollTop", "scrollLeft"]);
+
+    return props;
+  }
+});
+const animated = host.animated;
+
+exports.a = animated;
+exports.animated = animated;
+Object.keys(core).forEach(function (k) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () {
+      return core[k];
+    }
+  });
+});

dist/react-spring-web.esm.js

+import { Globals } from '@react-spring/core';
+export * from '@react-spring/core';
+import { unstable_batchedUpdates } from 'react-dom';
+import { eachProp, is, toArray, FluidValue, each, getFluidValue, hasFluidValue, addFluidObserver, removeFluidObserver, callFluidObservers, createStringInterpolator, colors } from '@react-spring/shared';
+import { AnimatedObject, createHost } from '@react-spring/animated';
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+const isCustomPropRE = /^--/;
+
+function dangerousStyleValue(name, value) {
+  if (value == null || typeof value === 'boolean' || value === '') return '';
+  if (typeof value === 'number' && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) return value + 'px';
+  return ('' + value).trim();
+}
+
+const attributeCache = {};
+function applyAnimatedValues(instance, props) {
+  if (!instance.nodeType || !instance.setAttribute) {
+    return false;
+  }
+
+  const isFilterElement = instance.nodeName === 'filter' || instance.parentNode && instance.parentNode.nodeName === 'filter';
+
+  const _ref = props,
+        {
+    style,
+    children,
+    scrollTop,
+    scrollLeft
+  } = _ref,
+        attributes = _objectWithoutPropertiesLoose(_ref, ["style", "children", "scrollTop", "scrollLeft"]);
+
+  const values = Object.values(attributes);
+  const names = Object.keys(attributes).map(name => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, n => '-' + n.toLowerCase())));
+
+  if (children !== void 0) {
+    instance.textContent = children;
+  }
+
+  for (let name in style) {
+    if (style.hasOwnProperty(name)) {
+      const value = dangerousStyleValue(name, style[name]);
+      if (name === 'float') name = 'cssFloat';else if (isCustomPropRE.test(name)) {
+        instance.style.setProperty(name, value);
+      } else {
+        instance.style[name] = value;
+      }
+    }
+  }
+
+  names.forEach((name, i) => {
+    instance.setAttribute(name, values[i]);
+  });
+
+  if (scrollTop !== void 0) {
+    instance.scrollTop = scrollTop;
+  }
+
+  if (scrollLeft !== void 0) {
+    instance.scrollLeft = scrollLeft;
+  }
+}
+let isUnitlessNumber = {
+  animationIterationCount: true,
+  borderImageOutset: true,
+  borderImageSlice: true,
+  borderImageWidth: true,
+  boxFlex: true,
+  boxFlexGroup: true,
+  boxOrdinalGroup: true,
+  columnCount: true,
+  columns: true,
+  flex: true,
+  flexGrow: true,
+  flexPositive: true,
+  flexShrink: true,
+  flexNegative: true,
+  flexOrder: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowSpan: true,
+  gridRowStart: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnSpan: true,
+  gridColumnStart: true,
+  fontWeight: true,
+  lineClamp: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  tabSize: true,
+  widows: true,
+  zIndex: true,
+  zoom: true,
+  fillOpacity: true,
+  floodOpacity: true,
+  stopOpacity: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  strokeMiterlimit: true,
+  strokeOpacity: true,
+  strokeWidth: true
+};
+
+const prefixKey = (prefix, key) => prefix + key.charAt(0).toUpperCase() + key.substring(1);
+
+const prefixes = ['Webkit', 'Ms', 'Moz', 'O'];
+isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
+  prefixes.forEach(prefix => acc[prefixKey(prefix, prop)] = acc[prop]);
+  return acc;
+}, isUnitlessNumber);
+
+const domTransforms = /^(matrix|translate|scale|rotate|skew)/;
+const pxTransforms = /^(translate)/;
+const degTransforms = /^(rotate|skew)/;
+
+const addUnit = (value, unit) => is.num(value) && value !== 0 ? value + unit : value;
+
+const isValueIdentity = (value, id) => is.arr(value) ? value.every(v => isValueIdentity(v, id)) : is.num(value) ? value === id : parseFloat(value) === id;
+
+class AnimatedStyle extends AnimatedObject {
+  constructor(_ref) {
+    let {
+      x,
+      y,
+      z
+    } = _ref,
+        style = _objectWithoutPropertiesLoose(_ref, ["x", "y", "z"]);
+
+    const inputs = [];
+    const transforms = [];
+
+    if (x || y || z) {
+      inputs.push([x || 0, y || 0, z || 0]);
+      transforms.push(xyz => [`translate3d(${xyz.map(v => addUnit(v, 'px')).join(',')})`, isValueIdentity(xyz, 0)]);
+    }
+
+    eachProp(style, (value, key) => {
+      if (key === 'transform') {
+        inputs.push([value || '']);
+        transforms.push(transform => [transform, transform === '']);
+      } else if (domTransforms.test(key)) {
+        delete style[key];
+        if (is.und(value)) return;
+        const unit = pxTransforms.test(key) ? 'px' : degTransforms.test(key) ? 'deg' : '';
+        inputs.push(toArray(value));
+        transforms.push(key === 'rotate3d' ? ([x, y, z, deg]) => [`rotate3d(${x},${y},${z},${addUnit(deg, unit)})`, isValueIdentity(deg, 0)] : input => [`${key}(${input.map(v => addUnit(v, unit)).join(',')})`, isValueIdentity(input, key.startsWith('scale') ? 1 : 0)]);
+      }
+    });
+
+    if (inputs.length) {
+      style.transform = new FluidTransform(inputs, transforms);
+    }
+
+    super(style);
+  }
+
+}
+
+class FluidTransform extends FluidValue {
+  constructor(inputs, transforms) {
+    super();
+    this._value = null;
+    this.inputs = inputs;
+    this.transforms = transforms;
+  }
+
+  get() {
+    return this._value || (this._value = this._get());
+  }
+
+  _get() {
+    let transform = '';
+    let identity = true;
+    each(this.inputs, (input, i) => {
+      const arg1 = getFluidValue(input[0]);
+      const [t, id] = this.transforms[i](is.arr(arg1) ? arg1 : input.map(getFluidValue));
+      transform += ' ' + t;
+      identity = identity && id;
+    });
+    return identity ? 'none' : transform;
+  }
+
+  observerAdded(count) {
+    if (count == 1) each(this.inputs, input => each(input, value => hasFluidValue(value) && addFluidObserver(value, this)));
+  }
+
+  observerRemoved(count) {
+    if (count == 0) each(this.inputs, input => each(input, value => hasFluidValue(value) && removeFluidObserver(value, this)));
+  }
+
+  eventObserved(event) {
+    if (event.type == 'change') {
+      this._value = null;
+    }
+
+    callFluidObservers(this, event);
+  }
+
+}
+
+const primitives = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', 'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
+
+Globals.assign({
+  batchedUpdates: unstable_batchedUpdates,
+  createStringInterpolator,
+  colors
+});
+const host = createHost(primitives, {
+  applyAnimatedValues,
+  createAnimatedStyle: style => new AnimatedStyle(style),
+  getComponentProps: (_ref) => {
+    let props = _objectWithoutPropertiesLoose(_ref, ["scrollTop", "scrollLeft"]);
+
+    return props;
+  }
+});
+const animated = host.animated;
+
+export { animated as a, animated };

LICENSE

 MIT License
 
-Copyright (c) 2018-present Paul Henschel, react-spring, all contributors
+Copyright (c) 2013-present, Facebook, Inc.
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

 {
   "name": "@react-spring/web",
-  "version": "9.1.2",
-  "description": "Cross-platform animation engine for React",
+  "version": "9.2.0-beta.0",
+  "main": "dist/react-spring-web.cjs.js",
+  "module": "dist/react-spring-web.esm.js",
+  "files": [
+    "dist/*",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": "pmndrs/react-spring",
+  "homepage": "https://github.com/pmndrs/react-spring#readme",
   "keywords": [
@@ -16,27 +24,17 @@ "animated",
   ],
-  "homepage": "https://github.com/pmndrs/react-spring/tree/v9/targets/web#readme",
-  "repository": "pmndrs/react-spring",
   "license": "MIT",
   "author": "Paul Henschel",
-  "main": "index.cjs.js",
-  "module": "index.js",
-  "types": "index.d.ts",
+  "maintainers": [
+    "Josh Ellis (https://github.com/joshuaellis)"
+  ],
   "dependencies": {
-    "@react-spring/animated": "~9.1.2",
-    "@react-spring/core": "~9.1.2",
-    "@react-spring/shared": "~9.1.2",
-    "@react-spring/types": "~9.1.2"
+    "@react-spring/animated": "~9.2.0-beta.0",
+    "@react-spring/core": "~9.2.0-beta.0",
+    "@react-spring/shared": "~9.2.0-beta.0",
+    "@react-spring/types": "~9.2.0-beta.0"
   },
-  "devDependencies": {
-    "typescript": "^4.2.3"
-  },
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "jsdelivr": "dist/index.umd.js",
-  "maintainers": []
+  }
 }

index.cjs.js

-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@react-spring/core');
-var reactDom = require('react-dom');
-var shared = require('@react-spring/shared');
-var animated$1 = require('@react-spring/animated');
-
-const isCustomPropRE = /^--/;
-function dangerousStyleValue(name, value) {
-  if (value == null || typeof value === "boolean" || value === "")
-    return "";
-  if (typeof value === "number" && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]))
-    return value + "px";
-  return ("" + value).trim();
-}
-const attributeCache = {};
-function applyAnimatedValues(instance, props) {
-  if (!instance.nodeType || !instance.setAttribute) {
-    return false;
-  }
-  const isFilterElement = instance.nodeName === "filter" || instance.parentNode && instance.parentNode.nodeName === "filter";
-  const {style, children, scrollTop, scrollLeft, ...attributes} = props;
-  const values = Object.values(attributes);
-  const names = Object.keys(attributes).map((name) => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, (n) => "-" + n.toLowerCase())));
-  if (children !== void 0) {
-    instance.textContent = children;
-  }
-  for (let name in style) {
-    if (style.hasOwnProperty(name)) {
-      const value = dangerousStyleValue(name, style[name]);
-      if (name === "float")
-        name = "cssFloat";
-      else if (isCustomPropRE.test(name)) {
-        instance.style.setProperty(name, value);
-      } else {
-        instance.style[name] = value;
-      }
-    }
-  }
-  names.forEach((name, i) => {
-    instance.setAttribute(name, values[i]);
-  });
-  if (scrollTop !== void 0) {
-    instance.scrollTop = scrollTop;
-  }
-  if (scrollLeft !== void 0) {
-    instance.scrollLeft = scrollLeft;
-  }
-}
-let isUnitlessNumber = {
-  animationIterationCount: true,
-  borderImageOutset: true,
-  borderImageSlice: true,
-  borderImageWidth: true,
-  boxFlex: true,
-  boxFlexGroup: true,
-  boxOrdinalGroup: true,
-  columnCount: true,
-  columns: true,
-  flex: true,
-  flexGrow: true,
-  flexPositive: true,
-  flexShrink: true,
-  flexNegative: true,
-  flexOrder: true,
-  gridRow: true,
-  gridRowEnd: true,
-  gridRowSpan: true,
-  gridRowStart: true,
-  gridColumn: true,
-  gridColumnEnd: true,
-  gridColumnSpan: true,
-  gridColumnStart: true,
-  fontWeight: true,
-  lineClamp: true,
-  lineHeight: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  tabSize: true,
-  widows: true,
-  zIndex: true,
-  zoom: true,
-  fillOpacity: true,
-  floodOpacity: true,
-  stopOpacity: true,
-  strokeDasharray: true,
-  strokeDashoffset: true,
-  strokeMiterlimit: true,
-  strokeOpacity: true,
-  strokeWidth: true
-};
-const prefixKey = (prefix, key) => prefix + key.charAt(0).toUpperCase() + key.substring(1);
-const prefixes = ["Webkit", "Ms", "Moz", "O"];
-isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
-  prefixes.forEach((prefix) => acc[prefixKey(prefix, prop)] = acc[prop]);
-  return acc;
-}, isUnitlessNumber);
-
-const domTransforms = /^(matrix|translate|scale|rotate|skew)/;
-const pxTransforms = /^(translate)/;
-const degTransforms = /^(rotate|skew)/;
-const addUnit = (value, unit) => shared.is.num(value) && value !== 0 ? value + unit : value;
-const isValueIdentity = (value, id) => shared.is.arr(value) ? value.every((v) => isValueIdentity(v, id)) : shared.is.num(value) ? value === id : parseFloat(value) === id;
-class AnimatedStyle extends animated$1.AnimatedObject {
-  constructor({x, y, z, ...style}) {
-    const inputs = [];
-    const transforms = [];
-    if (x || y || z) {
-      inputs.push([x || 0, y || 0, z || 0]);
-      transforms.push((xyz) => [
-        `translate3d(${xyz.map((v) => addUnit(v, "px")).join(",")})`,
-        isValueIdentity(xyz, 0)
-      ]);
-    }
-    shared.eachProp(style, (value, key) => {
-      if (key === "transform") {
-        inputs.push([value || ""]);
-        transforms.push((transform) => [transform, transform === ""]);
-      } else if (domTransforms.test(key)) {
-        delete style[key];
-        if (shared.is.und(value))
-          return;
-        const unit = pxTransforms.test(key) ? "px" : degTransforms.test(key) ? "deg" : "";
-        inputs.push(shared.toArray(value));
-        transforms.push(key === "rotate3d" ? ([x2, y2, z2, deg]) => [
-          `rotate3d(${x2},${y2},${z2},${addUnit(deg, unit)})`,
-          isValueIdentity(deg, 0)
-        ] : (input) => [
-          `${key}(${input.map((v) => addUnit(v, unit)).join(",")})`,
-          isValueIdentity(input, key.startsWith("scale") ? 1 : 0)
-        ]);
-      }
-    });
-    if (inputs.length) {
-      style.transform = new FluidTransform(inputs, transforms);
-    }
-    super(style);
-  }
-}
-class FluidTransform extends shared.FluidValue {
-  constructor(inputs, transforms) {
-    super();
-    this.inputs = inputs;
-    this.transforms = transforms;
-    this._value = null;
-  }
-  get() {
-    return this._value || (this._value = this._get());
-  }
-  _get() {
-    let transform = "";
-    let identity = true;
-    shared.each(this.inputs, (input, i) => {
-      const arg1 = shared.getFluidValue(input[0]);
-      const [t, id] = this.transforms[i](shared.is.arr(arg1) ? arg1 : input.map(shared.getFluidValue));
-      transform += " " + t;
-      identity = identity && id;
-    });
-    return identity ? "none" : transform;
-  }
-  observerAdded(count) {
-    if (count == 1)
-      shared.each(this.inputs, (input) => shared.each(input, (value) => shared.hasFluidValue(value) && shared.addFluidObserver(value, this)));
-  }
-  observerRemoved(count) {
-    if (count == 0)
-      shared.each(this.inputs, (input) => shared.each(input, (value) => shared.hasFluidValue(value) && shared.removeFluidObserver(value, this)));
-  }
-  eventObserved(event) {
-    if (event.type == "change") {
-      this._value = null;
-    }
-    shared.callFluidObservers(this, event);
-  }
-}
-
-const primitives = [
-  "a",
-  "abbr",
-  "address",
-  "area",
-  "article",
-  "aside",
-  "audio",
-  "b",
-  "base",
-  "bdi",
-  "bdo",
-  "big",
-  "blockquote",
-  "body",
-  "br",
-  "button",
-  "canvas",
-  "caption",
-  "cite",
-  "code",
-  "col",
-  "colgroup",
-  "data",
-  "datalist",
-  "dd",
-  "del",
-  "details",
-  "dfn",
-  "dialog",
-  "div",
-  "dl",
-  "dt",
-  "em",
-  "embed",
-  "fieldset",
-  "figcaption",
-  "figure",
-  "footer",
-  "form",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "head",
-  "header",
-  "hgroup",
-  "hr",
-  "html",
-  "i",
-  "iframe",
-  "img",
-  "input",
-  "ins",
-  "kbd",
-  "keygen",
-  "label",
-  "legend",
-  "li",
-  "link",
-  "main",
-  "map",
-  "mark",
-  "menu",
-  "menuitem",
-  "meta",
-  "meter",
-  "nav",
-  "noscript",
-  "object",
-  "ol",
-  "optgroup",
-  "option",
-  "output",
-  "p",
-  "param",
-  "picture",
-  "pre",
-  "progress",
-  "q",
-  "rp",
-  "rt",
-  "ruby",
-  "s",
-  "samp",
-  "script",
-  "section",
-  "select",
-  "small",
-  "source",
-  "span",
-  "strong",
-  "style",
-  "sub",
-  "summary",
-  "sup",
-  "table",
-  "tbody",
-  "td",
-  "textarea",
-  "tfoot",
-  "th",
-  "thead",
-  "time",
-  "title",
-  "tr",
-  "track",
-  "u",
-  "ul",
-  "var",
-  "video",
-  "wbr",
-  "circle",
-  "clipPath",
-  "defs",
-  "ellipse",
-  "foreignObject",
-  "g",
-  "image",
-  "line",
-  "linearGradient",
-  "mask",
-  "path",
-  "pattern",
-  "polygon",
-  "polyline",
-  "radialGradient",
-  "rect",
-  "stop",
-  "svg",
-  "text",
-  "tspan"
-];
-
-core.Globals.assign({
-  batchedUpdates: reactDom.unstable_batchedUpdates,
-  createStringInterpolator: shared.createStringInterpolator,
-  colors: shared.colors
-});
-const host = animated$1.createHost(primitives, {
-  applyAnimatedValues: applyAnimatedValues,
-  createAnimatedStyle: (style) => new AnimatedStyle(style),
-  getComponentProps: ({scrollTop, scrollLeft, ...props}) => props
-});
-const animated = host.animated;
-
-Object.keys(core).forEach(function (k) {
-  if (k !== 'default') Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: function () {
-      return core[k];
-    }
-  });
-});
-exports.a = animated;
-exports.animated = animated;
-//# sourceMappingURL=index.cjs.js.map

index.cjs.js.map

-{"version":3,"file":"index.cjs.js","sources":["src/applyAnimatedValues.ts","src/AnimatedStyle.ts","src/primitives.ts","src/index.ts"],"sourcesContent":null,"names":["is","AnimatedObject","toArray","FluidValue","getFluidValue","each","hasFluidValue","addFluidObserver","removeFluidObserver","Globals","unstable_batchedUpdates","createStringInterpolator","colors","createHost","primitives2","AnimatedStyle2"],"mappings":"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"}

index.d.ts

-/// <reference types="react" />
-import { ElementType, ForwardRefExoticComponent, ComponentPropsWithRef, CSSProperties } from 'react';
-import { FluidProps, FluidValue } from '@react-spring/shared';
-import { Merge } from '@react-spring/types';
-import * as csstype from 'csstype';
-export { csstype as CSS };
-export * from '@react-spring/core';
-
-
-declare type Primitives = keyof JSX.IntrinsicElements;
-
-declare type AnimatedPrimitives = {
-    [Tag in Primitives]: AnimatedComponent<Tag>;
-};
-/** The type of the `animated()` function */
-declare type WithAnimated = {
-    <T extends ElementType>(wrappedComponent: T): AnimatedComponent<T>;
-} & AnimatedPrimitives;
-/** The type of an `animated()` component */
-declare type AnimatedComponent<T extends ElementType> = ForwardRefExoticComponent<AnimatedProps<Merge<ComponentPropsWithRef<T>, {
-    style?: StyleProps;
-}>> & FluidProps<{
-    scrollTop?: number;
-    scrollLeft?: number;
-}>>;
-/** The props of an `animated()` component */
-declare type AnimatedProps<Props extends object> = {
-    [P in keyof Props]: P extends 'ref' | 'key' ? Props[P] : AnimatedProp<Props[P]>;
-};
-declare type StyleProps = Merge<CSSProperties, TransformProps>;
-declare type StylePropKeys = keyof StyleProps;
-declare type ValidStyleProps<T extends object> = {
-    [P in keyof T & StylePropKeys]: T[P] extends StyleProps[P] ? P : never;
-}[keyof T & StylePropKeys];
-declare type AnimatedProp<T> = [T, T] extends [infer T, infer DT] ? [DT] extends [never] ? never : DT extends void ? undefined : DT extends string | number ? DT | AnimatedLeaf<T> : DT extends object ? [ValidStyleProps<DT>] extends [never] ? DT extends ReadonlyArray<any> ? AnimatedStyles<DT> : DT : AnimatedStyle<T> : DT | AnimatedLeaf<T> : never;
-declare type AnimatedStyles<T extends ReadonlyArray<any>> = {
-    [P in keyof T]: [T[P]] extends [infer DT] ? DT extends object ? [ValidStyleProps<DT>] extends [never] ? DT extends ReadonlyArray<any> ? AnimatedStyles<DT> : DT : {
-        [P in keyof DT]: AnimatedProp<DT[P]>;
-    } : DT : never;
-};
-declare type AnimatedStyle<T> = [T, T] extends [infer T, infer DT] ? DT extends void ? undefined : [DT] extends [never] ? never : DT extends string | number ? DT | AnimatedLeaf<T> : DT extends object ? AnimatedObject<DT> : DT | AnimatedLeaf<T> : never;
-declare type AnimatedObject<T extends object> = {
-    [P in keyof T]: AnimatedStyle<T[P]>;
-} | (T extends ReadonlyArray<number | string> ? FluidValue<Readonly<T>> : never);
-declare type AnimatedLeaf<T> = NonObject<T> extends infer U ? [U] extends [never] ? never : FluidValue<U> : never;
-declare type NonObject<T> = Extract<T, string | number | ReadonlyArray<string | number>> | Exclude<T, object | void>;
-declare type Angle = number | string;
-declare type Length = number | string;
-declare type TransformProps = {
-    transform?: string;
-    x?: Length;
-    y?: Length;
-    z?: Length;
-    translate?: Length | readonly [Length, Length];
-    translateX?: Length;
-    translateY?: Length;
-    translateZ?: Length;
-    translate3d?: readonly [Length, Length, Length];
-    rotate?: Angle;
-    rotateX?: Angle;
-    rotateY?: Angle;
-    rotateZ?: Angle;
-    rotate3d?: readonly [number, number, number, Angle];
-    scale?: number | readonly [number, number] | string;
-    scaleX?: number;
-    scaleY?: number;
-    scaleZ?: number;
-    scale3d?: readonly [number, number, number];
-    skew?: Angle | readonly [Angle, Angle];
-    skewX?: Angle;
-    skewY?: Angle;
-    matrix?: readonly [number, number, number, number, number, number];
-    matrix3d?: readonly [
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number,
-        number
-    ];
-};
-
-declare const animated: WithAnimated;
-
-export { AnimatedComponent, AnimatedProps, WithAnimated, animated as a, animated };

index.js

-import { Globals } from '@react-spring/core';
-export * from '@react-spring/core';
-import { unstable_batchedUpdates } from 'react-dom';
-import { eachProp, is, toArray, FluidValue, each, getFluidValue, hasFluidValue, addFluidObserver, removeFluidObserver, callFluidObservers, createStringInterpolator, colors } from '@react-spring/shared';
-import { AnimatedObject, createHost } from '@react-spring/animated';
-
-const isCustomPropRE = /^--/;
-function dangerousStyleValue(name, value) {
-  if (value == null || typeof value === "boolean" || value === "")
-    return "";
-  if (typeof value === "number" && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]))
-    return value + "px";
-  return ("" + value).trim();
-}
-const attributeCache = {};
-function applyAnimatedValues(instance, props) {
-  if (!instance.nodeType || !instance.setAttribute) {
-    return false;
-  }
-  const isFilterElement = instance.nodeName === "filter" || instance.parentNode && instance.parentNode.nodeName === "filter";
-  const {style, children, scrollTop, scrollLeft, ...attributes} = props;
-  const values = Object.values(attributes);
-  const names = Object.keys(attributes).map((name) => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, (n) => "-" + n.toLowerCase())));
-  if (children !== void 0) {
-    instance.textContent = children;
-  }
-  for (let name in style) {
-    if (style.hasOwnProperty(name)) {
-      const value = dangerousStyleValue(name, style[name]);
-      if (name === "float")
-        name = "cssFloat";
-      else if (isCustomPropRE.test(name)) {
-        instance.style.setProperty(name, value);
-      } else {
-        instance.style[name] = value;
-      }
-    }
-  }
-  names.forEach((name, i) => {
-    instance.setAttribute(name, values[i]);
-  });
-  if (scrollTop !== void 0) {
-    instance.scrollTop = scrollTop;
-  }
-  if (scrollLeft !== void 0) {
-    instance.scrollLeft = scrollLeft;
-  }
-}
-let isUnitlessNumber = {
-  animationIterationCount: true,
-  borderImageOutset: true,
-  borderImageSlice: true,
-  borderImageWidth: true,
-  boxFlex: true,
-  boxFlexGroup: true,
-  boxOrdinalGroup: true,
-  columnCount: true,
-  columns: true,
-  flex: true,
-  flexGrow: true,
-  flexPositive: true,
-  flexShrink: true,
-  flexNegative: true,
-  flexOrder: true,
-  gridRow: true,
-  gridRowEnd: true,
-  gridRowSpan: true,
-  gridRowStart: true,
-  gridColumn: true,
-  gridColumnEnd: true,
-  gridColumnSpan: true,
-  gridColumnStart: true,
-  fontWeight: true,
-  lineClamp: true,
-  lineHeight: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  tabSize: true,
-  widows: true,
-  zIndex: true,
-  zoom: true,
-  fillOpacity: true,
-  floodOpacity: true,
-  stopOpacity: true,
-  strokeDasharray: true,
-  strokeDashoffset: true,
-  strokeMiterlimit: true,
-  strokeOpacity: true,
-  strokeWidth: true
-};
-const prefixKey = (prefix, key) => prefix + key.charAt(0).toUpperCase() + key.substring(1);
-const prefixes = ["Webkit", "Ms", "Moz", "O"];
-isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
-  prefixes.forEach((prefix) => acc[prefixKey(prefix, prop)] = acc[prop]);
-  return acc;
-}, isUnitlessNumber);
-
-const domTransforms = /^(matrix|translate|scale|rotate|skew)/;
-const pxTransforms = /^(translate)/;
-const degTransforms = /^(rotate|skew)/;
-const addUnit = (value, unit) => is.num(value) && value !== 0 ? value + unit : value;
-const isValueIdentity = (value, id) => is.arr(value) ? value.every((v) => isValueIdentity(v, id)) : is.num(value) ? value === id : parseFloat(value) === id;
-class AnimatedStyle extends AnimatedObject {
-  constructor({x, y, z, ...style}) {
-    const inputs = [];
-    const transforms = [];
-    if (x || y || z) {
-      inputs.push([x || 0, y || 0, z || 0]);
-      transforms.push((xyz) => [
-        `translate3d(${xyz.map((v) => addUnit(v, "px")).join(",")})`,
-        isValueIdentity(xyz, 0)
-      ]);
-    }
-    eachProp(style, (value, key) => {
-      if (key === "transform") {
-        inputs.push([value || ""]);
-        transforms.push((transform) => [transform, transform === ""]);
-      } else if (domTransforms.test(key)) {
-        delete style[key];
-        if (is.und(value))
-          return;
-        const unit = pxTransforms.test(key) ? "px" : degTransforms.test(key) ? "deg" : "";
-        inputs.push(toArray(value));
-        transforms.push(key === "rotate3d" ? ([x2, y2, z2, deg]) => [
-          `rotate3d(${x2},${y2},${z2},${addUnit(deg, unit)})`,
-          isValueIdentity(deg, 0)
-        ] : (input) => [
-          `${key}(${input.map((v) => addUnit(v, unit)).join(",")})`,
-          isValueIdentity(input, key.startsWith("scale") ? 1 : 0)
-        ]);
-      }
-    });
-    if (inputs.length) {
-      style.transform = new FluidTransform(inputs, transforms);
-    }
-    super(style);
-  }
-}
-class FluidTransform extends FluidValue {
-  constructor(inputs, transforms) {
-    super();
-    this.inputs = inputs;
-    this.transforms = transforms;
-    this._value = null;
-  }
-  get() {
-    return this._value || (this._value = this._get());
-  }
-  _get() {
-    let transform = "";
-    let identity = true;
-    each(this.inputs, (input, i) => {
-      const arg1 = getFluidValue(input[0]);
-      const [t, id] = this.transforms[i](is.arr(arg1) ? arg1 : input.map(getFluidValue));
-      transform += " " + t;
-      identity = identity && id;
-    });
-    return identity ? "none" : transform;
-  }
-  observerAdded(count) {
-    if (count == 1)
-      each(this.inputs, (input) => each(input, (value) => hasFluidValue(value) && addFluidObserver(value, this)));
-  }
-  observerRemoved(count) {
-    if (count == 0)
-      each(this.inputs, (input) => each(input, (value) => hasFluidValue(value) && removeFluidObserver(value, this)));
-  }
-  eventObserved(event) {
-    if (event.type == "change") {
-      this._value = null;
-    }
-    callFluidObservers(this, event);
-  }
-}
-
-const primitives = [
-  "a",
-  "abbr",
-  "address",
-  "area",
-  "article",
-  "aside",
-  "audio",
-  "b",
-  "base",
-  "bdi",
-  "bdo",
-  "big",
-  "blockquote",
-  "body",
-  "br",
-  "button",
-  "canvas",
-  "caption",
-  "cite",
-  "code",
-  "col",
-  "colgroup",
-  "data",
-  "datalist",
-  "dd",
-  "del",
-  "details",
-  "dfn",
-  "dialog",
-  "div",
-  "dl",
-  "dt",
-  "em",
-  "embed",
-  "fieldset",
-  "figcaption",
-  "figure",
-  "footer",
-  "form",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "head",
-  "header",
-  "hgroup",
-  "hr",
-  "html",
-  "i",
-  "iframe",
-  "img",
-  "input",
-  "ins",
-  "kbd",
-  "keygen",
-  "label",
-  "legend",
-  "li",
-  "link",
-  "main",
-  "map",
-  "mark",
-  "menu",
-  "menuitem",
-  "meta",
-  "meter",
-  "nav",
-  "noscript",
-  "object",
-  "ol",
-  "optgroup",
-  "option",
-  "output",
-  "p",
-  "param",
-  "picture",
-  "pre",
-  "progress",
-  "q",
-  "rp",
-  "rt",
-  "ruby",
-  "s",
-  "samp",
-  "script",
-  "section",
-  "select",
-  "small",
-  "source",
-  "span",
-  "strong",
-  "style",
-  "sub",
-  "summary",
-  "sup",
-  "table",
-  "tbody",
-  "td",
-  "textarea",
-  "tfoot",
-  "th",
-  "thead",
-  "time",
-  "title",
-  "tr",
-  "track",
-  "u",
-  "ul",
-  "var",
-  "video",
-  "wbr",
-  "circle",
-  "clipPath",
-  "defs",
-  "ellipse",
-  "foreignObject",
-  "g",
-  "image",
-  "line",
-  "linearGradient",
-  "mask",
-  "path",
-  "pattern",
-  "polygon",
-  "polyline",
-  "radialGradient",
-  "rect",
-  "stop",
-  "svg",
-  "text",
-  "tspan"
-];
-
-Globals.assign({
-  batchedUpdates: unstable_batchedUpdates,
-  createStringInterpolator,
-  colors
-});
-const host = createHost(primitives, {
-  applyAnimatedValues: applyAnimatedValues,
-  createAnimatedStyle: (style) => new AnimatedStyle(style),
-  getComponentProps: ({scrollTop, scrollLeft, ...props}) => props
-});
-const animated = host.animated;
-
-export { animated as a, animated };
-//# sourceMappingURL=index.js.map

index.js.map

-{"version":3,"file":"index.js","sources":["src/applyAnimatedValues.ts","src/AnimatedStyle.ts","src/primitives.ts","src/index.ts"],"sourcesContent":null,"names":["primitives2","AnimatedStyle2"],"mappings":";;;;;;AAEA,MAAM,iBAAiB;AAIvB;AACE,MAAI,SAAS,QAAQ,OAAO,UAAU,aAAa,UAAU;AAAI,WAAO;AACxE,MACE,OAAO,UAAU,YACjB,UAAU,KACV,CAAC,eAAe,KAAK,SACrB,mBAAmB,eAAe,SAAS,iBAAiB;AAE5D,WAAO,QAAQ;AAEjB,SAAQ,MAAK,OAAO;AAAA;AAGtB,uBAAuC;;AAKrC,MAAI,CAAC,SAAS,YAAY,CAAC,SAAS;AAClC,WAAO;AAAA;AAGT,0BACE,SAAS,aAAa,YACrB,SAAS,cAAc,SAAS,WAAW,aAAa;AAE3D,SAAQ,OAAO,UAAU,WAAW,6BAA8B;AAElE,iBAAe,OAAO,OAAO;AAC7B,gBAAc,OAAO,KAAK,YAAY,IAAI,UACxC,mBAAmB,SAAS,aAAa,QACrC,OACA,eAAe,yBACC,QAAQ,KAAK,QAC3B,YAEA,OAAK,MAAM,EAAE;AAIrB,MAAI,aAAa;AACf,aAAS,cAAc;AAAA;AAIzB,mBAAiB;AACf,QAAI,MAAM,eAAe;AACvB,oBAAc,oBAAoB,MAAM,MAAM;AAC9C,UAAI,SAAS;AAAS,eAAO;AAAA,eACpB,eAAe,KAAK;AAC3B,iBAAS,MAAM,YAAY,MAAM;AAAA;AAEjC,iBAAS,MAAM,QAAQ;AAAA;AAAA;AAAA;AAM7B,QAAM,QAAQ;AACZ,aAAS,aAAa,MAAM,OAAO;AAAA;AAGrC,MAAI,cAAc;AAChB,aAAS,YAAY;AAAA;AAEvB,MAAI,eAAe;AACjB,aAAS,aAAa;AAAA;AAAA;AAI1B,uBAAgD;AAAA,EAC9C,yBAAyB;AAAA,EACzB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EAEN,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,aAAa;AAAA;AAGf,kBAAkB,iBAChB,SAAS,IAAI,OAAO,GAAG,gBAAgB,IAAI,UAAU;AACvD,iBAAiB,CAAC,UAAU,MAAM,OAAO;AAEzC,mBAAmB,OAAO,KAAK,kBAAkB,OAAO;AACtD,WAAS,QAAQ,YAAW,IAAI,UAAU,QAAQ,SAAS,IAAI;AAC/D,SAAO;AAAA,GACN;;AC1GH,MAAM,gBAAgB;AAGtB,qBAAqB;AAGrB,sBAAsB;AAKtB,gBAAgB,iBACd,GAAG,IAAI,UAAU,UAAU,IAAI,QAAQ,OAAO;AAShD,wBAAwB,eACtB,GAAG,IAAI,SACH,MAAM,MAAM,OAAK,gBAAgB,GAAG,OACpC,GAAG,IAAI,SACP,UAAU,KACV,WAAW,WAAW;4BAUO;AAAA,EACjC,aAAc,GAAG,GAAG;AAKlB,mBAAuB;AAMvB,uBAA+B;AAG/B,QAAI,KAAK,KAAK;AACZ,aAAO,KAAK,CAAC,KAAK,GAAG,KAAK,GAAG,KAAK;AAClC,iBAAW,KAAK,SAAkB;AAAA,QAChC,eAAe,IAAI,IAAI,OAAK,QAAQ,GAAG,OAAO,KAAK;AAAA,QACnD,gBAAgB,KAAK;AAAA;AAAA;AAKzB,aAAS,OAAO;AACd,UAAI,QAAQ;AACV,eAAO,KAAK,CAAC,SAAS;AACtB,mBAAW,KAAK,eAAuB,CAAC,WAAW,cAAc;AAAA,iBACxD,cAAc,KAAK;AAC5B,eAAO,MAAM;AACb,YAAI,GAAG,IAAI;AAAQ;AAEnB,qBAAa,aAAa,KAAK,OAC3B,OACA,cAAc,KAAK,OACnB,QACA;AAEJ,eAAO,KAAK,QAAQ;AACpB,mBAAW,KACT,QAAQ,aACJ,uBAAqD;AAAA,UACnD,YAAY,MAAK,MAAK,MAAK,QAAQ,KAAK;AAAA,UACxC,gBAAgB,KAAK;AAAA,YAEvB,WAAoB;AAAA,UAClB,GAAG,OAAO,MAAM,IAAI,OAAK,QAAQ,GAAG,OAAO,KAAK;AAAA,UAChD,gBAAgB,OAAO,IAAI,WAAW,WAAW,IAAI;AAAA;AAAA;AAAA;AAMjE,QAAI,OAAO;AACT,YAAM,YAAY,IAAI,eAAe,QAAQ;AAAA;AAG/C,UAAM;AAAA;AAAA;AAnHV,6BAwH6B;AAAA,EAG3B;AACE;AADmB;AAAyB;AAFpC,kBAAwB;AAAA;AAAA,EAMlC;AACE,WAAO,KAAK,gBAAgB,SAAS,KAAK;AAAA;AAAA,EAGlC;AACR,oBAAgB;AAChB,mBAAe;AACf,SAAK,KAAK,QAAQ;AAChB,mBAAa,cAAc,MAAM;AACjC,sBAAgB,KAAK,WAAW,GAC9B,GAAG,IAAI,QAAQ,OAAO,MAAM,IAAI;AAElC,mBAAa,MAAM;AACnB,iBAAW,YAAY;AAAA;AAEzB,WAAO,WAAW,SAAS;AAAA;AAAA,EAInB;AACR,QAAI,SAAS;AACX,WAAK,KAAK,QAAQ,WAChB,KACE,OACA,WAAS,cAAc,UAAU,iBAAiB,OAAO;AAAA;AAAA,EAMvD;AACR,QAAI,SAAS;AACX,WAAK,KAAK,QAAQ,WAChB,KACE,OACA,WAAS,cAAc,UAAU,oBAAoB,OAAO;AAAA;AAAA,EAKpE;AACE,QAAI,MAAM,QAAQ;AAChB,WAAK,SAAS;AAAA;AAEhB,uBAAmB,MAAM;AAAA;AAAA;;MC1KhB,aAA2B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;;AC9HF,QAAQ,OAAO;AAAA,EACb,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA;AAGF,MAAM,OAAO,WAAWA,YAAY;AAAA,EAClC;AAAA,EACA,qBAAqB,WAAS,IAAIC,cAAc;AAAA,EAChD,mBAAmB,EAAG,WAAW,0BAA2B;AAAA;iBAGtC,KAAK;;;;"}

src/animated.ts

-import {
-  CSSProperties,
-  ForwardRefExoticComponent,
-  ElementType,
-  ComponentPropsWithRef,
-} from 'react'
-import { FluidValue, FluidProps } from '@react-spring/shared'
-import { Merge } from '@react-spring/types'
-
-import { Primitives } from './primitives'
-
-import type * as CSS from 'csstype'
-export type { CSS }
-
-type AnimatedPrimitives = {
-  [Tag in Primitives]: AnimatedComponent<Tag>
-}
-
-/** The type of the `animated()` function */
-export type WithAnimated = {
-  <T extends ElementType>(wrappedComponent: T): AnimatedComponent<T>
-} & AnimatedPrimitives
-
-/** The type of an `animated()` component */
-export type AnimatedComponent<
-  T extends ElementType
-> = ForwardRefExoticComponent<
-  AnimatedProps<Merge<ComponentPropsWithRef<T>, { style?: StyleProps }>> &
-    FluidProps<{
-      scrollTop?: number
-      scrollLeft?: number
-    }>
->
-
-/** The props of an `animated()` component */
-export type AnimatedProps<Props extends object> = {
-  [P in keyof Props]: P extends 'ref' | 'key'
-    ? Props[P]
-    : AnimatedProp<Props[P]>
-}
-
-type StyleProps = Merge<CSSProperties, TransformProps>
-type StylePropKeys = keyof StyleProps
-
-type ValidStyleProps<T extends object> = {
-  [P in keyof T & StylePropKeys]: T[P] extends StyleProps[P] ? P : never
-}[keyof T & StylePropKeys]
-
-// The animated prop value of a React element
-type AnimatedProp<T> = [T, T] extends [infer T, infer DT]
-  ? [DT] extends [never]
-    ? never
-    : DT extends void
-    ? undefined
-    : DT extends string | number
-    ? DT | AnimatedLeaf<T>
-    : DT extends object
-    ? [ValidStyleProps<DT>] extends [never]
-      ? DT extends ReadonlyArray<any>
-        ? AnimatedStyles<DT>
-        : DT
-      : AnimatedStyle<T>
-    : DT | AnimatedLeaf<T>
-  : never
-
-// An animated array of style objects
-type AnimatedStyles<T extends ReadonlyArray<any>> = {
-  [P in keyof T]: [T[P]] extends [infer DT]
-    ? DT extends object
-      ? [ValidStyleProps<DT>] extends [never]
-        ? DT extends ReadonlyArray<any>
-          ? AnimatedStyles<DT>
-          : DT
-        : { [P in keyof DT]: AnimatedProp<DT[P]> }
-      : DT
-    : never
-}
-
-// An animated object of style attributes
-type AnimatedStyle<T> = [T, T] extends [infer T, infer DT]
-  ? DT extends void
-    ? undefined
-    : [DT] extends [never]
-    ? never
-    : DT extends string | number
-    ? DT | AnimatedLeaf<T>
-    : DT extends object
-    ? AnimatedObject<DT>
-    : DT | AnimatedLeaf<T>
-  : never
-
-type AnimatedObject<T extends object> =
-  | { [P in keyof T]: AnimatedStyle<T[P]> }
-  | (T extends ReadonlyArray<number | string> ? FluidValue<Readonly<T>> : never)
-
-// An animated primitive (or an array of them)
-type AnimatedLeaf<T> = NonObject<T> extends infer U
-  ? [U] extends [never]
-    ? never
-    : FluidValue<U>
-  : never
-
-type NonObject<T> =
-  | Extract<T, string | number | ReadonlyArray<string | number>>
-  | Exclude<T, object | void>
-
-type Angle = number | string
-type Length = number | string
-
-type TransformProps = {
-  transform?: string
-  x?: Length
-  y?: Length
-  z?: Length
-  translate?: Length | readonly [Length, Length]
-  translateX?: Length
-  translateY?: Length
-  translateZ?: Length
-  translate3d?: readonly [Length, Length, Length]
-  rotate?: Angle
-  rotateX?: Angle
-  rotateY?: Angle
-  rotateZ?: Angle
-  rotate3d?: readonly [number, number, number, Angle]
-  // Note: "string" is not really supported by "scale", but this lets us
-  // spread React.CSSProperties into an animated style object.
-  scale?: number | readonly [number, number] | string
-  scaleX?: number
-  scaleY?: number
-  scaleZ?: number
-  scale3d?: readonly [number, number, number]
-  skew?: Angle | readonly [Angle, Angle]
-  skewX?: Angle
-  skewY?: Angle
-  matrix?: readonly [number, number, number, number, number, number]
-  matrix3d?: readonly [
-    number, // a1
-    number,
-    number,
-    number,
-    number, // a2
-    number,
-    number,
-    number,
-    number, // a3
-    number,
-    number,
-    number,
-    number, // a4
-    number,
-    number,
-    number
-  ]
-}

src/AnimatedStyle.ts

-import { AnimatedObject } from '@react-spring/animated'
-import { Lookup, OneOrMore } from '@react-spring/types'
-import {
-  is,
-  each,
-  toArray,
-  eachProp,
-  FluidValue,
-  FluidEvent,
-  getFluidValue,
-  callFluidObservers,
-  hasFluidValue,
-  addFluidObserver,
-  removeFluidObserver,
-} from '@react-spring/shared'
-
-/** The transform-functions
- * (https://developer.mozilla.org/fr/docs/Web/CSS/transform-function)
- * that you can pass as keys to your animated component style and that will be
- * animated. Perspective has been left out as it would conflict with the
- * non-transform perspective style.
- */
-const domTransforms = /^(matrix|translate|scale|rotate|skew)/
-
-// These keys have "px" units by default
-const pxTransforms = /^(translate)/
-
-// These keys have "deg" units by default
-const degTransforms = /^(rotate|skew)/
-
-type Value = number | string
-
-/** Add a unit to the value when the value is unit-less (eg: a number) */
-const addUnit = (value: Value, unit: string): string | 0 =>
-  is.num(value) && value !== 0 ? value + unit : value
-
-/**
- * Checks if the input value matches the identity value.
- *
- *     isValueIdentity(0, 0)              // => true
- *     isValueIdentity('0px', 0)          // => true
- *     isValueIdentity([0, '0px', 0], 0)  // => true
- */
-const isValueIdentity = (value: OneOrMore<Value>, id: number): boolean =>
-  is.arr(value)
-    ? value.every(v => isValueIdentity(v, id))
-    : is.num(value)
-    ? value === id
-    : parseFloat(value) === id
-
-type Inputs = ReadonlyArray<Value | FluidValue<Value>>[]
-type Transforms = ((value: any) => [string, boolean])[]
-
-/**
- * This AnimatedStyle will simplify animated components transforms by
- * interpolating all transform function passed as keys in the style object
- * including shortcuts such as x, y and z for translateX/Y/Z
- */
-export class AnimatedStyle extends AnimatedObject {
-  constructor({ x, y, z, ...style }: Lookup) {
-    /**
-     * An array of arrays that contains the values (static or fluid)
-     * used by each transform function.
-     */
-    const inputs: Inputs = []
-    /**
-     * An array of functions that take a list of values (static or fluid)
-     * and returns (1) a CSS transform string and (2) a boolean that's true
-     * when the transform has no effect (eg: an identity transform).
-     */
-    const transforms: Transforms = []
-
-    // Combine x/y/z into translate3d
-    if (x || y || z) {
-      inputs.push([x || 0, y || 0, z || 0])
-      transforms.push((xyz: Value[]) => [
-        `translate3d(${xyz.map(v => addUnit(v, 'px')).join(',')})`, // prettier-ignore
-        isValueIdentity(xyz, 0),
-      ])
-    }
-
-    // Pluck any other transform-related props
-    eachProp(style, (value, key) => {
-      if (key === 'transform') {
-        inputs.push([value || ''])
-        transforms.push((transform: string) => [transform, transform === ''])
-      } else if (domTransforms.test(key)) {
-        delete style[key]
-        if (is.und(value)) return
-
-        const unit = pxTransforms.test(key)
-          ? 'px'
-          : degTransforms.test(key)
-          ? 'deg'
-          : ''
-
-        inputs.push(toArray(value))
-        transforms.push(
-          key === 'rotate3d'
-            ? ([x, y, z, deg]: [number, number, number, Value]) => [
-                `rotate3d(${x},${y},${z},${addUnit(deg, unit)})`,
-                isValueIdentity(deg, 0),
-              ]
-            : (input: Value[]) => [
-                `${key}(${input.map(v => addUnit(v, unit)).join(',')})`,
-                isValueIdentity(input, key.startsWith('scale') ? 1 : 0),
-              ]
-        )
-      }
-    })
-
-    if (inputs.length) {
-      style.transform = new FluidTransform(inputs, transforms)
-    }
-
-    super(style)
-  }
-}
-
-/** @internal */
-class FluidTransform extends FluidValue<string> {
-  protected _value: string | null = null
-
-  constructor(readonly inputs: Inputs, readonly transforms: Transforms) {
-    super()
-  }
-
-  get() {
-    return this._value || (this._value = this._get())
-  }
-
-  protected _get() {
-    let transform = ''
-    let identity = true
-    each(this.inputs, (input, i) => {
-      const arg1 = getFluidValue(input[0])
-      const [t, id] = this.transforms[i](
-        is.arr(arg1) ? arg1 : input.map(getFluidValue)
-      )
-      transform += ' ' + t
-      identity = identity && id
-    })
-    return identity ? 'none' : transform
-  }
-
-  // Start observing our inputs once we have an observer.
-  protected observerAdded(count: number) {
-    if (count == 1)
-      each(this.inputs, input =>
-        each(
-          input,
-          value => hasFluidValue(value) && addFluidObserver(value, this)
-        )
-      )
-  }
-
-  // Stop observing our inputs once we have no observers.
-  protected observerRemoved(count: number) {
-    if (count == 0)
-      each(this.inputs, input =>
-        each(
-          input,
-          value => hasFluidValue(value) && removeFluidObserver(value, this)
-        )
-      )
-  }
-
-  eventObserved(event: FluidEvent) {
-    if (event.type == 'change') {
-      this._value = null
-    }
-    callFluidObservers(this, event)
-  }
-}

src/applyAnimatedValues.ts

-import { Lookup } from '@react-spring/types'
-
-const isCustomPropRE = /^--/
-
-type Value = string | number | boolean | null
-
-function dangerousStyleValue(name: string, value: Value) {
-  if (value == null || typeof value === 'boolean' || value === '') return ''
-  if (
-    typeof value === 'number' &&
-    value !== 0 &&
-    !isCustomPropRE.test(name) &&
-    !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])
-  )
-    return value + 'px'
-  // Presumes implicit 'px' suffix for unitless numbers
-  return ('' + value).trim()
-}
-
-const attributeCache: Lookup<string> = {}
-
-type Instance = HTMLDivElement & { style?: Lookup }
-
-export function applyAnimatedValues(instance: Instance, props: Lookup) {
-  if (!instance.nodeType || !instance.setAttribute) {
-    return false
-  }
-
-  const isFilterElement =
-    instance.nodeName === 'filter' ||
-    (instance.parentNode && instance.parentNode.nodeName === 'filter')
-
-  const { style, children, scrollTop, scrollLeft, ...attributes } = props!
-
-  const values = Object.values(attributes)
-  const names = Object.keys(attributes).map(name =>
-    isFilterElement || instance.hasAttribute(name)
-      ? name
-      : attributeCache[name] ||
-        (attributeCache[name] = name.replace(
-          /([A-Z])/g,
-          // Attributes are written in dash case
-          n => '-' + n.toLowerCase()
-        ))
-  )
-
-  if (children !== void 0) {
-    instance.textContent = children
-  }
-
-  // Apply CSS styles
-  for (let name in style) {
-    if (style.hasOwnProperty(name)) {
-      const value = dangerousStyleValue(name, style[name])
-      if (name === 'float') name = 'cssFloat'
-      else if (isCustomPropRE.test(name)) {
-        instance.style.setProperty(name, value)
-      } else {
-        instance.style[name] = value
-      }
-    }
-  }
-
-  // Apply DOM attributes
-  names.forEach((name, i) => {
-    instance.setAttribute(name, values[i])
-  })
-
-  if (scrollTop !== void 0) {
-    instance.scrollTop = scrollTop
-  }
-  if (scrollLeft !== void 0) {
-    instance.scrollLeft = scrollLeft
-  }
-}
-
-let isUnitlessNumber: { [key: string]: true } = {
-  animationIterationCount: true,
-  borderImageOutset: true,
-  borderImageSlice: true,
-  borderImageWidth: true,
-  boxFlex: true,
-  boxFlexGroup: true,
-  boxOrdinalGroup: true,
-  columnCount: true,
-  columns: true,
-  flex: true,
-  flexGrow: true,
-  flexPositive: true,
-  flexShrink: true,
-  flexNegative: true,
-  flexOrder: true,
-  gridRow: true,
-  gridRowEnd: true,
-  gridRowSpan: true,
-  gridRowStart: true,
-  gridColumn: true,
-  gridColumnEnd: true,
-  gridColumnSpan: true,
-  gridColumnStart: true,
-  fontWeight: true,
-  lineClamp: true,
-  lineHeight: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  tabSize: true,
-  widows: true,
-  zIndex: true,
-  zoom: true,
-  // SVG-related properties
-  fillOpacity: true,
-  floodOpacity: true,
-  stopOpacity: true,
-  strokeDasharray: true,
-  strokeDashoffset: true,
-  strokeMiterlimit: true,
-  strokeOpacity: true,
-  strokeWidth: true,
-}
-
-const prefixKey = (prefix: string, key: string) =>
-  prefix + key.charAt(0).toUpperCase() + key.substring(1)
-const prefixes = ['Webkit', 'Ms', 'Moz', 'O']
-
-isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
-  prefixes.forEach(prefix => (acc[prefixKey(prefix, prop)] = acc[prop]))
-  return acc
-}, isUnitlessNumber)

src/index.ts

-import { Globals } from '@react-spring/core'
-import { unstable_batchedUpdates } from 'react-dom'
-import { createStringInterpolator, colors } from '@react-spring/shared'
-import { createHost } from '@react-spring/animated'
-import { applyAnimatedValues } from './applyAnimatedValues'
-import { AnimatedStyle } from './AnimatedStyle'
-import { WithAnimated } from './animated'
-import { primitives } from './primitives'
-
-Globals.assign({
-  batchedUpdates: unstable_batchedUpdates,
-  createStringInterpolator,
-  colors,
-})
-
-const host = createHost(primitives, {
-  applyAnimatedValues,
-  createAnimatedStyle: style => new AnimatedStyle(style),
-  getComponentProps: ({ scrollTop, scrollLeft, ...props }) => props,
-})
-
-export const animated = host.animated as WithAnimated
-export { animated as a }
-
-export * from './animated'
-export * from '@react-spring/core'

src/primitives.ts

-export type Primitives = keyof JSX.IntrinsicElements
-export const primitives: Primitives[] = [
-  'a',
-  'abbr',
-  'address',
-  'area',
-  'article',
-  'aside',
-  'audio',
-  'b',
-  'base',
-  'bdi',
-  'bdo',
-  'big',
-  'blockquote',
-  'body',
-  'br',
-  'button',
-  'canvas',
-  'caption',
-  'cite',
-  'code',
-  'col',
-  'colgroup',
-  'data',
-  'datalist',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'dialog',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'embed',
-  'fieldset',
-  'figcaption',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'head',
-  'header',
-  'hgroup',
-  'hr',
-  'html',
-  'i',
-  'iframe',
-  'img',
-  'input',
-  'ins',
-  'kbd',
-  'keygen',
-  'label',
-  'legend',
-  'li',
-  'link',
-  'main',
-  'map',
-  'mark',
-  'menu',
-  'menuitem',
-  'meta',
-  'meter',
-  'nav',
-  'noscript',
-  'object',
-  'ol',
-  'optgroup',
-  'option',
-  'output',
-  'p',
-  'param',
-  'picture',
-  'pre',
-  'progress',
-  'q',
-  'rp',
-  'rt',
-  'ruby',
-  's',
-  'samp',
-  'script',
-  'section',
-  'select',
-  'small',
-  'source',
-  'span',
-  'strong',
-  'style',
-  'sub',
-  'summary',
-  'sup',
-  'table',
-  'tbody',
-  'td',
-  'textarea',
-  'tfoot',
-  'th',
-  'thead',
-  'time',
-  'title',
-  'tr',
-  'track',
-  'u',
-  'ul',
-  'var',
-  'video',
-  'wbr',
-  // SVG
-  'circle',
-  'clipPath',
-  'defs',
-  'ellipse',
-  'foreignObject',
-  'g',
-  'image',
-  'line',
-  'linearGradient',
-  'mask',
-  'path',
-  'pattern',
-  'polygon',
-  'polyline',
-  'radialGradient',
-  'rect',
-  'stop',
-  'svg',
-  'text',
-  'tspan',
-]

New alerts

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

-100%

Worsened metrics

Total package byte prevSize

31559

-91.66%

Number of package files

14

-6.67%

Lines of code

743

-83.86%

Number of low supply chain risk alerts

2

100%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @react-spring/animated@9.2.6
  (transitive)

• + Added

  @react-spring/core@9.2.6
  (transitive)

• + Added

  @react-spring/rafz@9.2.6
  (transitive)

• + Added

  @react-spring/shared@9.2.6
  (transitive)

• + Added

  @react-spring/types@9.2.6
  (transitive)

• + Added

  js-tokens@4.0.0
  (transitive)

• + Added

  loose-envify@1.4.0
  (transitive)

• + Added

  object-assign@4.1.1
  (transitive)

• + Added

  react@17.0.2
  (transitive)

• - Removed

  @react-spring/animated@9.1.2
  (transitive)

• - Removed

  @react-spring/core@9.1.2
  (transitive)

• - Removed

  @react-spring/shared@9.1.2
  (transitive)

• - Removed

  @react-spring/types@9.1.2
  (transitive)

• - Removed

  rafz@0.1.14
  (transitive)

• Updated

  @react-spring/animated@~9.2.0-beta.0

• Updated

  @react-spring/core@~9.2.0-beta.0

• Updated

  @react-spring/shared@~9.2.0-beta.0

• Updated

  @react-spring/types@~9.2.0-beta.0