@react-spring/shared
Version:
Globals and shared modules
1,183 lines (1,146 loc) • 34.6 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to2, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to2, key) && key !== except)
__defProp(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to2;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
FluidValue: () => FluidValue,
Globals: () => globals_exports,
addFluidObserver: () => addFluidObserver,
callFluidObserver: () => callFluidObserver,
callFluidObservers: () => callFluidObservers,
clamp: () => clamp,
colorToRgba: () => colorToRgba,
colors: () => colors2,
createInterpolator: () => createInterpolator,
createStringInterpolator: () => createStringInterpolator2,
defineHidden: () => defineHidden,
deprecateDirectCall: () => deprecateDirectCall,
deprecateInterpolate: () => deprecateInterpolate,
each: () => each,
eachProp: () => eachProp,
easings: () => easings,
flush: () => flush,
flushCalls: () => flushCalls,
frameLoop: () => frameLoop,
getFluidObservers: () => getFluidObservers,
getFluidValue: () => getFluidValue,
hasFluidValue: () => hasFluidValue,
hex3: () => hex3,
hex4: () => hex4,
hex6: () => hex6,
hex8: () => hex8,
hsl: () => hsl,
hsla: () => hsla,
is: () => is,
isAnimatedString: () => isAnimatedString,
isEqual: () => isEqual,
isSSR: () => isSSR,
noop: () => noop,
onResize: () => onResize,
onScroll: () => onScroll,
once: () => once,
prefix: () => prefix,
raf: () => import_rafz4.raf,
removeFluidObserver: () => removeFluidObserver,
rgb: () => rgb,
rgba: () => rgba,
setFluidGetter: () => setFluidGetter,
toArray: () => toArray,
useConstant: () => useConstant,
useForceUpdate: () => useForceUpdate,
useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
useMemoOne: () => useMemoOne,
useOnce: () => useOnce,
usePrev: () => usePrev,
useReducedMotion: () => useReducedMotion
});
module.exports = __toCommonJS(src_exports);
// src/globals.ts
var globals_exports = {};
__export(globals_exports, {
assign: () => assign,
colors: () => colors,
createStringInterpolator: () => createStringInterpolator,
skipAnimation: () => skipAnimation,
to: () => to,
willAdvance: () => willAdvance
});
var import_rafz = require("@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) import_rafz.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) import_rafz.raf.use(globals.requestAnimationFrame);
if (globals.batchedUpdates) import_rafz.raf.batchedUpdates = globals.batchedUpdates;
if (globals.willAdvance) willAdvance = globals.willAdvance;
if (globals.frameLoop) import_rafz.raf.frameLoop = globals.frameLoop;
};
// src/FrameLoop.ts
var import_rafz2 = require("@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);
import_rafz2.raf.onStart(flushStartQueue);
} else {
startSafely(animation);
(0, import_rafz2.raf)(advance);
}
},
/** Advance all animations by the given time. */
advance,
/** Call this when an animation's priority changes. */
sort(animation) {
if (priority) {
import_rafz2.raf.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();
(0, import_rafz2.raf)(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
var import_rafz3 = require("@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);
(0, import_rafz3.raf)(animateScroll);
return () => {
import_rafz3.raf.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
var import_react = require("react");
function useConstant(init) {
const ref = (0, import_react.useRef)(null);
if (ref.current === null) {
ref.current = init();
}
return ref.current;
}
// src/hooks/useForceUpdate.ts
var import_react4 = require("react");
// src/hooks/useIsMounted.ts
var import_react3 = require("react");
// src/hooks/useIsomorphicLayoutEffect.ts
var import_react2 = require("react");
var useIsomorphicLayoutEffect = isSSR() ? import_react2.useEffect : import_react2.useLayoutEffect;
// src/hooks/useIsMounted.ts
var useIsMounted = () => {
const isMounted = (0, import_react3.useRef)(false);
useIsomorphicLayoutEffect(() => {
isMounted.current = true;
return () => {
isMounted.current = false;
};
}, []);
return isMounted;
};
// src/hooks/useForceUpdate.ts
function useForceUpdate() {
const update = (0, import_react4.useState)()[1];
const isMounted = useIsMounted();
return () => {
if (isMounted.current) {
update(Math.random());
}
};
}
// src/hooks/useMemoOne.ts
var import_react5 = require("react");
function useMemoOne(getResult, inputs) {
const [initial] = (0, import_react5.useState)(
() => ({
inputs,
result: getResult()
})
);
const committed = (0, import_react5.useRef)(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;
}
(0, import_react5.useEffect)(() => {
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
var import_react6 = require("react");
var useOnce = (effect) => (0, import_react6.useEffect)(effect, emptyDeps);
var emptyDeps = [];
// src/hooks/usePrev.ts
var import_react7 = require("react");
function usePrev(value) {
const prevRef = (0, import_react7.useRef)(void 0);
(0, import_react7.useEffect)(() => {
prevRef.current = value;
});
return prevRef.current;
}
// src/hooks/useReducedMotion.ts
var import_react8 = require("react");
var useReducedMotion = () => {
const [reducedMotion, setReducedMotion] = (0, import_react8.useState)(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
var import_rafz4 = require("@react-spring/rafz");
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
FluidValue,
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,
raf,
removeFluidObserver,
rgb,
rgba,
setFluidGetter,
toArray,
useConstant,
useForceUpdate,
useIsomorphicLayoutEffect,
useMemoOne,
useOnce,
usePrev,
useReducedMotion
});