react-animated-select 0.7.5 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/base.css +1 -0
- package/dist/chip.cjs +1 -0
- package/dist/chip.css +1 -0
- package/dist/chip.js +94 -0
- package/dist/chipGeometry.cjs +1 -0
- package/dist/chipGeometry.js +64 -0
- package/dist/dropdown.cjs +1 -0
- package/dist/dropdown.js +70 -0
- package/dist/dropdownPosition.cjs +1 -0
- package/dist/dropdownPosition.js +87 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +28 -1
- package/dist/index.js +13 -0
- package/dist/liveRegion.cjs +1 -0
- package/dist/liveRegion.js +42 -0
- package/dist/model.cjs +1 -0
- package/dist/model.js +138 -0
- package/dist/motion.cjs +1 -0
- package/dist/motion.js +120 -0
- package/dist/optionList.cjs +1 -0
- package/dist/optionList.js +105 -0
- package/dist/paging.cjs +1 -0
- package/dist/paging.js +47 -0
- package/dist/select.cjs +1 -0
- package/dist/select.js +165 -0
- package/dist/state.cjs +1 -0
- package/dist/state.js +50 -0
- package/dist/style.css +4 -0
- package/dist/theme.css +1 -0
- package/dist/trigger.cjs +1 -0
- package/dist/trigger.js +94 -0
- package/dist/useChipLayout.cjs +1 -0
- package/dist/useChipLayout.js +78 -0
- package/dist/useSelect.cjs +1 -0
- package/dist/useSelect.js +100 -0
- package/dist/useSelectBehavior.cjs +1 -0
- package/dist/useSelectBehavior.js +109 -0
- package/dist/useSelectModel.cjs +1 -0
- package/dist/useSelectModel.js +59 -0
- package/dist/utils.cjs +1 -0
- package/dist/utils.js +99 -0
- package/index.d.ts +28 -1
- package/package.json +4 -4
- package/dist/index.css +0 -1
- package/dist/index.es.js +0 -1096
package/dist/base.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@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}}}
|
package/dist/chip.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("react"),E=require("./state.cjs"),l=require("./utils.cjs"),S=require("./motion.cjs"),W=require("./trigger.cjs"),X=require("./chipGeometry.cjs"),R=require("./useChipLayout.cjs");;/* empty css */const $={position:"absolute",visibility:"hidden",pointerEvents:"none"},D=1,M=2,z=600,F=10,V=30,J=s.memo(function({element:e,deleting:r,locked:i,chipStore:t,delGroup:p}){const{selectRef:a,deleteInline:h,deleteAlways:f,icons:v,texts:C,valueAsOption:j,renderOption:P}=s.useContext(E.SelectConfigContext),u=!!v.remove,{setVisibility:b,setDeleting:m,removeOption:g}=s.useContext(E.SelectActionsContext),c=s.useRef({longPressTimer:null,longPress:!1,x:0,y:0}),I=s.useSyncExternalStore(t.subscribe,()=>{const{hoverId:n,swipedId:x}=t.get();return(n===e.id?D:0)|(x===e.id?M:0)},()=>0),k=!!(I&D),d=!!(I&M),L=s.useCallback(n=>{const{clientX:x,clientY:N}=n.touches[0];Object.assign(c.current,{x,y:N,longPress:!1}),clearTimeout(c.current.longPressTimer),u&&(c.current.longPressTimer=setTimeout(()=>{m(!0),c.current.longPress=!0,a.current?.focus(),b(!1),window.navigator.vibrate?.(50)},z))},[u,m,b,a]),G=s.useCallback(n=>{const{clientX:x,clientY:N}=n.touches[0],O=c.current.x-x;Math.hypot(O,c.current.y-N)>F&&clearTimeout(c.current.longPressTimer),O>V&&!d?t.set({hoverId:null,swipedId:e.id}):O<-V&&d&&t.set({swipedId:null})},[e.id,d,t]),q=s.useCallback(n=>{clearTimeout(c.current.longPressTimer),c.current.longPress&&n.cancelable&&n.preventDefault(),c.current.longPress=!1},[]),Y=s.useCallback(()=>t.set({hoverId:e.id,swipedId:null}),[e.id,t]),_=s.useCallback(()=>{t.get().hoverId===e.id&&t.set({hoverId:null})},[e.id,t]);s.useEffect(()=>()=>clearTimeout(c.current.longPressTimer),[]);const y=j?l.optionContent(e,P,!0):null,B=y?o.jsx("div",{className:"rac-option-jsx",children:y}):o.jsx("span",{className:"rac-chip-text",children:e.name||C.emptyOption}),w=s.useCallback(n=>{t.set({swipedId:null}),l.refocus(n,a),g(e.id),l.stopEvent(n)},[e.id,g,t,a]),H=s.useCallback(n=>{l.stopEvent(n),r&&w(n)},[r,w]),U=u&&(f||!i&&(k||d||r));return o.jsxs("div",{className:l.withClass("rac-chip",y&&e.className),style:y?e.style:void 0,...!i&&{onTouchStart:L,onTouchMove:G,onTouchEnd:q,onTouchCancel:q,onMouseEnter:Y,onMouseLeave:_,onClick:H},children:[B,o.jsx(S.Collapse,{"aria-label":`${C.remove} ${e.name??""}`.trim(),group:h&&!f&&!r?p:void 0,onMouseDown:l.stopEvent,onClick:w,className:"rac-chip-del",disabled:i,tabIndex:-1,type:"button",in:U,as:"button",axis:"x",children:l.renderIcon(v.remove)})]})}),K=s.memo(function({element:e,chipStore:r,settle:i,...t}){const p=s.useSyncExternalStore(r.subscribe,()=>r.get().breaks.includes(e.id),()=>!1);return o.jsxs(s.Fragment,{children:[o.jsx(S.Collapse,{className:"rac-chip-slot",onEntered:i,onExited:i,unmountOnExit:!1,"data-id":e.id,axis:"x",fade:!0,children:o.jsx(J,{element:e,chipStore:r,...t})}),p&&o.jsx("div",{className:"rac-spacer"})]})});class Q extends s.Component{getSnapshotBeforeUpdate(e){const r=e.look!==this.props.look;return(r||e.chips!==this.props.chips)&&this.props.take(r),null}componentDidUpdate(){}render(){return null}}const A=s.memo(function(){const{selectedText:e,icons:r}=s.useContext(E.SelectConfigContext),{selectedIDs:i,deleting:t,active:p}=s.useContext(E.SelectStateContext),a=i.length>0&&!e,h=a?i:X.NONE,{chipStore:f,delGroup:v,valueRef:C,delIconRef:j,probe:P,settle:u,held:b,snapshot:m,look:g,wait:c}=R.default(h),I=R.useChipKeys(h);return o.jsxs("div",{className:"rac-value",ref:C,children:[o.jsx(Q,{chips:h,look:g,take:m}),o.jsx(W.Title,{hidden:a,settle:u}),o.jsx(S.Presence,{hold:b,wait:c,children:I.map(([k,d])=>o.jsx(K,{element:d,deleting:t,locked:!p,chipStore:f,delGroup:v,settle:u},k))}),P&&o.jsx("button",{type:"button",className:"rac-chip-del",tabIndex:-1,"aria-hidden":"true",ref:j,style:$,children:l.renderIcon(r.remove)})]})}),Z={Value:A};exports.ChipsValue=A;exports.chips=Z;
|
package/dist/chip.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@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)}}}
|
package/dist/chip.js
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as R, jsx as r } from "react/jsx-runtime";
|
|
3
|
+
import { memo as M, useContext as T, Component as F, useSyncExternalStore as j, Fragment as J, useRef as K, useCallback as l, useEffect as q } from "react";
|
|
4
|
+
import { SelectConfigContext as Y, SelectStateContext as Q, SelectActionsContext as Z } from "./state.js";
|
|
5
|
+
import { renderIcon as _, optionContent as ee, refocus as se, stopEvent as D, withClass as te } from "./utils.js";
|
|
6
|
+
import { Presence as oe, Collapse as B } from "./motion.js";
|
|
7
|
+
import { Title as ne } from "./trigger.js";
|
|
8
|
+
import { NONE as re } from "./chipGeometry.js";
|
|
9
|
+
import ie, { useChipKeys as ce } from "./useChipLayout.js";
|
|
10
|
+
import './chip.css';/* empty css */
|
|
11
|
+
const le = { position: "absolute", visibility: "hidden", pointerEvents: "none" }, L = 1, S = 2, ae = 600, de = 10, V = 30, ue = /* @__PURE__ */ M(function({ element: e, deleting: o, locked: i, chipStore: s, delGroup: u }) {
|
|
12
|
+
const { selectRef: c, deleteInline: p, deleteAlways: h, icons: m, texts: v, valueAsOption: y, renderOption: P } = T(Y), a = !!m.remove, { setVisibility: b, setDeleting: x, removeOption: g } = T(Z), n = K({ longPressTimer: null, longPress: !1, x: 0, y: 0 }), I = j(s.subscribe, () => {
|
|
13
|
+
const { hoverId: t, swipedId: f } = s.get();
|
|
14
|
+
return (t === e.id ? L : 0) | (f === e.id ? S : 0);
|
|
15
|
+
}, () => 0), w = !!(I & L), d = !!(I & S), G = l((t) => {
|
|
16
|
+
const { clientX: f, clientY: k } = t.touches[0];
|
|
17
|
+
Object.assign(n.current, { x: f, y: k, longPress: !1 }), clearTimeout(n.current.longPressTimer), a && (n.current.longPressTimer = setTimeout(() => {
|
|
18
|
+
x(!0), n.current.longPress = !0, c.current?.focus(), b(!1), window.navigator.vibrate?.(50);
|
|
19
|
+
}, ae));
|
|
20
|
+
}, [a, x, b, c]), H = l((t) => {
|
|
21
|
+
const { clientX: f, clientY: k } = t.touches[0], O = n.current.x - f;
|
|
22
|
+
Math.hypot(O, n.current.y - k) > de && clearTimeout(n.current.longPressTimer), O > V && !d ? s.set({ hoverId: null, swipedId: e.id }) : O < -V && d && s.set({ swipedId: null });
|
|
23
|
+
}, [e.id, d, s]), A = l((t) => {
|
|
24
|
+
clearTimeout(n.current.longPressTimer), n.current.longPress && t.cancelable && t.preventDefault(), n.current.longPress = !1;
|
|
25
|
+
}, []), U = l(() => s.set({ hoverId: e.id, swipedId: null }), [e.id, s]), W = l(() => {
|
|
26
|
+
s.get().hoverId === e.id && s.set({ hoverId: null });
|
|
27
|
+
}, [e.id, s]);
|
|
28
|
+
q(() => () => clearTimeout(n.current.longPressTimer), []);
|
|
29
|
+
const C = y ? ee(e, P, !0) : null, X = C ? /* @__PURE__ */ r("div", { className: "rac-option-jsx", children: C }) : /* @__PURE__ */ r("span", { className: "rac-chip-text", children: e.name || v.emptyOption }), N = l((t) => {
|
|
30
|
+
s.set({ swipedId: null }), se(t, c), g(e.id), D(t);
|
|
31
|
+
}, [e.id, g, s, c]), $ = l((t) => {
|
|
32
|
+
D(t), o && N(t);
|
|
33
|
+
}, [o, N]), z = a && (h || !i && (w || d || o));
|
|
34
|
+
return /* @__PURE__ */ R(
|
|
35
|
+
"div",
|
|
36
|
+
{
|
|
37
|
+
className: te("rac-chip", C && e.className),
|
|
38
|
+
style: C ? e.style : void 0,
|
|
39
|
+
...!i && { onTouchStart: G, onTouchMove: H, onTouchEnd: A, onTouchCancel: A, onMouseEnter: U, onMouseLeave: W, onClick: $ },
|
|
40
|
+
children: [
|
|
41
|
+
X,
|
|
42
|
+
/* @__PURE__ */ r(
|
|
43
|
+
B,
|
|
44
|
+
{
|
|
45
|
+
"aria-label": `${v.remove} ${e.name ?? ""}`.trim(),
|
|
46
|
+
group: p && !h && !o ? u : void 0,
|
|
47
|
+
onMouseDown: D,
|
|
48
|
+
onClick: N,
|
|
49
|
+
className: "rac-chip-del",
|
|
50
|
+
disabled: i,
|
|
51
|
+
tabIndex: -1,
|
|
52
|
+
type: "button",
|
|
53
|
+
in: z,
|
|
54
|
+
as: "button",
|
|
55
|
+
axis: "x",
|
|
56
|
+
children: _(m.remove)
|
|
57
|
+
}
|
|
58
|
+
)
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
}), pe = /* @__PURE__ */ M(function({ element: e, chipStore: o, settle: i, ...s }) {
|
|
63
|
+
const u = j(o.subscribe, () => o.get().breaks.includes(e.id), () => !1);
|
|
64
|
+
return /* @__PURE__ */ R(J, { children: [
|
|
65
|
+
/* @__PURE__ */ r(B, { className: "rac-chip-slot", onEntered: i, onExited: i, unmountOnExit: !1, "data-id": e.id, axis: "x", fade: !0, children: /* @__PURE__ */ r(ue, { element: e, chipStore: o, ...s }) }),
|
|
66
|
+
u && /* @__PURE__ */ r("div", { className: "rac-spacer" })
|
|
67
|
+
] });
|
|
68
|
+
});
|
|
69
|
+
class fe extends F {
|
|
70
|
+
getSnapshotBeforeUpdate(e) {
|
|
71
|
+
const o = e.look !== this.props.look;
|
|
72
|
+
return (o || e.chips !== this.props.chips) && this.props.take(o), null;
|
|
73
|
+
}
|
|
74
|
+
componentDidUpdate() {
|
|
75
|
+
}
|
|
76
|
+
render() {
|
|
77
|
+
return null;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
const he = /* @__PURE__ */ M(function() {
|
|
81
|
+
const { selectedText: e, icons: o } = T(Y), { selectedIDs: i, deleting: s, active: u } = T(Q), c = i.length > 0 && !e, p = c ? i : re, { chipStore: h, delGroup: m, valueRef: v, delIconRef: y, probe: P, settle: a, held: b, snapshot: x, look: g, wait: n } = ie(p), I = ce(p);
|
|
82
|
+
return /* @__PURE__ */ R("div", { className: "rac-value", ref: v, children: [
|
|
83
|
+
/* @__PURE__ */ r(fe, { chips: p, look: g, take: x }),
|
|
84
|
+
/* @__PURE__ */ r(ne, { hidden: c, settle: a }),
|
|
85
|
+
/* @__PURE__ */ r(oe, { hold: b, wait: n, children: I.map(
|
|
86
|
+
([w, d]) => /* @__PURE__ */ r(pe, { element: d, deleting: s, locked: !u, chipStore: h, delGroup: m, settle: a }, w)
|
|
87
|
+
) }),
|
|
88
|
+
P && /* @__PURE__ */ r("button", { type: "button", className: "rac-chip-del", tabIndex: -1, "aria-hidden": "true", ref: y, style: le, children: _(o.remove) })
|
|
89
|
+
] });
|
|
90
|
+
}), ye = { Value: he };
|
|
91
|
+
export {
|
|
92
|
+
he as ChipsValue,
|
|
93
|
+
ye as chips
|
|
94
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y="rac-chip-slot",g="rac-flip",p="rac-resize",E=[],x={overflow:"hidden",textOverflow:"clip",boxSizing:"border-box",minWidth:"0px",maxWidth:"none",minHeight:"0px",maxHeight:"none"},h=e=>Array.from(e.children).filter(n=>n.classList.contains(y)),m=e=>e.firstElementChild?.firstElementChild,O=(e,n)=>!!e?.getAnimations?.().some(t=>t.constructor===Animation&&n(t)),w=(e,n)=>O(e,t=>t.playState==="running"&&n(t)),S=e=>h(e).some(n=>w(m(n),t=>t.id===p)),T=e=>Array.from(e.children).some(n=>w(n,t=>t.id!==g))||S(e),$=(e,n)=>e.length===n.length&&e.every((t,i)=>t===n[i]),I=e=>{const n=[];let t=-1/0;for(const i of e){const s=i.getBoundingClientRect();s.top>=t-1&&(n.push([]),t=s.bottom),n.at(-1).push(i),t=Math.max(t,s.bottom)}return n},z=(e,n,t,i,s)=>{const o=e.cloneNode(!0),{height:a,paddingInlineEnd:l}=getComputedStyle(e),C=s?"":`height: ${a}; min-height: 0;`;o.style.cssText=`visibility: hidden; pointer-events: none; ${C} padding-inline-end: calc(${l} + ${t}px)`,o.querySelectorAll(`:scope > :not(.${y})`).forEach(r=>r.remove()),i&&h(o).forEach(r=>i.has(r.dataset.id)||r.remove()),t&&o.querySelectorAll(".rac-chip-del").forEach(r=>r.remove());const f=h(o);f.forEach(r=>s?.has(r.dataset.id)&&Object.assign(m(r)?.style??{},{minWidth:s.get(r.dataset.id),boxSizing:"border-box"}));const u=new Map(f.map((r,c)=>[r.dataset.id,c]));n?.slice(1).forEach((r,c)=>{const L=Math.min(...r.map(d=>u.get(d)??1/0)),b=Math.max(...n[c].map(d=>u.get(d)??-1).filter(d=>d<L));b>=0&&f[b].after(Object.assign(document.createElement("div"),{className:"rac-spacer"}))}),e.style.position="absolute",e.after(o),o.getAnimations?.({subtree:!0}).forEach(r=>r.effect?.getComputedTiming().endTime<1/0&&r.finish());const M=I(f).map(r=>r.map(c=>c.dataset.id)),R=o.offsetHeight;return o.remove(),e.style.position="",{rows:M,fit:R}},A=(e,n)=>{const t=n?n.slice(0,-1).map(s=>s.at(-1)):E,{breaks:i}=e.get();return $(i,t)?i:t},W=(e,n,t,i)=>A(e,i&&t.length?z(n,null,i,new Set(t.map(s=>s.id))).rows:null),v=(e,n,t)=>{const{rows:i,fit:s}=z(n,t.rows,t.reserve,null,t.floor);Object.assign(t,{rows:i,fit:t.floor?s:null}),e.set({held:!0,breaks:A(e,i)})},N=(e,n)=>new Map(h(e).map(t=>{const{left:i,top:s}=t.getBoundingClientRect(),o=n&&m(t);return[t,{left:i,top:s,label:o?B(o):null}]})),k=(e,n,t,i)=>{if(!e.animate)return;e.getAnimations().forEach(l=>l.id===g&&l.cancel());const s=e.getBoundingClientRect(),o=n.left-s.left,a=n.top-s.top;(Math.abs(o)>.5||Math.abs(a)>.5)&&e.animate([{transform:`translate(${o}px, ${a}px)`},{transform:"none"}],{id:g,duration:t,easing:i})},B=e=>{const n=getComputedStyle(e),t=(...i)=>`${i.reduce((s,o)=>s+parseFloat(n[o]),0)}px`;return n.boxSizing==="border-box"?{width:n.width,height:n.height}:{width:t("width","paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"),height:t("height","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth")}},j=e=>{const n=[];e.forEach(({label:i},s)=>{const o=i&&s.isConnected&&m(s);!o?.animate||O(s,a=>a.id!==g)||(o.getAnimations().forEach(a=>a.id===p&&a.cancel()),n.push({id:s.dataset.id,el:o,from:i}))});const t=(i,s)=>Math.abs(parseFloat(i)-parseFloat(s))>.5;return n.map(i=>({...i,to:B(i.el)})).filter(({from:i,to:s})=>t(i.width,s.width)||t(i.height,s.height))},F=(e,n,t,i)=>e.forEach(({el:s,from:o,to:a})=>{s.animate([{...x,...o},{...x,...a}],{id:p,duration:n,easing:t}).onfinish=i});exports.NONE=E;exports.flip=k;exports.freeze=v;exports.isBusy=T;exports.isResizing=S;exports.resize=F;exports.resizesOf=j;exports.restBreaks=W;exports.slotsOf=h;exports.snapOf=N;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const y = "rac-chip-slot", f = "rac-flip", p = "rac-resize", R = [], x = { overflow: "hidden", textOverflow: "clip", boxSizing: "border-box", minWidth: "0px", maxWidth: "none", minHeight: "0px", maxHeight: "none" }, m = (e) => Array.from(e.children).filter((n) => n.classList.contains(y)), g = (e) => e.firstElementChild?.firstElementChild, w = (e, n) => !!e?.getAnimations?.().some((t) => t.constructor === Animation && n(t)), E = (e, n) => w(e, (t) => t.playState === "running" && n(t)), $ = (e) => m(e).some((n) => E(g(n), (t) => t.id === p)), T = (e) => Array.from(e.children).some((n) => E(n, (t) => t.id !== f)) || $(e), B = (e, n) => e.length === n.length && e.every((t, i) => t === n[i]), I = (e) => {
|
|
3
|
+
const n = [];
|
|
4
|
+
let t = -1 / 0;
|
|
5
|
+
for (const i of e) {
|
|
6
|
+
const o = i.getBoundingClientRect();
|
|
7
|
+
o.top >= t - 1 && (n.push([]), t = o.bottom), n.at(-1).push(i), t = Math.max(t, o.bottom);
|
|
8
|
+
}
|
|
9
|
+
return n;
|
|
10
|
+
}, O = (e, n, t, i, o) => {
|
|
11
|
+
const s = e.cloneNode(!0), { height: a, paddingInlineEnd: h } = getComputedStyle(e), C = o ? "" : `height: ${a}; min-height: 0;`;
|
|
12
|
+
s.style.cssText = `visibility: hidden; pointer-events: none; ${C} padding-inline-end: calc(${h} + ${t}px)`, s.querySelectorAll(`:scope > :not(.${y})`).forEach((r) => r.remove()), i && m(s).forEach((r) => i.has(r.dataset.id) || r.remove()), t && s.querySelectorAll(".rac-chip-del").forEach((r) => r.remove());
|
|
13
|
+
const l = m(s);
|
|
14
|
+
l.forEach((r) => o?.has(r.dataset.id) && Object.assign(g(r)?.style ?? {}, { minWidth: o.get(r.dataset.id), boxSizing: "border-box" }));
|
|
15
|
+
const b = new Map(l.map((r, c) => [r.dataset.id, c]));
|
|
16
|
+
n?.slice(1).forEach((r, c) => {
|
|
17
|
+
const M = Math.min(...r.map((d) => b.get(d) ?? 1 / 0)), u = Math.max(...n[c].map((d) => b.get(d) ?? -1).filter((d) => d < M));
|
|
18
|
+
u >= 0 && l[u].after(Object.assign(document.createElement("div"), { className: "rac-spacer" }));
|
|
19
|
+
}), e.style.position = "absolute", e.after(s), s.getAnimations?.({ subtree: !0 }).forEach((r) => r.effect?.getComputedTiming().endTime < 1 / 0 && r.finish());
|
|
20
|
+
const z = I(l).map((r) => r.map((c) => c.dataset.id)), L = s.offsetHeight;
|
|
21
|
+
return s.remove(), e.style.position = "", { rows: z, fit: L };
|
|
22
|
+
}, S = (e, n) => {
|
|
23
|
+
const t = n ? n.slice(0, -1).map((o) => o.at(-1)) : R, { breaks: i } = e.get();
|
|
24
|
+
return B(i, t) ? i : t;
|
|
25
|
+
}, W = (e, n, t, i) => S(e, i && t.length ? O(n, null, i, new Set(t.map((o) => o.id))).rows : null), v = (e, n, t) => {
|
|
26
|
+
const { rows: i, fit: o } = O(n, t.rows, t.reserve, null, t.floor);
|
|
27
|
+
Object.assign(t, { rows: i, fit: t.floor ? o : null }), e.set({ held: !0, breaks: S(e, i) });
|
|
28
|
+
}, k = (e, n) => new Map(m(e).map((t) => {
|
|
29
|
+
const { left: i, top: o } = t.getBoundingClientRect(), s = n && g(t);
|
|
30
|
+
return [t, { left: i, top: o, label: s ? A(s) : null }];
|
|
31
|
+
})), F = (e, n, t, i) => {
|
|
32
|
+
if (!e.animate) return;
|
|
33
|
+
e.getAnimations().forEach((h) => h.id === f && h.cancel());
|
|
34
|
+
const o = e.getBoundingClientRect(), s = n.left - o.left, a = n.top - o.top;
|
|
35
|
+
(Math.abs(s) > 0.5 || Math.abs(a) > 0.5) && e.animate([{ transform: `translate(${s}px, ${a}px)` }, { transform: "none" }], { id: f, duration: t, easing: i });
|
|
36
|
+
}, A = (e) => {
|
|
37
|
+
const n = getComputedStyle(e), t = (...i) => `${i.reduce((o, s) => o + parseFloat(n[s]), 0)}px`;
|
|
38
|
+
return n.boxSizing === "border-box" ? { width: n.width, height: n.height } : {
|
|
39
|
+
width: t("width", "paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"),
|
|
40
|
+
height: t("height", "paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth")
|
|
41
|
+
};
|
|
42
|
+
}, N = (e) => {
|
|
43
|
+
const n = [];
|
|
44
|
+
e.forEach(({ label: i }, o) => {
|
|
45
|
+
const s = i && o.isConnected && g(o);
|
|
46
|
+
!s?.animate || w(o, (a) => a.id !== f) || (s.getAnimations().forEach((a) => a.id === p && a.cancel()), n.push({ id: o.dataset.id, el: s, from: i }));
|
|
47
|
+
});
|
|
48
|
+
const t = (i, o) => Math.abs(parseFloat(i) - parseFloat(o)) > 0.5;
|
|
49
|
+
return n.map((i) => ({ ...i, to: A(i.el) })).filter(({ from: i, to: o }) => t(i.width, o.width) || t(i.height, o.height));
|
|
50
|
+
}, j = (e, n, t, i) => e.forEach(({ el: o, from: s, to: a }) => {
|
|
51
|
+
o.animate([{ ...x, ...s }, { ...x, ...a }], { id: p, duration: n, easing: t }).onfinish = i;
|
|
52
|
+
});
|
|
53
|
+
export {
|
|
54
|
+
R as NONE,
|
|
55
|
+
F as flip,
|
|
56
|
+
v as freeze,
|
|
57
|
+
T as isBusy,
|
|
58
|
+
$ as isResizing,
|
|
59
|
+
j as resize,
|
|
60
|
+
N as resizesOf,
|
|
61
|
+
W as restBreaks,
|
|
62
|
+
m as slotsOf,
|
|
63
|
+
k as snapOf
|
|
64
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),t=require("react"),a=require("./state.cjs"),d=require("./utils.cjs"),I=require("react-dom"),L=require("./motion.cjs"),T=require("./optionList.cjs"),_=require("./dropdownPosition.cjs"),$=(e={})=>Object.fromEntries(Object.entries(e).filter(([r])=>r.startsWith("--"))),A=e=>(typeof e=="function"?e():e)||document.body,V=()=>()=>{};function g({more:e,ref:r}){const{texts:i}=t.useContext(a.SelectConfigContext),{loading:u,error:o}=t.useContext(a.SelectStateContext);return!o&&!u&&!e?null:n.jsxs("div",{ref:r,className:"rac-option","data-error":d.flag(o),"data-loading":d.flag(!o),children:[n.jsx("span",{className:"rac-option-text",children:o?i.error:u?i.loading:i.loadingMore}),!o&&d.dots]})}const W=t.memo(function(){const{selectRef:r,selectId:i,multiple:u,offset:o,duration:x,easing:j,animateOpacity:y,keepMounted:w,optionsClassName:R,style:q,container:v,texts:h,popup:E,ext:m}=t.useContext(a.SelectConfigContext),{visibility:O,normalizedOptions:D}=t.useContext(a.SelectStateContext),{setListReady:F}=t.useContext(a.SelectActionsContext),s=O&&D.length>0,C=t.useSyncExternalStore(V,()=>!0,()=>!1),[S,b]=t.useState(!1);s&&C&&!S&&b(!0);const[l,c]=t.useState(null),M=t.useCallback(()=>c(p=>p||"out"),[]),f=t.useRef(null),[N,P]=_.default({selectRef:r,panelRef:f,open:S,frozen:!s||l==="out",offset:o,onFlip:M}),k=()=>{if(l==="out"&&s){P(f.current),c("in");return}c(null),b(!1)},z=()=>{c(null),F(!0)};return!C||!E?null:I.createPortal(n.jsx(L.Collapse,{axis:"y",fade:y,in:s&&l!=="out",duration:l?x/2:void 0,nodeRef:f,unmountOnExit:!w&&!(l&&s),onEntered:z,onExited:k,onMouseDown:p=>p.preventDefault(),className:d.withClass("rac-options",R),style:{...$(q),"--rac-duration":`${x}ms`,"--rac-ease":j,pointerEvents:s?"auto":"none",position:"absolute"},children:n.jsxs("div",{className:"rac-list","aria-multiselectable":u,id:`${i}-listbox`,"aria-label":h.list,role:"listbox",tabIndex:"-1",ref:N,children:[n.jsx(T.default,{}),m.Footer?n.jsx(m.Footer,{}):n.jsx(g,{})]})}),A(v))});exports.StatusRow=g;exports.default=W;
|
package/dist/dropdown.js
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as i, jsxs as C } from "react/jsx-runtime";
|
|
3
|
+
import { memo as A, useContext as l, useSyncExternalStore as T, useState as g, useCallback as V, useRef as W } from "react";
|
|
4
|
+
import { SelectConfigContext as S, SelectStateContext as w, SelectActionsContext as q } from "./state.js";
|
|
5
|
+
import { withClass as B, dots as G, flag as y } from "./utils.js";
|
|
6
|
+
import { createPortal as H } from "react-dom";
|
|
7
|
+
import { Collapse as J } from "./motion.js";
|
|
8
|
+
import K from "./optionList.js";
|
|
9
|
+
import Q from "./dropdownPosition.js";
|
|
10
|
+
const U = (t = {}) => Object.fromEntries(Object.entries(t).filter(([n]) => n.startsWith("--"))), X = (t) => (typeof t == "function" ? t() : t) || document.body, Y = () => () => {
|
|
11
|
+
};
|
|
12
|
+
function Z({ more: t, ref: n }) {
|
|
13
|
+
const { texts: s } = l(S), { loading: a, error: o } = l(w);
|
|
14
|
+
return !o && !a && !t ? null : /* @__PURE__ */ C("div", { ref: n, className: "rac-option", "data-error": y(o), "data-loading": y(!o), children: [
|
|
15
|
+
/* @__PURE__ */ i("span", { className: "rac-option-text", children: o ? s.error : a ? s.loading : s.loadingMore }),
|
|
16
|
+
!o && G
|
|
17
|
+
] });
|
|
18
|
+
}
|
|
19
|
+
const lt = /* @__PURE__ */ A(function() {
|
|
20
|
+
const { selectRef: n, selectId: s, multiple: a, offset: o, duration: f, easing: h, animateOpacity: R, keepMounted: v, optionsClassName: E, style: O, container: D, texts: F, popup: N, ext: d } = l(S), { visibility: j, normalizedOptions: M } = l(w), { setListReady: k } = l(q), e = j && M.length > 0, m = T(Y, () => !0, () => !1), [x, b] = g(!1);
|
|
21
|
+
e && m && !x && b(!0);
|
|
22
|
+
const [r, c] = g(null), z = V(() => c((p) => p || "out"), []), u = W(null), [I, L] = Q({ selectRef: n, panelRef: u, open: x, frozen: !e || r === "out", offset: o, onFlip: z }), P = () => {
|
|
23
|
+
if (r === "out" && e) {
|
|
24
|
+
L(u.current), c("in");
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
c(null), b(!1);
|
|
28
|
+
}, $ = () => {
|
|
29
|
+
c(null), k(!0);
|
|
30
|
+
};
|
|
31
|
+
return !m || !N ? null : H(
|
|
32
|
+
/* @__PURE__ */ i(
|
|
33
|
+
J,
|
|
34
|
+
{
|
|
35
|
+
axis: "y",
|
|
36
|
+
fade: R,
|
|
37
|
+
in: e && r !== "out",
|
|
38
|
+
duration: r ? f / 2 : void 0,
|
|
39
|
+
nodeRef: u,
|
|
40
|
+
unmountOnExit: !v && !(r && e),
|
|
41
|
+
onEntered: $,
|
|
42
|
+
onExited: P,
|
|
43
|
+
onMouseDown: (p) => p.preventDefault(),
|
|
44
|
+
className: B("rac-options", E),
|
|
45
|
+
style: { ...U(O), "--rac-duration": `${f}ms`, "--rac-ease": h, pointerEvents: e ? "auto" : "none", position: "absolute" },
|
|
46
|
+
children: /* @__PURE__ */ C(
|
|
47
|
+
"div",
|
|
48
|
+
{
|
|
49
|
+
className: "rac-list",
|
|
50
|
+
"aria-multiselectable": a,
|
|
51
|
+
id: `${s}-listbox`,
|
|
52
|
+
"aria-label": F.list,
|
|
53
|
+
role: "listbox",
|
|
54
|
+
tabIndex: "-1",
|
|
55
|
+
ref: I,
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ i(K, {}),
|
|
58
|
+
d.Footer ? /* @__PURE__ */ i(d.Footer, {}) : /* @__PURE__ */ i(Z, {})
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
X(D)
|
|
65
|
+
);
|
|
66
|
+
});
|
|
67
|
+
export {
|
|
68
|
+
Z as StatusRow,
|
|
69
|
+
lt as default
|
|
70
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),A=(o,r,a)=>{Math.abs(a)>.5&&(o.style[r]=`${parseFloat(o.style[r])+a}px`)},P=(o,r,a,x)=>{const d=o.getBoundingClientRect(),f=getComputedStyle(o);A(o,"left",r.left-d.left+parseFloat(f.marginLeft)),a?A(o,"bottom",d.bottom+parseFloat(f.marginBottom)-r.top+x):A(o,"top",r.bottom+x-d.top+parseFloat(f.marginTop))},T=(o,r)=>{o&&o.dataset.placement!==(r?"top":"bottom")&&(o.dataset.placement=r?"top":"bottom")},F=()=>typeof IntersectionObserver<"u",j=(o,r,a=window.innerHeight-o.bottom)=>a<r&&o.top>a,Y=({selectRef:o,panelRef:r,open:a,frozen:x,offset:d,onFlip:f})=>{const h=g.useRef(0),M=g.useRef(x),$=g.useRef(f);g.useLayoutEffect(()=>{M.current=x,$.current=f});const E=g.useCallback(t=>[o.current,r.current].forEach(i=>T(i,t)),[o,r]),w=g.useCallback(t=>{const i=o.current;if(!i||!t)return;t.scrollHeight&&(h.current=t.scrollHeight);const s=i.getBoundingClientRect(),c=t.dataset.placement,n=h.current,l=c==="top"?s.top-d>=n:window.innerHeight-s.bottom-d>=n;let u=c&&(M.current||l)?c==="top":j(s,n);c&&u!==(c==="top")&&($.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+d}px`,t.style.bottom=u?`${window.innerHeight-s.top-window.scrollY+d}px`:"auto",P(t,s,u,d)},[o,d,E]),q=g.useCallback(t=>{t&&w(t.parentElement)},[w]),z=g.useCallback(t=>{t?.removeAttribute("data-placement"),w(t)},[w]);return g.useEffect(()=>{const t=o.current;if(a||!t||!F())return;h.current||=parseFloat(getComputedStyle(t).getPropertyValue("--rac-list-max-height"))||250;const i={fits:!0,lower:!1},s=(n,l,u)=>{const v=new IntersectionObserver(([{boundingClientRect:H,rootBounds:C}])=>{C&&(u(H,C),E(!i.fits&&i.lower))},{rootMargin:n,threshold:l});return v.observe(t),v},c=[s(`0px 0px ${-h.current}px 0px`,[0,1],(n,l)=>{i.fits=n.bottom<=l.bottom}),s("0px 0px -50% 0px",[0,.5,1],(n,l)=>{i.lower=n.top+n.bottom>2*l.bottom})];return()=>c.forEach(n=>n.disconnect())},[a,o,E]),g.useLayoutEffect(()=>{const t=o.current;if(!a||!t)return;const i=t.ownerDocument,s=r.current;let c=0,n=0,l="",u=null;const v=()=>{const e=t.getBoundingClientRect(),m=r.current?.getBoundingClientRect()??e,b=j(e,h.current),y=h.current+d;return[e.left-m.left,b?e.top-m.bottom:e.bottom-m.top,e.width,window.innerHeight,r.current?.scrollHeight,b,e.top>=y,window.innerHeight-e.bottom>=y].join()},H=()=>{if(u?.disconnect(),!F())return;const e=t.getBoundingClientRect(),{clientWidth:m,clientHeight:b}=i.documentElement,y=[e.top,m-e.right,b-e.bottom,e.left].map(O=>`${-Math.floor(O)}px`).join(" ");let S=!1;u=new IntersectionObserver(([O])=>{S&&O.intersectionRatio<1&&p(),S=O.intersectionRatio===1},{root:i,rootMargin:y,threshold:1}),u.observe(t)},C=()=>v()===l?!1:(w(r.current),l=v(),!0),I=()=>{if(c=0,C())n=0;else if(++n>1)return H();c=requestAnimationFrame(I)},p=()=>{n=0,c||=requestAnimationFrame(I)};r.current?.removeAttribute("data-offscreen"),w(r.current),l=v(),H(),window.addEventListener("scroll",p,{capture:!0,passive:!0}),window.addEventListener("resize",p);const k=typeof ResizeObserver<"u"&&new ResizeObserver(p);k&&[t,r.current].forEach(e=>e&&k.observe(e));const D=({target:e})=>!t.contains(e)&&!r.current?.contains(e),B=typeof MutationObserver<"u"&&new MutationObserver(e=>{e.some(D)&&C()&&p()});B&&B.observe(i.body,{subtree:!0,childList:!0,attributes:!0,characterData:!0});const L=F()&&new IntersectionObserver(([{isIntersecting:e,boundingClientRect:m,rootBounds:b}])=>{const y=!e&&!!b&&m.bottom>b.top&&m.top<b.bottom&&m.right>b.left&&m.left<b.right;r.current?.toggleAttribute("data-offscreen",y)});return L&&L.observe(t),()=>{cancelAnimationFrame(c),window.removeEventListener("scroll",p,{capture:!0}),window.removeEventListener("resize",p);for(const e of[k,B,L,u])e&&e.disconnect();s?.removeAttribute("data-placement")}},[a,w,d,o,r]),[q,z]};exports.default=Y;
|
|
@@ -0,0 +1,87 @@
|
|
|
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;
|
|
14
|
+
});
|
|
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;
|
|
39
|
+
}),
|
|
40
|
+
s("0px 0px -50% 0px", [0, 0.5, 1], (n, m) => {
|
|
41
|
+
i.lower = n.top + n.bottom > 2 * m.bottom;
|
|
42
|
+
})
|
|
43
|
+
];
|
|
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);
|
|
66
|
+
};
|
|
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();
|
|
72
|
+
});
|
|
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");
|
|
82
|
+
};
|
|
83
|
+
}, [d, w, a, o, r]), [P, S];
|
|
84
|
+
};
|
|
85
|
+
export {
|
|
86
|
+
X as default
|
|
87
|
+
};
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),o=require("react"),Ue=require("react-dom"),W=o.createContext(null),ee=o.createContext(null),te=o.createContext(null),it=(e,t)=>{const n=typeof t=="function"?t(e):t;return n===e?e:Object.keys(n).some(r=>!Object.is(n[r],e[r]))?{...e,...n}:e},ye=e=>{let t=e;const n=new Set;return{get:()=>t,set:s=>{Object.keys(s).every(r=>Object.is(s[r],t[r]))||(t={...t,...s},n.forEach(r=>r()))},subscribe:s=>(n.add(s),()=>n.delete(s))}},je=e=>{const t=o.useRef(e);o.useInsertionEffect(()=>{t.current=e});const[n]=o.useState(()=>Object.fromEntries(Object.keys(e).map(s=>[s,(...r)=>t.current[s](...r)])));return n},Ye=(e,t)=>{const[n,s]=o.useState(e);return n===e||t(n,e)?n:(s(e),e)},at=(e,t)=>e===t||!!e&&!!t&&Object.keys(e).length===Object.keys(t).length&&Object.keys(e).every(n=>Object.is(e[n],t[n])),be=(e,t,n=0)=>{if(Object.is(e,t))return!0;if(n>12||typeof e!="object"||typeof t!="object"||e===null||t===null||Array.isArray(e)!==Array.isArray(t))return!1;if(e.$$typeof||t.$$typeof)return e.$$typeof===t.$$typeof&&e.type===t.type&&e.key===t.key&&be(e.props,t.props,n+1);const s=Object.keys(e);return s.length===Object.keys(t).length&&s.every(r=>Object.hasOwn(t,r)&&be(e[r],t[r],n+1))},ct=new Set(["style","texts","icons","attrs"]),lt=(e,t)=>{const n=Object.keys(t);return n.length===Object.keys(e).length&&n.every(s=>ct.has(s)?at(e[s],t[s]):Object.is(e[s],t[s]))},ut=e=>Ye(e,lt),xe=e=>Ye(e,be),ie={XMark:({className:e="",...t})=>b.jsx("svg",{className:e,viewBox:"0 0 320 512",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...t,children:b.jsx("path",{d:"M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z"})}),ArrowUp:({className:e="",...t})=>b.jsx("svg",{className:e,viewBox:"0 0 448 512",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...t,children:b.jsx("path",{d:"M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z"})}),Checkmark:({className:e="",...t})=>b.jsx("svg",{className:e,viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...t,children:b.jsx("path",{d:"M20.285 6.708a1 1 0 0 0-1.414-1.416l-9.192 9.192-4.243-4.244a1 1 0 1 0-1.414 1.416l5 5a1 1 0 0 0 1.414 0l9.849-9.948z"})})},Z=(e,t)=>{if(!e)return null;const n=(s={})=>({...t,...s,style:{...t?.style,...s?.style}});if(typeof e=="string")return b.jsx("img",{src:e,...n(),className:ne("rac-icon",t?.className),alt:""});if(o.isValidElement(e))return o.cloneElement(e,n(e.props));if(typeof e=="function"||typeof e=="object"&&e.$$typeof){const s=e;return b.jsx(s,{...n()})}return null},de=(e,t)=>`${e}-${String(t).replace(/[^A-Za-z0-9-]/gu,n=>`_${n.codePointAt(0).toString(36)}_`)}`,K=e=>e?"":void 0,ne=(e,t)=>t?`${e} ${t}`:e,ke=(e,t,n)=>e.jsx||(t&&"original"in e?t(e.original,{selected:n,disabled:!!e.disabled}):null),Me=b.jsxs("span",{className:"rac-dots","aria-hidden":"true",children:[b.jsx("i",{}),b.jsx("i",{}),b.jsx("i",{})]}),dt=(()=>{try{return process.env.NODE_ENV!=="production"}catch{return!1}})(),Re=new Set,Q=(e,t)=>{!dt||Re.has(e)||(Re.add(e),console.warn(`[react-animated-select] ${t}`))},U=e=>{e?.stopPropagation(),e?.preventDefault()},ft={index:-1,fallback:-1,ready:!1},ce=({index:e,fallback:t})=>e===-1?t:e,gt=10,pt=500,ht=new Set(["ArrowDown","ArrowUp","PageDown","PageUp","Home","End"]),mt=(e,t)=>o.useMemo(()=>{const n=new Set(e.map(r=>r.group).filter(Boolean)),s=r=>!!r&&!r.disabled&&!r.loading&&(r.groupHeader?n.has(r.name):!r.group||t.has(r.group));return{reach:s,list:e.flatMap((r,u)=>s(r)?[u]:[])}},[e,t]),yt=(e,t,n,s)=>{const r=e.length-1;if(r<0)return-1;if(n==="Home")return e[0];if(n==="End")return e[r];const u=n==="ArrowUp"||n==="PageUp"?-1:1,a=e.indexOf(t);if(a===-1)return e[u>0?0:r];const c=a+u*(n.startsWith("Page")?gt:1);return c>=0&&c<=r?e[c]:n.startsWith("Page")||s?e[c<0?0:r]:e[(c+e.length)%e.length]},bt=(e,t,n,s)=>{const r=[...s].every(i=>i===s[0]),u=r?s[0]:s,a=t.filter(i=>"original"in e[i]),c=Math.max(a.indexOf(n)+(r?1:0),0);for(let i=0;i<a.length;i++){const h=a[(c+i)%a.length];if(String(e[h].name).toLowerCase().startsWith(u))return h}return-1};function xt({props:e,state:t,setState:n,normalizedOptions:s,expandedGroups:r,selected:u,selectedIDs:a,visibility:c,setVisibility:i,modelActions:h,loadMoreOnce:l,highlightStore:p}){const{disabled:x,multiple:m,hasMore:O,loadButton:S,loadOffset:g,loadAhead:y,icons:L,onFocus:$,onBlur:k}=e,{selectOption:D,clear:T,removeOption:f}=h,{deleting:E}=t,{reach:C,list:R}=mt(s,r),j=o.useRef({lastWindowFocusTime:0,justFocused:!1,focusTimeout:null,query:"",queryTimeout:null}),B=o.useMemo(()=>{const d=new Set(m?a.map(M=>M.id):u?[u.id]:[]),w=d.size?s.findIndex(M=>d.has(M.id)&&C(M)):-1;return w!==-1?w:R.find(M=>!s[M].groupHeader)??R[0]??-1},[s,u,a,m,C,R]),I=d=>{!S&&c&&O&&d>=s.length-y&&l()};o.useLayoutEffect(()=>{const{index:d}=p.get();p.set({fallback:B,index:d!==-1&&C(s[d])?d:-1}),I(ce(p.get()))}),o.useEffect(()=>{const d=j.current,w=()=>d.lastWindowFocusTime=Date.now();return window.addEventListener("focus",w),()=>{window.removeEventListener("focus",w),clearTimeout(d.focusTimeout),clearTimeout(d.queryTimeout)}},[]);const A=d=>{p.set({index:d}),I(d)},v=(d,w)=>{const M=j.current;clearTimeout(M.queryTimeout),M.queryTimeout=setTimeout(()=>M.query="",pt),M.query+=d.toLowerCase();const F=bt(s,R,w,M.query);F!==-1&&A(F),c||i(!0)};return je({highlight:A,handleListScroll:d=>{if(S)return;const{scrollTop:w,scrollHeight:M,clientHeight:F}=d.currentTarget;M-w<=F+g&&l()},handleBlur:d=>{const w=d.relatedTarget?.closest(".rac-options");d.currentTarget.contains(d.relatedTarget)||w||(k?.(d),E&&n({deleting:!1}),c&&i(!1))},handleFocus:d=>{d.currentTarget.contains(d.relatedTarget)||$?.(d),!(x||E||document.hidden||Date.now()-j.current.lastWindowFocusTime<100)&&(c||(clearTimeout(j.current.focusTimeout),j.current.focusTimeout=setTimeout(()=>j.current.justFocused=!1,200),j.current.justFocused=!0,i(!0)))},toggleVisibility:d=>{if(E){U(d),n({deleting:!1});return}x||j.current.justFocused||i(!c)},handleKeyDown:d=>{if(x||d.nativeEvent?.isComposing)return;const{key:w}=d,M=ce(p.get());if(w.length===1&&!d.ctrlKey&&!d.metaKey&&!d.altKey&&(w!==" "||j.current.query)){d.preventDefault(),v(w,M);return}if(ht.has(w)){d.preventDefault(),(c||w==="Home"||w==="End")&&A(yt(R,M,w,!S&&O)),c||i(!0);return}switch(w){case"Enter":case" ":d.preventDefault(),c?M!==-1&&s[M]&&(A(M),D(s[M],d)):i(!0);break;case"Escape":if(E)n({deleting:!1});else if(c)i(!1);else break;U(d);break;case"Tab":c&&i(!1);break;case"Backspace":case"Delete":{const F=a.at(-1);if(m&&w==="Backspace"&&L.remove&&F)f(F.id);else if(L.clear&&(u||F))T();else break;d.preventDefault();break}}}})}const vt=["group","disabled","options","items","children"],Te=["name","label","id","value"],re=e=>e!=null&&e!=="",Je=e=>e!==null&&typeof e=="object"&&!Array.isArray(e),fe=e=>Je(e)&&[Object.prototype,null].includes(Object.getPrototypeOf(e)),wt=e=>{try{const t=String(e);return t.startsWith("[object ")?null:t}catch{return null}},Ie=(e,t=!1)=>{if(t&&typeof e.group=="string")return e.group;const n=Te.find(u=>re(e[u]));if(n)return String(e[n]);const s=!fe(e)&&wt(e);if(s)return s;const r=Object.entries(e).find(([u,a])=>!vt.includes(u)&&re(a));return r?String(r[1]):null},St=e=>fe(e)&&("options"in e||"group"in e&&!Te.some(t=>t in e)),$e=(e,t,n,s,r,{emptyOption:u,invalidOption:a,disabledOption:c})=>{const i=`${n}-${t}`;if(e==null||e==="")return{id:i,userId:null,name:u,raw:e,disabled:!0,type:"normal",group:s,groupDisabled:r};if(typeof e=="function")return{id:i,userId:null,name:a,raw:e,disabled:!0,invalid:!0,type:"normal",group:s};if(Je(e)){const h=r||e.disabled===!0,l=e.value!==void 0?e.value:e.id!==void 0?e.id:e,p=Ie(e)||(h?c:u);return{id:i,userId:e.id??e.value??e.name??e.label,name:p,raw:l,original:e,disabled:h||p===u,type:typeof l=="boolean"?"boolean":"normal",group:s||e.group||null,groupDisabled:r}}return{id:i,userId:e,name:String(e),raw:e,original:e,disabled:r,type:typeof e=="boolean"?"boolean":"normal",group:s}},Et=({options:e,jsxOptions:t,childrenFirst:n,hasMore:s,loadButton:r,loadPending:u,loadingTitle:a,emptyOption:c,invalidOption:i,disabledOption:h,emptyGroup:l})=>{const p={emptyOption:c,invalidOption:i,disabledOption:h},x=new Map,m=[],O=new Set,S=f=>{let E=f;for(let C=1;O.has(E);C++)E=`${f}~${C}`;return O.add(E),E},g=t.map((f,E)=>{if(f.isGroupMarker)return{...f,type:"group-marker"};const C=!f.label&&!re(f.userId)&&!re(f.value)&&!f.hasJsx;return{...f,id:S(`jsx-${f.id}`),index:E,userId:f.userId,raw:f.value,original:f.value,name:f.label||(re(f.value)?String(f.value):c),disabled:!!f.disabled||C,type:typeof f.value=="boolean"?"boolean":"normal",group:f.group||null}});let y=0;const L=(f,E=null,C=!1,R="0")=>{Array.isArray(f)||(f=[f]),f.forEach((j,B)=>{const I=`${R}-${B}`;if(St(j)){const A=Ie(j,!0)||l;x.has(A)||x.set(A,{disabled:!!j.disabled,items:[]}),j.options?L(j.options,A,C||!!j.disabled,I):m.push({id:`empty-${A}-${I}`,name:A,group:A,isPlaceholder:!0,type:"group-marker",index:y++})}else fe(j)&&!Te.some(A=>A in j)&&!j.group?Object.values(j).forEach((A,v)=>m.push({...$e(A,`${I}-${v}`,"default",E,C,p),index:y++})):m.push({...$e(j,I,"default",E,C,p),index:y++})})};L(e);const $=n?[...g,...m]:[...m,...g],k=[],D=new Set;$.forEach(f=>{if(!f.group){k.push({type:"item",data:f});return}D.has(f.group)||(D.add(f.group),k.push({type:"group",name:f.group})),x.has(f.group)||x.set(f.group,{items:[]});const E=x.get(f.group);f.isGroupMarker?(E.className=f.className,E.style=f.style,f.disabled&&(E.disabled=!0)):f.isPlaceholder||E.items.push(f)});const T=[];return k.forEach(f=>{if(f.type==="item"){T.push(f.data);return}const E=x.get(f.name);T.push({className:E?.className||"",id:`group-header-${f.name}`,disabled:!!E?.disabled,style:E?.style||{},groupHeader:!0,name:f.name,type:"group"}),E?.items.forEach(C=>T.push(C))}),s&&r&&T.push({id:"special-load-more-id",name:a,loadMore:!0,loading:u,type:"special"}),T},Ot=e=>{const t=()=>null;return t.racKind="define",t.racRender=e,t.displayName=`defineOption(${e.name||"anonymous"})`,t},Le={selected:null,selectedIDs:[]},se=e=>{try{return JSON.stringify(e)}catch{return}},Xe=(e,t)=>e===t||e!==e&&t!==t,le=e=>typeof e=="object"&&e!==null,Ct=(e,t)=>Xe(e,t)||le(e)&&le(t)&&se(e)!==void 0&&se(e)===se(t),jt=(e,t,n,s)=>{if(e==null||Array.isArray(e)&&e.length===0)return Le;const r=s.length?new Map(t.map(l=>[l.id,l])):null,u=r?[...s.map(l=>r.get(l)).filter(Boolean),...t]:t,a=new Set,c=new Map,i=l=>"original"in l&&!a.has(l.id),h=l=>{const p=le(l);let x=u.find(y=>i(y)&&Xe(y.original,l));const m=p?se(l):void 0;if(!x&&m!==void 0&&(x=u.find(y=>i(y)&&le(y.original)&&se(y.original)===m)),x)return a.add(x.id),x;const O=String(p?l.id||l.value||m||"object":l),S=(c.get(O)??-1)+1;c.set(O,S);const g=`virtual-${O}-${S}`;return p?{id:g,name:Ie(l)||String(l.id||"Selected Object"),raw:l.value??l.id??l,original:l,userId:l.id??l.value??null,virtual:!0}:{id:g,name:String(l),raw:l,original:l,userId:l,virtual:!0}};return n?{selected:null,selectedIDs:(Array.isArray(e)?e:[e]).map(h)}:{selected:h(Array.isArray(e)?e[0]:e),selectedIDs:Le.selectedIDs}},De={x:["width","marginLeft","marginRight","paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"],y:["height","marginTop","marginBottom","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth"]},kt={x:{minWidth:"0px",maxWidth:"none"},y:{minHeight:"0px",maxHeight:"none"}},Ze=o.createContext(null);let ve=null;const Mt=()=>ve??=(queueMicrotask(()=>{ve=null}),{});function X({as:e="div",axis:t="y",fade:n=!1,in:s,unmountOnExit:r=!0,easing:u,duration:a,group:c,nodeRef:i,onEntered:h,onExited:l,...p}){const x=o.useContext(W),m=o.useContext(Ze),O=s===void 0&&!!m,S=O?m.present:!!s,g=a??x?.duration??300,y=u??x?.easing??"ease",L=o.useRef(null),$=i??L,k=o.useRef(null),D=o.useRef(!1),T=o.useRef({restart:()=>{}}),[f]=o.useState(()=>O&&m.appear?!S:S),E=o.useRef(f),[C,R]=o.useState(!S);S&&C&&R(!1);const j=o.useEffectEvent(()=>{if(c?.delete(T.current),S){k.current=null,h?.();return}l?.(),O&&m.onExited(),r&&(k.current=null,R(!0))});if(o.useLayoutEffect(()=>{const I=$.current;if(!I)return;const A=n?[...De[t],"opacity"]:De[t],v={overflow:"hidden",textOverflow:"clip",...kt[t]},d={...Object.fromEntries(A.map(P=>[P,P==="opacity"?0:"0px"])),...v},w=()=>{const P=getComputedStyle(I);return{...Object.fromEntries(A.map(H=>[H,P[H]])),...v}},M=(P,H)=>{const Y=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,q=k.current=I.animate([P,H],{duration:Y?0:g,easing:y,fill:E.current?"backwards":"both"});if(q.onfinish=()=>{k.current===q&&D.current&&j()},T.current.frames=[P,H],!c)return;const V=q.timeline?.currentTime;V!=null&&(q.startTime=V,q.currentTime=0),T.current.batch=Mt(),c.add(T.current)},F=()=>{const[P,H]=T.current.frames,Y=k.current.effect.getComputedTiming().progress??0,q=V=>parseFloat(P[V])+(parseFloat(H[V])-parseFloat(P[V]))*Y;return{...Object.fromEntries(A.map(V=>[V,V==="opacity"?q(V):`${q(V)}px`])),...v}};if(T.current.restart=P=>{const H=k.current;if(H?.playState!=="running"||!P&&T.current.batch===ve)return;const Y=F();H.cancel(),M(Y,E.current?w():d)},E.current===S){!S&&!k.current&&I.animate&&(k.current=I.animate([d,d],{fill:"forwards"}));return}E.current=S;const z=k.current;if(z?.playState==="running"){if(!c){z.reverse();return}T.current.restart(!0)}else{if(z?.cancel(),!I.animate){j();return}S?M(d,w()):M(w(),d)}c?.forEach(P=>P!==T.current&&P.restart())},[S,t,n,g,y,$,c]),o.useLayoutEffect(()=>{const I=T.current;return D.current=!0,k.current?.playState==="running"&&c?.add(I),()=>{D.current=!1,c?.delete(I)}},[c]),C&&r)return null;const B=e;return b.jsx(B,{ref:$,...p})}const Tt=({id:e,present:t,appear:n,onExited:s,children:r})=>{const u=o.useMemo(()=>({present:t,appear:n,onExited:()=>s(e)}),[e,t,n,s]);return b.jsx(Ze.Provider,{value:u,children:r})},Pe=(e,t,n=!0)=>{const s=o.Children.toArray(t).filter(o.isValidElement),r=new Set(s.map(i=>i.key)),u=new Map(e.map(i=>[i.key,i])),a=s.map(i=>({key:i.key,el:i,present:!0,appear:u.get(i.key)?.appear??n}));let c=0;return e.forEach(i=>{r.has(i.key)?i.present&&(c=a.findIndex(h=>h.key===i.key)+1):a.splice(c++,0,i.present?{...i,present:!1}:i)}),{children:t,list:a}};function we({children:e,hold:t=!1}){const[n,s]=o.useState(()=>({...Pe([],e,!1),hold:t}));let r=n;r.children!==e&&(r={...r,...Pe(r.list,e)}),r.hold!==t&&(r={...r,hold:t,list:t?r.list:r.list.filter(a=>a.present)}),r!==n&&s(r);const u=o.useCallback(a=>s(c=>!c.hold&&c.list.some(i=>i.key===a&&!i.present)?{...c,list:c.list.filter(i=>i.key!==a)}:c),[]);return n.list.map(({key:a,el:c,present:i,appear:h})=>b.jsx(Tt,{id:a,present:i,appear:h,onExited:u,children:c},a))}const Qe="rac-chip-slot",Se="rac-flip",Ne=[],It=.25,Nt={hoverId:null,swipedId:null,held:!1,breaks:Ne},Ee=()=>window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,ue=e=>Array.from(e.children).filter(t=>t.classList.contains(Qe)),Ve=e=>Array.from(e.children).some(t=>t.getAnimations?.().some(n=>n.constructor===Animation&&n.id!==Se&&n.playState==="running")),At=(e,t)=>e.length===t.length&&e.every((n,s)=>n===t[s]),Rt=e=>{const t=[];let n=-1/0;for(const s of e){const r=s.getBoundingClientRect();r.top>=n-1&&(t.push([]),n=r.bottom),t.at(-1).push(s),n=Math.max(n,r.bottom)}return t},et=(e,t,n,s)=>{const r=e.cloneNode(!0),{height:u,paddingInlineEnd:a}=getComputedStyle(e);r.style.cssText=`visibility: hidden; pointer-events: none; height: ${u}; min-height: 0; padding-inline-end: calc(${a} + ${n}px)`,r.querySelectorAll(`:scope > :not(.${Qe})`).forEach(l=>l.remove()),s&&ue(r).forEach(l=>s.has(l.dataset.id)||l.remove()),n&&r.querySelectorAll(".rac-chip-del").forEach(l=>l.remove());const c=ue(r),i=new Map(c.map((l,p)=>[l.dataset.id,p]));t?.slice(1).forEach((l,p)=>{const x=Math.min(...l.map(O=>i.get(O)??1/0)),m=Math.max(...t[p].map(O=>i.get(O)??-1).filter(O=>O<x));m>=0&&c[m].after(Object.assign(document.createElement("div"),{className:"rac-spacer"}))}),e.style.position="absolute",e.after(r),r.getAnimations?.({subtree:!0}).forEach(l=>l.effect?.getComputedTiming().endTime<1/0&&l.finish());const h=Rt(c).map(l=>l.map(p=>p.dataset.id));return r.remove(),e.style.position="",h},tt=(e,t)=>{const n=t?t.slice(0,-1).map(r=>r.at(-1)):Ne,{breaks:s}=e.get();return At(s,n)?s:n},Be=(e,t,n,s)=>tt(e,s&&n.length?et(t,null,s,new Set(n.map(r=>r.id))):null),Fe=(e,t,n)=>{n.rows=et(t,n.rows,n.reserve),e.set({held:!0,breaks:tt(e,n.rows)})},He=(e,t,n,s)=>{if(!e.animate)return;e.getAnimations().forEach(c=>c.id===Se&&c.cancel());const r=e.getBoundingClientRect(),u=t.left-r.left,a=t.top-r.top;(Math.abs(u)>.5||Math.abs(a)>.5)&&e.animate([{transform:`translate(${u}px, ${a}px)`},{transform:"none"}],{id:Se,duration:n,easing:s})},$t=(e,t,n,s,r)=>{if(!e||n===t.value)return;const u=getComputedStyle(e),a=t.anim?u.height:t.root;t.anim?.cancel(),t.root=u.height;const c=!t.value||a===t.root||!e.animate||Ee();if(t.value=n,t.anim=null,c)return;const i={overflow:"hidden",alignItems:"flex-start"},h=t.anim=e.animate([{...i,height:a},{...i,height:t.root}],{duration:s,easing:r});h.onfinish=()=>{t.anim===h&&(t.anim=null)}};function Lt(e){const{selectRef:t,duration:n,easing:s,multiple:r,deleteInline:u,deleteAlways:a,icons:c}=o.useContext(W),{selectedIDs:i,deleting:h,visibility:l,active:p}=o.useContext(te),{setDeleting:x,setVisibility:m}=o.useContext(ee),[O,S]=o.useState(0),[g]=o.useState(()=>ye(Nt)),[y]=o.useState(()=>new Set),L=o.useSyncExternalStore(g.subscribe,()=>g.get().held,()=>!1),$=o.useSyncExternalStore(g.subscribe,()=>g.get().breaks,()=>Ne),k=o.useRef({rows:null,reserve:0,chips:e}),D=o.useRef(null),T=o.useRef({value:0,root:"",anim:null}),f=o.useRef(null),E=o.useRef(null),C=u&&!a&&!h&&!!c.remove,R=C?O+It:0,j=r&&C&&!O,B=o.useEffectEvent(v=>{const d=f.current,w=k.current;d&&(v&&g.get().held&&Fe(g,d,w),$t(t.current,T.current,d.offsetHeight,n,s),g.get().held||g.set({breaks:Be(g,d,w.chips,w.reserve)}))});o.useLayoutEffect(()=>{const v=k.current,d=f.current,w=v.chips!==e;Object.assign(v,{chips:e,reserve:R}),w&&d&&Ve(d)&&Fe(g,d,v),B(!w)},[e,R,g]),o.useLayoutEffect(()=>{const v=()=>B(!0),d=typeof ResizeObserver>"u"?null:new ResizeObserver(v);return d?.observe(f.current),document.fonts?.addEventListener("loadingdone",v),()=>{d?.disconnect(),document.fonts?.removeEventListener("loadingdone",v)}},[]);const I=o.useCallback(()=>{const v=f.current;if(!v||!g.get().held||Ve(v))return;const d=ue(v),w=d.map(F=>F.getBoundingClientRect()),M=Be(g,v,k.current.chips,k.current.reserve);k.current.rows=null,Ue.flushSync(()=>g.set({held:!1,breaks:M})),Ee()||d.forEach((F,z)=>F.isConnected&&He(F,w[z],n,s))},[g,n,s]),A=o.useCallback(()=>{f.current&&(D.current=new Map(ue(f.current).map(v=>[v,v.getBoundingClientRect()])))},[]);return o.useLayoutEffect(()=>{const v=D.current;!v||$!==g.get().breaks||(D.current=null,Ee()||v.forEach((d,w)=>w.isConnected&&He(w,d,n,s)))},[$,e,g,n,s]),o.useEffect(()=>()=>T.current.anim?.cancel(),[]),o.useEffect(()=>{h&&l&&m(!1),h&&(!i.length||!p)&&x(!1),g.set({hoverId:null,...!p&&{swipedId:null}})},[i.length,h,l,p,x,m,g]),o.useLayoutEffect(()=>{const v=E.current;if(!j||!v)return;const d=getComputedStyle(v);S(v.getBoundingClientRect().width+parseFloat(d.marginLeft)+parseFloat(d.marginRight))},[j]),{chipStore:g,delGroup:y,valueRef:f,delIconRef:E,probe:j,settle:I,held:L,snapshot:A}}const Ge=1,qe=2,Dt=600,Pt=10,We=30,Vt=o.memo(function({element:t,deleting:n,locked:s,chipStore:r,delGroup:u}){const{selectRef:a,deleteInline:c,deleteAlways:i,icons:h,texts:l,valueAsOption:p,renderOption:x}=o.useContext(W),m=!!h.remove,{setVisibility:O,setDeleting:S,removeOption:g}=o.useContext(ee),y=o.useRef({longPressTimer:null,longPress:!1,x:0,y:0}),L=o.useSyncExternalStore(r.subscribe,()=>{const{hoverId:v,swipedId:d}=r.get();return(v===t.id?Ge:0)|(d===t.id?qe:0)},()=>0),$=!!(L&Ge),k=!!(L&qe),D=o.useCallback(v=>{const{clientX:d,clientY:w}=v.touches[0];Object.assign(y.current,{x:d,y:w,longPress:!1}),clearTimeout(y.current.longPressTimer),m&&(y.current.longPressTimer=setTimeout(()=>{S(!0),y.current.longPress=!0,a.current?.focus(),O(!1),window.navigator.vibrate?.(50)},Dt))},[m,S,O,a]),T=o.useCallback(v=>{const{clientX:d,clientY:w}=v.touches[0],M=y.current.x-d;Math.hypot(M,y.current.y-w)>Pt&&clearTimeout(y.current.longPressTimer),M>We&&!k?r.set({hoverId:null,swipedId:t.id}):M<-We&&k&&r.set({swipedId:null})},[t.id,k,r]),f=o.useCallback(()=>clearTimeout(y.current.longPressTimer),[]),E=o.useCallback(()=>r.set({hoverId:t.id,swipedId:null}),[t.id,r]),C=o.useCallback(()=>{r.get().hoverId===t.id&&r.set({hoverId:null})},[t.id,r]);o.useEffect(()=>()=>clearTimeout(y.current.longPressTimer),[]);const R=p?ke(t,x,!0):null,j=R?b.jsx("div",{className:"rac-option-jsx",children:R}):b.jsx("span",{className:"rac-chip-text",children:t.name||l.emptyOption}),B=o.useCallback(v=>{r.set({swipedId:null}),g(t.id),U(v)},[t.id,g,r]),I=o.useCallback(v=>{U(v),y.current.longPress?y.current.longPress=!1:n&&B(v)},[n,B]),A=m&&(i||!s&&($||k||n));return b.jsxs("div",{className:ne("rac-chip",R&&t.className),style:R?t.style:void 0,...!s&&{onTouchStart:D,onTouchMove:T,onTouchEnd:f,onTouchCancel:f,onMouseEnter:E,onMouseLeave:C,onClick:I},children:[j,b.jsx(X,{"aria-label":`${l.remove} ${t.name??""}`.trim(),group:c&&!i&&!n?u:void 0,onMouseDown:U,onClick:B,className:"rac-chip-del",disabled:s,tabIndex:-1,type:"button",in:A,as:"button",axis:"x",children:Z(h.remove)})]})}),Bt=o.memo(function({element:t,chipStore:n,settle:s,...r}){const u=o.useSyncExternalStore(n.subscribe,()=>n.get().breaks.includes(t.id),()=>!1);return b.jsxs(o.Fragment,{children:[b.jsx(X,{className:"rac-chip-slot",onEntered:s,onExited:s,unmountOnExit:!1,"data-id":t.id,axis:"x",fade:!0,children:b.jsx(Vt,{element:t,chipStore:n,...r})}),u&&b.jsx("div",{className:"rac-spacer"})]})}),Ft={position:"absolute",visibility:"hidden",pointerEvents:"none"},Oe=[],Ht=()=>{},Gt=e=>e==null?"":typeof e=="object"?se(e)??"":String(e),qt=o.memo(function(){const{selectRef:t,multiple:n,name:s,required:r}=o.useContext(W),{selected:u,selectedIDs:a,disabled:c}=o.useContext(te);if(!s&&!r)return null;const i=(n?a:u?[u]:Oe).map(p=>Gt(p.original)),h=i.length?i:n&&!r?Oe:[""],l=()=>t.current?.focus();return h.map((p,x)=>b.jsx("input",{className:"rac-input",name:s,value:p,required:r&&!x,disabled:c,tabIndex:-1,"aria-hidden":"true",onChange:Ht,onFocus:l},x))});class Wt extends o.Component{getSnapshotBeforeUpdate(t){return t.chips!==this.props.chips&&this.props.take(),null}componentDidUpdate(){}render(){return null}}const ze=(e,t)=>{const n=new Set(e.map(a=>a.id)),s=new Map(t.map(([a,c])=>[c.id,a])),r=t.filter(([,a])=>!n.has(a.id)),u=new Set(t.map(([a])=>a));return e.map(a=>{if(s.has(a.id))return[s.get(a.id),a];const c=r.findIndex(([,h])=>Ct(h.original,a.original));if(c>=0)return[r.splice(c,1)[0][0],a];let i=a.id;for(;u.has(i);)i+="~";return u.add(i),[i,a]})},zt=e=>{const[t,n]=o.useState(()=>({chips:e,keyed:ze(e,[])}));if(t.chips===e)return t.keyed;const s=ze(e,t.keyed);return n({chips:e,keyed:s}),s},Kt=o.memo(function(){const{selectedText:t,icons:n,valueAsOption:s,renderOption:r}=o.useContext(W),{selectedIDs:u,title:a,valueOption:c,hasActualValue:i,loading:h,error:l,deleting:p,active:x}=o.useContext(te),m=u.length>0&&!t,O=m?u:Oe,{chipStore:S,delGroup:g,valueRef:y,delIconRef:L,probe:$,settle:k,held:D,snapshot:T}=Lt(O),f=zt(O),[E]=o.useState(()=>new Set),C=s&&c?ke(c,r,!0):null,R=h&&!l&&!i,j=`${C?c.id:a}${R?"-loading":""}`,B=c?.type==="boolean"?String(c.raw):void 0;return b.jsxs("div",{className:"rac-value",ref:y,children:[b.jsx(Wt,{chips:O,take:T}),b.jsx(we,{children:!m&&b.jsxs(X,{axis:"x",fade:!0,group:E,className:ne("rac-title",C&&c.className),style:C?c.style:void 0,"data-bool":B,onEntered:k,onExited:k,children:[C?b.jsx("div",{className:"rac-option-jsx",children:C}):a,R&&Me]},j)}),b.jsx(we,{hold:D,children:f.map(([I,A])=>b.jsx(Bt,{element:A,deleting:p,locked:!x,chipStore:S,delGroup:g,settle:k},I))}),$&&b.jsx("button",{type:"button",className:"rac-chip-del",tabIndex:-1,"aria-hidden":"true",ref:L,style:Ft,children:Z(n.remove)})]})}),_t=o.memo(function(){const{selectRef:t,selectId:n,highlightStore:s,positionStore:r,className:u,style:a,duration:c,easing:i,deleteInline:h,icons:l,texts:p,placeholder:x,id:m,required:O,attrs:S}=o.useContext(W),{visibility:g,active:y,hasActualValue:L,deleting:$,loading:k,loadPending:D,error:T,normalizedOptions:f}=o.useContext(te),{handleBlur:E,handleFocus:C,handleKeyDown:R,toggleVisibility:j,clear:B}=o.useContext(ee),I=o.useSyncExternalStore(r.subscribe,()=>r.get().upward,()=>!1),A=o.useSyncExternalStore(s.subscribe,()=>{const w=g?f[ce(s.get())]:null;return w?de(n,w.id):void 0},()=>{}),v=!!l.clear&&L&&y&&!$,d=!!l.arrow&&y&&!$;return b.jsxs("div",{...S,id:m,ref:t,style:{"--rac-duration":`${c}ms`,"--rac-ease":i,...a},className:ne("rac-select",u),...y&&{onKeyDown:R,onFocus:C,onClick:j,onBlur:E},"aria-disabled":!y,"aria-activedescendant":A,"aria-controls":`${n}-listbox`,tabIndex:y?0:-1,"aria-expanded":g,"aria-busy":k||D||void 0,"aria-label":S["aria-label"]??(S["aria-labelledby"]?void 0:x),"aria-required":O||void 0,"aria-haspopup":"listbox",role:"combobox","data-placement":I?"top":"bottom","data-inline-delete":K(h),"data-empty":K(!L),"data-deleting":K($),"data-error":K(T),children:[b.jsx(Kt,{}),b.jsxs(we,{children:[v&&b.jsx(X,{as:"button",type:"button",axis:"x",className:"rac-clear",tabIndex:-1,"aria-label":p.clear,onMouseDown:U,onClick:B,children:Z(l.clear)},"clear"),d&&b.jsx(X,{axis:"x",className:"rac-arrow","aria-hidden":"true",children:Z(l.arrow)},"arrow")]}),b.jsx(qt,{})]})}),pe=0,Ut=1,Ke=2,nt=e=>{const{highlightStore:t}=o.useContext(W),n=o.useRef(null),s=o.useSyncExternalStore(t.subscribe,()=>{const r=t.get();return ce(r)!==e?pe:r.ready?Ke:Ut},()=>pe);return o.useLayoutEffect(()=>{s===Ke&&n.current?.scrollIntoView?.({block:"nearest"})},[s]),[n,s!==pe]},Yt=o.memo(function({option:t,index:n,open:s,hasChildren:r}){const{selectId:u,icons:a}=o.useContext(W),{selectOption:c,highlight:i}=o.useContext(ee),[h,l]=nt(n),p=r&&!t.disabled;return b.jsxs("div",{className:ne("rac-group",t.className),onMouseEnter:()=>p&&i(n),onClick:x=>c(t,x),"data-highlighted":K(l),"data-disabled":K(t.disabled),id:de(u,t.id),"data-open":K(s),style:t.style,ref:h,children:[b.jsx("span",{className:"rac-group-text",children:t.name}),b.jsx(X,{axis:"x",in:r&&!t.disabled,className:"rac-group-arrow","aria-hidden":"true",children:Z(a.arrow)})]})}),Jt=o.memo(function({option:t,index:n,isSelected:s,showCheckbox:r}){const{selectId:u,icons:a,renderOption:c}=o.useContext(W),{selectOption:i,highlight:h}=o.useContext(ee),[l,p]=nt(n),x=!t.disabled&&!t.loading,m=ke(t,c,s);return b.jsxs("div",{className:ne("rac-option",t.className),onMouseEnter:()=>x&&h(n),onClick:O=>!t.loading&&i(t,O),"aria-disabled":t.disabled||t.loading,"data-invalid":K(t.invalid),"data-bool":typeof t.raw=="boolean"?String(t.raw):void 0,"data-highlighted":K(p),"data-loading":K(t.loading),id:de(u,t.id),"aria-selected":s,style:t.style,role:"option",ref:l,children:[m?b.jsx("div",{className:"rac-option-jsx",children:m}):b.jsx("span",{className:"rac-option-text",children:t.name}),t.loading&&Me,r&&b.jsxs("div",{className:"rac-check","data-default":K(!a.checkbox),children:[Z(a.check,{className:"rac-checkmark"}),Z(a.checkbox,{className:"rac-check-icon"})]})]})}),Xt=o.memo(function(){const{selectId:t,multiple:n}=o.useContext(W),{normalizedOptions:s,selected:r,selectedIDs:u,expandedGroups:a}=o.useContext(te),c=r?.id;return o.useMemo(()=>{const i=new Set(u.map(g=>g.id)),h=s.reduce((g,y)=>(y.group&&(g[y.group]=(g[y.group]||0)+1),g),{}),l=[];let p=[],x=null,m=null;const O=()=>{x!==null&&p.length&&l.push(b.jsx(X,{axis:"y",in:a.has(x),className:"rac-group-items",role:"group","aria-labelledby":m,children:p},`slide-${x}`)),p=[]},S=(g,y)=>b.jsx(Jt,{isSelected:i.has(g.id)||c===g.id,showCheckbox:n&&!g.disabled,option:g,index:y},g.id);return s.forEach((g,y)=>{g.groupHeader?(O(),x=g.name,m=de(t,g.id),l.push(b.jsx(Yt,{hasChildren:h[g.name]>0,open:a.has(g.name),option:g,index:y},g.id))):g.group?p.push(S(g,y)):(O(),x=null,l.push(S(g,y)))}),O(),l},[s,c,u,a,n,t])}),Zt=(e={})=>Object.fromEntries(Object.entries(e).filter(([t])=>t.startsWith("--"))),Qt=(e,t,n,s)=>{const r=e.getBoundingClientRect(),u=getComputedStyle(e),a=r.left-parseFloat(u.marginLeft)-t.left,c=n?r.bottom+parseFloat(u.marginBottom)-t.top+s:r.top-parseFloat(u.marginTop)-t.bottom-s;Math.abs(a)>.5&&(e.style.left=`${t.left-a}px`),Math.abs(c)>.5&&(e.style[n?"bottom":"top"]=`${parseFloat(e.style[n?"bottom":"top"])+(n?c:-c)}px`)},en=({selectRef:e,panelRef:t,open:n,offset:s,store:r})=>{const u=o.useRef(0),a=o.useCallback(i=>{const h=e.current;if(!h)return;const l=n&&i?i.scrollHeight:0;l&&(u.current=l),u.current||(u.current=parseFloat(getComputedStyle(h).getPropertyValue("--rac-list-max-height"))||250);const p=h.getBoundingClientRect(),x=window.innerHeight-p.bottom,m=x<u.current&&p.top>x;r.set({upward:m}),!(!n||!i)&&(i.style.width=`${p.width}px`,i.style.left=`${p.left}px`,i.style.top=m?"auto":`${p.bottom+s}px`,i.style.bottom=m?`${window.innerHeight-p.top+s}px`:"auto",Qt(i,p,m,s))},[e,n,s,r]),c=o.useCallback(i=>{i&&a(i.parentElement)},[a]);return o.useLayoutEffect(()=>{const i=()=>a(t.current);i(),window.addEventListener("resize",i);const h=[()=>window.removeEventListener("resize",i)];if(n){if(window.addEventListener("scroll",i,{capture:!0,passive:!0}),h.push(()=>window.removeEventListener("scroll",i,{capture:!0})),typeof ResizeObserver<"u"){const l=new ResizeObserver(i);e.current&&l.observe(e.current),t.current&&l.observe(t.current),h.push(()=>l.disconnect())}}else if(typeof IntersectionObserver<"u"){const l=new IntersectionObserver(i,{threshold:[0,.25,.5,.75,1]});e.current&&l.observe(e.current),h.push(()=>l.disconnect())}return()=>h.forEach(l=>l())},[n,a,e,t]),[o.useSyncExternalStore(r.subscribe,()=>r.get().upward,()=>!1),c]},tn=e=>(typeof e=="function"?e():e)||document.body,nn=()=>()=>{},sn=o.memo(function(){const{selectRef:t,selectId:n,positionStore:s,multiple:r,offset:u,duration:a,easing:c,animateOpacity:i,keepMounted:h,optionsClassName:l,style:p,container:x,hasMore:m,loadButton:O,texts:S}=o.useContext(W),{visibility:g,normalizedOptions:y,loading:L,error:$}=o.useContext(te),{handleListScroll:k,setListReady:D}=o.useContext(ee),T=g&&y.length>0,f=o.useSyncExternalStore(nn,()=>!0,()=>!1),E=o.useRef(null),[C,R]=en({selectRef:t,panelRef:E,open:g&&f,offset:u,store:s}),j=o.useCallback(()=>D(!0),[D]);return f?Ue.createPortal(b.jsx(X,{axis:"y",fade:i,in:T,nodeRef:E,unmountOnExit:!h,onEntered:j,onMouseDown:B=>B.preventDefault(),className:ne("rac-options",l),"data-placement":C?"top":"bottom",style:{...Zt(p),"--rac-duration":`${a}ms`,"--rac-ease":c,pointerEvents:T?"auto":"none",position:"fixed"},children:b.jsxs("div",{onScroll:k,className:"rac-list","aria-multiselectable":r,id:`${n}-listbox`,"aria-label":S.list,role:"listbox",tabIndex:"-1",ref:R,children:[b.jsx(Xt,{}),$?b.jsx("div",{className:"rac-option","data-error":"",children:b.jsx("span",{className:"rac-option-text",children:S.error})}):(L||!O&&m)&&b.jsxs("div",{className:"rac-option","data-loading":"",children:[b.jsx("span",{className:"rac-option-text",children:L?S.loading:S.loadingMore}),Me]})]})}),tn(x)):null}),st=[];function rn({props:e,jsxOptions:t,state:n,setState:s,setVisibility:r,loadMoreOnce:u}){const{onChange:a,disabled:c,loading:i,error:h,multiple:l,childrenFirst:p,groupsClosed:x,hasMore:m,loadButton:O,placeholder:S,selectedText:g,texts:y}=e,{disabledOption:L,emptyOption:$,invalidOption:k,emptyGroup:D}=y,{loadPending:T,internalValue:f,toggledGroups:E,picked:C}=n,R=xe(e.options),j=xe(e.value),B=j!==void 0,I=B?j:f,A=T?y.loadingMore:y.loadMore,v=o.useMemo(()=>Et({options:R,jsxOptions:t,childrenFirst:p,hasMore:m,loadButton:O,loadPending:T,loadingTitle:A,emptyOption:$,invalidOption:k,disabledOption:L,emptyGroup:D}),[R,t,p,m,O,T,A,$,k,L,D]),d=o.useMemo(()=>new Set(v.filter(N=>N.groupHeader&&!N.disabled&&x===E.has(N.name)).map(N=>N.name)),[v,E,x]),{selected:w,selectedIDs:M}=o.useMemo(()=>jt(I,v,l,C),[I,v,l,C]),F=v.length>0,z=!c&&F,P=I!=null&&!(Array.isArray(I)&&!I.length)&&!(fe(I)&&!Object.keys(I).length),H=P&&g?null:w,Y=o.useMemo(()=>P&&g?g:w?w.name:h?y.error:i?y.loading:c?y.disabled:F?S:y.empty,[h,i,c,P,g,w,F,S,y]),q=N=>s(G=>{const J=new Set(G.toggledGroups);return J.has(N)?J.delete(N):J.add(N),{toggledGroups:J}}),V=(N,G,J)=>{s(B?{picked:J}:{internalValue:N,picked:J}),a?.(N,G)},oe=N=>V(N.map(G=>G.original),N.map(G=>G.userId),N.map(G=>G.id)),Ae=je({toggleGroup:q,selectOption:(N,G)=>{if(N.groupHeader){U(G),N.disabled||q(N.name);return}if(N.disabled||N.loadMore){U(G),N.loadMore&&!N.loading&&u();return}if(l){U(G);const J=M.some(ge=>ge.id===N.id);oe(J?M.filter(ge=>ge.id!==N.id):[...M,N]);return}w?.id!==N.id&&V(N.original,N.userId,[N.id]),r(!1)},clear:N=>{U(N),V(l?[]:null,l?[]:null,st)},removeOption:N=>oe(M.filter(G=>G.id!==N))});return{normalizedOptions:v,expandedGroups:d,selected:w,selectedIDs:M,hasOptions:F,active:z,hasActualValue:P,title:Y,valueOption:H,actions:Ae}}const on=e=>({internalVisibility:!1,deleting:!1,loadPending:!1,toggledGroups:new Set,internalValue:e.defaultValue,picked:st});function an(e,t){const{ref:n,open:s,onOpenChange:r,hasMore:u,loadMore:a,loadButton:c,error:i,disabled:h,loading:l}=e,p=o.useId(),x=o.useMemo(()=>p.replace(/:/g,""),[p]),m=o.useRef(null);o.useImperativeHandle(n,()=>m.current);const[O,S]=o.useReducer(it,e,on),{internalVisibility:g,deleting:y,loadPending:L}=O,[$]=o.useState(()=>ye(ft)),[k]=o.useState(()=>ye({upward:!1})),D=s!==void 0,T=D?!!s:g,f=o.useRef(!1),E=o.useRef(!1),C=je({setVisibility:V=>{V!==T&&(D||S({internalVisibility:V}),r?.(V))},loadMoreOnce:()=>{if(!u||f.current)return;if(!a)return Q("no loadMore","`hasMore` is set, but there is no `loadMore` to call.");f.current=!0,S({loadPending:!0});const V=()=>S({loadPending:!1});try{a()?.then?.(V,V)}catch(oe){f.current=!1,V(),(globalThis.reportError??console.error)(oe)}},setListReady:V=>$.set({ready:V}),setDeleting:V=>S({deleting:V})}),R=rn({props:e,jsxOptions:t,state:O,setState:S,setVisibility:C.setVisibility,loadMoreOnce:C.loadMoreOnce}),{normalizedOptions:j,expandedGroups:B,selected:I,selectedIDs:A,hasOptions:v,active:d,hasActualValue:w,title:M,valueOption:F,actions:z}=R,P=d&&T,H=xt({props:e,state:O,setState:S,normalizedOptions:j,expandedGroups:B,selected:I,selectedIDs:A,visibility:P,highlightStore:$,setVisibility:C.setVisibility,loadMoreOnce:C.loadMoreOnce,modelActions:z});o.useEffect(()=>{S({loadPending:!1})},[j.length,u,c]),o.useEffect(()=>{L||(f.current=!1)},[L]),o.useEffect(()=>{P&&m.current&&document.activeElement!==m.current&&m.current.focus(),P||$.set({index:-1,ready:!1})},[P,$]),o.useEffect(()=>{E.current&&!d&&C.setVisibility(!1),E.current=d},[d,C]);const Y=o.useMemo(()=>({...C,...z,...H}),[C,z,H]),q=o.useMemo(()=>({visibility:P,deleting:y,loadPending:L,expandedGroups:B,selectedIDs:A,normalizedOptions:j,selected:I,hasOptions:v,active:d,hasActualValue:w,title:M,valueOption:F,disabled:h,loading:l,error:i}),[P,y,L,B,A,j,I,v,d,w,M,F,h,l,i]);return{selectId:x,selectRef:m,highlightStore:$,positionStore:k,state:q,actions:Y}}const cn={},_=e=>e!=null&&e!=="",Ce=e=>e?typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(Ce).join(" ").replace(/\s+/g," ").trim():o.isValidElement(e)?Ce(e.props.children):"":"",ln=({name:e,label:t,id:n,value:s,className:r,style:u,children:a,disabled:c,group:i},h,l)=>{const p=Ce(a),x=s!==void 0?s:p;return a!=null&&!p&&!_(t)&&!_(e)&&!_(n)&&!_(s)&&Q("no text","<Option> has content but no text to show in the title or chips. Add a `label` (or `value`), or enable `valueAsOption`."),{id:_(n)?String(n):h,userId:_(n)?n:x,value:x,label:_(t)?String(t):_(e)?String(e):p||(_(n)?String(n):""),jsx:a,hasJsx:a!=null,className:r,style:u,disabled:!!c,group:i||l||null}},un=({name:e,label:t,value:n,id:s,disabled:r,className:u="",style:a=cn},c)=>{const i=e??t??s??n;return{disabled:!!r,isGroupMarker:!0,group:_(i)?String(i):c,className:u,style:a}},dn=e=>`<${typeof e=="string"?e:e?.displayName||e?.name||"Component"}>`,ae=(e,t,n=null,s="o",r=[])=>(o.Children.toArray(e).forEach(u=>{if(!o.isValidElement(u)){Q("text",`Text inside <Select> or <OptGroup> is ignored ("${String(u).slice(0,30)}"). Wrap it in <Option>.`);return}const a=`${s}-${String(u.key).slice(1).replace(/[:$]/g,i=>i===":"?"-":"k").replace(/[^\p{L}\p{N}-]/gu,"")}`,c=u.type?.racKind;if(u.type===o.Fragment)ae(u.props.children,t,n,a,r);else if(c==="option")r.push(ln(u.props,a,n));else if(c==="define")ae(u.type.racRender(u.props),t,n,a,r);else if(c==="group"){const i=un(u.props,t);r.push(i),ae(u.props.children,t,i.group,a,r)}else{const i=dn(u.type);Q(`child ${i}`,`${i} inside <Select> is ignored: only <Option/>, <OptGroup/> and defineOption() components are read. Put custom content inside <Option>, or wrap the component with defineOption().`)}}),r),fn=new Set(["ref","options","value","defaultValue","onChange","children","loadMore","open","onOpenChange","onFocus","onBlur","childrenFirst","groupsClosed","disabled","loading","error"]),gn=/^(aria|data)-/,he={options:[],value:void 0,defaultValue:void 0,onChange:void 0,multiple:!1,childrenFirst:!1,groupsClosed:!1,disabled:!1,loading:!1,error:!1,open:void 0,onOpenChange:void 0,onFocus:void 0,onBlur:void 0,id:void 0,name:void 0,required:!1,hasMore:!1,loadMore:void 0,loadButton:!1,loadOffset:100,loadAhead:3,placeholder:"Choose option",selectedText:void 0,texts:{empty:"No options",disabled:"Disabled",loading:"Loading",error:"Failed to load",clear:"Clear selection",remove:"Remove",loadMore:"Load more",loadingMore:"Loading",emptyOption:"Empty option",invalidOption:"Invalid option",disabledOption:"Disabled option",emptyGroup:"Empty group",list:"Options"},renderOption:void 0,valueAsOption:!1,icons:{arrow:ie.ArrowUp,clear:ie.XMark,remove:ie.XMark,check:ie.Checkmark,checkbox:void 0},deleteInline:!1,deleteAlways:!1,className:"",optionsClassName:"",style:{},container:void 0,duration:300,easing:"ease",offset:1,animateOpacity:!0,keepMounted:!1},_e={visibility:"open",setVisibility:"onOpenChange",ownBehavior:"open without onOpenChange",onOpen:"onOpenChange",onClose:"onOpenChange",unmount:"keepMounted (inverted)",showDelete:"deleteAlways",OpenIcon:"icons.arrow",ClearIcon:"icons.clear",DelIcon:"icons.remove",Checkmark:"icons.check",Checkbox:"icons.checkbox",emptyText:"texts.empty",disabledText:"texts.disabled",loadingText:"texts.loading",errorText:"texts.error",clearText:"texts.clear",removeText:"texts.remove",loadButtonText:"texts.loadMore",loadMoreText:"texts.loadingMore",emptyOption:"texts.emptyOption",invalidOption:"texts.invalidOption",disabledOption:"texts.disabledOption"},me=(e,t)=>{const n={...e};for(const s in t)t[s]!==void 0&&(n[s]=t[s]);return n};function pn(e){for(const m in e)m in _e&&Q(`renamed ${m}`,`The \`${m}\` prop was removed. Use \`${_e[m]}\`.`);e.value!==void 0&&!e.onChange&&Q("read-only value","`value` is set without `onChange`, so the Select is read-only. Pass `onChange`, or `defaultValue` instead of `value`.");const t=me(he,e);t.texts=me(he.texts,e.texts),t.icons=me(he.icons,e.icons);const n=t.texts.emptyGroup,s=xe(o.useMemo(()=>ae(t.children,n),[t.children,n])),{selectId:r,selectRef:u,highlightStore:a,positionStore:c,state:i,actions:h}=an(t,s),l={},p={};for(const m in t)fn.has(m)||((gn.test(m)?p:l)[m]=t[m]);const x=ut({...l,attrs:p,selectId:r,selectRef:u,highlightStore:a,positionStore:c});return b.jsx(W.Provider,{value:x,children:b.jsx(ee.Provider,{value:h,children:b.jsxs(te.Provider,{value:i,children:[b.jsx(_t,{}),b.jsx(sn,{})]})})})}function rt(){return Q("option outside","<Option/> was rendered outside <Select>, or inside a component that <Select> cannot read. Use it as a direct child, or wrap the component with defineOption()."),null}rt.racKind="option";function ot(){return null}ot.racKind="group";exports.OptGroup=ot;exports.Option=rt;exports.Select=pn;exports.defineOption=Ot;
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./select.cjs"),i=require("./model.cjs"),t=require("./chip.cjs"),n=require("./paging.cjs");exports.OptGroup=e.OptGroup;exports.Option=e.Option;exports.Select=e.Select;exports.defineOption=i.defineOption;exports.chips=t.chips;exports.paging=n.paging;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import {FC, FunctionComponent, ReactNode, CSSProperties, ElementType, Ref, FocusEvent, AriaAttributes} from 'react'
|
|
1
|
+
import {FC, FunctionComponent, ReactNode, CSSProperties, ElementType, Ref, FocusEvent, KeyboardEvent, AriaAttributes} from 'react'
|
|
2
|
+
|
|
3
|
+
/** Live region message: a template with {label} / {n}, or a function for plural forms. */
|
|
4
|
+
export type LiveText = string | ((value: string | number) => string)
|
|
2
5
|
|
|
3
6
|
export interface SelectTexts {
|
|
4
7
|
empty: string
|
|
@@ -13,7 +16,21 @@ export interface SelectTexts {
|
|
|
13
16
|
invalidOption: string
|
|
14
17
|
disabledOption: string
|
|
15
18
|
emptyGroup: string
|
|
19
|
+
/** State word in a group header's accessible name. Default `'expanded'`. */
|
|
20
|
+
groupOpen: string
|
|
21
|
+
/** State word in a group header's accessible name. Default `'collapsed'`. */
|
|
22
|
+
groupClosed: string
|
|
16
23
|
list: string
|
|
24
|
+
/** Validation bubble text of an empty required Select; default: the browser's own. */
|
|
25
|
+
required?: string
|
|
26
|
+
/** Default `'Removed {label}'`. */
|
|
27
|
+
removed?: LiveText
|
|
28
|
+
/** Default `'Selection cleared'`. */
|
|
29
|
+
cleared?: LiveText
|
|
30
|
+
/** Default `'{n} selected'`. */
|
|
31
|
+
selected?: LiveText
|
|
32
|
+
/** Default `'{n} more options loaded'`. */
|
|
33
|
+
loaded?: LiveText
|
|
17
34
|
}
|
|
18
35
|
|
|
19
36
|
export type SelectIcon = ElementType | string | ReactNode | null | false
|
|
@@ -32,9 +49,13 @@ export interface SelectProps extends AriaAttributes {
|
|
|
32
49
|
ref?: Ref<HTMLDivElement>
|
|
33
50
|
children?: ReactNode
|
|
34
51
|
|
|
52
|
+
/** A dictionary's values are the options, keys ignored; a key named name/label/id/value makes it one option, options/group a group. Array items take no className/style (use <Option/>). */
|
|
35
53
|
options?: any[] | Record<string, any>
|
|
54
|
+
/** undefined = uncontrolled; keep one mode, clear a controlled Select with null / [] (a switch warns in dev). */
|
|
36
55
|
value?: any
|
|
56
|
+
/** Initial value of an uncontrolled Select; also the target of form.reset(), in both modes, with or without name. */
|
|
37
57
|
defaultValue?: any
|
|
58
|
+
/** 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. */
|
|
38
59
|
onChange?: (value: any, ids: any) => void
|
|
39
60
|
multiple?: boolean
|
|
40
61
|
childrenFirst?: boolean
|
|
@@ -46,11 +67,17 @@ export interface SelectProps extends AriaAttributes {
|
|
|
46
67
|
|
|
47
68
|
open?: boolean
|
|
48
69
|
onOpenChange?: (open: boolean) => void
|
|
70
|
+
/** false: no panel, a tag list: role="group" without the combobox ARIA, never opens, no arrow; chip deletion and clear keep working. Default true. */
|
|
71
|
+
popup?: boolean
|
|
49
72
|
onFocus?: (e: FocusEvent<HTMLDivElement>) => void
|
|
50
73
|
onBlur?: (e: FocusEvent<HTMLDivElement>) => void
|
|
74
|
+
/** Runs before the Select handles a key; event.preventDefault() makes the Select skip it. */
|
|
75
|
+
onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void
|
|
51
76
|
|
|
52
77
|
id?: string
|
|
53
78
|
name?: string
|
|
79
|
+
/** Id of the owner <form>, like <select form="id">: submits and resets with it even when placed outside. */
|
|
80
|
+
form?: string
|
|
54
81
|
required?: boolean
|
|
55
82
|
|
|
56
83
|
hasMore?: boolean
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { OptGroup as p, Option as r, Select as t } from "./select.js";
|
|
3
|
+
import { defineOption as f } from "./model.js";
|
|
4
|
+
import { chips as m } from "./chip.js";
|
|
5
|
+
import { paging as c } from "./paging.js";
|
|
6
|
+
export {
|
|
7
|
+
p as OptGroup,
|
|
8
|
+
r as Option,
|
|
9
|
+
t as Select,
|
|
10
|
+
m as chips,
|
|
11
|
+
f as defineOption,
|
|
12
|
+
c as paging
|
|
13
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react/jsx-runtime"),E=require("./state.cjs"),r=require("react"),M=250,N=5e3,O=[],q=()=>()=>{},o=(i,t)=>typeof i=="function"?i(t):String(i??"").replace(/\{(n|label)\}/g,()=>t),I=(i,t,c,a)=>{const s=[];if(i.picked.length&&!t.picked.length)s.push(o(c.cleared));else if(a){const l=new Set(t.picked.map(n=>n.id)),d=new Set(i.picked.map(n=>n.id)),u=i.picked.filter(n=>!l.has(n.id));u.length&&s.push(o(c.removed,u.map(n=>n.name).join(", "))),t.picked.some(n=>!d.has(n.id))&&s.push(o(c.selected,t.picked.length))}return t.open&&i.count&&t.count>i.count&&s.push(o(c.loaded,t.count-i.count)),t.error&&!i.error&&s.push(o(c.error)),s.filter(Boolean).join(". ")},B=r.memo(function(){const{selectRef:t,selectId:c,multiple:a,texts:s}=r.useContext(E.SelectConfigContext),{selected:l,selectedIDs:d,normalizedOptions:u,visibility:n,deleting:k,error:m}=r.useContext(E.SelectStateContext),b=r.useSyncExternalStore(q,()=>!0,()=>!1),[j,v]=r.useState(""),f=r.useRef({base:null,timer:0,wipe:0,latest:null}),S=r.useMemo(()=>u.reduce((e,g)=>"original"in g?e+1:e,0),[u]);return r.useEffect(()=>{const e=a?d:l?[l]:O;f.current.latest={snap:{picked:e,count:S,open:n,error:!!m},texts:s,multiple:a,deleting:k}}),r.useEffect(()=>{const e=f.current,{snap:g,deleting:T}=e.latest;if(!e.base||!e.timer&&!T&&!t.current?.contains(document.activeElement)){e.base=g;return}clearTimeout(e.timer),e.timer=setTimeout(()=>{e.timer=0;const{snap:x,texts:C,multiple:R}=e.latest,p=I(e.base,x,C,R);e.base=x,p&&(v(y=>y===p?`${p} `:p),clearTimeout(e.wipe),e.wipe=setTimeout(()=>v(""),N))},M)},[l,d,S,m,t]),r.useEffect(()=>{const e=f.current;return()=>{clearTimeout(e.timer),clearTimeout(e.wipe)}},[]),b?h.jsxs("div",{className:"rac-live",children:[h.jsx("div",{"aria-live":"polite","aria-atomic":"true",children:j}),m&&h.jsx("div",{id:`${c}-error`,children:o(s.error)})]}):null});exports.default=B;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as y, jsx as k } from "react/jsx-runtime";
|
|
3
|
+
import { SelectConfigContext as I, SelectStateContext as O } from "./state.js";
|
|
4
|
+
import { memo as B, useContext as x, useSyncExternalStore as D, useState as L, useRef as M, useMemo as $, useEffect as g } from "react";
|
|
5
|
+
const z = 250, P = 5e3, U = [], W = () => () => {
|
|
6
|
+
}, s = (i, t) => typeof i == "function" ? i(t) : String(i ?? "").replace(/\{(n|label)\}/g, () => t), q = (i, t, o, u) => {
|
|
7
|
+
const r = [];
|
|
8
|
+
if (i.picked.length && !t.picked.length) r.push(s(o.cleared));
|
|
9
|
+
else if (u) {
|
|
10
|
+
const c = new Set(t.picked.map((n) => n.id)), a = new Set(i.picked.map((n) => n.id)), l = i.picked.filter((n) => !c.has(n.id));
|
|
11
|
+
l.length && r.push(s(o.removed, l.map((n) => n.name).join(", "))), t.picked.some((n) => !a.has(n.id)) && r.push(s(o.selected, t.picked.length));
|
|
12
|
+
}
|
|
13
|
+
return t.open && i.count && t.count > i.count && r.push(s(o.loaded, t.count - i.count)), t.error && !i.error && r.push(s(o.error)), r.filter(Boolean).join(". ");
|
|
14
|
+
}, H = /* @__PURE__ */ B(function() {
|
|
15
|
+
const { selectRef: t, selectId: o, multiple: u, texts: r } = x(I), { selected: c, selectedIDs: a, normalizedOptions: l, visibility: n, deleting: E, error: m } = x(O), T = D(W, () => !0, () => !1), [b, h] = L(""), d = M({ base: null, timer: 0, wipe: 0, latest: null }), v = $(() => l.reduce((e, f) => "original" in f ? e + 1 : e, 0), [l]);
|
|
16
|
+
return g(() => {
|
|
17
|
+
const e = u ? a : c ? [c] : U;
|
|
18
|
+
d.current.latest = { snap: { picked: e, count: v, open: n, error: !!m }, texts: r, multiple: u, deleting: E };
|
|
19
|
+
}), g(() => {
|
|
20
|
+
const e = d.current, { snap: f, deleting: C } = e.latest;
|
|
21
|
+
if (!e.base || !e.timer && !C && !t.current?.contains(document.activeElement)) {
|
|
22
|
+
e.base = f;
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
clearTimeout(e.timer), e.timer = setTimeout(() => {
|
|
26
|
+
e.timer = 0;
|
|
27
|
+
const { snap: S, texts: j, multiple: N } = e.latest, p = q(e.base, S, j, N);
|
|
28
|
+
e.base = S, p && (h((R) => R === p ? `${p} ` : p), clearTimeout(e.wipe), e.wipe = setTimeout(() => h(""), P));
|
|
29
|
+
}, z);
|
|
30
|
+
}, [c, a, v, m, t]), g(() => {
|
|
31
|
+
const e = d.current;
|
|
32
|
+
return () => {
|
|
33
|
+
clearTimeout(e.timer), clearTimeout(e.wipe);
|
|
34
|
+
};
|
|
35
|
+
}, []), T ? /* @__PURE__ */ y("div", { className: "rac-live", children: [
|
|
36
|
+
/* @__PURE__ */ k("div", { "aria-live": "polite", "aria-atomic": "true", children: b }),
|
|
37
|
+
m && /* @__PURE__ */ k("div", { id: `${o}-error`, children: s(r.error) })
|
|
38
|
+
] }) : null;
|
|
39
|
+
});
|
|
40
|
+
export {
|
|
41
|
+
H as default
|
|
42
|
+
};
|