@orioncactuscorp/ui 1.14.0 → 1.15.0
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/CHANGELOG.md +92 -0
- package/README.md +65 -36
- package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
- package/dist/components/Button/Button.css +1 -1
- package/dist/components/CheckMark/CheckMark.js +19 -17
- package/dist/components/Checkbox/Checkbox.css +1 -1
- package/dist/components/Checkbox/Checkbox.js +38 -36
- package/dist/components/FloatingWindow/FloatingWindow.js +138 -137
- package/dist/components/Interaction/Interaction.css +1 -1
- package/dist/components/Menu/Menu.css +1 -1
- package/dist/components/Menu/Menu.js +95 -87
- package/dist/components/Modal/Modal.css +1 -1
- package/dist/components/Modal/Modal.js +504 -488
- package/dist/components/Modal/Modal.module.scss.js +69 -62
- package/dist/components/Modal/keyboardSession.js +104 -0
- package/dist/components/Modal/snapPoints.js +95 -82
- package/dist/components/Modal/useModalDrag.js +587 -637
- package/dist/components/Modal/useModalKeyboardAvoidance.js +159 -0
- package/dist/components/Modal/useModalViewportGeometry.js +36 -0
- package/dist/components/PositionSnap/PositionSnap.css +1 -0
- package/dist/components/PositionSnap/PositionSnap.js +330 -0
- package/dist/components/PositionSnap/PositionSnap.module.scss.js +9 -0
- package/dist/components/PositionSnap/contexts.js +12 -0
- package/dist/components/PositionSnap/geometry.js +75 -0
- package/dist/components/PositionSnap/gesture.js +7 -0
- package/dist/components/PositionSnap/policy.js +60 -0
- package/dist/components/PositionSnap.d.ts +6 -0
- package/dist/components/PositionSnap.js +7 -0
- package/dist/components/ProgressIndicator/ProgressIndicator.css +1 -0
- package/dist/components/ProgressIndicator/ProgressIndicator.js +45 -0
- package/dist/components/ProgressIndicator/ProgressIndicator.module.scss.js +13 -0
- package/dist/components/ProgressIndicator.d.ts +6 -0
- package/dist/components/ProgressIndicator.js +4 -0
- package/dist/components/Radio/Radio.css +1 -1
- package/dist/components/Radio/Radio.js +26 -24
- package/dist/components/Switch/Switch.css +1 -1
- package/dist/components/Switch/Switch.js +18 -16
- package/dist/components/Tabs/Tabs.css +1 -1
- package/dist/components/Tooltip/Tooltip.css +1 -1
- package/dist/components/Tooltip/Tooltip.js +59 -56
- package/dist/components/Tooltip/Tooltip.module.scss.js +6 -4
- package/dist/components/internal/ModalPresentation.js +126 -124
- package/dist/components/internal/OverlayPortalContext.js +20 -0
- package/dist/index.js +133 -126
- package/dist/styles.css +12 -10
- package/dist/ui/src/components/CheckMark/CheckMark.d.ts +1 -1
- package/dist/ui/src/components/CheckMark/CheckMark.d.ts.map +1 -1
- package/dist/ui/src/components/CheckMark/types.d.ts +2 -1
- package/dist/ui/src/components/CheckMark/types.d.ts.map +1 -1
- package/dist/ui/src/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/ui/src/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/ui/src/components/Checkbox/types.d.ts +2 -1
- package/dist/ui/src/components/Checkbox/types.d.ts.map +1 -1
- package/dist/ui/src/components/FloatingWindow/FloatingWindow.d.ts.map +1 -1
- package/dist/ui/src/components/FloatingWindow/types.d.ts +1 -1
- package/dist/ui/src/components/FloatingWindow/types.d.ts.map +1 -1
- package/dist/ui/src/components/Interaction/index.d.ts +1 -1
- package/dist/ui/src/components/Interaction/index.d.ts.map +1 -1
- package/dist/ui/src/components/Interaction/types.d.ts +9 -1
- package/dist/ui/src/components/Interaction/types.d.ts.map +1 -1
- package/dist/ui/src/components/Menu/Menu.d.ts +2 -2
- package/dist/ui/src/components/Menu/Menu.d.ts.map +1 -1
- package/dist/ui/src/components/Menu/types.d.ts +9 -2
- package/dist/ui/src/components/Menu/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/Modal.d.ts +1 -1
- package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/keyboardSession.d.ts +46 -0
- package/dist/ui/src/components/Modal/keyboardSession.d.ts.map +1 -0
- package/dist/ui/src/components/Modal/snapPoints.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/types.d.ts +8 -1
- package/dist/ui/src/components/Modal/types.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
- package/dist/ui/src/components/Modal/useModalKeyboardAvoidance.d.ts +17 -0
- package/dist/ui/src/components/Modal/useModalKeyboardAvoidance.d.ts.map +1 -0
- package/dist/ui/src/components/Modal/useModalViewportGeometry.d.ts +9 -0
- package/dist/ui/src/components/Modal/useModalViewportGeometry.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/PositionSnap.d.ts +11 -0
- package/dist/ui/src/components/PositionSnap/PositionSnap.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/contexts.d.ts +17 -0
- package/dist/ui/src/components/PositionSnap/contexts.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/geometry.d.ts +31 -0
- package/dist/ui/src/components/PositionSnap/geometry.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/gesture.d.ts +2 -0
- package/dist/ui/src/components/PositionSnap/gesture.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/index.d.ts +3 -0
- package/dist/ui/src/components/PositionSnap/index.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/policy.d.ts +24 -0
- package/dist/ui/src/components/PositionSnap/policy.d.ts.map +1 -0
- package/dist/ui/src/components/PositionSnap/types.d.ts +31 -0
- package/dist/ui/src/components/PositionSnap/types.d.ts.map +1 -0
- package/dist/ui/src/components/ProgressIndicator/ProgressIndicator.d.ts +4 -0
- package/dist/ui/src/components/ProgressIndicator/ProgressIndicator.d.ts.map +1 -0
- package/dist/ui/src/components/ProgressIndicator/index.d.ts +3 -0
- package/dist/ui/src/components/ProgressIndicator/index.d.ts.map +1 -0
- package/dist/ui/src/components/ProgressIndicator/types.d.ts +17 -0
- package/dist/ui/src/components/ProgressIndicator/types.d.ts.map +1 -0
- package/dist/ui/src/components/Radio/Radio.d.ts +1 -1
- package/dist/ui/src/components/Radio/Radio.d.ts.map +1 -1
- package/dist/ui/src/components/Radio/types.d.ts +2 -1
- package/dist/ui/src/components/Radio/types.d.ts.map +1 -1
- package/dist/ui/src/components/Switch/Switch.d.ts +1 -1
- package/dist/ui/src/components/Switch/Switch.d.ts.map +1 -1
- package/dist/ui/src/components/Switch/types.d.ts +2 -1
- package/dist/ui/src/components/Switch/types.d.ts.map +1 -1
- package/dist/ui/src/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/ui/src/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/ui/src/components/Tooltip/types.d.ts +6 -0
- package/dist/ui/src/components/Tooltip/types.d.ts.map +1 -1
- package/dist/ui/src/components/internal/ModalPresentation.d.ts +2 -1
- package/dist/ui/src/components/internal/ModalPresentation.d.ts.map +1 -1
- package/dist/ui/src/components/internal/OverlayPortalContext.d.ts +10 -0
- package/dist/ui/src/components/internal/OverlayPortalContext.d.ts.map +1 -0
- package/dist/ui/src/index.d.ts +5 -1
- package/dist/ui/src/index.d.ts.map +1 -1
- package/docs/api-conventions.md +4 -0
- package/docs/overlay-stacking.md +48 -0
- package/docs/responsive-foundation-profile.md +1 -1
- package/docs/scss-helpers.md +110 -5
- package/docs/selector-contract.md +77 -2
- package/docs/tokens.md +2 -0
- package/package.json +1 -1
- package/src/scss/foundations/atomic.scss +9 -8
- package/src/scss/index.scss +2 -0
- package/src/scss/mixins/_fluid.scss +57 -0
- package/src/scss/mixins/_fluid.test.ts +87 -0
- package/src/scss/mixins/_gradient.scss +99 -0
- package/src/scss/mixins/_gradient.test.ts +111 -0
- package/src/scss/mixins/_responsive.scss +2 -1
- package/src/scss/mixins/_typo.scss +2 -1
- package/src/scss/mixins/_units.scss +14 -0
- package/src/scss/mixins/_utils.scss +3 -22
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
import { useReducer as F, useRef as _, useLayoutEffect as h, useEffect as L, useMemo as p, useState as B, useCallback as O } from "react";
|
|
2
|
+
import { keyboardSessionReducer as C, getKeyboardInset as D, isSessionGeometryCompatible as y, isKeyboardEditable as g, isSessionGeometryRestored as x, supportsTransitionSettleDetection as V, recordMeasuredKeyboardInset as Y, getKeyboardRevealScrollDelta as W, getSessionStableViewportGeometry as q, getSeedKeyboardInset as P, hasRunningTransformTransition as k } from "./keyboardSession.js";
|
|
3
|
+
const X = 150, j = 450, z = 500, H = 1e4;
|
|
4
|
+
function J({
|
|
5
|
+
holdShrink: f,
|
|
6
|
+
keyboardInset: n
|
|
7
|
+
}) {
|
|
8
|
+
const [m, s] = B(0), t = O((o) => {
|
|
9
|
+
s((e) => Math.max(e, o));
|
|
10
|
+
}, []);
|
|
11
|
+
return L(() => {
|
|
12
|
+
if (n > m) {
|
|
13
|
+
s(n);
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
if (n === m || f)
|
|
17
|
+
return;
|
|
18
|
+
const o = window.setTimeout(() => {
|
|
19
|
+
s(n);
|
|
20
|
+
}, X);
|
|
21
|
+
return () => {
|
|
22
|
+
window.clearTimeout(o);
|
|
23
|
+
};
|
|
24
|
+
}, [f, n, m]), { seedSettledKeyboardInset: t, settledKeyboardInset: m };
|
|
25
|
+
}
|
|
26
|
+
function Z({
|
|
27
|
+
bodyNode: f,
|
|
28
|
+
enabled: n,
|
|
29
|
+
footerHeight: m,
|
|
30
|
+
surfaceNode: s,
|
|
31
|
+
viewportGeometry: t,
|
|
32
|
+
viewportNode: o
|
|
33
|
+
}) {
|
|
34
|
+
const [e, E] = F(C, void 0), S = _(void 0), T = _(t);
|
|
35
|
+
h(() => {
|
|
36
|
+
T.current = t;
|
|
37
|
+
}, [t]);
|
|
38
|
+
const a = n ? D(e, t) : 0, R = y(
|
|
39
|
+
e,
|
|
40
|
+
t
|
|
41
|
+
), M = !!e?.sawKeyboard && a === 0, { seedSettledKeyboardInset: A, settledKeyboardInset: v } = J({
|
|
42
|
+
holdShrink: !!(e && e.phase === "active" && R && !M),
|
|
43
|
+
keyboardInset: a
|
|
44
|
+
});
|
|
45
|
+
h(() => {
|
|
46
|
+
n || !e || E({ type: "release" });
|
|
47
|
+
}, [n, e]), h(() => {
|
|
48
|
+
if (!n || !s || typeof window > "u")
|
|
49
|
+
return;
|
|
50
|
+
const r = () => {
|
|
51
|
+
S.current !== void 0 && (window.cancelAnimationFrame(S.current), S.current = void 0);
|
|
52
|
+
}, c = (d) => {
|
|
53
|
+
r();
|
|
54
|
+
const l = window.visualViewport, I = T.current ?? {
|
|
55
|
+
height: l?.height ?? window.innerHeight,
|
|
56
|
+
offsetLeft: l?.offsetLeft ?? 0,
|
|
57
|
+
offsetTop: l?.offsetTop ?? 0,
|
|
58
|
+
width: l?.width ?? window.innerWidth
|
|
59
|
+
}, K = P(I.width);
|
|
60
|
+
K !== void 0 && A(K), E({ type: "focus", geometry: I, target: d });
|
|
61
|
+
}, i = (d) => {
|
|
62
|
+
const l = d.target;
|
|
63
|
+
g(l) && c(l);
|
|
64
|
+
}, u = () => {
|
|
65
|
+
r(), S.current = window.requestAnimationFrame(() => {
|
|
66
|
+
S.current = void 0;
|
|
67
|
+
const d = document.activeElement;
|
|
68
|
+
if (s.contains(d) && g(d)) {
|
|
69
|
+
E({ type: "retain", target: d });
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
E({ type: "close" });
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
s.addEventListener("focusin", i), s.addEventListener("focusout", u);
|
|
76
|
+
const w = document.activeElement;
|
|
77
|
+
return s.contains(w) && g(w) && c(w), () => {
|
|
78
|
+
r(), s.removeEventListener("focusin", i), s.removeEventListener("focusout", u);
|
|
79
|
+
};
|
|
80
|
+
}, [n, A, s]), L(() => {
|
|
81
|
+
if (e?.phase !== "closing" || !t) return;
|
|
82
|
+
if (!y(e, t)) {
|
|
83
|
+
E({ type: "release" });
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
if (!x(e, t))
|
|
87
|
+
return;
|
|
88
|
+
let r = !1;
|
|
89
|
+
const c = () => {
|
|
90
|
+
r || (r = !0, E({ type: "release" }));
|
|
91
|
+
};
|
|
92
|
+
if (!V(o)) {
|
|
93
|
+
const l = window.setTimeout(
|
|
94
|
+
c,
|
|
95
|
+
j
|
|
96
|
+
);
|
|
97
|
+
return () => {
|
|
98
|
+
window.clearTimeout(l);
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
const i = () => {
|
|
102
|
+
r || k(o) || c();
|
|
103
|
+
};
|
|
104
|
+
let u = window.requestAnimationFrame(
|
|
105
|
+
() => {
|
|
106
|
+
u = window.requestAnimationFrame(() => {
|
|
107
|
+
u = void 0, i();
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
const w = window.setInterval(
|
|
112
|
+
i,
|
|
113
|
+
z
|
|
114
|
+
), d = window.setTimeout(
|
|
115
|
+
c,
|
|
116
|
+
H
|
|
117
|
+
);
|
|
118
|
+
return o.addEventListener("transitionend", i), o.addEventListener("transitioncancel", i), () => {
|
|
119
|
+
u !== void 0 && window.cancelAnimationFrame(u), window.clearInterval(w), window.clearTimeout(d), o.removeEventListener("transitionend", i), o.removeEventListener("transitioncancel", i);
|
|
120
|
+
};
|
|
121
|
+
}, [e, t, o]), L(() => {
|
|
122
|
+
a <= 0 || !t || (window.navigator.maxTouchPoints > 0 && Y(t.width, a), E({ type: "measure" }));
|
|
123
|
+
}, [a, t]), h(() => {
|
|
124
|
+
const r = e?.target, c = Math.max(a, v);
|
|
125
|
+
if (!f || !r || c <= 0) return;
|
|
126
|
+
const i = W({
|
|
127
|
+
bodyRect: f.getBoundingClientRect(),
|
|
128
|
+
clearanceInset: c,
|
|
129
|
+
footerHeight: m,
|
|
130
|
+
targetRect: r.getBoundingClientRect()
|
|
131
|
+
});
|
|
132
|
+
if (Math.abs(i) > 0.5) {
|
|
133
|
+
const u = a <= 0;
|
|
134
|
+
f.scrollTo({
|
|
135
|
+
behavior: u || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === !0 ? "auto" : "smooth",
|
|
136
|
+
top: f.scrollTop + i
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
}, [
|
|
140
|
+
f,
|
|
141
|
+
m,
|
|
142
|
+
a,
|
|
143
|
+
e?.target,
|
|
144
|
+
v
|
|
145
|
+
]);
|
|
146
|
+
const b = p(
|
|
147
|
+
() => n ? q(e, t) : t,
|
|
148
|
+
[n, e, t]
|
|
149
|
+
);
|
|
150
|
+
return {
|
|
151
|
+
active: n && !!e && R,
|
|
152
|
+
keyboardInset: a,
|
|
153
|
+
settledKeyboardInset: v,
|
|
154
|
+
viewportGeometry: b
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
export {
|
|
158
|
+
Z as useModalKeyboardAvoidance
|
|
159
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { useState as w, useLayoutEffect as v } from "react";
|
|
2
|
+
function a(e, t) {
|
|
3
|
+
return e?.height === t.height && e.offsetLeft === t.offsetLeft && e.offsetTop === t.offsetTop && e.width === t.width;
|
|
4
|
+
}
|
|
5
|
+
function m(e) {
|
|
6
|
+
const t = e.visualViewport;
|
|
7
|
+
return {
|
|
8
|
+
height: t?.height ?? e.innerHeight,
|
|
9
|
+
offsetLeft: t?.offsetLeft ?? 0,
|
|
10
|
+
offsetTop: t?.offsetTop ?? 0,
|
|
11
|
+
width: t?.width ?? e.innerWidth
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
function h(e) {
|
|
15
|
+
const [t, d] = w();
|
|
16
|
+
return v(() => {
|
|
17
|
+
if (!e || typeof window > "u") return;
|
|
18
|
+
const i = window.visualViewport;
|
|
19
|
+
let n;
|
|
20
|
+
const r = () => {
|
|
21
|
+
const s = m(window);
|
|
22
|
+
d((f) => a(f, s) ? f : s);
|
|
23
|
+
}, o = () => {
|
|
24
|
+
n === void 0 && (n = window.requestAnimationFrame(() => {
|
|
25
|
+
n = void 0, r();
|
|
26
|
+
}));
|
|
27
|
+
};
|
|
28
|
+
return r(), window.addEventListener("resize", o), i?.addEventListener("resize", o), i?.addEventListener("scroll", o), i?.addEventListener("scrollend", o), () => {
|
|
29
|
+
window.removeEventListener("resize", o), i?.removeEventListener("resize", o), i?.removeEventListener("scroll", o), i?.removeEventListener("scrollend", o), n !== void 0 && window.cancelAnimationFrame(n);
|
|
30
|
+
};
|
|
31
|
+
}, [e]), t;
|
|
32
|
+
}
|
|
33
|
+
export {
|
|
34
|
+
m as getModalViewportGeometry,
|
|
35
|
+
h as useModalViewportGeometry
|
|
36
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.oc-PositionSnap-module__positioner__-v2BM{--_-position-snap-x: 0px;--_-position-snap-y: 0px;--oc-position-snap-z-index: var(--oc-zindex-2);position:fixed;z-index:var(--oc-position-snap-z-index);inset-block-start:0;inset-inline-start:0;width:max-content;max-width:100%;max-height:100dvh;touch-action:none;transform:translate3d(var(--_-position-snap-x),var(--_-position-snap-y),0)}.oc-PositionSnap-module__positioner__-v2BM[data-oc-positioned=false]{visibility:hidden}.oc-PositionSnap-module__positioner__-v2BM[data-oc-dragging=true]{cursor:grabbing;-webkit-user-select:none;user-select:none}.oc-PositionSnap-module__positioner__-v2BM[data-oc-drag=handle]{touch-action:auto}.oc-PositionSnap-module__handle__iuv3c{cursor:grab;touch-action:none}
|
|
@@ -0,0 +1,330 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as W } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo as J, useRef as h, useState as A, useCallback as g, useLayoutEffect as U } from "react";
|
|
4
|
+
import { createSpringAnimator as j } from "../../utils/spring/animator.js";
|
|
5
|
+
import { resolveOcMotion as it } from "../../utils/motion.js";
|
|
6
|
+
import { mergeRefs as st } from "../../utils/mergeRefs.js";
|
|
7
|
+
import { resolvePositionSnapTargets as at, getPositionSnapBoundaryRect as ct, uniformPositionSnapPadding as lt } from "./geometry.js";
|
|
8
|
+
import { getPositionSnapPointDistance as ut, getReleasePositionSnapTarget as pt, resolvePositionSnapDragPoint as ft } from "./policy.js";
|
|
9
|
+
import { POSITION_SNAP_DRAG_FOLLOWER_SPRING as dt } from "./gesture.js";
|
|
10
|
+
import { usePositionSnapContext as Q, PositionSnapContext as Pt } from "./contexts.js";
|
|
11
|
+
import Z from "./PositionSnap.module.scss.js";
|
|
12
|
+
const mt = 2, gt = 10, tt = 90, k = 4e3, yt = 500;
|
|
13
|
+
function et(...r) {
|
|
14
|
+
return r.filter(Boolean).join(" ");
|
|
15
|
+
}
|
|
16
|
+
function V() {
|
|
17
|
+
return Date.now();
|
|
18
|
+
}
|
|
19
|
+
function X(r, i, s) {
|
|
20
|
+
return Math.min(Math.max(r, i), s);
|
|
21
|
+
}
|
|
22
|
+
function $(r, i) {
|
|
23
|
+
const s = V();
|
|
24
|
+
r.push({ ...i, time: s });
|
|
25
|
+
const f = s - tt;
|
|
26
|
+
for (; r.length > 2 && (r[1]?.time ?? s) < f; )
|
|
27
|
+
r.shift();
|
|
28
|
+
}
|
|
29
|
+
function wt(r) {
|
|
30
|
+
const i = r[r.length - 1], s = r.find(
|
|
31
|
+
(w) => w.time >= (i?.time ?? 0) - tt
|
|
32
|
+
);
|
|
33
|
+
if (!s || !i || s === i) return { x: 0, y: 0 };
|
|
34
|
+
const f = Math.max(i.time - s.time, 1);
|
|
35
|
+
return {
|
|
36
|
+
x: X(
|
|
37
|
+
(i.x - s.x) / f * 1e3,
|
|
38
|
+
-k,
|
|
39
|
+
k
|
|
40
|
+
),
|
|
41
|
+
y: X(
|
|
42
|
+
(i.y - s.y) / f * 1e3,
|
|
43
|
+
-k,
|
|
44
|
+
k
|
|
45
|
+
)
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
function q(r) {
|
|
49
|
+
const i = r.getBoundingClientRect();
|
|
50
|
+
return { width: i.width, height: i.height };
|
|
51
|
+
}
|
|
52
|
+
function St(r) {
|
|
53
|
+
return r instanceof Element && !!r.closest('[data-oc-part="position-snap-handle"]');
|
|
54
|
+
}
|
|
55
|
+
function K({
|
|
56
|
+
children: r,
|
|
57
|
+
positions: i,
|
|
58
|
+
position: s,
|
|
59
|
+
defaultPosition: f,
|
|
60
|
+
onPositionChange: w,
|
|
61
|
+
boundary: y = "viewport",
|
|
62
|
+
boundaryPadding: I = 16,
|
|
63
|
+
drag: x = "content",
|
|
64
|
+
disabled: R = !1
|
|
65
|
+
}) {
|
|
66
|
+
const S = h(null), [a, M] = A(null), [o, nt] = A(
|
|
67
|
+
f ?? i[0] ?? "center"
|
|
68
|
+
), [b, ot] = A(!1), C = h(!1), [B, F] = A(!1), E = s ?? o, D = h({ x: 0, y: 0 }), T = h(null), u = h(null), z = h(0), G = g((t) => {
|
|
69
|
+
S.current = t, M(t), t || (C.current = !1);
|
|
70
|
+
}, []), p = g((t) => {
|
|
71
|
+
const e = S.current;
|
|
72
|
+
e && (D.current = { x: t.x, y: t.y }, e.style.setProperty("--_-position-snap-x", `${t.x}px`), e.style.setProperty("--_-position-snap-y", `${t.y}px`));
|
|
73
|
+
}, []), m = g(() => {
|
|
74
|
+
u.current?.destroy(), u.current = null;
|
|
75
|
+
}, []), O = g(
|
|
76
|
+
(t, e = { x: 0, y: 0 }) => {
|
|
77
|
+
const n = S.current;
|
|
78
|
+
if (!n) return;
|
|
79
|
+
const c = u.current?.isRunning ? u.current : null, d = c?.sample(), P = d?.value ?? D.current, l = { x: t.x, y: t.y };
|
|
80
|
+
if (d && p(P), ut(P, l) < 0.5) {
|
|
81
|
+
m(), p(l);
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
const L = it({
|
|
85
|
+
element: n,
|
|
86
|
+
intent: "gesture",
|
|
87
|
+
phase: "release",
|
|
88
|
+
property: "transform"
|
|
89
|
+
});
|
|
90
|
+
if (!L.animate) {
|
|
91
|
+
m(), p(l);
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
if (c) {
|
|
95
|
+
c.setTarget(l, { spring: L.spring });
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
m();
|
|
99
|
+
const H = j({
|
|
100
|
+
value: P,
|
|
101
|
+
target: l,
|
|
102
|
+
velocity: e,
|
|
103
|
+
spring: L.spring,
|
|
104
|
+
epsilon: 0.5,
|
|
105
|
+
velocityEpsilon: 50,
|
|
106
|
+
stabilityWindow: 0.02,
|
|
107
|
+
onUpdate: p,
|
|
108
|
+
onComplete: () => {
|
|
109
|
+
u.current === H && (u.current = null), p(H.target);
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
u.current = H;
|
|
113
|
+
},
|
|
114
|
+
[p, m]
|
|
115
|
+
), Y = g(
|
|
116
|
+
(t) => {
|
|
117
|
+
let e = u.current;
|
|
118
|
+
if (!e) {
|
|
119
|
+
const n = D.current, c = j({
|
|
120
|
+
value: n,
|
|
121
|
+
target: n,
|
|
122
|
+
spring: dt,
|
|
123
|
+
autoplay: !1,
|
|
124
|
+
epsilon: 0.5,
|
|
125
|
+
velocityEpsilon: 50,
|
|
126
|
+
stabilityWindow: 0.02,
|
|
127
|
+
onUpdate: p,
|
|
128
|
+
onComplete: () => {
|
|
129
|
+
u.current === c && (u.current = null), p(c.target);
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
u.current = c, e = c;
|
|
133
|
+
}
|
|
134
|
+
e.setTarget(t), p(e.sample().value);
|
|
135
|
+
},
|
|
136
|
+
[p]
|
|
137
|
+
), v = g(() => !a || i.length === 0 ? [] : at({
|
|
138
|
+
boundary: ct(y),
|
|
139
|
+
direction: window.getComputedStyle(a).direction === "rtl" ? "rtl" : "ltr",
|
|
140
|
+
padding: lt(I),
|
|
141
|
+
positions: i,
|
|
142
|
+
size: q(a)
|
|
143
|
+
}), [y, I, a, i]), N = g(
|
|
144
|
+
(t) => {
|
|
145
|
+
const e = v();
|
|
146
|
+
if (!e.length) return;
|
|
147
|
+
const n = e.find((c) => c.key === E) ?? e[0];
|
|
148
|
+
n && (t && C.current ? O(n) : p(n), C.current || (C.current = !0, ot(!0)));
|
|
149
|
+
},
|
|
150
|
+
[p, E, v, O]
|
|
151
|
+
);
|
|
152
|
+
U(() => {
|
|
153
|
+
N(C.current);
|
|
154
|
+
}, [N]), U(() => {
|
|
155
|
+
if (!a) return;
|
|
156
|
+
const t = () => {
|
|
157
|
+
T.current || N(!!u.current?.isRunning);
|
|
158
|
+
};
|
|
159
|
+
let e = null;
|
|
160
|
+
const n = () => {
|
|
161
|
+
e === null && (e = window.requestAnimationFrame(() => {
|
|
162
|
+
e = null, t();
|
|
163
|
+
}));
|
|
164
|
+
}, c = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(n);
|
|
165
|
+
return c?.observe(a), y !== "viewport" && c?.observe(y), window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), window.visualViewport?.addEventListener("resize", n), window.visualViewport?.addEventListener("scroll", n), () => {
|
|
166
|
+
e !== null && window.cancelAnimationFrame(e), c?.disconnect(), window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0), window.visualViewport?.removeEventListener("resize", n), window.visualViewport?.removeEventListener("scroll", n);
|
|
167
|
+
};
|
|
168
|
+
}, [y, a, N]), U(() => () => m(), [m]);
|
|
169
|
+
const _ = g(
|
|
170
|
+
(t, e) => {
|
|
171
|
+
const n = T.current;
|
|
172
|
+
if (!n || n.pointerId !== t.pointerId || (T.current = null, t.currentTarget.hasPointerCapture(n.pointerId) && t.currentTarget.releasePointerCapture(n.pointerId), !n.started)) return;
|
|
173
|
+
F(!1), z.current = V() + yt, $(n.samples, n.targetPoint);
|
|
174
|
+
const c = wt(n.samples), d = v(), P = d.find((L) => L.key === E) ?? d[0];
|
|
175
|
+
if (!P) return;
|
|
176
|
+
const l = e ? P : pt({
|
|
177
|
+
currentPoint: n.targetPoint,
|
|
178
|
+
velocity: c,
|
|
179
|
+
targets: d
|
|
180
|
+
});
|
|
181
|
+
!e && l.key !== E && (s === void 0 && nt(l.key), w?.(l.key)), O(l, e ? void 0 : c);
|
|
182
|
+
},
|
|
183
|
+
[E, w, s, v, O]
|
|
184
|
+
), rt = J(
|
|
185
|
+
() => ({
|
|
186
|
+
drag: x,
|
|
187
|
+
dragging: B,
|
|
188
|
+
positioned: b,
|
|
189
|
+
setPositionerNode: G,
|
|
190
|
+
onClickCapture: (t) => {
|
|
191
|
+
V() > z.current || (z.current = 0, t.preventDefault(), t.stopPropagation());
|
|
192
|
+
},
|
|
193
|
+
onLostPointerCapture: (t) => {
|
|
194
|
+
_(t, !1);
|
|
195
|
+
},
|
|
196
|
+
onPointerCancel: (t) => {
|
|
197
|
+
_(t, !0);
|
|
198
|
+
},
|
|
199
|
+
onPointerDown: (t) => {
|
|
200
|
+
if (R || !t.isPrimary || t.button !== 0 || x === "handle" && !St(t.target))
|
|
201
|
+
return;
|
|
202
|
+
m();
|
|
203
|
+
const e = D.current;
|
|
204
|
+
T.current = {
|
|
205
|
+
pointerId: t.pointerId,
|
|
206
|
+
pointerType: t.pointerType,
|
|
207
|
+
started: !1,
|
|
208
|
+
startPointer: { x: t.clientX, y: t.clientY },
|
|
209
|
+
startPoint: e,
|
|
210
|
+
targetPoint: e,
|
|
211
|
+
samples: []
|
|
212
|
+
};
|
|
213
|
+
},
|
|
214
|
+
onPointerMove: (t) => {
|
|
215
|
+
const e = T.current;
|
|
216
|
+
if (!e || e.pointerId !== t.pointerId) return;
|
|
217
|
+
const n = {
|
|
218
|
+
x: t.clientX - e.startPointer.x,
|
|
219
|
+
y: t.clientY - e.startPointer.y
|
|
220
|
+
}, c = e.pointerType === "touch" ? gt : mt;
|
|
221
|
+
if (!e.started && Math.hypot(n.x, n.y) < c)
|
|
222
|
+
return;
|
|
223
|
+
e.started || (e.started = !0, t.currentTarget.setPointerCapture(t.pointerId), F(!0)), t.preventDefault();
|
|
224
|
+
const d = v(), P = S.current;
|
|
225
|
+
if (!d.length || !P) return;
|
|
226
|
+
const l = ft({
|
|
227
|
+
point: {
|
|
228
|
+
x: e.startPoint.x + n.x,
|
|
229
|
+
y: e.startPoint.y + n.y
|
|
230
|
+
},
|
|
231
|
+
size: q(P),
|
|
232
|
+
targets: d
|
|
233
|
+
});
|
|
234
|
+
e.targetPoint = l, Y(l), $(e.samples, l);
|
|
235
|
+
},
|
|
236
|
+
onPointerUp: (t) => {
|
|
237
|
+
_(t, !1);
|
|
238
|
+
}
|
|
239
|
+
}),
|
|
240
|
+
[
|
|
241
|
+
R,
|
|
242
|
+
x,
|
|
243
|
+
B,
|
|
244
|
+
_,
|
|
245
|
+
Y,
|
|
246
|
+
b,
|
|
247
|
+
v,
|
|
248
|
+
G,
|
|
249
|
+
m
|
|
250
|
+
]
|
|
251
|
+
);
|
|
252
|
+
return /* @__PURE__ */ W(Pt.Provider, { value: rt, children: r });
|
|
253
|
+
}
|
|
254
|
+
function vt({
|
|
255
|
+
children: r,
|
|
256
|
+
className: i = "",
|
|
257
|
+
onClickCapture: s,
|
|
258
|
+
onLostPointerCapture: f,
|
|
259
|
+
onPointerCancel: w,
|
|
260
|
+
onPointerDown: y,
|
|
261
|
+
onPointerMove: I,
|
|
262
|
+
onPointerUp: x,
|
|
263
|
+
ref: R,
|
|
264
|
+
...S
|
|
265
|
+
}) {
|
|
266
|
+
const a = Q("PositionSnapPositioner"), M = J(
|
|
267
|
+
() => st(a.setPositionerNode, R),
|
|
268
|
+
[a.setPositionerNode, R]
|
|
269
|
+
);
|
|
270
|
+
return /* @__PURE__ */ W(
|
|
271
|
+
"div",
|
|
272
|
+
{
|
|
273
|
+
...S,
|
|
274
|
+
ref: M,
|
|
275
|
+
className: et(Z.positioner, i),
|
|
276
|
+
"data-oc-component": "position-snap",
|
|
277
|
+
"data-oc-part": "positioner",
|
|
278
|
+
"data-oc-drag": a.drag,
|
|
279
|
+
"data-oc-dragging": a.dragging ? "true" : void 0,
|
|
280
|
+
"data-oc-positioned": a.positioned ? "true" : "false",
|
|
281
|
+
onClickCapture: (o) => {
|
|
282
|
+
s?.(o), o.defaultPrevented || a.onClickCapture(o);
|
|
283
|
+
},
|
|
284
|
+
onLostPointerCapture: (o) => {
|
|
285
|
+
f?.(o), o.defaultPrevented || a.onLostPointerCapture(o);
|
|
286
|
+
},
|
|
287
|
+
onPointerCancel: (o) => {
|
|
288
|
+
w?.(o), o.defaultPrevented || a.onPointerCancel(o);
|
|
289
|
+
},
|
|
290
|
+
onPointerDown: (o) => {
|
|
291
|
+
y?.(o), o.defaultPrevented || a.onPointerDown(o);
|
|
292
|
+
},
|
|
293
|
+
onPointerMove: (o) => {
|
|
294
|
+
I?.(o), o.defaultPrevented || a.onPointerMove(o);
|
|
295
|
+
},
|
|
296
|
+
onPointerUp: (o) => {
|
|
297
|
+
x?.(o), o.defaultPrevented || a.onPointerUp(o);
|
|
298
|
+
},
|
|
299
|
+
children: r
|
|
300
|
+
}
|
|
301
|
+
);
|
|
302
|
+
}
|
|
303
|
+
function ht({
|
|
304
|
+
children: r,
|
|
305
|
+
className: i = "",
|
|
306
|
+
ref: s,
|
|
307
|
+
...f
|
|
308
|
+
}) {
|
|
309
|
+
return Q("PositionSnapHandle"), /* @__PURE__ */ W(
|
|
310
|
+
"div",
|
|
311
|
+
{
|
|
312
|
+
...f,
|
|
313
|
+
ref: s,
|
|
314
|
+
className: et(Z.handle, i),
|
|
315
|
+
"data-oc-part": "position-snap-handle",
|
|
316
|
+
children: r
|
|
317
|
+
}
|
|
318
|
+
);
|
|
319
|
+
}
|
|
320
|
+
const _t = Object.assign(K, {
|
|
321
|
+
Root: K,
|
|
322
|
+
Positioner: vt,
|
|
323
|
+
Handle: ht
|
|
324
|
+
});
|
|
325
|
+
export {
|
|
326
|
+
ht as PositionSnapHandle,
|
|
327
|
+
vt as PositionSnapPositioner,
|
|
328
|
+
K as PositionSnapRoot,
|
|
329
|
+
_t as default
|
|
330
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { useContext as n, createContext as e } from "react";
|
|
2
|
+
const i = e(null);
|
|
3
|
+
function s(o) {
|
|
4
|
+
const t = n(i);
|
|
5
|
+
if (!t)
|
|
6
|
+
throw new Error(`${o} must be used inside PositionSnapRoot.`);
|
|
7
|
+
return t;
|
|
8
|
+
}
|
|
9
|
+
export {
|
|
10
|
+
i as PositionSnapContext,
|
|
11
|
+
s as usePositionSnapContext
|
|
12
|
+
};
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
function g(t = "viewport") {
|
|
2
|
+
if (t !== "viewport") {
|
|
3
|
+
const n = t.getBoundingClientRect();
|
|
4
|
+
return {
|
|
5
|
+
x: n.left,
|
|
6
|
+
y: n.top,
|
|
7
|
+
width: n.width,
|
|
8
|
+
height: n.height
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
const e = window.visualViewport;
|
|
12
|
+
return {
|
|
13
|
+
x: e?.offsetLeft ?? 0,
|
|
14
|
+
y: e?.offsetTop ?? 0,
|
|
15
|
+
width: e?.width ?? document.documentElement.clientWidth,
|
|
16
|
+
height: e?.height ?? document.documentElement.clientHeight
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
function x({
|
|
20
|
+
boundary: t,
|
|
21
|
+
direction: e,
|
|
22
|
+
padding: n,
|
|
23
|
+
position: c,
|
|
24
|
+
size: i
|
|
25
|
+
}) {
|
|
26
|
+
const o = t.x + n.left, u = t.x + t.width - n.right - i.width, r = e === "rtl" ? u : o, s = e === "rtl" ? o : u, h = t.y + n.top, l = t.y + t.height - n.bottom - i.height, a = t.x + (t.width - i.width) / 2, f = t.y + (t.height - i.height) / 2;
|
|
27
|
+
switch (c) {
|
|
28
|
+
case "inline-start":
|
|
29
|
+
return { x: r, y: f };
|
|
30
|
+
case "inline-end":
|
|
31
|
+
return { x: s, y: f };
|
|
32
|
+
case "block-start":
|
|
33
|
+
return { x: a, y: h };
|
|
34
|
+
case "block-end":
|
|
35
|
+
return { x: a, y: l };
|
|
36
|
+
case "block-start-inline-start":
|
|
37
|
+
return { x: r, y: h };
|
|
38
|
+
case "block-start-inline-end":
|
|
39
|
+
return { x: s, y: h };
|
|
40
|
+
case "block-end-inline-start":
|
|
41
|
+
return { x: r, y: l };
|
|
42
|
+
case "block-end-inline-end":
|
|
43
|
+
return { x: s, y: l };
|
|
44
|
+
default:
|
|
45
|
+
return { x: a, y: f };
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
function w({
|
|
49
|
+
boundary: t,
|
|
50
|
+
direction: e,
|
|
51
|
+
padding: n,
|
|
52
|
+
positions: c,
|
|
53
|
+
size: i
|
|
54
|
+
}) {
|
|
55
|
+
return c.map((o) => ({
|
|
56
|
+
key: o,
|
|
57
|
+
...x({
|
|
58
|
+
boundary: t,
|
|
59
|
+
direction: e,
|
|
60
|
+
padding: n,
|
|
61
|
+
position: o,
|
|
62
|
+
size: i
|
|
63
|
+
})
|
|
64
|
+
}));
|
|
65
|
+
}
|
|
66
|
+
function p(t) {
|
|
67
|
+
const e = Math.max(0, t);
|
|
68
|
+
return { top: e, right: e, bottom: e, left: e };
|
|
69
|
+
}
|
|
70
|
+
export {
|
|
71
|
+
g as getPositionSnapBoundaryRect,
|
|
72
|
+
x as resolvePositionSnapPoint,
|
|
73
|
+
w as resolvePositionSnapTargets,
|
|
74
|
+
p as uniformPositionSnapPadding
|
|
75
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
function a(n, t, _) {
|
|
2
|
+
return Math.min(Math.max(n, t), _);
|
|
3
|
+
}
|
|
4
|
+
function c(n, t) {
|
|
5
|
+
return Math.hypot(n.x - t.x, n.y - t.y);
|
|
6
|
+
}
|
|
7
|
+
function R(n, t) {
|
|
8
|
+
return n.reduce(
|
|
9
|
+
(_, S) => c(S, t) < c(_, t) ? S : _
|
|
10
|
+
);
|
|
11
|
+
}
|
|
12
|
+
function C({
|
|
13
|
+
currentPoint: n,
|
|
14
|
+
velocity: t,
|
|
15
|
+
targets: _
|
|
16
|
+
}) {
|
|
17
|
+
const S = {
|
|
18
|
+
x: n.x + a(
|
|
19
|
+
t.x * 0.16,
|
|
20
|
+
-24,
|
|
21
|
+
24
|
|
22
|
+
),
|
|
23
|
+
y: n.y + a(
|
|
24
|
+
t.y * 0.16,
|
|
25
|
+
-24,
|
|
26
|
+
24
|
|
27
|
+
)
|
|
28
|
+
};
|
|
29
|
+
if (!(Math.hypot(t.x, t.y) / 1e3 > 0.55)) return R(_, n);
|
|
30
|
+
const o = _.filter((s) => {
|
|
31
|
+
const A = s.x - n.x, E = s.y - n.y;
|
|
32
|
+
return A * t.x + E * t.y > 0;
|
|
33
|
+
});
|
|
34
|
+
return R(
|
|
35
|
+
o.length ? o : _,
|
|
36
|
+
S
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
function x(n, t, _, S) {
|
|
40
|
+
if (n >= t && n <= _) return n;
|
|
41
|
+
const N = n < t ? t : _, o = Math.abs(n - N), s = o * 0.55 * S / (S + 0.55 * o);
|
|
42
|
+
return n < t ? N - s : N + s;
|
|
43
|
+
}
|
|
44
|
+
function O({
|
|
45
|
+
point: n,
|
|
46
|
+
size: t,
|
|
47
|
+
targets: _
|
|
48
|
+
}) {
|
|
49
|
+
const S = _.map((P) => P.x), N = _.map((P) => P.y), o = Math.min(...S), s = Math.max(...S), A = Math.min(...N), E = Math.max(...N);
|
|
50
|
+
return {
|
|
51
|
+
x: x(n.x, o, s, Math.max(t.width, 1)),
|
|
52
|
+
y: x(n.y, A, E, Math.max(t.height, 1))
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
export {
|
|
56
|
+
R as getNearestPositionSnapTarget,
|
|
57
|
+
c as getPositionSnapPointDistance,
|
|
58
|
+
C as getReleasePositionSnapTarget,
|
|
59
|
+
O as resolvePositionSnapDragPoint
|
|
60
|
+
};
|