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.
@@ -1,87 +1,97 @@
1
1
  "use client";
2
- import { useRef as L, useLayoutEffect as j, useCallback as O, useEffect as T } from "react";
3
- const $ = (o, r, d) => {
4
- Math.abs(d) > 0.5 && (o.style[r] = `${parseFloat(o.style[r]) + d}px`);
5
- }, U = (o, r, d, x) => {
6
- const a = o.getBoundingClientRect(), g = getComputedStyle(o);
7
- $(o, "left", r.left - a.left + parseFloat(g.marginLeft)), d ? $(o, "bottom", a.bottom + parseFloat(g.marginBottom) - r.top + x) : $(o, "top", r.bottom + x - a.top + parseFloat(g.marginTop));
8
- }, V = (o, r) => {
9
- o && o.dataset.placement !== (r ? "top" : "bottom") && (o.dataset.placement = r ? "top" : "bottom");
10
- }, k = () => typeof IntersectionObserver < "u", q = (o, r, d = window.innerHeight - o.bottom) => d < r && o.top > d, X = ({ selectRef: o, panelRef: r, open: d, frozen: x, offset: a, onFlip: g }) => {
11
- const h = L(0), I = L(x), M = L(g);
12
- j(() => {
13
- I.current = x, M.current = g;
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 E = O((t) => [o.current, r.current].forEach((i) => V(i, t)), [o, r]), w = O((t) => {
16
- const i = o.current;
17
- if (!i || !t) return;
18
- t.scrollHeight && (h.current = t.scrollHeight);
19
- const s = i.getBoundingClientRect(), c = t.dataset.placement, n = h.current, m = c === "top" ? s.top - a >= n : window.innerHeight - s.bottom - a >= n;
20
- let u = c && (I.current || m) ? c === "top" : q(s, n);
21
- c && u !== (c === "top") && (M.current?.(), u = c === "top"), E(u), t.style.width = `${s.width}px`, t.style.left = `${s.left + window.scrollX}px`, t.style.top = u ? "auto" : `${s.bottom + window.scrollY + a}px`, t.style.bottom = u ? `${window.innerHeight - s.top - window.scrollY + a}px` : "auto", U(t, s, u, a);
22
- }, [o, a, E]), P = O((t) => {
23
- t && w(t.parentElement);
24
- }, [w]), S = O((t) => {
25
- t?.removeAttribute("data-placement"), w(t);
26
- }, [w]);
27
- return T(() => {
28
- const t = o.current;
29
- if (d || !t || !k()) return;
30
- h.current ||= parseFloat(getComputedStyle(t).getPropertyValue("--rac-list-max-height")) || 250;
31
- const i = { fits: !0, lower: !1 }, s = (n, m, u) => {
32
- const f = new IntersectionObserver(([{ boundingClientRect: C, rootBounds: y }]) => {
33
- y && (u(C, y), E(!i.fits && i.lower));
34
- }, { rootMargin: n, threshold: m });
35
- return f.observe(t), f;
36
- }, c = [
37
- s(`0px 0px ${-h.current}px 0px`, [0, 1], (n, m) => {
38
- i.fits = n.bottom <= m.bottom;
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
- s("0px 0px -50% 0px", [0, 0.5, 1], (n, m) => {
41
- i.lower = n.top + n.bottom > 2 * m.bottom;
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 () => c.forEach((n) => n.disconnect());
45
- }, [d, o, E]), j(() => {
46
- const t = o.current;
47
- if (!d || !t) return;
48
- const i = t.ownerDocument, s = r.current;
49
- let c = 0, n = 0, m = "", u = null;
50
- const f = () => {
51
- const e = t.getBoundingClientRect(), l = r.current?.getBoundingClientRect() ?? e, b = q(e, h.current), v = h.current + a;
52
- return [e.left - l.left, b ? e.top - l.bottom : e.bottom - l.top, e.width, window.innerHeight, r.current?.scrollHeight, b, e.top >= v, window.innerHeight - e.bottom >= v].join();
53
- }, C = () => {
54
- if (u?.disconnect(), !k()) return;
55
- const e = t.getBoundingClientRect(), { clientWidth: l, clientHeight: b } = i.documentElement, v = [e.top, l - e.right, b - e.bottom, e.left].map((H) => `${-Math.floor(H)}px`).join(" ");
56
- let D = !1;
57
- u = new IntersectionObserver(([H]) => {
58
- D && H.intersectionRatio < 1 && p(), D = H.intersectionRatio === 1;
59
- }, { root: i, rootMargin: v, threshold: 1 }), u.observe(t);
60
- }, y = () => f() === m ? !1 : (w(r.current), m = f(), !0), z = () => {
61
- if (c = 0, y()) n = 0;
62
- else if (++n > 1) return C();
63
- c = requestAnimationFrame(z);
64
- }, p = () => {
65
- n = 0, c ||= requestAnimationFrame(z);
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
- r.current?.removeAttribute("data-offscreen"), w(r.current), m = f(), C(), window.addEventListener("scroll", p, { capture: !0, passive: !0 }), window.addEventListener("resize", p);
68
- const B = typeof ResizeObserver < "u" && new ResizeObserver(p);
69
- B && [t, r.current].forEach((e) => e && B.observe(e));
70
- const Y = ({ target: e }) => !t.contains(e) && !r.current?.contains(e), A = typeof MutationObserver < "u" && new MutationObserver((e) => {
71
- e.some(Y) && y() && p();
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
- A && A.observe(i.body, { subtree: !0, childList: !0, attributes: !0, characterData: !0 });
74
- const F = k() && new IntersectionObserver(([{ isIntersecting: e, boundingClientRect: l, rootBounds: b }]) => {
75
- const v = !e && !!b && l.bottom > b.top && l.top < b.bottom && l.right > b.left && l.left < b.right;
76
- r.current?.toggleAttribute("data-offscreen", v);
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
- }, [d, w, a, o, r]), [P, S];
93
+ }, [i, f, n, t, o]), [Y, j];
84
94
  };
85
95
  export {
86
- X as default
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 F=require("react/jsx-runtime"),r=require("react"),Q=require("./state.cjs"),G={x:["width","marginLeft","marginRight","paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"],y:["height","marginTop","marginBottom","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth"]},U={x:{minWidth:"0px",maxWidth:"none"},y:{minHeight:"0px",maxHeight:"none"}},$=r.createContext(null);let B=null;const Y=()=>B??=(queueMicrotask(()=>{B=null}),{});function Z({as:c="div",axis:n="y",fade:g=!1,in:f,unmountOnExit:i=!0,easing:s,duration:x,group:t,nodeRef:u,onEntered:l,onExited:S,...C}){const e=r.useContext(Q.SelectConfigContext),y=r.useContext($),R=f===void 0&&!!y,h=R?y.present:!!f,I=x??(e?.duration??300)/(R&&y.swap?2:1),O=s??e?.easing??"ease",D=r.useRef(null),T=u??D,d=r.useRef(null),j=r.useRef(!1),w=r.useRef({restart:()=>{}}),[J]=r.useState(()=>R&&y.appear?!h:h),E=r.useRef(J),[A,H]=r.useState(!h);h&&A&&H(!1);const z=r.useEffectEvent(()=>{if(t?.delete(w.current),h){d.current?.cancel(),d.current=null,l?.();return}S?.(),R&&y.onExited(),i&&(d.current=null,H(!0))});if(r.useLayoutEffect(()=>{const a=T.current;if(!a)return;const L=g?[...G[n],"opacity"]:G[n],M={overflow:"hidden",textOverflow:"clip",...U[n]},v={...Object.fromEntries(L.map(o=>[o,o==="opacity"?0:"0px"])),...M},P=()=>{const{overflow:o}=a.style;a.style.overflow="hidden";const b=getComputedStyle(a),k={...Object.fromEntries(L.map(p=>[p,b[p]])),...M};return a.style.overflow=o,k},W=(o,b)=>{const k=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,p=d.current=a.animate([o,b],{duration:k?0:I,easing:O,fill:E.current?"backwards":"both"});if(p.onfinish=()=>{d.current===p&&j.current&&z()},w.current.frames=[o,b],!t)return;const m=p.timeline?.currentTime;m!=null&&(p.startTime=m,p.currentTime=0),w.current.batch=Y(),t.add(w.current)},N=()=>{const[o,b]=w.current.frames,k=d.current.effect.getComputedTiming().progress??0,p=m=>parseFloat(o[m])+(parseFloat(b[m])-parseFloat(o[m]))*k;return{...Object.fromEntries(L.map(m=>[m,m==="opacity"?p(m):`${p(m)}px`])),...M}};if(w.current.restart=o=>{const b=d.current;if(b?.playState!=="running"||!o&&w.current.batch===B)return;const k=N();b.cancel(),W(k,E.current?P():v)},E.current===h){!h&&d.current?.effect?.target!==a&&a.animate&&(d.current=a.animate([v,v],{fill:"forwards"}));return}E.current=h;const q=d.current;if(q?.playState==="running"){if(!t){q.reverse();return}w.current.restart(!0)}else{if(q?.cancel(),!a.animate){z();return}h?W(v,P()):W(P(),v)}t?.forEach(o=>o!==w.current&&o.restart())},[h,i,n,g,I,O,T,t]),r.useLayoutEffect(()=>{const a=w.current;return j.current=!0,d.current?.playState==="running"&&t?.add(a),()=>{j.current=!1,t?.delete(a)}},[t]),A&&i)return null;const K=c;return F.jsx(K,{ref:T,...C})}const _=({id:c,present:n,appear:g,swap:f,onExited:i,children:s})=>{const x=r.useMemo(()=>({present:n,appear:g,swap:f,onExited:()=>i(c)}),[c,n,g,f,i]);return F.jsx($.Provider,{value:x,children:s})},V=(c,n,g,f=!0)=>{const i=r.Children.toArray(n).filter(r.isValidElement),s=new Set(i.map(e=>e.key)),x=new Map(c.map(e=>[e.key,e])),t=i.map(e=>({key:e.key,el:e,present:!0,appear:x.get(e.key)?.appear??f}));let u=0;const l=new Set;c.forEach(e=>{if(s.has(e.key))e.present&&(u=t.findIndex(y=>y.key===e.key)+1);else if(!e.pending){const y=e.present?{...e,present:!1,swap:!1}:e;e.present&&l.add(y),t.splice(u++,0,y)}});const S=e=>e.present&&(x.get(e.key)?.pending??!x.has(e.key)),C=g&&(l.size>0||c.some(e=>e.pending))&&t.some(e=>!e.present)&&t.some(S);return{children:n,list:C?t.map(e=>l.has(e)?{...e,swap:!0}:S(e)?{...e,pending:!0,swap:!0}:e):t}},X=c=>c.some(n=>!n.present)?c:c.map(n=>n.pending?{...n,pending:!1}:n);function ee({children:c,hold:n=!1,wait:g=!1}){const[f,i]=r.useState(()=>({...V([],c,g,!1),hold:n}));let s=f;s.children!==c&&(s={...s,...V(s.list,c,g)}),s.hold!==n&&(s={...s,hold:n,list:n?s.list:X(s.list.filter(t=>t.present))}),s!==f&&i(s);const x=r.useCallback(t=>i(u=>!u.hold&&u.list.some(l=>l.key===t&&!l.present)?{...u,list:X(u.list.filter(l=>l.key!==t))}:u),[]);return f.list.map(({key:t,el:u,present:l,appear:S,pending:C,swap:e=!1})=>!C&&F.jsx(_,{id:t,present:l,appear:S,swap:e,onExited:x,children:u},t))}exports.Collapse=Z;exports.Presence=ee;
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 A } from "react/jsx-runtime";
3
- import { useState as F, useCallback as Y, useContext as V, createContext as Z, useRef as S, useEffectEvent as _, useLayoutEffect as X, Children as ee, isValidElement as te, useMemo as ne } from "react";
4
- import { SelectConfigContext as re } from "./state.js";
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
- }, se = { x: { minWidth: "0px", maxWidth: "none" }, y: { minHeight: "0px", maxHeight: "none" } }, K = /* @__PURE__ */ Z(null);
9
- let I = null;
10
- const oe = () => I ??= (queueMicrotask(() => {
11
- I = null;
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 ue({
14
+ function pe({
14
15
  as: s = "div",
15
16
  axis: n = "y",
16
- fade: m = !1,
17
+ exitAxis: h = n,
18
+ fade: l = !1,
17
19
  in: f,
18
- unmountOnExit: a = !0,
19
- easing: r,
20
- duration: w,
20
+ unmountOnExit: r = !0,
21
+ easing: y,
22
+ duration: o,
21
23
  group: t,
22
24
  nodeRef: i,
23
- onEntered: l,
24
- onExited: k,
25
- ...v
25
+ onEntered: k,
26
+ onExited: v,
27
+ ...e
26
28
  }) {
27
- const e = V(re), g = V(K), E = f === void 0 && !!g, h = E ? g.present : !!f, H = w ?? (e?.duration ?? 300) / (E && g.swap ? 2 : 1), O = r ?? e?.easing ?? "ease", N = S(null), R = i ?? N, u = S(null), W = S(!1), y = S({ restart: () => {
28
- } }), [Q] = F(() => E && g.appear ? !h : h), T = S(Q), [q, z] = F(!h);
29
- h && q && z(!1);
30
- const G = _(() => {
31
- if (t?.delete(y.current), h) {
32
- u.current?.cancel(), u.current = null, l?.();
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
- k?.(), E && g.onExited(), a && (u.current = null, z(!0));
37
+ v?.(), R && C.onExited(), r && (d.current = null, V(!0));
36
38
  });
37
- return X(() => {
38
- const c = R.current;
39
- if (!c) return;
40
- const L = m ? [...$[n], "opacity"] : $[n], M = { overflow: "hidden", textOverflow: "clip", ...se[n] }, C = { ...Object.fromEntries(L.map((o) => [o, o === "opacity" ? 0 : "0px"])), ...M }, j = () => {
41
- const { overflow: o } = c.style;
42
- c.style.overflow = "hidden";
43
- const b = getComputedStyle(c), x = { ...Object.fromEntries(L.map((d) => [d, b[d]])), ...M };
44
- return c.style.overflow = o, x;
45
- }, B = (o, b) => {
46
- const x = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, d = u.current = c.animate([o, b], { duration: x ? 0 : H, easing: O, fill: T.current ? "backwards" : "both" });
47
- if (d.onfinish = () => {
48
- u.current === d && W.current && G();
49
- }, y.current.frames = [o, b], !t) return;
50
- const p = d.timeline?.currentTime;
51
- p != null && (d.startTime = p, d.currentTime = 0), y.current.batch = oe(), t.add(y.current);
52
- }, U = () => {
53
- const [o, b] = y.current.frames, x = u.current.effect.getComputedTiming().progress ?? 0, d = (p) => parseFloat(o[p]) + (parseFloat(b[p]) - parseFloat(o[p])) * x;
54
- return { ...Object.fromEntries(L.map((p) => [p, p === "opacity" ? d(p) : `${d(p)}px`])), ...M };
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 (y.current.restart = (o) => {
57
- const b = u.current;
58
- if (b?.playState !== "running" || !o && y.current.batch === I) return;
59
- const x = U();
60
- b.cancel(), B(x, T.current ? j() : C);
61
- }, T.current === h) {
62
- !h && u.current?.effect?.target !== c && c.animate && (u.current = c.animate([C, C], { fill: "forwards" }));
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
- T.current = h;
66
- const P = u.current;
67
- if (P?.playState === "running") {
67
+ W.current = u;
68
+ const I = d.current;
69
+ if (I?.playState === "running") {
68
70
  if (!t) {
69
- P.reverse();
71
+ I.reverse();
70
72
  return;
71
73
  }
72
- y.current.restart(!0);
74
+ g.current.restart(!0);
73
75
  } else {
74
- if (P?.cancel(), !c.animate) {
75
- G();
76
+ if (I?.cancel(), !a.animate) {
77
+ X();
76
78
  return;
77
79
  }
78
- h ? B(C, j()) : B(j(), C);
80
+ u ? F(E, P()) : F(P(), E);
79
81
  }
80
- t?.forEach((o) => o !== y.current && o.restart());
81
- }, [h, a, n, m, H, O, R, t]), X(() => {
82
- const c = y.current;
83
- return W.current = !0, u.current?.playState === "running" && t?.add(c), () => {
84
- W.current = !1, t?.delete(c);
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]), q && a ? null : /* @__PURE__ */ A(s, { ref: R, ...v });
88
+ }, [t]), G && r ? null : /* @__PURE__ */ q(s, { ref: L, ...e });
87
89
  }
88
- const ce = ({ id: s, present: n, appear: m, swap: f, onExited: a, children: r }) => {
89
- const w = ne(() => ({ present: n, appear: m, swap: f, onExited: () => a(s) }), [s, n, m, f, a]);
90
- return /* @__PURE__ */ A(K.Provider, { value: w, children: r });
91
- }, D = (s, n, m, f = !0) => {
92
- const a = ee.toArray(n).filter(te), r = new Set(a.map((e) => e.key)), w = new Map(s.map((e) => [e.key, e])), t = a.map((e) => ({ key: e.key, el: e, present: !0, appear: w.get(e.key)?.appear ?? f }));
93
- let i = 0;
94
- const l = /* @__PURE__ */ new Set();
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 && (i = t.findIndex((g) => g.key === e.key) + 1);
99
+ e.present && (t = o.findIndex((x) => x.key === e.key) + 1);
98
100
  else if (!e.pending) {
99
- const g = e.present ? { ...e, present: !1, swap: !1 } : e;
100
- e.present && l.add(g), t.splice(i++, 0, g);
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 && (w.get(e.key)?.pending ?? !w.has(e.key)), v = m && (l.size > 0 || s.some((e) => e.pending)) && t.some((e) => !e.present) && t.some(k);
104
- return { children: n, list: v ? t.map((e) => l.has(e) ? { ...e, swap: !0 } : k(e) ? { ...e, pending: !0, swap: !0 } : e) : t };
105
- }, J = (s) => s.some((n) => !n.present) ? s : s.map((n) => n.pending ? { ...n, pending: !1 } : n);
106
- function de({ children: s, hold: n = !1, wait: m = !1 }) {
107
- const [f, a] = F(() => ({ ...D([], s, m, !1), hold: n }));
108
- let r = f;
109
- r.children !== s && (r = { ...r, ...D(r.list, s, m) }), r.hold !== n && (r = { ...r, hold: n, list: n ? r.list : J(r.list.filter((t) => t.present)) }), r !== f && a(r);
110
- const w = Y((t) => a(
111
- (i) => !i.hold && i.list.some((l) => l.key === t && !l.present) ? { ...i, list: J(i.list.filter((l) => l.key !== t)) } : i
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 f.list.map(
114
- ({ key: t, el: i, present: l, appear: k, pending: v, swap: e = !1 }) => !v && /* @__PURE__ */ A(ce, { id: t, present: l, appear: k, swap: e, onExited: w, children: i }, t)
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
- ue as Collapse,
119
- de as Presence
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);overflow-x:clip;white-space:nowrap;text-overflow:ellipsis}.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{transition:opacity var(--rac-duration) var(--rac-ease),visibility 0s}.rac-options[data-offscreen]{opacity:0;visibility:hidden;transition-delay: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}}: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 i=require("react/jsx-runtime"),b=require("./state.cjs"),o=require("./utils.cjs"),e=require("react"),L=require("./useSelectBehavior.cjs"),z=require("./model.cjs"),R=require("./motion.cjs"),K=[],M=()=>{},_=h=>h==null?"":typeof h=="object"?z.toJSON(h)??"":String(h),G=e.memo(function(){const{selectRef:m,multiple:r,name:d,form:g,required:f}=e.useContext(b.SelectConfigContext),{selected:C,selectedIDs:S,disabled:p,fieldsetDisabled:s}=e.useContext(b.SelectStateContext),{reset:n,markInvalid:v}=e.useContext(b.SelectActionsContext),c=e.useRef(null);e.useEffect(()=>{const t=c.current?.getRootNode();let l;const y=w=>{w.target===c.current?.form&&(clearTimeout(l),l=setTimeout(()=>w.defaultPrevented||n()))};return t?.addEventListener("reset",y,!0),()=>{clearTimeout(l),t?.removeEventListener("reset",y,!0)}},[n]);const x=r?S:C?[C]:K,u=!f&&(!d||r&&!x.length),a=u||!x.length?[""]:x.map(t=>_(t.original)),j=()=>m.current?.focus();return a.map((t,l)=>i.jsx("input",{className:"rac-input",ref:l?void 0:c,name:u?void 0:d,form:g,value:t,hidden:u,required:f&&!l,disabled:p&&!s,tabIndex:-1,"aria-hidden":"true",autoComplete:"off",onChange:M,onInvalid:v,onFocus:j},l))}),O=e.memo(function({hidden:m,settle:r}){const{multiple:d,selectedText:g,valueAsOption:f,renderOption:C,texts:S}=e.useContext(b.SelectConfigContext),{selectedIDs:p,title:s,valueOption:n,hasActualValue:v,loading:c,error:x}=e.useContext(b.SelectStateContext),[u]=e.useState(()=>new Set),a=f&&n?o.optionContent(n,C,!0):null,j=c&&!x&&!v,t=d&&p.length>0&&!g,l=`${t?"picked":a?n.id:s}${j?"-loading":""}`,y=n?.type==="boolean"?String(n.raw):void 0;return i.jsx(R.Presence,{children:!m&&i.jsxs(R.Collapse,{axis:"x",fade:!0,group:u,className:o.withClass("rac-title",a&&n.className),style:a?n.style:void 0,"data-bool":y,onEntered:r,onExited:r,children:[a?i.jsx("div",{className:"rac-option-jsx",children:a}):t?p.map(w=>w.name||S.emptyOption).join(", "):s,j&&o.dots]},l)})}),J=e.memo(function(){const{selectRef:m,multiple:r,valueAsOption:d,duration:g,easing:f,ext:C}=e.useContext(b.SelectConfigContext),S=r?C.Value:void 0,p=e.useRef(null),[s,n]=e.useState(d);d&&!s&&n(!0);const v=e.useRef({duration:g,easing:f});return e.useLayoutEffect(()=>{v.current={duration:g,easing:f}},[g,f]),e.useLayoutEffect(()=>{const c=p.current;if(!s||r||!c||typeof ResizeObserver>"u")return;const x={value:0,root:"",anim:null},u=new ResizeObserver(()=>o.followHeight(m.current,x,c.offsetHeight,v.current.duration,v.current.easing));return u.observe(c),()=>{u.disconnect(),x.anim?.cancel()}},[s,r,m]),S?i.jsx(S,{}):i.jsx("div",{className:"rac-value",ref:p,children:i.jsx(O,{})})}),Q=e.memo(function(){const{selectRef:m,selectId:r,highlightStore:d,className:g,style:f,duration:C,easing:S,deleteInline:p,icons:s,texts:n,placeholder:v,id:c,required:x,popup:u,attrs:a}=e.useContext(b.SelectConfigContext),{visibility:j,active:t,hasActualValue:l,deleting:y,loading:w,loadPending:T,error:N,invalid:q,normalizedOptions:E}=e.useContext(b.SelectStateContext),{handleBlur:A,handleFocus:D,handleKeyDown:F,toggleVisibility:P,clear:V}=e.useContext(b.SelectActionsContext),k=e.useSyncExternalStore(d.subscribe,()=>{const I=j?E[L.effectiveHighlight(d.get())]:null;return I?o.optionDomId(r,I.id):void 0},()=>{}),$=!!s.clear&&l&&t&&!y,B=!!s.arrow&&t&&!y&&u,H=u?{role:"combobox","aria-haspopup":"listbox","aria-controls":`${r}-listbox`,"aria-expanded":j,"aria-activedescendant":k,"aria-required":x||void 0}:{role:"group"};return i.jsxs("div",{...a,id:c,ref:m,style:{"--rac-duration":`${C}ms`,"--rac-ease":S,...f},className:o.withClass("rac-select",g),...t&&{onKeyDown:F,onFocus:D,onClick:P,onBlur:A},...H,"aria-disabled":!t,tabIndex:t?0:-1,"aria-busy":w||T||void 0,"aria-label":a["aria-label"]??(a["aria-labelledby"]?void 0:v),"aria-invalid":q||a["aria-invalid"],"aria-describedby":[a["aria-describedby"],N&&`${r}-error`].filter(Boolean).join(" ")||void 0,"data-inline-delete":o.flag(p),"data-empty":o.flag(!l),"data-deleting":o.flag(y),"data-error":o.flag(N),"data-invalid":o.flag(q),children:[i.jsx(J,{}),i.jsxs(R.Presence,{children:[$&&i.jsx(R.Collapse,{as:"button",type:"button",axis:"x",className:"rac-clear",tabIndex:-1,"aria-label":n.clear,onMouseDown:o.stopEvent,onClick:I=>{o.refocus(I,m),V(I)},children:o.renderIcon(s.clear)},"clear"),B&&i.jsx(R.Collapse,{axis:"x",className:"rac-arrow","aria-hidden":"true",children:o.renderIcon(s.arrow)},"arrow")]}),i.jsx(G,{})]})});exports.Title=O;exports.default=Q;
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;