@react-spring/shared
Version:
Globals and shared modules
1,113 lines (1,077 loc) • 32 kB
JavaScript
var __defProp = Object.defineProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
// src/globals.ts
var globals_exports = {};
__export(globals_exports, {
assign: () => assign,
colors: () => colors,
createStringInterpolator: () => createStringInterpolator,
skipAnimation: () => skipAnimation,
to: () => to,
willAdvance: () => willAdvance
});
import { raf } from "@react-spring/rafz";
// src/helpers.ts
function noop() {
}
var defineHidden = (obj, key, value) => Object.defineProperty(obj, key, { value, writable: true, configurable: true });
var is = {
arr: Array.isArray,
obj: (a) => !!a && a.constructor.name === "Object",
fun: (a) => typeof a === "function",
str: (a) => typeof a === "string",
num: (a) => typeof a === "number",
und: (a) => a === void 0
};
function isEqual(a, b) {
if (is.arr(a)) {
if (!is.arr(b) || a.length !== b.length) return false;
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) return false;
}
return true;
}
return a === b;
}
var each = (obj, fn) => obj.forEach(fn);
function eachProp(obj, fn, ctx) {
if (is.arr(obj)) {
for (let i = 0; i < obj.length; i++) {
fn.call(ctx, obj[i], `${i}`);
}
return;
}
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
fn.call(ctx, obj[key], key);
}
}
}
var toArray = (a) => is.und(a) ? [] : is.arr(a) ? a : [a];
function flush(queue, iterator) {
if (queue.size) {
const items = Array.from(queue);
queue.clear();
each(items, iterator);
}
}
var flushCalls = (queue, ...args) => flush(queue, (fn) => fn(...args));
var isSSR = () => typeof window === "undefined" || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
// src/globals.ts
var createStringInterpolator;
var to;
var colors = null;
var skipAnimation = false;
var willAdvance = noop;
var assign = (globals) => {
if (globals.to) to = globals.to;
if (globals.now) raf.now = globals.now;
if (globals.colors !== void 0) colors = globals.colors;
if (globals.skipAnimation != null) skipAnimation = globals.skipAnimation;
if (globals.createStringInterpolator)
createStringInterpolator = globals.createStringInterpolator;
if (globals.requestAnimationFrame) raf.use(globals.requestAnimationFrame);
if (globals.batchedUpdates) raf.batchedUpdates = globals.batchedUpdates;
if (globals.willAdvance) willAdvance = globals.willAdvance;
if (globals.frameLoop) raf.frameLoop = globals.frameLoop;
};
// src/FrameLoop.ts
import { raf as raf2 } from "@react-spring/rafz";
var startQueue = /* @__PURE__ */ new Set();
var currentFrame = [];
var prevFrame = [];
var priority = 0;
var frameLoop = {
get idle() {
return !startQueue.size && !currentFrame.length;
},
/** Advance the given animation on every frame until idle. */
start(animation) {
if (priority > animation.priority) {
startQueue.add(animation);
raf2.onStart(flushStartQueue);
} else {
startSafely(animation);
raf2(advance);
}
},
/** Advance all animations by the given time. */
advance,
/** Call this when an animation's priority changes. */
sort(animation) {
if (priority) {
raf2.onFrame(() => frameLoop.sort(animation));
} else {
const prevIndex = currentFrame.indexOf(animation);
if (~prevIndex) {
currentFrame.splice(prevIndex, 1);
startUnsafely(animation);
}
}
},
/**
* Clear all animations. For testing purposes.
*
* ☠️ Never call this from within the frameloop.
*/
clear() {
currentFrame = [];
startQueue.clear();
}
};
function flushStartQueue() {
startQueue.forEach(startSafely);
startQueue.clear();
raf2(advance);
}
function startSafely(animation) {
if (!currentFrame.includes(animation)) startUnsafely(animation);
}
function startUnsafely(animation) {
currentFrame.splice(
findIndex(currentFrame, (other) => other.priority > animation.priority),
0,
animation
);
}
function advance(dt) {
const nextFrame = prevFrame;
for (let i = 0; i < currentFrame.length; i++) {
const animation = currentFrame[i];
priority = animation.priority;
if (!animation.idle) {
willAdvance(animation);
animation.advance(dt);
if (!animation.idle) {
nextFrame.push(animation);
}
}
}
priority = 0;
prevFrame = currentFrame;
prevFrame.length = 0;
currentFrame = nextFrame;
return currentFrame.length > 0;
}
function findIndex(arr, test) {
const index = arr.findIndex(test);
return index < 0 ? arr.length : index;
}
// src/clamp.ts
var clamp = (min, max, v) => Math.min(Math.max(v, min), max);
// src/colors.ts
var colors2 = {
transparent: 0,
aliceblue: 4042850303,
antiquewhite: 4209760255,
aqua: 16777215,
aquamarine: 2147472639,
azure: 4043309055,
beige: 4126530815,
bisque: 4293182719,
black: 255,
blanchedalmond: 4293643775,
blue: 65535,
blueviolet: 2318131967,
brown: 2771004159,
burlywood: 3736635391,
burntsienna: 3934150143,
cadetblue: 1604231423,
chartreuse: 2147418367,
chocolate: 3530104575,
coral: 4286533887,
cornflowerblue: 1687547391,
cornsilk: 4294499583,
crimson: 3692313855,
cyan: 16777215,
darkblue: 35839,
darkcyan: 9145343,
darkgoldenrod: 3095792639,
darkgray: 2846468607,
darkgreen: 6553855,
darkgrey: 2846468607,
darkkhaki: 3182914559,
darkmagenta: 2332068863,
darkolivegreen: 1433087999,
darkorange: 4287365375,
darkorchid: 2570243327,
darkred: 2332033279,
darksalmon: 3918953215,
darkseagreen: 2411499519,
darkslateblue: 1211993087,
darkslategray: 793726975,
darkslategrey: 793726975,
darkturquoise: 13554175,
darkviolet: 2483082239,
deeppink: 4279538687,
deepskyblue: 12582911,
dimgray: 1768516095,
dimgrey: 1768516095,
dodgerblue: 512819199,
firebrick: 2988581631,
floralwhite: 4294635775,
forestgreen: 579543807,
fuchsia: 4278255615,
gainsboro: 3705462015,
ghostwhite: 4177068031,
gold: 4292280575,
goldenrod: 3668254975,
gray: 2155905279,
green: 8388863,
greenyellow: 2919182335,
grey: 2155905279,
honeydew: 4043305215,
hotpink: 4285117695,
indianred: 3445382399,
indigo: 1258324735,
ivory: 4294963455,
khaki: 4041641215,
lavender: 3873897215,
lavenderblush: 4293981695,
lawngreen: 2096890111,
lemonchiffon: 4294626815,
lightblue: 2916673279,
lightcoral: 4034953471,
lightcyan: 3774873599,
lightgoldenrodyellow: 4210742015,
lightgray: 3553874943,
lightgreen: 2431553791,
lightgrey: 3553874943,
lightpink: 4290167295,
lightsalmon: 4288707327,
lightseagreen: 548580095,
lightskyblue: 2278488831,
lightslategray: 2005441023,
lightslategrey: 2005441023,
lightsteelblue: 2965692159,
lightyellow: 4294959359,
lime: 16711935,
limegreen: 852308735,
linen: 4210091775,
magenta: 4278255615,
maroon: 2147483903,
mediumaquamarine: 1724754687,
mediumblue: 52735,
mediumorchid: 3126187007,
mediumpurple: 2473647103,
mediumseagreen: 1018393087,
mediumslateblue: 2070474495,
mediumspringgreen: 16423679,
mediumturquoise: 1221709055,
mediumvioletred: 3340076543,
midnightblue: 421097727,
mintcream: 4127193855,
mistyrose: 4293190143,
moccasin: 4293178879,
navajowhite: 4292783615,
navy: 33023,
oldlace: 4260751103,
olive: 2155872511,
olivedrab: 1804477439,
orange: 4289003775,
orangered: 4282712319,
orchid: 3664828159,
palegoldenrod: 4008225535,
palegreen: 2566625535,
paleturquoise: 2951671551,
palevioletred: 3681588223,
papayawhip: 4293907967,
peachpuff: 4292524543,
peru: 3448061951,
pink: 4290825215,
plum: 3718307327,
powderblue: 2967529215,
purple: 2147516671,
rebeccapurple: 1714657791,
red: 4278190335,
rosybrown: 3163525119,
royalblue: 1097458175,
saddlebrown: 2336560127,
salmon: 4202722047,
sandybrown: 4104413439,
seagreen: 780883967,
seashell: 4294307583,
sienna: 2689740287,
silver: 3233857791,
skyblue: 2278484991,
slateblue: 1784335871,
slategray: 1887473919,
slategrey: 1887473919,
snow: 4294638335,
springgreen: 16744447,
steelblue: 1182971135,
tan: 3535047935,
teal: 8421631,
thistle: 3636451583,
tomato: 4284696575,
turquoise: 1088475391,
violet: 4001558271,
wheat: 4125012991,
white: 4294967295,
whitesmoke: 4126537215,
yellow: 4294902015,
yellowgreen: 2597139199
};
// src/colorMatchers.ts
var NUMBER = "[-+]?\\d*\\.?\\d+";
var PERCENTAGE = NUMBER + "%";
function call(...parts) {
return "\\(\\s*(" + parts.join(")\\s*,\\s*(") + ")\\s*\\)";
}
var rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
var rgba = new RegExp("rgba" + call(NUMBER, NUMBER, NUMBER, NUMBER));
var hsl = new RegExp("hsl" + call(NUMBER, PERCENTAGE, PERCENTAGE));
var hsla = new RegExp(
"hsla" + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER)
);
var hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
var hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
var hex6 = /^#([0-9a-fA-F]{6})$/;
var hex8 = /^#([0-9a-fA-F]{8})$/;
// src/normalizeColor.ts
function normalizeColor(color) {
let match;
if (typeof color === "number") {
return color >>> 0 === color && color >= 0 && color <= 4294967295 ? color : null;
}
if (match = hex6.exec(color))
return parseInt(match[1] + "ff", 16) >>> 0;
if (colors && colors[color] !== void 0) {
return colors[color];
}
if (match = rgb.exec(color)) {
return (parse255(match[1]) << 24 | // r
parse255(match[2]) << 16 | // g
parse255(match[3]) << 8 | // b
255) >>> // a
0;
}
if (match = rgba.exec(color)) {
return (parse255(match[1]) << 24 | // r
parse255(match[2]) << 16 | // g
parse255(match[3]) << 8 | // b
parse1(match[4])) >>> // a
0;
}
if (match = hex3.exec(color)) {
return parseInt(
match[1] + match[1] + // r
match[2] + match[2] + // g
match[3] + match[3] + // b
"ff",
// a
16
) >>> 0;
}
if (match = hex8.exec(color)) return parseInt(match[1], 16) >>> 0;
if (match = hex4.exec(color)) {
return parseInt(
match[1] + match[1] + // r
match[2] + match[2] + // g
match[3] + match[3] + // b
match[4] + match[4],
// a
16
) >>> 0;
}
if (match = hsl.exec(color)) {
return (hslToRgb(
parse360(match[1]),
// h
parsePercentage(match[2]),
// s
parsePercentage(match[3])
// l
) | 255) >>> // a
0;
}
if (match = hsla.exec(color)) {
return (hslToRgb(
parse360(match[1]),
// h
parsePercentage(match[2]),
// s
parsePercentage(match[3])
// l
) | parse1(match[4])) >>> // a
0;
}
return null;
}
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
function hslToRgb(h, s, l) {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
const r = hue2rgb(p, q, h + 1 / 3);
const g = hue2rgb(p, q, h);
const b = hue2rgb(p, q, h - 1 / 3);
return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
}
function parse255(str) {
const int = parseInt(str, 10);
if (int < 0) return 0;
if (int > 255) return 255;
return int;
}
function parse360(str) {
const int = parseFloat(str);
return (int % 360 + 360) % 360 / 360;
}
function parse1(str) {
const num = parseFloat(str);
if (num < 0) return 0;
if (num > 1) return 255;
return Math.round(num * 255);
}
function parsePercentage(str) {
const int = parseFloat(str);
if (int < 0) return 0;
if (int > 100) return 1;
return int / 100;
}
// src/colorToRgba.ts
function colorToRgba(input) {
let int32Color = normalizeColor(input);
if (int32Color === null) return input;
int32Color = int32Color || 0;
const r = (int32Color & 4278190080) >>> 24;
const g = (int32Color & 16711680) >>> 16;
const b = (int32Color & 65280) >>> 8;
const a = (int32Color & 255) / 255;
return `rgba(${r}, ${g}, ${b}, ${a})`;
}
// src/createInterpolator.ts
var createInterpolator = (range, output, extrapolate) => {
if (is.fun(range)) {
return range;
}
if (is.arr(range)) {
return createInterpolator({
range,
output,
extrapolate
});
}
if (is.str(range.output[0])) {
return createStringInterpolator(range);
}
const config = range;
const outputRange = config.output;
const inputRange = config.range || [0, 1];
const extrapolateLeft = config.extrapolateLeft || config.extrapolate || "extend";
const extrapolateRight = config.extrapolateRight || config.extrapolate || "extend";
const easing = config.easing || ((t) => t);
return (input) => {
const range2 = findRange(input, inputRange);
return interpolate(
input,
inputRange[range2],
inputRange[range2 + 1],
outputRange[range2],
outputRange[range2 + 1],
easing,
extrapolateLeft,
extrapolateRight,
config.map
);
};
};
function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight, map) {
let result = map ? map(input) : input;
if (result < inputMin) {
if (extrapolateLeft === "identity") return result;
else if (extrapolateLeft === "clamp") result = inputMin;
}
if (result > inputMax) {
if (extrapolateRight === "identity") return result;
else if (extrapolateRight === "clamp") result = inputMax;
}
if (outputMin === outputMax) return outputMin;
if (inputMin === inputMax) return input <= inputMin ? outputMin : outputMax;
if (inputMin === -Infinity) result = -result;
else if (inputMax === Infinity) result = result - inputMin;
else result = (result - inputMin) / (inputMax - inputMin);
result = easing(result);
if (outputMin === -Infinity) result = -result;
else if (outputMax === Infinity) result = result + outputMin;
else result = result * (outputMax - outputMin) + outputMin;
return result;
}
function findRange(input, inputRange) {
for (var i = 1; i < inputRange.length - 1; ++i)
if (inputRange[i] >= input) break;
return i - 1;
}
// src/easings.ts
var steps = (steps2, direction = "end") => (progress2) => {
progress2 = direction === "end" ? Math.min(progress2, 0.999) : Math.max(progress2, 1e-3);
const expanded = progress2 * steps2;
const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
return clamp(0, 1, rounded / steps2);
};
var c1 = 1.70158;
var c2 = c1 * 1.525;
var c3 = c1 + 1;
var c4 = 2 * Math.PI / 3;
var c5 = 2 * Math.PI / 4.5;
var 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;
}
};
var 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
};
// src/fluids.ts
var $get = Symbol.for("FluidValue.get");
var $observers = Symbol.for("FluidValue.observers");
var hasFluidValue = (arg) => Boolean(arg && arg[$get]);
var getFluidValue = (arg) => arg && arg[$get] ? arg[$get]() : arg;
var getFluidObservers = (target) => target[$observers] || null;
function callFluidObserver(observer2, event) {
if (observer2.eventObserved) {
observer2.eventObserved(event);
} else {
observer2(event);
}
}
function callFluidObservers(target, event) {
const observers = target[$observers];
if (observers) {
observers.forEach((observer2) => {
callFluidObserver(observer2, event);
});
}
}
$get, $observers;
var FluidValue = class {
constructor(get) {
if (!get && !(get = this.get)) {
throw Error("Unknown getter");
}
setFluidGetter(this, get);
}
};
var setFluidGetter = (target, get) => setHidden(target, $get, get);
function addFluidObserver(target, observer2) {
if (target[$get]) {
let observers = target[$observers];
if (!observers) {
setHidden(target, $observers, observers = /* @__PURE__ */ new Set());
}
if (!observers.has(observer2)) {
observers.add(observer2);
if (target.observerAdded) {
target.observerAdded(observers.size, observer2);
}
}
}
return observer2;
}
function removeFluidObserver(target, observer2) {
const observers = target[$observers];
if (observers && observers.has(observer2)) {
const count = observers.size - 1;
if (count) {
observers.delete(observer2);
} else {
target[$observers] = null;
}
if (target.observerRemoved) {
target.observerRemoved(count, observer2);
}
}
}
var setHidden = (target, key, value) => Object.defineProperty(target, key, {
value,
writable: true,
configurable: true
});
// src/regexs.ts
var numberRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
var colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
var unitRegex = new RegExp(`(${numberRegex.source})(%|[a-z]+)`, "i");
var rgbaRegex = /rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi;
var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
// src/variableToRgba.ts
var variableToRgba = (input) => {
const [token, fallback] = parseCSSVariable(input);
if (!token || isSSR()) {
return input;
}
const value = window.getComputedStyle(document.documentElement).getPropertyValue(token);
if (value) {
return value.trim();
} else if (fallback && fallback.startsWith("--")) {
const value2 = window.getComputedStyle(document.documentElement).getPropertyValue(fallback);
if (value2) {
return value2;
} else {
return input;
}
} else if (fallback && cssVariableRegex.test(fallback)) {
return variableToRgba(fallback);
} else if (fallback) {
return fallback;
}
return input;
};
var parseCSSVariable = (current) => {
const match = cssVariableRegex.exec(current);
if (!match) return [,];
const [, token, fallback] = match;
return [token, fallback];
};
// src/stringInterpolation.ts
var namedColorRegex;
var rgbaRound = (_, p1, p2, p3, p4) => `rgba(${Math.round(p1)}, ${Math.round(p2)}, ${Math.round(p3)}, ${p4})`;
var createStringInterpolator2 = (config) => {
if (!namedColorRegex)
namedColorRegex = colors ? (
// match color names, ignore partial matches
new RegExp(`(${Object.keys(colors).join("|")})(?!\\w)`, "g")
) : (
// never match
/^\b$/
);
const output = config.output.map((value) => {
return getFluidValue(value).replace(cssVariableRegex, variableToRgba).replace(colorRegex, colorToRgba).replace(namedColorRegex, colorToRgba);
});
const keyframes = output.map((value) => value.match(numberRegex).map(Number));
const outputRanges = keyframes[0].map(
(_, i) => keyframes.map((values) => {
if (!(i in values)) {
throw Error('The arity of each "output" value must be equal');
}
return values[i];
})
);
const interpolators = outputRanges.map(
(output2) => createInterpolator({ ...config, output: output2 })
);
return (input) => {
const missingUnit = !unitRegex.test(output[0]) && output.find((value) => unitRegex.test(value))?.replace(numberRegex, "");
let i = 0;
return output[0].replace(
numberRegex,
() => `${interpolators[i++](input)}${missingUnit || ""}`
).replace(rgbaRegex, rgbaRound);
};
};
// src/deprecations.ts
var prefix = "react-spring: ";
var once = (fn) => {
const func = fn;
let called = false;
if (typeof func != "function") {
throw new TypeError(`${prefix}once requires a function parameter`);
}
return (...args) => {
if (!called) {
func(...args);
called = true;
}
};
};
var warnInterpolate = once(console.warn);
function deprecateInterpolate() {
warnInterpolate(
`${prefix}The "interpolate" function is deprecated in v9 (use "to" instead)`
);
}
var warnDirectCall = once(console.warn);
function deprecateDirectCall() {
warnDirectCall(
`${prefix}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead), this will be removed in later 0.X.0 versions`
);
}
// src/isAnimatedString.ts
function isAnimatedString(value) {
return is.str(value) && (value[0] == "#" || /\d/.test(value) || // Do not identify a CSS variable as an AnimatedString if its SSR
!isSSR() && cssVariableRegex.test(value) || value in (colors || {}));
}
// src/dom-events/scroll/index.ts
import { raf as raf3 } from "@react-spring/rafz";
// src/dom-events/resize/resizeElement.ts
var observer;
var resizeHandlers = /* @__PURE__ */ new WeakMap();
var handleObservation = (entries) => entries.forEach(({ target, contentRect }) => {
return resizeHandlers.get(target)?.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 = /* @__PURE__ */ new Set();
resizeHandlers.set(target, elementHandlers);
}
elementHandlers.add(handler);
if (observer) {
observer.observe(target);
}
return () => {
const elementHandlers2 = resizeHandlers.get(target);
if (!elementHandlers2) return;
elementHandlers2.delete(handler);
if (!elementHandlers2.size && observer) {
observer.unobserve(target);
}
};
}
// src/dom-events/resize/resizeWindow.ts
var listeners = /* @__PURE__ */ new Set();
var cleanupWindowResizeHandler;
var createResizeHandler = () => {
const handleResize = () => {
listeners.forEach(
(callback) => callback({
width: window.innerWidth,
height: window.innerHeight
})
);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
};
var resizeWindow = (callback) => {
listeners.add(callback);
if (!cleanupWindowResizeHandler) {
cleanupWindowResizeHandler = createResizeHandler();
}
return () => {
listeners.delete(callback);
if (!listeners.size && cleanupWindowResizeHandler) {
cleanupWindowResizeHandler();
cleanupWindowResizeHandler = void 0;
}
};
};
// src/dom-events/resize/index.ts
var onResize = (callback, { container = document.documentElement } = {}) => {
if (container === document.documentElement) {
return resizeWindow(callback);
} else {
return resizeElement(callback, container);
}
};
// src/progress.ts
var progress = (min, max, value) => max - min === 0 ? 1 : (value - min) / (max - min);
// src/dom-events/scroll/ScrollHandler.ts
var SCROLL_KEYS = {
x: {
length: "Width",
position: "Left"
},
y: {
length: "Height",
position: "Top"
}
};
var ScrollHandler = class {
constructor(callback, container) {
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()
};
}
};
// src/dom-events/scroll/index.ts
var scrollListeners = /* @__PURE__ */ new WeakMap();
var resizeListeners = /* @__PURE__ */ new WeakMap();
var onScrollHandlers = /* @__PURE__ */ new WeakMap();
var getTarget = (container) => container === document.documentElement ? window : container;
var onScroll = (callback, { container = document.documentElement } = {}) => {
let containerHandlers = onScrollHandlers.get(container);
if (!containerHandlers) {
containerHandlers = /* @__PURE__ */ new Set();
onScrollHandlers.set(container, containerHandlers);
}
const containerHandler = new ScrollHandler(callback, container);
containerHandlers.add(containerHandler);
if (!scrollListeners.has(container)) {
const listener = () => {
containerHandlers?.forEach((handler) => handler.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 }));
}
target.addEventListener("scroll", listener, { passive: true });
}
const animateScroll = scrollListeners.get(container);
raf3(animateScroll);
return () => {
raf3.cancel(animateScroll);
const containerHandlers2 = onScrollHandlers.get(container);
if (!containerHandlers2) return;
containerHandlers2.delete(containerHandler);
if (containerHandlers2.size) return;
const listener = scrollListeners.get(container);
scrollListeners.delete(container);
if (listener) {
getTarget(container).removeEventListener("scroll", listener);
window.removeEventListener("resize", listener);
resizeListeners.get(container)?.();
}
};
};
// src/hooks/useConstant.ts
import { useRef } from "react";
function useConstant(init) {
const ref = useRef(null);
if (ref.current === null) {
ref.current = init();
}
return ref.current;
}
// src/hooks/useForceUpdate.ts
import { useState } from "react";
// src/hooks/useIsMounted.ts
import { useRef as useRef2 } from "react";
// src/hooks/useIsomorphicLayoutEffect.ts
import { useEffect, useLayoutEffect } from "react";
var useIsomorphicLayoutEffect = isSSR() ? useEffect : useLayoutEffect;
// src/hooks/useIsMounted.ts
var useIsMounted = () => {
const isMounted = useRef2(false);
useIsomorphicLayoutEffect(() => {
isMounted.current = true;
return () => {
isMounted.current = false;
};
}, []);
return isMounted;
};
// src/hooks/useForceUpdate.ts
function useForceUpdate() {
const update = useState()[1];
const isMounted = useIsMounted();
return () => {
if (isMounted.current) {
update(Math.random());
}
};
}
// src/hooks/useMemoOne.ts
import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
function useMemoOne(getResult, inputs) {
const [initial] = useState2(
() => ({
inputs,
result: getResult()
})
);
const committed = useRef3(void 0);
const prevCache = committed.current;
let cache = prevCache;
if (cache) {
const useCache = Boolean(
inputs && cache.inputs && areInputsEqual(inputs, cache.inputs)
);
if (!useCache) {
cache = {
inputs,
result: getResult()
};
}
} else {
cache = initial;
}
useEffect2(() => {
committed.current = cache;
if (prevCache == initial) {
initial.inputs = initial.result = void 0;
}
}, [cache]);
return cache.result;
}
function areInputsEqual(next, prev) {
if (next.length !== prev.length) {
return false;
}
for (let i = 0; i < next.length; i++) {
if (next[i] !== prev[i]) {
return false;
}
}
return true;
}
// src/hooks/useOnce.ts
import { useEffect as useEffect3 } from "react";
var useOnce = (effect) => useEffect3(effect, emptyDeps);
var emptyDeps = [];
// src/hooks/usePrev.ts
import { useEffect as useEffect4, useRef as useRef4 } from "react";
function usePrev(value) {
const prevRef = useRef4(void 0);
useEffect4(() => {
prevRef.current = value;
});
return prevRef.current;
}
// src/hooks/useReducedMotion.ts
import { useState as useState3 } from "react";
var useReducedMotion = () => {
const [reducedMotion, setReducedMotion] = useState3(null);
useIsomorphicLayoutEffect(() => {
const mql = window.matchMedia("(prefers-reduced-motion)");
const handleMediaChange = (e) => {
setReducedMotion(e.matches);
assign({
skipAnimation: e.matches
});
};
handleMediaChange(mql);
if (mql.addEventListener) {
mql.addEventListener("change", handleMediaChange);
} else {
mql.addListener(handleMediaChange);
}
return () => {
if (mql.removeEventListener) {
mql.removeEventListener("change", handleMediaChange);
} else {
mql.removeListener(handleMediaChange);
}
};
}, []);
return reducedMotion;
};
// src/index.ts
import { raf as raf4 } from "@react-spring/rafz";
export {
FluidValue,
globals_exports as Globals,
addFluidObserver,
callFluidObserver,
callFluidObservers,
clamp,
colorToRgba,
colors2 as colors,
createInterpolator,
createStringInterpolator2 as 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,
raf4 as raf,
removeFluidObserver,
rgb,
rgba,
setFluidGetter,
toArray,
useConstant,
useForceUpdate,
useIsomorphicLayoutEffect,
useMemoOne,
useOnce,
usePrev,
useReducedMotion
};