react-animated-select 0.8.0 → 0.8.1
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/base.css +1 -1
- package/dist/chip.cjs +1 -1
- package/dist/chip.css +1 -1
- package/dist/chip.js +81 -62
- package/dist/chipGeometry.cjs +1 -1
- package/dist/chipGeometry.js +31 -58
- package/dist/chipMotion.cjs +1 -0
- package/dist/chipMotion.js +85 -0
- package/dist/dropdownPosition.cjs +1 -1
- package/dist/dropdownPosition.js +86 -76
- package/dist/index.d.cts +13 -0
- package/dist/motion.cjs +1 -1
- package/dist/motion.js +88 -86
- package/dist/style.css +3 -3
- package/dist/theme.css +1 -1
- package/dist/trigger.cjs +1 -1
- package/dist/trigger.js +82 -77
- package/dist/useChipLayout.cjs +1 -1
- package/dist/useChipLayout.js +65 -66
- package/dist/useSelectBehavior.cjs +1 -1
- package/dist/useSelectBehavior.js +44 -46
- package/dist/utils.cjs +1 -1
- package/dist/utils.js +11 -11
- package/index.d.ts +13 -0
- package/package.json +1 -1
package/dist/dropdownPosition.js
CHANGED
|
@@ -1,87 +1,97 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useRef as
|
|
3
|
-
const
|
|
4
|
-
Math.abs(
|
|
5
|
-
},
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
},
|
|
9
|
-
|
|
10
|
-
},
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
import { useRef as M, useLayoutEffect as P, useCallback as O, useEffect as V } from "react";
|
|
3
|
+
const k = (t, o, i) => {
|
|
4
|
+
Math.abs(i) > 0.5 && (t.style[o] = `${parseFloat(t.style[o]) + i}px`);
|
|
5
|
+
}, W = (t, o, i, h, n) => {
|
|
6
|
+
const l = t.getBoundingClientRect(), a = getComputedStyle(t);
|
|
7
|
+
k(t, "left", o - l.left + parseFloat(a.marginLeft)), h ? k(t, "bottom", l.bottom + parseFloat(a.marginBottom) - i + n) : k(t, "top", i + n - l.top + parseFloat(a.marginTop));
|
|
8
|
+
}, X = (t, o) => {
|
|
9
|
+
t && t.dataset.placement !== (o ? "top" : "bottom") && (t.dataset.placement = o ? "top" : "bottom");
|
|
10
|
+
}, z = () => typeof IntersectionObserver < "u", S = (t, o, i = window.innerHeight - t.bottom) => i < o && t.top > i, G = (t) => {
|
|
11
|
+
const o = [], { body: i, documentElement: h } = t.ownerDocument;
|
|
12
|
+
for (let n = t.parentElement; n && n !== i && n !== h; n = n.parentElement)
|
|
13
|
+
getComputedStyle(n).overflowY !== "visible" && o.push(n);
|
|
14
|
+
return o;
|
|
15
|
+
}, T = (t, o) => {
|
|
16
|
+
let i = -1 / 0, h = 1 / 0;
|
|
17
|
+
for (const l of o) {
|
|
18
|
+
const a = l.getBoundingClientRect();
|
|
19
|
+
i = Math.max(i, a.top + l.clientTop), h = Math.min(h, a.top + l.clientTop + l.clientHeight);
|
|
20
|
+
}
|
|
21
|
+
const n = (l) => Math.min(Math.max(l, i), h);
|
|
22
|
+
return { pin: n, ratio: t.height ? +((n(t.bottom) - n(t.top)) / t.height).toFixed(3) : 1 };
|
|
23
|
+
}, K = ({ selectRef: t, panelRef: o, open: i, frozen: h, offset: n, onFlip: l }) => {
|
|
24
|
+
const a = M(0), B = M(null), A = M(h), I = M(l);
|
|
25
|
+
P(() => {
|
|
26
|
+
A.current = h, I.current = l;
|
|
14
27
|
});
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
if (!
|
|
18
|
-
|
|
19
|
-
const
|
|
20
|
-
let
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, [
|
|
25
|
-
|
|
26
|
-
}, [
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
const C = O((e) => [t.current, o.current].forEach((c) => X(c, e)), [t, o]), f = O((e) => {
|
|
29
|
+
const c = t.current;
|
|
30
|
+
if (!c || !e) return;
|
|
31
|
+
e.scrollHeight && (a.current = e.scrollHeight);
|
|
32
|
+
const u = c.getBoundingClientRect(), d = e.dataset.placement, s = a.current, { pin: p, ratio: b } = T(u, B.current ??= G(c)), w = d === "top" ? u.top - n >= s : window.innerHeight - u.bottom - n >= s;
|
|
33
|
+
let m = d && (A.current || w || b < 1) ? d === "top" : S(u, s);
|
|
34
|
+
d && m !== (d === "top") && (I.current?.(), m = d === "top"), C(m);
|
|
35
|
+
const g = p(m ? u.top : u.bottom);
|
|
36
|
+
e.style.width = `${u.width}px`, e.style.left = `${u.left + window.scrollX}px`, e.style.top = m ? "auto" : `${g + window.scrollY + n}px`, e.style.bottom = m ? `${window.innerHeight - g - window.scrollY + n}px` : "auto", W(e, u.left, g, m, n), b < 1 ? e.style.setProperty("--rac-visible", b) : e.style.removeProperty("--rac-visible"), e.toggleAttribute("data-offscreen", b === 0);
|
|
37
|
+
}, [t, n, C]), Y = O((e) => {
|
|
38
|
+
e && i && f(e.parentElement);
|
|
39
|
+
}, [f, i]), j = O((e) => {
|
|
40
|
+
e?.removeAttribute("data-placement"), f(e);
|
|
41
|
+
}, [f]);
|
|
42
|
+
return V(() => {
|
|
43
|
+
const e = t.current;
|
|
44
|
+
if (i || !e || !z()) return;
|
|
45
|
+
a.current ||= parseFloat(getComputedStyle(e).getPropertyValue("--rac-list-max-height")) || 250;
|
|
46
|
+
const c = { fits: !0, lower: !1 }, u = (s, p, b) => {
|
|
47
|
+
const w = new IntersectionObserver(([{ boundingClientRect: m, rootBounds: g }]) => {
|
|
48
|
+
g && (b(m, g), C(!c.fits && c.lower));
|
|
49
|
+
}, { rootMargin: s, threshold: p });
|
|
50
|
+
return w.observe(e), w;
|
|
51
|
+
}, d = [
|
|
52
|
+
u(`0px 0px ${-a.current}px 0px`, [0, 1], (s, p) => {
|
|
53
|
+
c.fits = s.bottom <= p.bottom;
|
|
39
54
|
}),
|
|
40
|
-
|
|
41
|
-
|
|
55
|
+
u("0px 0px -50% 0px", [0, 0.5, 1], (s, p) => {
|
|
56
|
+
c.lower = s.top + s.bottom > 2 * p.bottom;
|
|
42
57
|
})
|
|
43
58
|
];
|
|
44
|
-
return () =>
|
|
45
|
-
}, [
|
|
46
|
-
const
|
|
47
|
-
if (!
|
|
48
|
-
const
|
|
49
|
-
let
|
|
50
|
-
const
|
|
51
|
-
const
|
|
52
|
-
return [
|
|
53
|
-
},
|
|
54
|
-
if (
|
|
55
|
-
const
|
|
56
|
-
let
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}, { root:
|
|
60
|
-
},
|
|
61
|
-
if (
|
|
62
|
-
else if (++
|
|
63
|
-
|
|
64
|
-
},
|
|
65
|
-
|
|
59
|
+
return () => d.forEach((s) => s.disconnect());
|
|
60
|
+
}, [i, t, C]), P(() => {
|
|
61
|
+
const e = t.current;
|
|
62
|
+
if (!i || !e) return;
|
|
63
|
+
const c = e.ownerDocument, u = o.current;
|
|
64
|
+
let d = 0, s = 0, p = "", b = null;
|
|
65
|
+
const w = () => {
|
|
66
|
+
const r = e.getBoundingClientRect(), x = o.current?.getBoundingClientRect() ?? r, $ = S(r, a.current), H = a.current + n, { pin: E, ratio: y } = T(r, B.current ?? []), U = o.current?.dataset.placement === "top";
|
|
67
|
+
return [r.left - x.left, U ? E(r.top) - x.bottom : E(r.bottom) - x.top, y, r.width, window.innerHeight, o.current?.scrollHeight, $, r.top >= H, window.innerHeight - r.bottom >= H].join();
|
|
68
|
+
}, m = () => {
|
|
69
|
+
if (b?.disconnect(), !z()) return;
|
|
70
|
+
const r = e.getBoundingClientRect(), { clientWidth: x, clientHeight: $ } = c.documentElement, H = [r.top, x - r.right, $ - r.bottom, r.left].map((y) => `${-Math.floor(y)}px`).join(" ");
|
|
71
|
+
let E = !1;
|
|
72
|
+
b = new IntersectionObserver(([y]) => {
|
|
73
|
+
E && y.intersectionRatio < 1 && v(), E = y.intersectionRatio === 1;
|
|
74
|
+
}, { root: c, rootMargin: H, threshold: 1 }), b.observe(e);
|
|
75
|
+
}, g = () => w() === p ? !1 : (f(o.current), p = w(), !0), D = () => {
|
|
76
|
+
if (d = 0, g()) s = 0;
|
|
77
|
+
else if (++s > 1) return m();
|
|
78
|
+
d = requestAnimationFrame(D);
|
|
79
|
+
}, v = () => {
|
|
80
|
+
s = 0, d ||= requestAnimationFrame(D);
|
|
66
81
|
};
|
|
67
|
-
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
const
|
|
71
|
-
|
|
82
|
+
f(o.current), p = w(), m(), window.addEventListener("scroll", v, { capture: !0, passive: !0 }), window.addEventListener("resize", v);
|
|
83
|
+
const F = typeof ResizeObserver < "u" && new ResizeObserver(v);
|
|
84
|
+
F && [e, o.current].forEach((r) => r && F.observe(r));
|
|
85
|
+
const q = ({ target: r }) => !e.contains(r) && !o.current?.contains(r), L = typeof MutationObserver < "u" && new MutationObserver((r) => {
|
|
86
|
+
r.some(q) && g() && v();
|
|
72
87
|
});
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
});
|
|
78
|
-
return F && F.observe(t), () => {
|
|
79
|
-
cancelAnimationFrame(c), window.removeEventListener("scroll", p, { capture: !0 }), window.removeEventListener("resize", p);
|
|
80
|
-
for (const e of [B, A, F, u]) e && e.disconnect();
|
|
81
|
-
s?.removeAttribute("data-placement");
|
|
88
|
+
return L && L.observe(c.body, { subtree: !0, childList: !0, attributes: !0, characterData: !0 }), () => {
|
|
89
|
+
cancelAnimationFrame(d), window.removeEventListener("scroll", v, { capture: !0 }), window.removeEventListener("resize", v);
|
|
90
|
+
for (const r of [F, L, b]) r && r.disconnect();
|
|
91
|
+
u?.removeAttribute("data-placement"), B.current = null;
|
|
82
92
|
};
|
|
83
|
-
}, [
|
|
93
|
+
}, [i, f, n, t, o]), [Y, j];
|
|
84
94
|
};
|
|
85
95
|
export {
|
|
86
|
-
|
|
96
|
+
K as default
|
|
87
97
|
};
|
package/dist/index.d.cts
CHANGED
|
@@ -43,6 +43,11 @@ export interface SelectIcons {
|
|
|
43
43
|
checkbox: SelectIcon
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
+
/** An extension passed to `<Select plugins={[...]}/>`: use the built-in `chips` and `paging`. */
|
|
47
|
+
export interface SelectPlugin {
|
|
48
|
+
readonly [key: string]: unknown
|
|
49
|
+
}
|
|
50
|
+
|
|
46
51
|
export interface SelectProps extends AriaAttributes {
|
|
47
52
|
[key: `data-${string}`]: string | number | boolean | undefined
|
|
48
53
|
|
|
@@ -58,6 +63,8 @@ export interface SelectProps extends AriaAttributes {
|
|
|
58
63
|
/** value: an array item as given (an object stays the whole object), an <Option/> as its `value`; a controlled value must have the shape of its source. */
|
|
59
64
|
onChange?: (value: any, ids: any) => void
|
|
60
65
|
multiple?: boolean
|
|
66
|
+
/** Optional features: `[chips]` for chips in a multiple Select, `[paging]` for `hasMore` / `loadMore` / `loadButton`. */
|
|
67
|
+
plugins?: SelectPlugin[]
|
|
61
68
|
childrenFirst?: boolean
|
|
62
69
|
groupsClosed?: boolean
|
|
63
70
|
|
|
@@ -158,6 +165,12 @@ export interface SelectProps extends AriaAttributes {
|
|
|
158
165
|
|
|
159
166
|
export const Select: FC<SelectProps>
|
|
160
167
|
|
|
168
|
+
/** Plugin: chips for the selected values of a multiple Select. */
|
|
169
|
+
export const chips: SelectPlugin
|
|
170
|
+
|
|
171
|
+
/** Plugin: loading more options (`hasMore`, `loadMore`, `loadButton`, `loadOffset`, `loadAhead`). */
|
|
172
|
+
export const paging: SelectPlugin
|
|
173
|
+
|
|
161
174
|
export interface OptionProps {
|
|
162
175
|
value?: any
|
|
163
176
|
id?: any
|
package/dist/motion.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),s=require("react"),Y=require("./state.cjs"),X={x:["width","marginLeft","marginRight","paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"],y:["height","marginTop","marginBottom","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth"],none:[]},Z={x:{minWidth:"0px",maxWidth:"none"},y:{minHeight:"0px",maxHeight:"none"}},J=s.createContext(null);let I=null;const _=()=>I??=(queueMicrotask(()=>{I=null}),{});function ee({as:c="div",axis:n="y",exitAxis:h=n,fade:l=!1,in:f,unmountOnExit:r=!0,easing:x,duration:o,group:t,nodeRef:u,onEntered:S,onExited:C,...e}){const b=s.useContext(Y.SelectConfigContext),v=s.useContext(J),T=f===void 0&&!!v,d=T?v.present:!!f,R=d?n:h,H=o??(b?.duration??300)/(T&&v.swap?2:1),z=x??b?.easing??"ease",K=s.useRef(null),L=u??K,p=s.useRef(null),M=s.useRef(!1),y=s.useRef({restart:()=>{}}),[N]=s.useState(()=>T&&v.appear?!d:d),j=s.useRef(N),[A,G]=s.useState(!d);d&&A&&G(!1);const V=s.useEffectEvent(()=>{if(t?.delete(y.current),d){p.current?.cancel(),p.current=null,S?.();return}C?.(),T&&v.onExited(),r&&(p.current=null,G(!0))});if(s.useLayoutEffect(()=>{const i=L.current;if(!i)return;const P=l?[...X[R],"opacity"]:X[R],W=R==="none"?{}:{overflow:"hidden",textOverflow:"clip",...Z[R]},E={...Object.fromEntries(P.map(a=>[a,a==="opacity"?0:"0px"])),...W},q=()=>{const{overflow:a}=i.style;i.style.overflow="hidden";const w=getComputedStyle(i),k={...Object.fromEntries(P.map(m=>[m,w[m]])),...W};return i.style.overflow=a,k},B=(a,w)=>{const k=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,m=p.current=i.animate([a,w],{duration:k?0:H,easing:z,fill:j.current?"backwards":"both"});if(m.onfinish=()=>{p.current===m&&M.current&&V()},y.current.frames=[a,w],!t)return;const g=m.timeline?.currentTime;g!=null&&(m.startTime=g,m.currentTime=0),y.current.batch=_(),t.add(y.current)},U=()=>{const[a,w]=y.current.frames,k=p.current.effect.getComputedTiming().progress??0,m=g=>parseFloat(a[g])+(parseFloat(w[g])-parseFloat(a[g]))*k;return{...Object.fromEntries(P.map(g=>[g,g==="opacity"?m(g):`${m(g)}px`])),...W}};if(y.current.restart=a=>{const w=p.current;if(w?.playState!=="running"||!a&&y.current.batch===I)return;const k=U();w.cancel(),B(k,j.current?q():E)},j.current===d){!d&&p.current?.effect?.target!==i&&i.animate&&(p.current=i.animate([E,E],{fill:"forwards"}));return}j.current=d;const F=p.current;if(F?.playState==="running"){if(!t){F.reverse();return}y.current.restart(!0)}else{if(F?.cancel(),!i.animate){V();return}d?B(E,q()):B(q(),E)}t?.forEach(a=>a!==y.current&&a.restart())},[d,r,R,l,H,z,L,t]),s.useLayoutEffect(()=>{const i=y.current;return M.current=!0,p.current?.playState==="running"&&t?.add(i),()=>{M.current=!1,t?.delete(i)}},[t]),A&&r)return null;const Q=c;return O.jsx(Q,{ref:L,...e})}const te=({id:c,present:n,appear:h,swap:l,onExited:f,children:r})=>{const x=s.useMemo(()=>({present:n,appear:h,swap:l,onExited:()=>f(c)}),[c,n,h,l,f]);return O.jsx(J.Provider,{value:x,children:r})},$=(c,n,h,l=!0)=>{const f=s.Children.toArray(n).filter(s.isValidElement),r=new Set(f.map(e=>e.key)),x=new Map(c.map(e=>[e.key,e])),o=f.map(e=>({key:e.key,el:e,present:!0,appear:x.get(e.key)?.appear??l}));let t=0;const u=new Set;c.forEach(e=>{if(r.has(e.key))e.present&&(t=o.findIndex(b=>b.key===e.key)+1);else if(!e.pending){const b=e.present?{...e,present:!1,swap:!1}:e;e.present&&u.add(b),o.splice(t++,0,b)}});const S=e=>e.present&&(x.get(e.key)?.pending??!x.has(e.key)),C=h&&(u.size>0||c.some(e=>e.pending))&&o.some(e=>!e.present)&&o.some(S);return{children:n,list:C?o.map(e=>u.has(e)?{...e,swap:!0}:S(e)?{...e,pending:!0,swap:!0}:e):o}},D=c=>c.some(n=>!n.present)?c:c.map(n=>n.pending?{...n,pending:!1}:n);function ne({children:c,hold:n=!1,wait:h=!1}){const[l,f]=s.useState(()=>({...$([],c,h,!1),hold:n}));let r=l;r.children!==c&&(r={...r,...$(r.list,c,h)}),r.hold!==n&&(r={...r,hold:n,list:n?r.list:D(r.list.filter(o=>o.present))}),r!==l&&f(r);const x=s.useCallback(o=>f(t=>!t.hold&&t.list.some(u=>u.key===o&&!u.present)?{...t,list:D(t.list.filter(u=>u.key!==o))}:t),[]);return l.list.map(({key:o,el:t,present:u,appear:S,pending:C,swap:e=!1})=>!C&&O.jsx(te,{id:o,present:u,appear:S,swap:e,onExited:x,children:t},o))}exports.Collapse=ee;exports.Presence=ne;
|
package/dist/motion.js
CHANGED
|
@@ -1,120 +1,122 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { SelectConfigContext as
|
|
5
|
-
const
|
|
2
|
+
import { jsx as q } from "react/jsx-runtime";
|
|
3
|
+
import { useState as H, useCallback as _, useContext as $, createContext as ee, useRef as T, useEffectEvent as te, useLayoutEffect as D, Children as ne, isValidElement as re, useMemo as se } from "react";
|
|
4
|
+
import { SelectConfigContext as oe } from "./state.js";
|
|
5
|
+
const J = {
|
|
6
6
|
x: ["width", "marginLeft", "marginRight", "paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"],
|
|
7
|
-
y: ["height", "marginTop", "marginBottom", "paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"]
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
y: ["height", "marginTop", "marginBottom", "paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"],
|
|
8
|
+
none: []
|
|
9
|
+
}, ce = { x: { minWidth: "0px", maxWidth: "none" }, y: { minHeight: "0px", maxHeight: "none" } }, Q = /* @__PURE__ */ ee(null);
|
|
10
|
+
let O = null;
|
|
11
|
+
const ae = () => O ??= (queueMicrotask(() => {
|
|
12
|
+
O = null;
|
|
12
13
|
}), {});
|
|
13
|
-
function
|
|
14
|
+
function pe({
|
|
14
15
|
as: s = "div",
|
|
15
16
|
axis: n = "y",
|
|
16
|
-
|
|
17
|
+
exitAxis: h = n,
|
|
18
|
+
fade: l = !1,
|
|
17
19
|
in: f,
|
|
18
|
-
unmountOnExit:
|
|
19
|
-
easing:
|
|
20
|
-
duration:
|
|
20
|
+
unmountOnExit: r = !0,
|
|
21
|
+
easing: y,
|
|
22
|
+
duration: o,
|
|
21
23
|
group: t,
|
|
22
24
|
nodeRef: i,
|
|
23
|
-
onEntered:
|
|
24
|
-
onExited:
|
|
25
|
-
...
|
|
25
|
+
onEntered: k,
|
|
26
|
+
onExited: v,
|
|
27
|
+
...e
|
|
26
28
|
}) {
|
|
27
|
-
const
|
|
28
|
-
} }), [
|
|
29
|
-
|
|
30
|
-
const
|
|
31
|
-
if (t?.delete(
|
|
32
|
-
|
|
29
|
+
const x = $(oe), C = $(Q), R = f === void 0 && !!C, u = R ? C.present : !!f, S = u ? n : h, z = o ?? (x?.duration ?? 300) / (R && C.swap ? 2 : 1), A = y ?? x?.easing ?? "ease", U = T(null), L = i ?? U, d = T(null), M = T(!1), g = T({ restart: () => {
|
|
30
|
+
} }), [Y] = H(() => R && C.appear ? !u : u), W = T(Y), [G, V] = H(!u);
|
|
31
|
+
u && G && V(!1);
|
|
32
|
+
const X = te(() => {
|
|
33
|
+
if (t?.delete(g.current), u) {
|
|
34
|
+
d.current?.cancel(), d.current = null, k?.();
|
|
33
35
|
return;
|
|
34
36
|
}
|
|
35
|
-
|
|
37
|
+
v?.(), R && C.onExited(), r && (d.current = null, V(!0));
|
|
36
38
|
});
|
|
37
|
-
return
|
|
38
|
-
const
|
|
39
|
-
if (!
|
|
40
|
-
const
|
|
41
|
-
const { overflow:
|
|
42
|
-
|
|
43
|
-
const
|
|
44
|
-
return
|
|
45
|
-
},
|
|
46
|
-
const
|
|
47
|
-
if (
|
|
48
|
-
|
|
49
|
-
},
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
},
|
|
53
|
-
const [
|
|
54
|
-
return { ...Object.fromEntries(
|
|
39
|
+
return D(() => {
|
|
40
|
+
const a = L.current;
|
|
41
|
+
if (!a) return;
|
|
42
|
+
const j = l ? [...J[S], "opacity"] : J[S], B = S === "none" ? {} : { overflow: "hidden", textOverflow: "clip", ...ce[S] }, E = { ...Object.fromEntries(j.map((c) => [c, c === "opacity" ? 0 : "0px"])), ...B }, P = () => {
|
|
43
|
+
const { overflow: c } = a.style;
|
|
44
|
+
a.style.overflow = "hidden";
|
|
45
|
+
const w = getComputedStyle(a), b = { ...Object.fromEntries(j.map((p) => [p, w[p]])), ...B };
|
|
46
|
+
return a.style.overflow = c, b;
|
|
47
|
+
}, F = (c, w) => {
|
|
48
|
+
const b = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, p = d.current = a.animate([c, w], { duration: b ? 0 : z, easing: A, fill: W.current ? "backwards" : "both" });
|
|
49
|
+
if (p.onfinish = () => {
|
|
50
|
+
d.current === p && M.current && X();
|
|
51
|
+
}, g.current.frames = [c, w], !t) return;
|
|
52
|
+
const m = p.timeline?.currentTime;
|
|
53
|
+
m != null && (p.startTime = m, p.currentTime = 0), g.current.batch = ae(), t.add(g.current);
|
|
54
|
+
}, Z = () => {
|
|
55
|
+
const [c, w] = g.current.frames, b = d.current.effect.getComputedTiming().progress ?? 0, p = (m) => parseFloat(c[m]) + (parseFloat(w[m]) - parseFloat(c[m])) * b;
|
|
56
|
+
return { ...Object.fromEntries(j.map((m) => [m, m === "opacity" ? p(m) : `${p(m)}px`])), ...B };
|
|
55
57
|
};
|
|
56
|
-
if (
|
|
57
|
-
const
|
|
58
|
-
if (
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
},
|
|
62
|
-
!
|
|
58
|
+
if (g.current.restart = (c) => {
|
|
59
|
+
const w = d.current;
|
|
60
|
+
if (w?.playState !== "running" || !c && g.current.batch === O) return;
|
|
61
|
+
const b = Z();
|
|
62
|
+
w.cancel(), F(b, W.current ? P() : E);
|
|
63
|
+
}, W.current === u) {
|
|
64
|
+
!u && d.current?.effect?.target !== a && a.animate && (d.current = a.animate([E, E], { fill: "forwards" }));
|
|
63
65
|
return;
|
|
64
66
|
}
|
|
65
|
-
|
|
66
|
-
const
|
|
67
|
-
if (
|
|
67
|
+
W.current = u;
|
|
68
|
+
const I = d.current;
|
|
69
|
+
if (I?.playState === "running") {
|
|
68
70
|
if (!t) {
|
|
69
|
-
|
|
71
|
+
I.reverse();
|
|
70
72
|
return;
|
|
71
73
|
}
|
|
72
|
-
|
|
74
|
+
g.current.restart(!0);
|
|
73
75
|
} else {
|
|
74
|
-
if (
|
|
75
|
-
|
|
76
|
+
if (I?.cancel(), !a.animate) {
|
|
77
|
+
X();
|
|
76
78
|
return;
|
|
77
79
|
}
|
|
78
|
-
|
|
80
|
+
u ? F(E, P()) : F(P(), E);
|
|
79
81
|
}
|
|
80
|
-
t?.forEach((
|
|
81
|
-
}, [
|
|
82
|
-
const
|
|
83
|
-
return
|
|
84
|
-
|
|
82
|
+
t?.forEach((c) => c !== g.current && c.restart());
|
|
83
|
+
}, [u, r, S, l, z, A, L, t]), D(() => {
|
|
84
|
+
const a = g.current;
|
|
85
|
+
return M.current = !0, d.current?.playState === "running" && t?.add(a), () => {
|
|
86
|
+
M.current = !1, t?.delete(a);
|
|
85
87
|
};
|
|
86
|
-
}, [t]),
|
|
88
|
+
}, [t]), G && r ? null : /* @__PURE__ */ q(s, { ref: L, ...e });
|
|
87
89
|
}
|
|
88
|
-
const
|
|
89
|
-
const
|
|
90
|
-
return /* @__PURE__ */
|
|
91
|
-
},
|
|
92
|
-
const
|
|
93
|
-
let
|
|
94
|
-
const
|
|
90
|
+
const ie = ({ id: s, present: n, appear: h, swap: l, onExited: f, children: r }) => {
|
|
91
|
+
const y = se(() => ({ present: n, appear: h, swap: l, onExited: () => f(s) }), [s, n, h, l, f]);
|
|
92
|
+
return /* @__PURE__ */ q(Q.Provider, { value: y, children: r });
|
|
93
|
+
}, K = (s, n, h, l = !0) => {
|
|
94
|
+
const f = ne.toArray(n).filter(re), r = new Set(f.map((e) => e.key)), y = new Map(s.map((e) => [e.key, e])), o = f.map((e) => ({ key: e.key, el: e, present: !0, appear: y.get(e.key)?.appear ?? l }));
|
|
95
|
+
let t = 0;
|
|
96
|
+
const i = /* @__PURE__ */ new Set();
|
|
95
97
|
s.forEach((e) => {
|
|
96
98
|
if (r.has(e.key))
|
|
97
|
-
e.present && (
|
|
99
|
+
e.present && (t = o.findIndex((x) => x.key === e.key) + 1);
|
|
98
100
|
else if (!e.pending) {
|
|
99
|
-
const
|
|
100
|
-
e.present &&
|
|
101
|
+
const x = e.present ? { ...e, present: !1, swap: !1 } : e;
|
|
102
|
+
e.present && i.add(x), o.splice(t++, 0, x);
|
|
101
103
|
}
|
|
102
104
|
});
|
|
103
|
-
const k = (e) => e.present && (
|
|
104
|
-
return { children: n, list: v ?
|
|
105
|
-
},
|
|
106
|
-
function
|
|
107
|
-
const [
|
|
108
|
-
let r =
|
|
109
|
-
r.children !== s && (r = { ...r, ...
|
|
110
|
-
const
|
|
111
|
-
(
|
|
105
|
+
const k = (e) => e.present && (y.get(e.key)?.pending ?? !y.has(e.key)), v = h && (i.size > 0 || s.some((e) => e.pending)) && o.some((e) => !e.present) && o.some(k);
|
|
106
|
+
return { children: n, list: v ? o.map((e) => i.has(e) ? { ...e, swap: !0 } : k(e) ? { ...e, pending: !0, swap: !0 } : e) : o };
|
|
107
|
+
}, N = (s) => s.some((n) => !n.present) ? s : s.map((n) => n.pending ? { ...n, pending: !1 } : n);
|
|
108
|
+
function me({ children: s, hold: n = !1, wait: h = !1 }) {
|
|
109
|
+
const [l, f] = H(() => ({ ...K([], s, h, !1), hold: n }));
|
|
110
|
+
let r = l;
|
|
111
|
+
r.children !== s && (r = { ...r, ...K(r.list, s, h) }), r.hold !== n && (r = { ...r, hold: n, list: n ? r.list : N(r.list.filter((o) => o.present)) }), r !== l && f(r);
|
|
112
|
+
const y = _((o) => f(
|
|
113
|
+
(t) => !t.hold && t.list.some((i) => i.key === o && !i.present) ? { ...t, list: N(t.list.filter((i) => i.key !== o)) } : t
|
|
112
114
|
), []);
|
|
113
|
-
return
|
|
114
|
-
({ key:
|
|
115
|
+
return l.list.map(
|
|
116
|
+
({ key: o, el: t, present: i, appear: k, pending: v, swap: e = !1 }) => !v && /* @__PURE__ */ q(ie, { id: o, present: i, appear: k, swap: e, onExited: y, children: t }, o)
|
|
115
117
|
);
|
|
116
118
|
}
|
|
117
119
|
export {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
+
pe as Collapse,
|
|
121
|
+
me as Presence
|
|
120
122
|
};
|
package/dist/style.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
@layer rac.base, rac.theme;
|
|
2
|
-
@layer rac.base,rac.theme;@property --rac-list-max-height{syntax: "<length>"; inherits: true; initial-value: 250px;}@layer rac.base{:root{--rac-row: 2em}.rac-select,.rac-options{--rac-duration-fast: calc(var(--rac-duration) * .5)}@media(prefers-reduced-motion:reduce){.rac-select,.rac-options{--rac-duration: 1ms !important}.rac-dots i{animation:none}}.rac-select{position:relative;display:flex;align-items:center;box-sizing:border-box;min-width:0;max-width:100%;cursor:pointer}.rac-select:not([aria-haspopup]){cursor:default}.rac-select[aria-busy=true]{cursor:progress}.rac-select[aria-disabled=true]{cursor:not-allowed}.rac-select[aria-disabled=true][aria-busy=true]{cursor:wait}.rac-value{flex:1;min-width:0;min-height:var(--rac-row);display:flex;flex-wrap:wrap;align-items:center}.rac-title{min-width:0;max-width:calc(100% - .25px)
|
|
3
|
-
@layer rac.base,rac.theme;@layer rac.theme{:root{--rac-bg: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-fg: CanvasText;--rac-danger: #e7000b;--rac-success: #4caf50;--rac-radius: 0px}.rac-select,.rac-options{--rac-tint-1: color-mix(in srgb, var(--rac-fg) 5%, var(--rac-bg));--rac-tint-2: color-mix(in srgb, var(--rac-fg) 10%, var(--rac-bg));--rac-tint-3: color-mix(in srgb, var(--rac-fg) 20%, var(--rac-bg));--rac-muted: color-mix(in srgb, var(--rac-fg) 55%, var(--rac-bg))}.rac-select,.rac-options{border-radius:var(--rac-radius)}.rac-select{padding:0 .5em;border:2px solid var(--rac-bg);background-color:var(--rac-bg);color:var(--rac-fg);transition:background-color var(--rac-duration) var(--rac-ease),border-color var(--rac-duration) var(--rac-ease),opacity var(--rac-duration) var(--rac-ease)}.rac-select[aria-haspopup]:not([aria-disabled=true]):hover{background-color:var(--rac-tint-1)}.rac-select[aria-haspopup]:not([aria-disabled=true],[data-error],[data-invalid]):hover{border-color:var(--rac-tint-1)}.rac-select[aria-disabled=true]{opacity:.75}.rac-select:is([data-error],[data-invalid]){border-color:var(--rac-danger)}.rac-select[aria-busy=true]:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--rac-muted),transparent) 0 100% / 40% 2px no-repeat;animation:rac-busy 1.5s ease-in-out infinite;pointer-events:none}@media(prefers-reduced-motion:reduce){.rac-select[aria-busy=true]:after{animation:none;background-size:100% 2px}}:is(.rac-title,.rac-option)[data-bool=true]{color:var(--rac-success)}:is(.rac-title,.rac-option)[data-bool=false]{color:var(--rac-danger)}.rac-list{background-color:var(--rac-bg);color:var(--rac-fg);scrollbar-color:var(--rac-tint-2) var(--rac-tint-1);scrollbar-width:thin;scroll-padding-block:.5em}.rac-option{gap:.5em;padding:.5em;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-option[data-highlighted]{background-color:var(--rac-tint-2)}.rac-option[aria-selected=true]{background-color:var(--rac-tint-3)}.rac-option[aria-selected=true][data-highlighted]{background-color:color-mix(in srgb,var(--rac-fg) 30%,var(--rac-bg))}.rac-option[aria-disabled=true]{color:var(--rac-muted)}.rac-option[data-invalid]{color:var(--rac-danger)}.rac-option[data-loading]{gap:0;color:var(--rac-muted)}.rac-option[data-error]{color:var(--rac-danger)}.rac-check{margin-inline-end:.2em}.rac-check[data-default]{border-color:var(--rac-muted)}.rac-group{padding:.5em;font-size:1.25em;font-weight:700;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-group[data-highlighted]{background-color:var(--rac-tint-2)}.rac-group[data-disabled]{color:var(--rac-muted)}.rac-group-items{padding-inline-start:1em}@keyframes rac-busy{0%{background-position-x:-100%}to{background-position-x:200%}}}
|
|
4
|
-
@layer rac.base,rac.theme;@layer rac.base{.rac-chip-slot{display:flex;align-items:center;max-width:100%}.rac-chip-text,.rac-chip>.rac-option-jsx{min-width:0;overflow-x:clip}.rac-chip-text{text-overflow:ellipsis}.rac-chip{position:relative;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:inherit;white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y}.rac-chip-del{position:absolute;flex-shrink:0;inset-inline-end:0;height:100%;display:grid;align-items:center;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.rac-chip-del:disabled{cursor:inherit}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{position:relative}@media(any-pointer:coarse){.rac-chip-del:before{content:"";position:absolute;inset:min(0px,50% - 12px)}}.rac-spacer{flex-basis:100%;height:0;margin-inline-end:1px}}@layer rac.theme{.rac-chip{min-height:calc(var(--rac-row) - .5em);margin-block:.25em;margin-inline-end:.5em;padding-inline:.25em;border-radius:calc(var(--rac-radius) / 2);line-height:normal;background-color:var(--rac-tint-2);transition:background-color var(--rac-duration-fast) var(--rac-ease)}@media(hover:hover){.rac-chip:hover{background-color:var(--rac-tint-3)}}.rac-select[data-deleting] .rac-chip{background-color:color-mix(in srgb,var(--rac-danger) 15%,var(--rac-bg));animation:rac-shake .3s infinite}@media(prefers-reduced-motion:reduce){.rac-select[data-deleting] .rac-chip{animation:none}}.rac-chip-del{border-start-end-radius:inherit;border-end-end-radius:inherit;background-color:color-mix(in srgb,var(--rac-danger) 30%,var(--rac-bg));transition:color var(--rac-duration) var(--rac-ease),background-color var(--rac-duration) var(--rac-ease)}.rac-chip-del:hover{color:var(--rac-danger)}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{background-color:transparent}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}}
|
|
2
|
+
@layer rac.base,rac.theme;@property --rac-list-max-height{syntax: "<length>"; inherits: true; initial-value: 250px;}@layer rac.base{:root{--rac-row: 2em}.rac-select,.rac-options{--rac-duration-fast: calc(var(--rac-duration) * .5)}@media(prefers-reduced-motion:reduce){.rac-select,.rac-options{--rac-duration: 1ms !important}.rac-dots i{animation:none}}.rac-select{position:relative;display:flex;align-items:center;box-sizing:border-box;min-width:0;max-width:100%;cursor:pointer}.rac-select:not([aria-haspopup]){cursor:default}.rac-select[aria-busy=true]{cursor:progress}.rac-select[aria-disabled=true]{cursor:not-allowed}.rac-select[aria-disabled=true][aria-busy=true]{cursor:wait}.rac-value{flex:1;min-width:0;min-height:var(--rac-row);box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center}.rac-title,.rac-pick{min-width:0;overflow-x:clip;white-space:nowrap;text-overflow:ellipsis}.rac-title{max-width:calc(100% - .25px)}.rac-value:has(.rac-pick){padding-block:calc((var(--rac-row) - 1lh) / 2)}.rac-dots{display:inline-flex;gap:.17em;margin-inline-start:.25em}.rac-dots i{width:.25em;height:.25em;border-radius:50%;background:currentColor;animation:rac-blink 1.4s infinite both}.rac-dots i:nth-child(2){animation-delay:.2s}.rac-dots i:nth-child(3){animation-delay:.4s}.rac-clear,.rac-arrow{display:grid;place-items:center;align-self:center}.rac-clear{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.rac-arrow,.rac-group-arrow{transition:rotate var(--rac-duration) var(--rac-ease)}.rac-select:not([data-placement=top],[aria-expanded=true]) .rac-arrow,.rac-select[data-placement=top][aria-expanded=true] .rac-arrow{rotate:180deg}.rac-icon{height:1em}.rac-input{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.rac-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(any-pointer:coarse){.rac-clear{position:relative}.rac-arrow{pointer-events:none}.rac-clear:before{content:"";position:absolute;inset:min(0px,50% - 12px)}}.rac-options{box-sizing:border-box;z-index:2147483647;overflow:clip}.rac-options{opacity:var(--rac-visible, 1);transition:visibility 0s}.rac-options[data-offscreen]{visibility:hidden;transition:opacity var(--rac-duration) var(--rac-ease),visibility 0s var(--rac-duration)}.rac-list{max-height:var(--rac-list-max-height);overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;scroll-behavior:smooth}.rac-option{display:flex;justify-content:space-between;align-items:center;overflow-wrap:anywhere;cursor:pointer}.rac-option[aria-disabled=true]{cursor:not-allowed}.rac-option[data-error]{cursor:default}.rac-option[data-loading]{justify-content:start;align-items:baseline;cursor:wait}.rac-check{position:relative;display:flex;justify-content:center;align-items:center}.rac-check[data-default]{width:1em;height:1em;border:1px solid}.rac-checkmark{position:absolute;width:auto;height:1em;opacity:0;scale:0;transition:opacity var(--rac-duration) var(--rac-ease),scale var(--rac-duration) var(--rac-ease)}.rac-option[aria-selected=true] .rac-checkmark{opacity:1;scale:1}.rac-group{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.rac-group[data-disabled]{cursor:not-allowed}.rac-group-arrow{display:grid}.rac-group[data-open]>.rac-group-arrow{rotate:180deg}@keyframes rac-blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}}
|
|
3
|
+
@layer rac.base,rac.theme;@layer rac.theme{:root{--rac-bg: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-fg: CanvasText;--rac-danger: #e7000b;--rac-success: #4caf50;--rac-radius: 0px}.rac-select,.rac-options{--rac-tint-1: color-mix(in srgb, var(--rac-fg) 5%, var(--rac-bg));--rac-tint-2: color-mix(in srgb, var(--rac-fg) 10%, var(--rac-bg));--rac-tint-3: color-mix(in srgb, var(--rac-fg) 20%, var(--rac-bg));--rac-muted: color-mix(in srgb, var(--rac-fg) 55%, var(--rac-bg))}.rac-select,.rac-options{border-radius:var(--rac-radius)}.rac-select{padding:0 .5em;border:2px solid var(--rac-bg);background-color:var(--rac-bg);color:var(--rac-fg);transition:background-color var(--rac-duration) var(--rac-ease),border-color var(--rac-duration) var(--rac-ease),opacity var(--rac-duration) var(--rac-ease)}.rac-select[aria-haspopup]:not([aria-disabled=true]):hover{background-color:var(--rac-tint-1)}.rac-select[aria-haspopup]:not([aria-disabled=true],[data-error],[data-invalid]):hover{border-color:var(--rac-tint-1)}.rac-select[aria-disabled=true]{opacity:.75}.rac-select:is([data-error],[data-invalid]){border-color:var(--rac-danger)}.rac-select[aria-busy=true]:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--rac-muted),transparent) 0 100% / 40% 2px no-repeat;animation:rac-busy 1.5s ease-in-out infinite;pointer-events:none}@media(prefers-reduced-motion:reduce){.rac-select[aria-busy=true]:after{animation:none;background-size:100% 2px}}.rac-pick{margin-inline-end:.3em}.rac-pick:after{content:",";transition:opacity var(--rac-duration) var(--rac-ease)}.rac-pick[data-last]:after{opacity:0}:is(.rac-title,.rac-option)[data-bool=true]{color:var(--rac-success)}:is(.rac-title,.rac-option)[data-bool=false]{color:var(--rac-danger)}.rac-list{background-color:var(--rac-bg);color:var(--rac-fg);scrollbar-color:var(--rac-tint-2) var(--rac-tint-1);scrollbar-width:thin;scroll-padding-block:.5em}.rac-option{gap:.5em;padding:.5em;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-option[data-highlighted]{background-color:var(--rac-tint-2)}.rac-option[aria-selected=true]{background-color:var(--rac-tint-3)}.rac-option[aria-selected=true][data-highlighted]{background-color:color-mix(in srgb,var(--rac-fg) 30%,var(--rac-bg))}.rac-option[aria-disabled=true]{color:var(--rac-muted)}.rac-option[data-invalid]{color:var(--rac-danger)}.rac-option[data-loading]{gap:0;color:var(--rac-muted)}.rac-option[data-error]{color:var(--rac-danger)}.rac-check{margin-inline-end:.2em}.rac-check[data-default]{border-color:var(--rac-muted)}.rac-group{padding:.5em;font-size:1.25em;font-weight:700;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-group[data-highlighted]{background-color:var(--rac-tint-2)}.rac-group[data-disabled]{color:var(--rac-muted)}.rac-group-items{padding-inline-start:1em}@keyframes rac-busy{0%{background-position-x:-100%}to{background-position-x:200%}}}
|
|
4
|
+
@layer rac.base,rac.theme;@layer rac.base{.rac-chip-slot{display:flex;align-items:center;max-width:100%}.rac-chip-text,.rac-chip>.rac-option-jsx{min-width:0;overflow-x:clip}.rac-chip-text{text-overflow:ellipsis}.rac-chip{position:relative;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:inherit;white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y}.rac-chip-del{position:absolute;flex-shrink:0;inset-inline-end:0;height:100%;display:grid;align-items:center;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.rac-chip-del:disabled{cursor:inherit}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{position:relative}@media(any-pointer:coarse){.rac-chip-del:before{content:"";position:absolute;inset:min(0px,50% - 12px)}}.rac-chip-slot>[data-plain]{display:flex;flex-shrink:0;align-items:center;max-width:inherit}.rac-chip-slot [data-sep]:after{content:var(--rac-sep)}.rac-spacer{flex-basis:100%;height:0;margin-inline-end:1px}}@layer rac.theme{.rac-chip{min-height:calc(var(--rac-row) - .5em);margin-block:.25em;margin-inline-end:.5em;padding-inline:.25em;border-radius:calc(var(--rac-radius) / 2);line-height:normal;background-color:var(--rac-tint-2);transition:background-color var(--rac-duration-fast) var(--rac-ease)}@media(hover:hover){.rac-chip:hover{background-color:var(--rac-tint-3)}}.rac-select[data-deleting] .rac-chip{background-color:color-mix(in srgb,var(--rac-danger) 15%,var(--rac-bg));animation:rac-shake .3s infinite}@media(prefers-reduced-motion:reduce){.rac-select[data-deleting] .rac-chip{animation:none}}.rac-chip-del{border-start-end-radius:inherit;border-end-end-radius:inherit;background-color:color-mix(in srgb,var(--rac-danger) 30%,var(--rac-bg));transition:color var(--rac-duration) var(--rac-ease),background-color var(--rac-duration) var(--rac-ease)}.rac-chip-del:hover{color:var(--rac-danger)}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{background-color:transparent}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}}
|
package/dist/theme.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer rac.base,rac.theme;@layer rac.theme{:root{--rac-bg: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-fg: CanvasText;--rac-danger: #e7000b;--rac-success: #4caf50;--rac-radius: 0px}.rac-select,.rac-options{--rac-tint-1: color-mix(in srgb, var(--rac-fg) 5%, var(--rac-bg));--rac-tint-2: color-mix(in srgb, var(--rac-fg) 10%, var(--rac-bg));--rac-tint-3: color-mix(in srgb, var(--rac-fg) 20%, var(--rac-bg));--rac-muted: color-mix(in srgb, var(--rac-fg) 55%, var(--rac-bg))}.rac-select,.rac-options{border-radius:var(--rac-radius)}.rac-select{padding:0 .5em;border:2px solid var(--rac-bg);background-color:var(--rac-bg);color:var(--rac-fg);transition:background-color var(--rac-duration) var(--rac-ease),border-color var(--rac-duration) var(--rac-ease),opacity var(--rac-duration) var(--rac-ease)}.rac-select[aria-haspopup]:not([aria-disabled=true]):hover{background-color:var(--rac-tint-1)}.rac-select[aria-haspopup]:not([aria-disabled=true],[data-error],[data-invalid]):hover{border-color:var(--rac-tint-1)}.rac-select[aria-disabled=true]{opacity:.75}.rac-select:is([data-error],[data-invalid]){border-color:var(--rac-danger)}.rac-select[aria-busy=true]:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--rac-muted),transparent) 0 100% / 40% 2px no-repeat;animation:rac-busy 1.5s ease-in-out infinite;pointer-events:none}@media(prefers-reduced-motion:reduce){.rac-select[aria-busy=true]:after{animation:none;background-size:100% 2px}}:is(.rac-title,.rac-option)[data-bool=true]{color:var(--rac-success)}:is(.rac-title,.rac-option)[data-bool=false]{color:var(--rac-danger)}.rac-list{background-color:var(--rac-bg);color:var(--rac-fg);scrollbar-color:var(--rac-tint-2) var(--rac-tint-1);scrollbar-width:thin;scroll-padding-block:.5em}.rac-option{gap:.5em;padding:.5em;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-option[data-highlighted]{background-color:var(--rac-tint-2)}.rac-option[aria-selected=true]{background-color:var(--rac-tint-3)}.rac-option[aria-selected=true][data-highlighted]{background-color:color-mix(in srgb,var(--rac-fg) 30%,var(--rac-bg))}.rac-option[aria-disabled=true]{color:var(--rac-muted)}.rac-option[data-invalid]{color:var(--rac-danger)}.rac-option[data-loading]{gap:0;color:var(--rac-muted)}.rac-option[data-error]{color:var(--rac-danger)}.rac-check{margin-inline-end:.2em}.rac-check[data-default]{border-color:var(--rac-muted)}.rac-group{padding:.5em;font-size:1.25em;font-weight:700;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-group[data-highlighted]{background-color:var(--rac-tint-2)}.rac-group[data-disabled]{color:var(--rac-muted)}.rac-group-items{padding-inline-start:1em}@keyframes rac-busy{0%{background-position-x:-100%}to{background-position-x:200%}}}
|
|
1
|
+
@layer rac.base,rac.theme;@layer rac.theme{:root{--rac-bg: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-fg: CanvasText;--rac-danger: #e7000b;--rac-success: #4caf50;--rac-radius: 0px}.rac-select,.rac-options{--rac-tint-1: color-mix(in srgb, var(--rac-fg) 5%, var(--rac-bg));--rac-tint-2: color-mix(in srgb, var(--rac-fg) 10%, var(--rac-bg));--rac-tint-3: color-mix(in srgb, var(--rac-fg) 20%, var(--rac-bg));--rac-muted: color-mix(in srgb, var(--rac-fg) 55%, var(--rac-bg))}.rac-select,.rac-options{border-radius:var(--rac-radius)}.rac-select{padding:0 .5em;border:2px solid var(--rac-bg);background-color:var(--rac-bg);color:var(--rac-fg);transition:background-color var(--rac-duration) var(--rac-ease),border-color var(--rac-duration) var(--rac-ease),opacity var(--rac-duration) var(--rac-ease)}.rac-select[aria-haspopup]:not([aria-disabled=true]):hover{background-color:var(--rac-tint-1)}.rac-select[aria-haspopup]:not([aria-disabled=true],[data-error],[data-invalid]):hover{border-color:var(--rac-tint-1)}.rac-select[aria-disabled=true]{opacity:.75}.rac-select:is([data-error],[data-invalid]){border-color:var(--rac-danger)}.rac-select[aria-busy=true]:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--rac-muted),transparent) 0 100% / 40% 2px no-repeat;animation:rac-busy 1.5s ease-in-out infinite;pointer-events:none}@media(prefers-reduced-motion:reduce){.rac-select[aria-busy=true]:after{animation:none;background-size:100% 2px}}.rac-pick{margin-inline-end:.3em}.rac-pick:after{content:",";transition:opacity var(--rac-duration) var(--rac-ease)}.rac-pick[data-last]:after{opacity:0}:is(.rac-title,.rac-option)[data-bool=true]{color:var(--rac-success)}:is(.rac-title,.rac-option)[data-bool=false]{color:var(--rac-danger)}.rac-list{background-color:var(--rac-bg);color:var(--rac-fg);scrollbar-color:var(--rac-tint-2) var(--rac-tint-1);scrollbar-width:thin;scroll-padding-block:.5em}.rac-option{gap:.5em;padding:.5em;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-option[data-highlighted]{background-color:var(--rac-tint-2)}.rac-option[aria-selected=true]{background-color:var(--rac-tint-3)}.rac-option[aria-selected=true][data-highlighted]{background-color:color-mix(in srgb,var(--rac-fg) 30%,var(--rac-bg))}.rac-option[aria-disabled=true]{color:var(--rac-muted)}.rac-option[data-invalid]{color:var(--rac-danger)}.rac-option[data-loading]{gap:0;color:var(--rac-muted)}.rac-option[data-error]{color:var(--rac-danger)}.rac-check{margin-inline-end:.2em}.rac-check[data-default]{border-color:var(--rac-muted)}.rac-group{padding:.5em;font-size:1.25em;font-weight:700;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-group[data-highlighted]{background-color:var(--rac-tint-2)}.rac-group[data-disabled]{color:var(--rac-muted)}.rac-group-items{padding-inline-start:1em}@keyframes rac-busy{0%{background-position-x:-100%}to{background-position-x:200%}}}
|
package/dist/trigger.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),h=require("./state.cjs"),o=require("./utils.cjs"),e=require("react"),B=require("./useSelectBehavior.cjs"),H=require("./model.cjs"),w=require("./motion.cjs"),z=[],K=()=>{},_=b=>b==null?"":typeof b=="object"?H.toJSON(b)??"":String(b),G=e.memo(function(){const{selectRef:g,multiple:n,name:c,form:u,required:C}=e.useContext(h.SelectConfigContext),{selected:s,selectedIDs:x,disabled:t,fieldsetDisabled:p}=e.useContext(h.SelectStateContext),{reset:m,markInvalid:S}=e.useContext(h.SelectActionsContext),y=e.useRef(null);e.useEffect(()=>{const r=y.current?.getRootNode();let v;const j=N=>{N.target===y.current?.form&&(clearTimeout(v),v=setTimeout(()=>N.defaultPrevented||m()))};return r?.addEventListener("reset",j,!0),()=>{clearTimeout(v),r?.removeEventListener("reset",j,!0)}},[m]);const d=n?x:s?[s]:z,l=!C&&(!c||n&&!d.length),f=l||!d.length?[""]:d.map(r=>_(r.original)),i=()=>g.current?.focus();return f.map((r,v)=>a.jsx("input",{className:"rac-input",ref:v?void 0:y,name:l?void 0:c,form:u,value:r,hidden:l,required:C&&!v,disabled:t&&!p,tabIndex:-1,"aria-hidden":"true",autoComplete:"off",onChange:K,onInvalid:S,onFocus:i},v))}),R=e.memo(function({hidden:g,settle:n,wait:c,children:u}){const{valueAsOption:C,renderOption:s}=e.useContext(h.SelectConfigContext),{title:x,valueOption:t,hasActualValue:p,loading:m,error:S}=e.useContext(h.SelectStateContext),[y]=e.useState(()=>new Set),d=C&&t?o.optionContent(t,s,!0):null,l=m&&!S&&!p,f=`${d?t.id:x}${l?"-loading":""}`,i=t?.type==="boolean"?String(t.raw):void 0;return a.jsxs(w.Presence,{wait:c,children:[!g&&a.jsxs(w.Collapse,{axis:"x",fade:!0,group:y,className:o.withClass("rac-title",d&&t.className),style:d?t.style:void 0,"data-bool":i,onEntered:n,onExited:n,children:[d?a.jsx("div",{className:"rac-option-jsx",children:d}):x,l&&o.dots]},f),u]})}),J=e.memo(function(){const{selectedText:g,duration:n,texts:c}=e.useContext(h.SelectConfigContext),{selectedIDs:u}=e.useContext(h.SelectStateContext),C=e.useSyncExternalStore(o.watchMotion,o.reducedMotion,()=>!1),s=u.length>0&&!g;return a.jsx(R,{hidden:s,wait:n>0&&!C,children:s&&u.map((x,t)=>a.jsx(w.Collapse,{as:"span",axis:"none",exitAxis:"x",fade:!0,className:"rac-pick","data-last":o.flag(t===u.length-1),children:x.name||c.emptyOption},x.id))})}),Q=e.memo(function(){const{selectRef:g,multiple:n,duration:c,easing:u,ext:C}=e.useContext(h.SelectConfigContext),s=n?C.Value:void 0,x=e.useRef(null),[t,p]=e.useState({Slot:s,multiple:n,enter:!1,left:!1});let m=t;(s?t.Slot!==s||t.left:t.Slot&&(!n||t.left))?m={Slot:s,multiple:n,enter:!!s&&!t.Slot&&t.multiple,left:!1}:t.multiple!==n&&(m={...t,multiple:n}),m!==t&&p(m);const{Slot:S,enter:y}=m,d=e.useCallback(()=>p(i=>i.left?i:{...i,left:!0}),[]),[l]=e.useState(()=>({value:0,root:"",anim:null})),f=e.useRef({duration:c,easing:u});return e.useLayoutEffect(()=>{f.current={duration:c,easing:u}},[c,u]),e.useLayoutEffect(()=>{const i=x.current;if(!i||typeof ResizeObserver>"u")return;const r=new ResizeObserver(()=>o.followHeight(g.current,l,i.offsetHeight,f.current.duration,f.current.easing));return r.observe(i),()=>r.disconnect()},[S,g,l]),e.useEffect(()=>()=>l.anim?.cancel(),[l]),S?a.jsx(S,{height:l,enter:y,leaving:!s,onLeft:d}):a.jsx("div",{className:"rac-value",ref:x,children:n?a.jsx(J,{}):a.jsx(R,{})})}),U=e.memo(function(){const{selectRef:g,selectId:n,highlightStore:c,className:u,style:C,duration:s,easing:x,deleteInline:t,icons:p,texts:m,placeholder:S,id:y,required:d,popup:l,attrs:f}=e.useContext(h.SelectConfigContext),{visibility:i,active:r,hasActualValue:v,deleting:j,loading:N,loadPending:O,error:q,invalid:E,normalizedOptions:T}=e.useContext(h.SelectStateContext),{handleBlur:P,handleFocus:k,handleKeyDown:A,toggleVisibility:D,clear:F}=e.useContext(h.SelectActionsContext),V=e.useSyncExternalStore(c.subscribe,()=>{const I=i?T[B.effectiveHighlight(c.get())]:null;return I?o.optionDomId(n,I.id):void 0},()=>{}),L=!!p.clear&&v&&r&&!j,M=!!p.arrow&&r&&!j&&l,$=l?{role:"combobox","aria-haspopup":"listbox","aria-controls":`${n}-listbox`,"aria-expanded":i,"aria-activedescendant":V,"aria-required":d||void 0}:{role:"group"};return a.jsxs("div",{...f,id:y,ref:g,style:{"--rac-duration":`${s}ms`,"--rac-ease":x,...C},className:o.withClass("rac-select",u),...r&&{onKeyDown:A,onFocus:k,onClick:D,onBlur:P},...$,"aria-disabled":!r,tabIndex:r?0:-1,"aria-busy":N||O||void 0,"aria-label":f["aria-label"]??(f["aria-labelledby"]?void 0:S),"aria-invalid":E||f["aria-invalid"],"aria-describedby":[f["aria-describedby"],q&&`${n}-error`].filter(Boolean).join(" ")||void 0,"data-inline-delete":o.flag(t),"data-empty":o.flag(!v),"data-deleting":o.flag(j),"data-error":o.flag(q),"data-invalid":o.flag(E),children:[a.jsx(Q,{}),a.jsxs(w.Presence,{children:[L&&a.jsx(w.Collapse,{as:"button",type:"button",axis:"x",className:"rac-clear",tabIndex:-1,"aria-label":m.clear,onMouseDown:o.stopEvent,onClick:I=>{o.refocus(I,g),F(I)},children:o.renderIcon(p.clear)},"clear"),M&&a.jsx(w.Collapse,{axis:"x",className:"rac-arrow","aria-hidden":"true",children:o.renderIcon(p.arrow)},"arrow")]}),a.jsx(G,{})]})});exports.Title=R;exports.default=U;
|