@wix/interact 2.2.0 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/react.js +1 -1
- package/dist/cjs/web.js +1 -1
- package/dist/es/index.js +1 -1
- package/dist/es/react.js +2 -2
- package/dist/es/web.js +2 -2
- package/dist/{index-CzRuJxn8.js → index-A2Q0e94t.js} +4 -4
- package/dist/{index-CzRuJxn8.js.map → index-A2Q0e94t.js.map} +1 -1
- package/dist/{index-ByLXasWO.mjs → index-HeFaJMEX.mjs} +61 -54
- package/dist/{index-ByLXasWO.mjs.map → index-HeFaJMEX.mjs.map} +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/core/Interact.d.ts.map +1 -1
- package/dist/types/core/InteractionController.d.ts.map +1 -1
- package/package.json +15 -6
- package/rules/full-lean.md +12 -1
- package/rules/integration.md +11 -1
|
@@ -9,7 +9,7 @@ function C(t, e) {
|
|
|
9
9
|
return r !== void 0 ? `[${r}]` : "[]";
|
|
10
10
|
}) : t;
|
|
11
11
|
}
|
|
12
|
-
class
|
|
12
|
+
class G {
|
|
13
13
|
animations;
|
|
14
14
|
options;
|
|
15
15
|
ready;
|
|
@@ -253,7 +253,7 @@ function He(t) {
|
|
|
253
253
|
const e = we[t];
|
|
254
254
|
return e || (qt(t) ?? xt(t) ?? we.linear);
|
|
255
255
|
}
|
|
256
|
-
class Mt extends
|
|
256
|
+
class Mt extends G {
|
|
257
257
|
animationGroups;
|
|
258
258
|
delay;
|
|
259
259
|
offset;
|
|
@@ -636,7 +636,7 @@ function L(t, e) {
|
|
|
636
636
|
function zt(t, e) {
|
|
637
637
|
return t?.matches(`[data-motion-part~="${e}"]`) ? t : t?.querySelector(`[data-motion-part~="${e}"]`);
|
|
638
638
|
}
|
|
639
|
-
function
|
|
639
|
+
function Nt(t) {
|
|
640
640
|
const e = t.alternate ? "alternate" : "";
|
|
641
641
|
return t.reversed ? `${e ? `${e}-` : ""}reverse` : e || "normal";
|
|
642
642
|
}
|
|
@@ -646,7 +646,7 @@ function re(t) {
|
|
|
646
646
|
function Ie(t, e, n) {
|
|
647
647
|
return `${t.name || "cover"} ${n && t.offset.unit !== "percentage" ? `calc(100% + ${re(t.offset)}${e ? ` + ${e}` : ""})` : e ? `calc(${re(t.offset)} + ${e})` : re(t.offset)}`;
|
|
648
648
|
}
|
|
649
|
-
function
|
|
649
|
+
function Dt(t) {
|
|
650
650
|
return {
|
|
651
651
|
start: Ie(t.startOffset, t.startOffsetAdd),
|
|
652
652
|
end: Ie(t.endOffset, t.endOffsetAdd, !0)
|
|
@@ -655,7 +655,7 @@ function Gt(t) {
|
|
|
655
655
|
function ze(t) {
|
|
656
656
|
return (e) => I.measure(() => e(t));
|
|
657
657
|
}
|
|
658
|
-
function
|
|
658
|
+
function Ne(t) {
|
|
659
659
|
return (e) => I.mutate(() => e(t));
|
|
660
660
|
}
|
|
661
661
|
function Z(t) {
|
|
@@ -675,16 +675,16 @@ function Z(t) {
|
|
|
675
675
|
return (e) => [{ ...e, keyframes: [] }];
|
|
676
676
|
return null;
|
|
677
677
|
}
|
|
678
|
-
function
|
|
678
|
+
function Gt(t, e, n) {
|
|
679
679
|
return t.map((s, r) => {
|
|
680
680
|
const i = {
|
|
681
681
|
fill: s.fill,
|
|
682
682
|
easing: Q(s.easing),
|
|
683
683
|
iterations: s.iterations === 0 ? 1 / 0 : s.iterations || 1,
|
|
684
684
|
composite: s.composite,
|
|
685
|
-
direction:
|
|
685
|
+
direction: Nt(s)
|
|
686
686
|
};
|
|
687
|
-
return
|
|
687
|
+
return De(e) ? (i.duration = s.duration, i.delay = s.delay || 0) : window.ViewTimeline && e?.trigger === "view-progress" ? i.duration = "auto" : (i.duration = 99.99, i.delay = 0.01), {
|
|
688
688
|
effect: s,
|
|
689
689
|
options: i,
|
|
690
690
|
id: n && `${n}-${r + 1}`,
|
|
@@ -692,18 +692,18 @@ function Nt(t, e, n) {
|
|
|
692
692
|
};
|
|
693
693
|
});
|
|
694
694
|
}
|
|
695
|
-
function
|
|
695
|
+
function De(t) {
|
|
696
696
|
return !t || t.trigger !== "pointer-move" && t.trigger !== "view-progress";
|
|
697
697
|
}
|
|
698
698
|
function Oe(t, e, n, s, r) {
|
|
699
699
|
if (t) {
|
|
700
|
-
if (
|
|
700
|
+
if (De(s) && (e.duration = e.duration || 1, r?.reducedMotion))
|
|
701
701
|
if (e.iterations === 1 || e.iterations == null)
|
|
702
702
|
e = { ...e, duration: 1 };
|
|
703
703
|
else
|
|
704
704
|
return [];
|
|
705
705
|
let i;
|
|
706
|
-
return n instanceof HTMLElement && (i = { measure: ze(n), mutate:
|
|
706
|
+
return n instanceof HTMLElement && (i = { measure: ze(n), mutate: Ne(n) }), t.web ? t.web(e, i, r) : t(e, i, r);
|
|
707
707
|
}
|
|
708
708
|
return [];
|
|
709
709
|
}
|
|
@@ -735,7 +735,7 @@ function ve(t, e, n, s, r) {
|
|
|
735
735
|
);
|
|
736
736
|
if (!c || c.length === 0)
|
|
737
737
|
return null;
|
|
738
|
-
const l =
|
|
738
|
+
const l = Gt(c, n, e.effectId);
|
|
739
739
|
let f;
|
|
740
740
|
const a = n?.trigger === "view-progress";
|
|
741
741
|
a && window.ViewTimeline && (f = new ViewTimeline({
|
|
@@ -755,7 +755,7 @@ function ve(t, e, n, s, r) {
|
|
|
755
755
|
if (a)
|
|
756
756
|
if (f)
|
|
757
757
|
I.mutate(() => {
|
|
758
|
-
const { start: b, end: S } =
|
|
758
|
+
const { start: b, end: S } = Dt(h);
|
|
759
759
|
w.rangeStart = b, w.rangeEnd = S, w.play();
|
|
760
760
|
});
|
|
761
761
|
else {
|
|
@@ -778,7 +778,7 @@ function ve(t, e, n, s, r) {
|
|
|
778
778
|
}
|
|
779
779
|
return d && (w.id = d), w;
|
|
780
780
|
});
|
|
781
|
-
return new
|
|
781
|
+
return new G(u, {
|
|
782
782
|
...e,
|
|
783
783
|
trigger: { ...n || {} },
|
|
784
784
|
// make sure the group is ready after all animation targets are measured and mutated
|
|
@@ -788,7 +788,7 @@ function ve(t, e, n, s, r) {
|
|
|
788
788
|
function Wt(t, e, n) {
|
|
789
789
|
const s = Z(e), r = t instanceof HTMLElement ? t : L(t);
|
|
790
790
|
if (s && s.prepare && r) {
|
|
791
|
-
const i = { measure: ze(r), mutate:
|
|
791
|
+
const i = { measure: ze(r), mutate: Ne(r) };
|
|
792
792
|
s.prepare(e, i);
|
|
793
793
|
}
|
|
794
794
|
n && I.mutate(n);
|
|
@@ -804,16 +804,16 @@ function Vt(t, e) {
|
|
|
804
804
|
o.includes(l) && c.push(
|
|
805
805
|
i?.find((f) => f.animationName === l)
|
|
806
806
|
);
|
|
807
|
-
}), c?.length ? new
|
|
807
|
+
}), c?.length ? new G(c) : null;
|
|
808
808
|
}
|
|
809
809
|
function jt(t, e) {
|
|
810
810
|
const s = (typeof t == "string" ? L(t) : t)?.getAnimations().filter((r) => {
|
|
811
811
|
const i = r.id || r.animationName;
|
|
812
812
|
return i ? i.startsWith(e) : !0;
|
|
813
813
|
});
|
|
814
|
-
return s?.length ? new
|
|
814
|
+
return s?.length ? new G(s) : null;
|
|
815
815
|
}
|
|
816
|
-
function
|
|
816
|
+
function Ge(t, e, n, s = {}) {
|
|
817
817
|
const { disabled: r, allowActiveEvent: i, ...o } = s, c = ve(t, e, n, o);
|
|
818
818
|
if (!c)
|
|
819
819
|
return null;
|
|
@@ -911,7 +911,7 @@ function We(t, e) {
|
|
|
911
911
|
void 0,
|
|
912
912
|
e?.reducedMotion
|
|
913
913
|
);
|
|
914
|
-
c instanceof
|
|
914
|
+
c instanceof G && n.push(c);
|
|
915
915
|
}
|
|
916
916
|
}
|
|
917
917
|
return n;
|
|
@@ -1036,7 +1036,7 @@ function Zt(t) {
|
|
|
1036
1036
|
const e = t.trim().split(/\s+/), n = e[0], s = e.length > 1 ? e[1] : e[0], r = (i) => i.startsWith("-") ? i.slice(1) : parseFloat(i) ? `-${i}` : i;
|
|
1037
1037
|
return `${r(n)} 0px ${r(s)}`;
|
|
1038
1038
|
}
|
|
1039
|
-
const
|
|
1039
|
+
const N = {}, k = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new WeakSet(), R = /* @__PURE__ */ new WeakMap();
|
|
1040
1040
|
let Ve = {}, H = null;
|
|
1041
1041
|
function en(t) {
|
|
1042
1042
|
Ve = t;
|
|
@@ -1056,8 +1056,8 @@ function Ce() {
|
|
|
1056
1056
|
}
|
|
1057
1057
|
function Ye(t, e = !1) {
|
|
1058
1058
|
const n = JSON.stringify({ ...t, isSafeMode: e });
|
|
1059
|
-
if (
|
|
1060
|
-
return
|
|
1059
|
+
if (N[n])
|
|
1060
|
+
return N[n];
|
|
1061
1061
|
const s = t.threshold ?? Jt, r = e ? Xt : {
|
|
1062
1062
|
root: null,
|
|
1063
1063
|
rootMargin: t.inset ? Zt(t.inset) : "0px",
|
|
@@ -1082,7 +1082,7 @@ function Ye(t, e = !1) {
|
|
|
1082
1082
|
(c.isIntersecting || !f) && je(l, c.isIntersecting);
|
|
1083
1083
|
});
|
|
1084
1084
|
}, r);
|
|
1085
|
-
return
|
|
1085
|
+
return N[n] = i, i;
|
|
1086
1086
|
}
|
|
1087
1087
|
function tn(t, e, n, s = {}, { reducedMotion: r, selectorCondition: i, animation: o } = {}) {
|
|
1088
1088
|
const c = { ...Ve, ...s }, l = n.triggerType || "once", f = o || ne(
|
|
@@ -1129,7 +1129,7 @@ function nn(t) {
|
|
|
1129
1129
|
W(k, t);
|
|
1130
1130
|
}
|
|
1131
1131
|
function sn() {
|
|
1132
|
-
H = null, Object.keys(
|
|
1132
|
+
H = null, Object.keys(N).forEach((t) => delete N[t]);
|
|
1133
1133
|
}
|
|
1134
1134
|
const Ae = {
|
|
1135
1135
|
add: tn,
|
|
@@ -1502,7 +1502,7 @@ function Sn(t, e, n, s, { reducedMotion: r }) {
|
|
|
1502
1502
|
});
|
|
1503
1503
|
});
|
|
1504
1504
|
} else {
|
|
1505
|
-
const f =
|
|
1505
|
+
const f = Ge(e, o, i);
|
|
1506
1506
|
if (f) {
|
|
1507
1507
|
const a = Array.isArray(f) ? f : [f], u = new wn({
|
|
1508
1508
|
viewSource: t,
|
|
@@ -1794,14 +1794,14 @@ let Qe = () => ({});
|
|
|
1794
1794
|
function zn(t) {
|
|
1795
1795
|
Qe = t;
|
|
1796
1796
|
}
|
|
1797
|
-
function
|
|
1797
|
+
function Nn(t, e, n, s = {}, { reducedMotion: r }) {
|
|
1798
1798
|
if (r)
|
|
1799
1799
|
return;
|
|
1800
1800
|
const i = {
|
|
1801
1801
|
trigger: "pointer-move",
|
|
1802
1802
|
element: t,
|
|
1803
1803
|
axis: s.axis ?? "y"
|
|
1804
|
-
}, o =
|
|
1804
|
+
}, o = Ge(e, P(n), i);
|
|
1805
1805
|
if (o) {
|
|
1806
1806
|
const c = Array.isArray(o) ? o : [o], l = new Hn({
|
|
1807
1807
|
root: s.hitArea === "self" ? t : void 0,
|
|
@@ -1817,12 +1817,12 @@ function Dn(t, e, n, s = {}, { reducedMotion: r }) {
|
|
|
1817
1817
|
});
|
|
1818
1818
|
}
|
|
1819
1819
|
}
|
|
1820
|
-
function
|
|
1820
|
+
function Dn(t) {
|
|
1821
1821
|
W(ue, t);
|
|
1822
1822
|
}
|
|
1823
|
-
const
|
|
1824
|
-
add:
|
|
1825
|
-
remove:
|
|
1823
|
+
const Gn = {
|
|
1824
|
+
add: Nn,
|
|
1825
|
+
remove: Dn,
|
|
1826
1826
|
registerOptionsGetter: zn
|
|
1827
1827
|
}, de = /* @__PURE__ */ new WeakMap();
|
|
1828
1828
|
function Wn(t, e, n, s, { reducedMotion: r, selectorCondition: i, animation: o }) {
|
|
@@ -2034,7 +2034,7 @@ const _ = {
|
|
|
2034
2034
|
pageVisible: Ae,
|
|
2035
2035
|
animationEnd: jn,
|
|
2036
2036
|
viewProgress: In,
|
|
2037
|
-
pointerMove:
|
|
2037
|
+
pointerMove: Gn,
|
|
2038
2038
|
activate: {
|
|
2039
2039
|
add: K("activate"),
|
|
2040
2040
|
remove: z.remove
|
|
@@ -2135,10 +2135,12 @@ class E {
|
|
|
2135
2135
|
), e.allowA11yTriggers !== void 0 && (E.allowA11yTriggers = e.allowA11yTriggers);
|
|
2136
2136
|
}
|
|
2137
2137
|
static getInstance(e) {
|
|
2138
|
-
|
|
2138
|
+
const n = E.instances.find((s) => s.has(e));
|
|
2139
|
+
return n || console.warn(`Interact: Instance for key "${e}" not found`), n;
|
|
2139
2140
|
}
|
|
2140
2141
|
static getController(e) {
|
|
2141
|
-
|
|
2142
|
+
const n = e ? E.controllerCache.get(e) : void 0;
|
|
2143
|
+
return n || console.warn(`Interact: Controller for key "${e}" not found`), n;
|
|
2142
2144
|
}
|
|
2143
2145
|
static setController(e, n) {
|
|
2144
2146
|
E.controllerCache.set(e, n);
|
|
@@ -2185,7 +2187,7 @@ class E {
|
|
|
2185
2187
|
}
|
|
2186
2188
|
}
|
|
2187
2189
|
let rs = 0;
|
|
2188
|
-
function
|
|
2190
|
+
function D(t, {
|
|
2189
2191
|
asCombinator: e = !1,
|
|
2190
2192
|
addItemFilter: n = !1,
|
|
2191
2193
|
useFirstChild: s = !1
|
|
@@ -2233,7 +2235,7 @@ function os(t, e = !1) {
|
|
|
2233
2235
|
sequences: u
|
|
2234
2236
|
};
|
|
2235
2237
|
s[i].triggers.push(h), s[i].selectors.add(
|
|
2236
|
-
|
|
2238
|
+
D(h, { useFirstChild: e })
|
|
2237
2239
|
);
|
|
2238
2240
|
const g = h.listContainer;
|
|
2239
2241
|
a.forEach((d) => {
|
|
@@ -2250,7 +2252,7 @@ function os(t, e = !1) {
|
|
|
2250
2252
|
if (d.interactionId = y, s[i].interactionIds.add(y), m === i)
|
|
2251
2253
|
return;
|
|
2252
2254
|
const v = ce(s, m);
|
|
2253
|
-
v.effects[y] || (v.effects[y] = [], v.interactionIds.add(y)), v.effects[y].push({ ...f, effect: d }), v.selectors.add(
|
|
2255
|
+
v.effects[y] || (v.effects[y] = [], v.interactionIds.add(y)), v.effects[y].push({ ...f, effect: d }), v.selectors.add(D(d, { useFirstChild: e }));
|
|
2254
2256
|
}), u?.forEach((d) => {
|
|
2255
2257
|
if (!d || Pe(d)) return;
|
|
2256
2258
|
const m = d, p = m.sequenceId || x(), y = m.effects;
|
|
@@ -2258,15 +2260,17 @@ function os(t, e = !1) {
|
|
|
2258
2260
|
v.effectId || (v.effectId = x());
|
|
2259
2261
|
let w = v.key;
|
|
2260
2262
|
if (!w && v.effectId) {
|
|
2261
|
-
const
|
|
2262
|
-
|
|
2263
|
+
const S = t.effects[v.effectId];
|
|
2264
|
+
S && (w = S.key);
|
|
2263
2265
|
}
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2266
|
+
w = w || i;
|
|
2267
|
+
const b = D(v, { useFirstChild: e });
|
|
2268
|
+
if (b && s[i].selectors.add(b), w !== i) {
|
|
2269
|
+
const S = ce(s, w), T = `${w}::seq::${p}::${o}`;
|
|
2270
|
+
S.sequences[T] || (S.sequences[T] = [], S.interactionIds.add(T)), S.sequences[T].push({
|
|
2267
2271
|
...f,
|
|
2268
2272
|
sequence: m
|
|
2269
|
-
}),
|
|
2273
|
+
}), S.selectors.add(b);
|
|
2270
2274
|
}
|
|
2271
2275
|
}
|
|
2272
2276
|
});
|
|
@@ -2612,7 +2616,7 @@ function Fe(t, e, n, s, r, i, o, c) {
|
|
|
2612
2616
|
effectId: r.effectId,
|
|
2613
2617
|
transition: r.transition,
|
|
2614
2618
|
properties: r.transitionProperties,
|
|
2615
|
-
childSelector:
|
|
2619
|
+
childSelector: D(r, {
|
|
2616
2620
|
asCombinator: !0,
|
|
2617
2621
|
addItemFilter: !0,
|
|
2618
2622
|
useFirstChild: c
|
|
@@ -2706,8 +2710,10 @@ class hs {
|
|
|
2706
2710
|
}
|
|
2707
2711
|
disconnect({ removeFromCache: e = !1 } = {}) {
|
|
2708
2712
|
if ((this.key || this.element.dataset.interactKey) && ds(this, e), this.sheet) {
|
|
2709
|
-
const s =
|
|
2710
|
-
|
|
2713
|
+
const s = this.element?.getRootNode(), r = s.host ? s : document;
|
|
2714
|
+
r.adoptedStyleSheets.indexOf(this.sheet) !== -1 && (r.adoptedStyleSheets = r.adoptedStyleSheets.filter(
|
|
2715
|
+
(o) => o !== this.sheet
|
|
2716
|
+
));
|
|
2711
2717
|
}
|
|
2712
2718
|
this._observers = /* @__PURE__ */ new WeakMap(), this.sheet = null, this.connected = !1;
|
|
2713
2719
|
}
|
|
@@ -2715,16 +2721,17 @@ class hs {
|
|
|
2715
2721
|
this.disconnect(), this.connect();
|
|
2716
2722
|
}
|
|
2717
2723
|
renderStyle(e) {
|
|
2724
|
+
const n = this.element?.getRootNode(), s = n.host ? n : document;
|
|
2718
2725
|
if (!this.sheet)
|
|
2719
2726
|
this.sheet = new CSSStyleSheet(), this.sheet.replaceSync(e.join(`
|
|
2720
|
-
`)),
|
|
2727
|
+
`)), s.adoptedStyleSheets = [...s.adoptedStyleSheets || [], this.sheet];
|
|
2721
2728
|
else {
|
|
2722
|
-
let
|
|
2723
|
-
for (const
|
|
2729
|
+
let r = this.sheet.cssRules.length;
|
|
2730
|
+
for (const i of e)
|
|
2724
2731
|
try {
|
|
2725
|
-
this.sheet.insertRule(
|
|
2726
|
-
} catch (
|
|
2727
|
-
console.error(
|
|
2732
|
+
this.sheet.insertRule(i, r), r++;
|
|
2733
|
+
} catch (o) {
|
|
2734
|
+
console.error(o);
|
|
2728
2735
|
}
|
|
2729
2736
|
}
|
|
2730
2737
|
}
|
|
@@ -2771,7 +2778,7 @@ function vs(t) {
|
|
|
2771
2778
|
}
|
|
2772
2779
|
const ms = (t, e, n, s) => {
|
|
2773
2780
|
let i = `[data-interact-key="${t.replace(/"/g, "'")}"]`;
|
|
2774
|
-
const o =
|
|
2781
|
+
const o = D(e, { asCombinator: !0, useFirstChild: s });
|
|
2775
2782
|
return o && (i = `${i} ${o}`), n && (i = U(i, n)), i;
|
|
2776
2783
|
};
|
|
2777
2784
|
function ys(t, e = !1) {
|
|
@@ -2829,4 +2836,4 @@ export {
|
|
|
2829
2836
|
ys as g,
|
|
2830
2837
|
vs as r
|
|
2831
2838
|
};
|
|
2832
|
-
//# sourceMappingURL=index-
|
|
2839
|
+
//# sourceMappingURL=index-HeFaJMEX.mjs.map
|