@react-spring/shared - npm Package Compare versions

Comparing version 9.5.5 to 9.6.0

dist/declarations/src/deprecations.d.ts

@@ -0,2 +1,4 @@
+export declare const prefix = "react-spring: ";
+export declare const once: <TFunc extends (...args: any) => any>(fn: TFunc) => (...args: any) => void;
 export declare function deprecateInterpolate(): void;
 export declare function deprecateDirectCall(): void;

dist/declarations/src/index.d.ts

 import * as Globals from './globals';
 export { Globals };
 export * from './FrameLoop';
+export * from './clamp';
 export * from './colors';
@@ -8,2 +9,3 @@ export * from './colorToRgba';
 export * from './createInterpolator';
+export * from './easings';
 export * from './stringInterpolation';
@@ -13,2 +15,9 @@ export * from './deprecations';
 export * from './isAnimatedString';
+/**
+ * Should these be moved to a DOM only
+ * package to avoid native issues?
+ */
+export * from './dom-events/scroll';
+export * from './dom-events/resize';
+export * from './hooks/useConstant';
 export * from './hooks/useForceUpdate';
@@ -15,0 +24,0 @@ export * from './hooks/useMemoOne';

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

@@ -173,2 +173,4 @@ 'use strict';
 
+const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
+
 const colors = {
@@ -496,2 +498,65 @@ transparent: 0x00000000,
 
+const steps = (steps, direction = 'end') => progress => {
+  progress = direction === 'end' ? Math.min(progress, 0.999) : Math.max(progress, 0.001);
+  const expanded = progress * steps;
+  const rounded = direction === 'end' ? Math.floor(expanded) : Math.ceil(expanded);
+  return clamp(0, 1, rounded / steps);
+};
+
+const c1 = 1.70158;
+const c2 = c1 * 1.525;
+const c3 = c1 + 1;
+const c4 = 2 * Math.PI / 3;
+const c5 = 2 * Math.PI / 4.5;
+
+const bounceOut = x => {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+
+  if (x < 1 / d1) {
+    return n1 * x * x;
+  } else if (x < 2 / d1) {
+    return n1 * (x -= 1.5 / d1) * x + 0.75;
+  } else if (x < 2.5 / d1) {
+    return n1 * (x -= 2.25 / d1) * x + 0.9375;
+  } else {
+    return n1 * (x -= 2.625 / d1) * x + 0.984375;
+  }
+};
+
+const easings = {
+  linear: x => x,
+  easeInQuad: x => x * x,
+  easeOutQuad: x => 1 - (1 - x) * (1 - x),
+  easeInOutQuad: x => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,
+  easeInCubic: x => x * x * x,
+  easeOutCubic: x => 1 - Math.pow(1 - x, 3),
+  easeInOutCubic: x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2,
+  easeInQuart: x => x * x * x * x,
+  easeOutQuart: x => 1 - Math.pow(1 - x, 4),
+  easeInOutQuart: x => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2,
+  easeInQuint: x => x * x * x * x * x,
+  easeOutQuint: x => 1 - Math.pow(1 - x, 5),
+  easeInOutQuint: x => x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2,
+  easeInSine: x => 1 - Math.cos(x * Math.PI / 2),
+  easeOutSine: x => Math.sin(x * Math.PI / 2),
+  easeInOutSine: x => -(Math.cos(Math.PI * x) - 1) / 2,
+  easeInExpo: x => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
+  easeOutExpo: x => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
+  easeInOutExpo: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2,
+  easeInCirc: x => 1 - Math.sqrt(1 - Math.pow(x, 2)),
+  easeOutCirc: x => Math.sqrt(1 - Math.pow(x - 1, 2)),
+  easeInOutCirc: x => x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2,
+  easeInBack: x => c3 * x * x * x - c1 * x * x,
+  easeOutBack: x => 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2),
+  easeInOutBack: x => x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
+  easeInElastic: x => x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4),
+  easeOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1,
+  easeInOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1,
+  easeInBounce: x => 1 - bounceOut(1 - x),
+  easeOutBounce: bounceOut,
+  easeInOutBounce: x => x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2,
+  steps
+};
+
 function _extends() {
@@ -672,3 +737,2 @@ _extends = Object.assign ? Object.assign.bind() : function (target) {
 const prefix = 'react-spring: ';
-
 const once = fn => {
@@ -689,3 +753,2 @@ const func = fn;
 };
-
 const warnInterpolate = once(console.warn);
@@ -704,2 +767,222 @@ function deprecateInterpolate() {
 
+let observer;
+const resizeHandlers = new WeakMap();
+
+const handleObservation = entries => entries.forEach(({
+  target,
+  contentRect
+}) => {
+  var _resizeHandlers$get;
+
+  return (_resizeHandlers$get = resizeHandlers.get(target)) == null ? void 0 : _resizeHandlers$get.forEach(handler => handler(contentRect));
+});
+
+function resizeElement(handler, target) {
+  if (!observer) {
+    if (typeof ResizeObserver !== 'undefined') {
+      observer = new ResizeObserver(handleObservation);
+    }
+  }
+
+  let elementHandlers = resizeHandlers.get(target);
+
+  if (!elementHandlers) {
+    elementHandlers = new Set();
+    resizeHandlers.set(target, elementHandlers);
+  }
+
+  elementHandlers.add(handler);
+
+  if (observer) {
+    observer.observe(target);
+  }
+
+  return () => {
+    const elementHandlers = resizeHandlers.get(target);
+    if (!elementHandlers) return;
+    elementHandlers.delete(handler);
+
+    if (!elementHandlers.size && observer) {
+      observer.unobserve(target);
+    }
+  };
+}
+
+const listeners = new Set();
+let cleanupWindowResizeHandler;
+
+const createResizeHandler = () => {
+  const handleResize = () => {
+    listeners.forEach(callback => callback({
+      width: window.innerWidth,
+      height: window.innerHeight
+    }));
+  };
+
+  window.addEventListener('resize', handleResize);
+  return () => {
+    window.removeEventListener('resize', handleResize);
+  };
+};
+
+const resizeWindow = callback => {
+  listeners.add(callback);
+
+  if (!cleanupWindowResizeHandler) {
+    cleanupWindowResizeHandler = createResizeHandler();
+  }
+
+  return () => {
+    listeners.delete(callback);
+
+    if (!listeners.size && cleanupWindowResizeHandler) {
+      cleanupWindowResizeHandler();
+      cleanupWindowResizeHandler = undefined;
+    }
+  };
+};
+
+const onResize = (callback, {
+  container: _container = document.documentElement
+} = {}) => {
+  if (_container === document.documentElement) {
+    return resizeWindow(callback);
+  } else {
+    return resizeElement(callback, _container);
+  }
+};
+
+const progress = (min, max, value) => max - min === 0 ? 1 : (value - min) / (max - min);
+
+const SCROLL_KEYS = {
+  x: {
+    length: 'Width',
+    position: 'Left'
+  },
+  y: {
+    length: 'Height',
+    position: 'Top'
+  }
+};
+class ScrollHandler {
+  constructor(callback, container) {
+    this.callback = void 0;
+    this.container = void 0;
+    this.info = void 0;
+
+    this.createAxis = () => ({
+      current: 0,
+      progress: 0,
+      scrollLength: 0
+    });
+
+    this.updateAxis = axisName => {
+      const axis = this.info[axisName];
+      const {
+        length,
+        position
+      } = SCROLL_KEYS[axisName];
+      axis.current = this.container[`scroll${position}`];
+      axis.scrollLength = this.container['scroll' + length] - this.container['client' + length];
+      axis.progress = progress(0, axis.scrollLength, axis.current);
+    };
+
+    this.update = () => {
+      this.updateAxis('x');
+      this.updateAxis('y');
+    };
+
+    this.sendEvent = () => {
+      this.callback(this.info);
+    };
+
+    this.advance = () => {
+      this.update();
+      this.sendEvent();
+    };
+
+    this.callback = callback;
+    this.container = container;
+    this.info = {
+      time: 0,
+      x: this.createAxis(),
+      y: this.createAxis()
+    };
+  }
+
+}
+
+const scrollListeners = new WeakMap();
+const resizeListeners = new WeakMap();
+const onScrollHandlers = new WeakMap();
+
+const getTarget = container => container === document.documentElement ? window : container;
+
+const onScroll = (callback, {
+  container: _container = document.documentElement
+} = {}) => {
+  let containerHandlers = onScrollHandlers.get(_container);
+
+  if (!containerHandlers) {
+    containerHandlers = new Set();
+    onScrollHandlers.set(_container, containerHandlers);
+  }
+
+  const containerHandler = new ScrollHandler(callback, _container);
+  containerHandlers.add(containerHandler);
+
+  if (!scrollListeners.has(_container)) {
+    const listener = () => {
+      containerHandler.advance();
+      return true;
+    };
+
+    scrollListeners.set(_container, listener);
+    const target = getTarget(_container);
+    window.addEventListener('resize', listener, {
+      passive: true
+    });
+
+    if (_container !== document.documentElement) {
+      resizeListeners.set(_container, onResize(listener, {
+        container: _container
+      }));
+    }
+
+    target.addEventListener('scroll', listener, {
+      passive: true
+    });
+  }
+
+  const animateScroll = scrollListeners.get(_container);
+  rafz.raf(animateScroll);
+  return () => {
+    rafz.raf.cancel(animateScroll);
+    const containerHandlers = onScrollHandlers.get(_container);
+    if (!containerHandlers) return;
+    containerHandlers.delete(containerHandler);
+    if (containerHandlers.size) return;
+    const listener = scrollListeners.get(_container);
+    scrollListeners.delete(_container);
+
+    if (listener) {
+      var _resizeListeners$get;
+
+      getTarget(_container).removeEventListener('scroll', listener);
+      window.removeEventListener('resize', listener);
+      (_resizeListeners$get = resizeListeners.get(_container)) == null ? void 0 : _resizeListeners$get();
+    }
+  };
+};
+
+function useConstant(init) {
+  const ref = react.useRef(null);
+
+  if (ref.current === null) {
+    ref.current = init();
+  }
+
+  return ref.current;
+}
+
 const useIsomorphicLayoutEffect = isSSR() ? react.useEffect : react.useLayoutEffect;
@@ -815,2 +1098,3 @@
 exports.callFluidObservers = callFluidObservers;
+exports.clamp = clamp;
 exports.colorToRgba = colorToRgba;
@@ -825,2 +1109,3 @@ exports.colors = colors;
 exports.eachProp = eachProp;
+exports.easings = easings;
 exports.flush = flush;
@@ -843,2 +1128,6 @@ exports.flushCalls = flushCalls;
 exports.noop = noop;
+exports.onResize = onResize;
+exports.onScroll = onScroll;
+exports.once = once;
+exports.prefix = prefix;
 exports.removeFluidObserver = removeFluidObserver;
@@ -849,2 +1138,3 @@ exports.rgb = rgb;
 exports.toArray = toArray;
+exports.useConstant = useConstant;
 exports.useForceUpdate = useForceUpdate;
@@ -851,0 +1141,0 @@ exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

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

@@ -173,2 +173,4 @@ 'use strict';
 
+const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
+
 const colors = {
@@ -496,2 +498,65 @@ transparent: 0x00000000,
 
+const steps = (steps, direction = 'end') => progress => {
+  progress = direction === 'end' ? Math.min(progress, 0.999) : Math.max(progress, 0.001);
+  const expanded = progress * steps;
+  const rounded = direction === 'end' ? Math.floor(expanded) : Math.ceil(expanded);
+  return clamp(0, 1, rounded / steps);
+};
+
+const c1 = 1.70158;
+const c2 = c1 * 1.525;
+const c3 = c1 + 1;
+const c4 = 2 * Math.PI / 3;
+const c5 = 2 * Math.PI / 4.5;
+
+const bounceOut = x => {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+
+  if (x < 1 / d1) {
+    return n1 * x * x;
+  } else if (x < 2 / d1) {
+    return n1 * (x -= 1.5 / d1) * x + 0.75;
+  } else if (x < 2.5 / d1) {
+    return n1 * (x -= 2.25 / d1) * x + 0.9375;
+  } else {
+    return n1 * (x -= 2.625 / d1) * x + 0.984375;
+  }
+};
+
+const easings = {
+  linear: x => x,
+  easeInQuad: x => x * x,
+  easeOutQuad: x => 1 - (1 - x) * (1 - x),
+  easeInOutQuad: x => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,
+  easeInCubic: x => x * x * x,
+  easeOutCubic: x => 1 - Math.pow(1 - x, 3),
+  easeInOutCubic: x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2,
+  easeInQuart: x => x * x * x * x,
+  easeOutQuart: x => 1 - Math.pow(1 - x, 4),
+  easeInOutQuart: x => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2,
+  easeInQuint: x => x * x * x * x * x,
+  easeOutQuint: x => 1 - Math.pow(1 - x, 5),
+  easeInOutQuint: x => x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2,
+  easeInSine: x => 1 - Math.cos(x * Math.PI / 2),
+  easeOutSine: x => Math.sin(x * Math.PI / 2),
+  easeInOutSine: x => -(Math.cos(Math.PI * x) - 1) / 2,
+  easeInExpo: x => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
+  easeOutExpo: x => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
+  easeInOutExpo: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2,
+  easeInCirc: x => 1 - Math.sqrt(1 - Math.pow(x, 2)),
+  easeOutCirc: x => Math.sqrt(1 - Math.pow(x - 1, 2)),
+  easeInOutCirc: x => x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2,
+  easeInBack: x => c3 * x * x * x - c1 * x * x,
+  easeOutBack: x => 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2),
+  easeInOutBack: x => x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
+  easeInElastic: x => x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4),
+  easeOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1,
+  easeInOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1,
+  easeInBounce: x => 1 - bounceOut(1 - x),
+  easeOutBounce: bounceOut,
+  easeInOutBounce: x => x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2,
+  steps
+};
+
 function _extends() {
@@ -672,3 +737,2 @@ _extends = Object.assign ? Object.assign.bind() : function (target) {
 const prefix = 'react-spring: ';
-
 const once = fn => {
@@ -689,3 +753,2 @@ const func = fn;
 };
-
 const warnInterpolate = once(console.warn);
@@ -704,2 +767,222 @@ function deprecateInterpolate() {
 
+let observer;
+const resizeHandlers = new WeakMap();
+
+const handleObservation = entries => entries.forEach(({
+  target,
+  contentRect
+}) => {
+  var _resizeHandlers$get;
+
+  return (_resizeHandlers$get = resizeHandlers.get(target)) == null ? void 0 : _resizeHandlers$get.forEach(handler => handler(contentRect));
+});
+
+function resizeElement(handler, target) {
+  if (!observer) {
+    if (typeof ResizeObserver !== 'undefined') {
+      observer = new ResizeObserver(handleObservation);
+    }
+  }
+
+  let elementHandlers = resizeHandlers.get(target);
+
+  if (!elementHandlers) {
+    elementHandlers = new Set();
+    resizeHandlers.set(target, elementHandlers);
+  }
+
+  elementHandlers.add(handler);
+
+  if (observer) {
+    observer.observe(target);
+  }
+
+  return () => {
+    const elementHandlers = resizeHandlers.get(target);
+    if (!elementHandlers) return;
+    elementHandlers.delete(handler);
+
+    if (!elementHandlers.size && observer) {
+      observer.unobserve(target);
+    }
+  };
+}
+
+const listeners = new Set();
+let cleanupWindowResizeHandler;
+
+const createResizeHandler = () => {
+  const handleResize = () => {
+    listeners.forEach(callback => callback({
+      width: window.innerWidth,
+      height: window.innerHeight
+    }));
+  };
+
+  window.addEventListener('resize', handleResize);
+  return () => {
+    window.removeEventListener('resize', handleResize);
+  };
+};
+
+const resizeWindow = callback => {
+  listeners.add(callback);
+
+  if (!cleanupWindowResizeHandler) {
+    cleanupWindowResizeHandler = createResizeHandler();
+  }
+
+  return () => {
+    listeners.delete(callback);
+
+    if (!listeners.size && cleanupWindowResizeHandler) {
+      cleanupWindowResizeHandler();
+      cleanupWindowResizeHandler = undefined;
+    }
+  };
+};
+
+const onResize = (callback, {
+  container: _container = document.documentElement
+} = {}) => {
+  if (_container === document.documentElement) {
+    return resizeWindow(callback);
+  } else {
+    return resizeElement(callback, _container);
+  }
+};
+
+const progress = (min, max, value) => max - min === 0 ? 1 : (value - min) / (max - min);
+
+const SCROLL_KEYS = {
+  x: {
+    length: 'Width',
+    position: 'Left'
+  },
+  y: {
+    length: 'Height',
+    position: 'Top'
+  }
+};
+class ScrollHandler {
+  constructor(callback, container) {
+    this.callback = void 0;
+    this.container = void 0;
+    this.info = void 0;
+
+    this.createAxis = () => ({
+      current: 0,
+      progress: 0,
+      scrollLength: 0
+    });
+
+    this.updateAxis = axisName => {
+      const axis = this.info[axisName];
+      const {
+        length,
+        position
+      } = SCROLL_KEYS[axisName];
+      axis.current = this.container[`scroll${position}`];
+      axis.scrollLength = this.container['scroll' + length] - this.container['client' + length];
+      axis.progress = progress(0, axis.scrollLength, axis.current);
+    };
+
+    this.update = () => {
+      this.updateAxis('x');
+      this.updateAxis('y');
+    };
+
+    this.sendEvent = () => {
+      this.callback(this.info);
+    };
+
+    this.advance = () => {
+      this.update();
+      this.sendEvent();
+    };
+
+    this.callback = callback;
+    this.container = container;
+    this.info = {
+      time: 0,
+      x: this.createAxis(),
+      y: this.createAxis()
+    };
+  }
+
+}
+
+const scrollListeners = new WeakMap();
+const resizeListeners = new WeakMap();
+const onScrollHandlers = new WeakMap();
+
+const getTarget = container => container === document.documentElement ? window : container;
+
+const onScroll = (callback, {
+  container: _container = document.documentElement
+} = {}) => {
+  let containerHandlers = onScrollHandlers.get(_container);
+
+  if (!containerHandlers) {
+    containerHandlers = new Set();
+    onScrollHandlers.set(_container, containerHandlers);
+  }
+
+  const containerHandler = new ScrollHandler(callback, _container);
+  containerHandlers.add(containerHandler);
+
+  if (!scrollListeners.has(_container)) {
+    const listener = () => {
+      containerHandler.advance();
+      return true;
+    };
+
+    scrollListeners.set(_container, listener);
+    const target = getTarget(_container);
+    window.addEventListener('resize', listener, {
+      passive: true
+    });
+
+    if (_container !== document.documentElement) {
+      resizeListeners.set(_container, onResize(listener, {
+        container: _container
+      }));
+    }
+
+    target.addEventListener('scroll', listener, {
+      passive: true
+    });
+  }
+
+  const animateScroll = scrollListeners.get(_container);
+  rafz.raf(animateScroll);
+  return () => {
+    rafz.raf.cancel(animateScroll);
+    const containerHandlers = onScrollHandlers.get(_container);
+    if (!containerHandlers) return;
+    containerHandlers.delete(containerHandler);
+    if (containerHandlers.size) return;
+    const listener = scrollListeners.get(_container);
+    scrollListeners.delete(_container);
+
+    if (listener) {
+      var _resizeListeners$get;
+
+      getTarget(_container).removeEventListener('scroll', listener);
+      window.removeEventListener('resize', listener);
+      (_resizeListeners$get = resizeListeners.get(_container)) == null ? void 0 : _resizeListeners$get();
+    }
+  };
+};
+
+function useConstant(init) {
+  const ref = react.useRef(null);
+
+  if (ref.current === null) {
+    ref.current = init();
+  }
+
+  return ref.current;
+}
+
 const useIsomorphicLayoutEffect = isSSR() ? react.useEffect : react.useLayoutEffect;
@@ -815,2 +1098,3 @@
 exports.callFluidObservers = callFluidObservers;
+exports.clamp = clamp;
 exports.colorToRgba = colorToRgba;
@@ -825,2 +1109,3 @@ exports.colors = colors;
 exports.eachProp = eachProp;
+exports.easings = easings;
 exports.flush = flush;
@@ -843,2 +1128,6 @@ exports.flushCalls = flushCalls;
 exports.noop = noop;
+exports.onResize = onResize;
+exports.onScroll = onScroll;
+exports.once = once;
+exports.prefix = prefix;
 exports.removeFluidObserver = removeFluidObserver;
@@ -849,2 +1138,3 @@ exports.rgb = rgb;
 exports.toArray = toArray;
+exports.useConstant = useConstant;
 exports.useForceUpdate = useForceUpdate;
@@ -851,0 +1141,0 @@ exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

dist/react-spring-shared.esm.js

 import { raf } from '@react-spring/rafz';
 export { raf } from '@react-spring/rafz';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useRef, useEffect, useLayoutEffect, useState } from 'react';
 
@@ -170,2 +170,4 @@ function noop() {}
 
+const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
+
 const colors = {
@@ -493,2 +495,65 @@ transparent: 0x00000000,
 
+const steps = (steps, direction = 'end') => progress => {
+  progress = direction === 'end' ? Math.min(progress, 0.999) : Math.max(progress, 0.001);
+  const expanded = progress * steps;
+  const rounded = direction === 'end' ? Math.floor(expanded) : Math.ceil(expanded);
+  return clamp(0, 1, rounded / steps);
+};
+
+const c1 = 1.70158;
+const c2 = c1 * 1.525;
+const c3 = c1 + 1;
+const c4 = 2 * Math.PI / 3;
+const c5 = 2 * Math.PI / 4.5;
+
+const bounceOut = x => {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+
+  if (x < 1 / d1) {
+    return n1 * x * x;
+  } else if (x < 2 / d1) {
+    return n1 * (x -= 1.5 / d1) * x + 0.75;
+  } else if (x < 2.5 / d1) {
+    return n1 * (x -= 2.25 / d1) * x + 0.9375;
+  } else {
+    return n1 * (x -= 2.625 / d1) * x + 0.984375;
+  }
+};
+
+const easings = {
+  linear: x => x,
+  easeInQuad: x => x * x,
+  easeOutQuad: x => 1 - (1 - x) * (1 - x),
+  easeInOutQuad: x => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,
+  easeInCubic: x => x * x * x,
+  easeOutCubic: x => 1 - Math.pow(1 - x, 3),
+  easeInOutCubic: x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2,
+  easeInQuart: x => x * x * x * x,
+  easeOutQuart: x => 1 - Math.pow(1 - x, 4),
+  easeInOutQuart: x => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2,
+  easeInQuint: x => x * x * x * x * x,
+  easeOutQuint: x => 1 - Math.pow(1 - x, 5),
+  easeInOutQuint: x => x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2,
+  easeInSine: x => 1 - Math.cos(x * Math.PI / 2),
+  easeOutSine: x => Math.sin(x * Math.PI / 2),
+  easeInOutSine: x => -(Math.cos(Math.PI * x) - 1) / 2,
+  easeInExpo: x => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
+  easeOutExpo: x => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
+  easeInOutExpo: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2,
+  easeInCirc: x => 1 - Math.sqrt(1 - Math.pow(x, 2)),
+  easeOutCirc: x => Math.sqrt(1 - Math.pow(x - 1, 2)),
+  easeInOutCirc: x => x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2,
+  easeInBack: x => c3 * x * x * x - c1 * x * x,
+  easeOutBack: x => 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2),
+  easeInOutBack: x => x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
+  easeInElastic: x => x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4),
+  easeOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1,
+  easeInOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1,
+  easeInBounce: x => 1 - bounceOut(1 - x),
+  easeOutBounce: bounceOut,
+  easeInOutBounce: x => x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2,
+  steps
+};
+
 function _extends() {
@@ -669,3 +734,2 @@ _extends = Object.assign ? Object.assign.bind() : function (target) {
 const prefix = 'react-spring: ';
-
 const once = fn => {
@@ -686,3 +750,2 @@ const func = fn;
 };
-
 const warnInterpolate = once(console.warn);
@@ -701,2 +764,222 @@ function deprecateInterpolate() {
 
+let observer;
+const resizeHandlers = new WeakMap();
+
+const handleObservation = entries => entries.forEach(({
+  target,
+  contentRect
+}) => {
+  var _resizeHandlers$get;
+
+  return (_resizeHandlers$get = resizeHandlers.get(target)) == null ? void 0 : _resizeHandlers$get.forEach(handler => handler(contentRect));
+});
+
+function resizeElement(handler, target) {
+  if (!observer) {
+    if (typeof ResizeObserver !== 'undefined') {
+      observer = new ResizeObserver(handleObservation);
+    }
+  }
+
+  let elementHandlers = resizeHandlers.get(target);
+
+  if (!elementHandlers) {
+    elementHandlers = new Set();
+    resizeHandlers.set(target, elementHandlers);
+  }
+
+  elementHandlers.add(handler);
+
+  if (observer) {
+    observer.observe(target);
+  }
+
+  return () => {
+    const elementHandlers = resizeHandlers.get(target);
+    if (!elementHandlers) return;
+    elementHandlers.delete(handler);
+
+    if (!elementHandlers.size && observer) {
+      observer.unobserve(target);
+    }
+  };
+}
+
+const listeners = new Set();
+let cleanupWindowResizeHandler;
+
+const createResizeHandler = () => {
+  const handleResize = () => {
+    listeners.forEach(callback => callback({
+      width: window.innerWidth,
+      height: window.innerHeight
+    }));
+  };
+
+  window.addEventListener('resize', handleResize);
+  return () => {
+    window.removeEventListener('resize', handleResize);
+  };
+};
+
+const resizeWindow = callback => {
+  listeners.add(callback);
+
+  if (!cleanupWindowResizeHandler) {
+    cleanupWindowResizeHandler = createResizeHandler();
+  }
+
+  return () => {
+    listeners.delete(callback);
+
+    if (!listeners.size && cleanupWindowResizeHandler) {
+      cleanupWindowResizeHandler();
+      cleanupWindowResizeHandler = undefined;
+    }
+  };
+};
+
+const onResize = (callback, {
+  container: _container = document.documentElement
+} = {}) => {
+  if (_container === document.documentElement) {
+    return resizeWindow(callback);
+  } else {
+    return resizeElement(callback, _container);
+  }
+};
+
+const progress = (min, max, value) => max - min === 0 ? 1 : (value - min) / (max - min);
+
+const SCROLL_KEYS = {
+  x: {
+    length: 'Width',
+    position: 'Left'
+  },
+  y: {
+    length: 'Height',
+    position: 'Top'
+  }
+};
+class ScrollHandler {
+  constructor(callback, container) {
+    this.callback = void 0;
+    this.container = void 0;
+    this.info = void 0;
+
+    this.createAxis = () => ({
+      current: 0,
+      progress: 0,
+      scrollLength: 0
+    });
+
+    this.updateAxis = axisName => {
+      const axis = this.info[axisName];
+      const {
+        length,
+        position
+      } = SCROLL_KEYS[axisName];
+      axis.current = this.container[`scroll${position}`];
+      axis.scrollLength = this.container['scroll' + length] - this.container['client' + length];
+      axis.progress = progress(0, axis.scrollLength, axis.current);
+    };
+
+    this.update = () => {
+      this.updateAxis('x');
+      this.updateAxis('y');
+    };
+
+    this.sendEvent = () => {
+      this.callback(this.info);
+    };
+
+    this.advance = () => {
+      this.update();
+      this.sendEvent();
+    };
+
+    this.callback = callback;
+    this.container = container;
+    this.info = {
+      time: 0,
+      x: this.createAxis(),
+      y: this.createAxis()
+    };
+  }
+
+}
+
+const scrollListeners = new WeakMap();
+const resizeListeners = new WeakMap();
+const onScrollHandlers = new WeakMap();
+
+const getTarget = container => container === document.documentElement ? window : container;
+
+const onScroll = (callback, {
+  container: _container = document.documentElement
+} = {}) => {
+  let containerHandlers = onScrollHandlers.get(_container);
+
+  if (!containerHandlers) {
+    containerHandlers = new Set();
+    onScrollHandlers.set(_container, containerHandlers);
+  }
+
+  const containerHandler = new ScrollHandler(callback, _container);
+  containerHandlers.add(containerHandler);
+
+  if (!scrollListeners.has(_container)) {
+    const listener = () => {
+      containerHandler.advance();
+      return true;
+    };
+
+    scrollListeners.set(_container, listener);
+    const target = getTarget(_container);
+    window.addEventListener('resize', listener, {
+      passive: true
+    });
+
+    if (_container !== document.documentElement) {
+      resizeListeners.set(_container, onResize(listener, {
+        container: _container
+      }));
+    }
+
+    target.addEventListener('scroll', listener, {
+      passive: true
+    });
+  }
+
+  const animateScroll = scrollListeners.get(_container);
+  raf(animateScroll);
+  return () => {
+    raf.cancel(animateScroll);
+    const containerHandlers = onScrollHandlers.get(_container);
+    if (!containerHandlers) return;
+    containerHandlers.delete(containerHandler);
+    if (containerHandlers.size) return;
+    const listener = scrollListeners.get(_container);
+    scrollListeners.delete(_container);
+
+    if (listener) {
+      var _resizeListeners$get;
+
+      getTarget(_container).removeEventListener('scroll', listener);
+      window.removeEventListener('resize', listener);
+      (_resizeListeners$get = resizeListeners.get(_container)) == null ? void 0 : _resizeListeners$get();
+    }
+  };
+};
+
+function useConstant(init) {
+  const ref = useRef(null);
+
+  if (ref.current === null) {
+    ref.current = init();
+  }
+
+  return ref.current;
+}
+
 const useIsomorphicLayoutEffect = isSSR() ? useEffect : useLayoutEffect;
@@ -803,2 +1086,2 @@
 
-export { FluidValue, globals as Globals, addFluidObserver, callFluidObserver, callFluidObservers, colorToRgba, colors, createInterpolator, createStringInterpolator, defineHidden, deprecateDirectCall, deprecateInterpolate, each, eachProp, flush, flushCalls, frameLoop, getFluidObservers, getFluidValue, hasFluidValue, hex3, hex4, hex6, hex8, hsl, hsla, is, isAnimatedString, isEqual, isSSR, noop, removeFluidObserver, rgb, rgba, setFluidGetter, toArray, useForceUpdate, useIsomorphicLayoutEffect, useMemoOne, useOnce, usePrev, useReducedMotion };
+export { FluidValue, globals as Globals, addFluidObserver, callFluidObserver, callFluidObservers, clamp, colorToRgba, colors, createInterpolator, createStringInterpolator, defineHidden, deprecateDirectCall, deprecateInterpolate, each, eachProp, easings, flush, flushCalls, frameLoop, getFluidObservers, getFluidValue, hasFluidValue, hex3, hex4, hex6, hex8, hsl, hsla, is, isAnimatedString, isEqual, isSSR, noop, onResize, onScroll, once, prefix, removeFluidObserver, rgb, rgba, setFluidGetter, toArray, useConstant, useForceUpdate, useIsomorphicLayoutEffect, useMemoOne, useOnce, usePrev, useReducedMotion };

package.json

 {
   "name": "@react-spring/shared",
-  "version": "9.5.5",
+  "version": "9.6.0",
   "description": "Globals and shared modules",
@@ -31,4 +31,4 @@ "main": "dist/react-spring-shared.cjs.js",
   "dependencies": {
-    "@react-spring/rafz": "~9.5.5",
-    "@react-spring/types": "~9.5.5"
+    "@react-spring/rafz": "~9.6.0",
+    "@react-spring/types": "~9.6.0"
   },
@@ -35,0 +35,0 @@ "peerDependencies": {

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

Improved metrics

Total package byte prevSize

115782

increased by33.96%

Number of package files

39

increased by30%

Lines of code

3397

increased by32.59%

Dependency changes

• + Added@react-spring/rafz@9.6.1(transitive)

• + Added@react-spring/types@9.6.1(transitive)

• - Removed@react-spring/rafz@9.5.5(transitive)

• - Removed@react-spring/types@9.5.5(transitive)

• Updated@react-spring/rafz@~9.6.0

• Updated@react-spring/types@~9.6.0