react-animated-select 0.8.0 → 0.8.1

package/dist/trigger.js

@@ -1,94 +1,99 @@
 "use client";
-import { jsxs as R, jsx as u } from "react/jsx-runtime";
-import { SelectConfigContext as N, SelectStateContext as F, SelectActionsContext as k } from "./state.js";
-import { optionDomId as W, flag as I, withClass as P, renderIcon as V, stopEvent as X, refocus as Y, optionContent as Z, dots as ee, followHeight as te } from "./utils.js";
-import { memo as O, useContext as g, useSyncExternalStore as oe, useState as $, useRef as D, useLayoutEffect as j, useEffect as ne } from "react";
-import { effectiveHighlight as re } from "./useSelectBehavior.js";
-import { toJSON as ie } from "./model.js";
-import { Presence as q, Collapse as E } from "./motion.js";
-const ae = [], le = () => {
-}, se = (b) => b == null ? "" : typeof b == "object" ? ie(b) ?? "" : String(b), ce = /* @__PURE__ */ O(function() {
-  const { selectRef: m, multiple: o, name: s, form: p, required: c } = g(N), { selected: h, selectedIDs: x, disabled: f, fieldsetDisabled: n } = g(F), { reset: t, markInvalid: v } = g(k), a = D(null);
-  ne(() => {
-    const e = a.current?.getRootNode();
-    let i;
-    const y = (C) => {
-      C.target === a.current?.form && (clearTimeout(i), i = setTimeout(() => C.defaultPrevented || t()));
+import { jsxs as O, jsx as f } from "react/jsx-runtime";
+import { SelectConfigContext as N, SelectStateContext as D, SelectActionsContext as j } from "./state.js";
+import { optionDomId as Z, flag as w, withClass as $, renderIcon as P, stopEvent as ee, refocus as te, optionContent as oe, dots as ne, followHeight as re, watchMotion as ae, reducedMotion as ie } from "./utils.js";
+import { memo as I, useContext as h, useSyncExternalStore as q, useState as E, useRef as T, useCallback as le, useLayoutEffect as V, useEffect as H } from "react";
+import { effectiveHighlight as se } from "./useSelectBehavior.js";
+import { toJSON as ce } from "./model.js";
+import { Presence as L, Collapse as k } from "./motion.js";
+const de = [], ue = () => {
+}, fe = (v) => v == null ? "" : typeof v == "object" ? ce(v) ?? "" : String(v), me = /* @__PURE__ */ I(function() {
+  const { selectRef: m, multiple: t, name: i, form: l, required: g } = h(N), { selected: o, selectedIDs: d, disabled: e, fieldsetDisabled: p } = h(D), { reset: u, markInvalid: x } = h(j), y = T(null);
+  H(() => {
+    const r = y.current?.getRootNode();
+    let b;
+    const S = (R) => {
+      R.target === y.current?.form && (clearTimeout(b), b = setTimeout(() => R.defaultPrevented || u()));
     };
-    return e?.addEventListener("reset", y, !0), () => {
-      clearTimeout(i), e?.removeEventListener("reset", y, !0);
+    return r?.addEventListener("reset", S, !0), () => {
+      clearTimeout(b), r?.removeEventListener("reset", S, !0);
     };
-  }, [t]);
-  const d = o ? x : h ? [h] : ae, l = !c && (!s || o && !d.length), r = l || !d.length ? [""] : d.map((e) => se(e.original)), w = () => m.current?.focus();
-  return r.map(
-    (e, i) => /* @__PURE__ */ u("input", { className: "rac-input", ref: i ? void 0 : a, name: l ? void 0 : s, form: p, value: e, hidden: l, required: c && !i, disabled: f && !n, tabIndex: -1, "aria-hidden": "true", autoComplete: "off", onChange: le, onInvalid: v, onFocus: w }, i)
+  }, [u]);
+  const s = t ? d : o ? [o] : de, n = !g && (!i || t && !s.length), c = n || !s.length ? [""] : s.map((r) => fe(r.original)), a = () => m.current?.focus();
+  return c.map(
+    (r, b) => /* @__PURE__ */ f("input", { className: "rac-input", ref: b ? void 0 : y, name: n ? void 0 : i, form: l, value: r, hidden: n, required: g && !b, disabled: e && !p, tabIndex: -1, "aria-hidden": "true", autoComplete: "off", onChange: ue, onInvalid: x, onFocus: a }, b)
   );
-}), de = /* @__PURE__ */ O(function({ hidden: m, settle: o }) {
-  const { multiple: s, selectedText: p, valueAsOption: c, renderOption: h, texts: x } = g(N), { selectedIDs: f, title: n, valueOption: t, hasActualValue: v, loading: a, error: d } = g(F), [l] = $(() => /* @__PURE__ */ new Set()), r = c && t ? Z(t, h, !0) : null, w = a && !d && !v, e = s && f.length > 0 && !p, i = `${e ? "picked" : r ? t.id : n}${w ? "-loading" : ""}`, y = t?.type === "boolean" ? String(t.raw) : void 0;
-  return /* @__PURE__ */ u(q, { children: !m && /* @__PURE__ */ R(E, { axis: "x", fade: !0, group: l, className: P("rac-title", r && t.className), style: r ? t.style : void 0, "data-bool": y, onEntered: o, onExited: o, children: [
-    r ? /* @__PURE__ */ u("div", { className: "rac-option-jsx", children: r }) : e ? f.map((C) => C.name || x.emptyOption).join(", ") : n,
-    w && ee
-  ] }, i) });
-}), ue = /* @__PURE__ */ O(function() {
-  const { selectRef: m, multiple: o, valueAsOption: s, duration: p, easing: c, ext: h } = g(N), x = o ? h.Value : void 0, f = D(null), [n, t] = $(s);
-  s && !n && t(!0);
-  const v = D({ duration: p, easing: c });
-  return j(() => {
-    v.current = { duration: p, easing: c };
-  }, [p, c]), j(() => {
-    const a = f.current;
-    if (!n || o || !a || typeof ResizeObserver > "u") return;
-    const d = { value: 0, root: "", anim: null }, l = new ResizeObserver(() => te(m.current, d, a.offsetHeight, v.current.duration, v.current.easing));
-    return l.observe(a), () => {
-      l.disconnect(), d.anim?.cancel();
-    };
-  }, [n, o, m]), x ? /* @__PURE__ */ u(x, {}) : /* @__PURE__ */ u("div", { className: "rac-value", ref: f, children: /* @__PURE__ */ u(de, {}) });
-}), xe = /* @__PURE__ */ O(function() {
-  const { selectRef: m, selectId: o, highlightStore: s, className: p, style: c, duration: h, easing: x, deleteInline: f, icons: n, texts: t, placeholder: v, id: a, required: d, popup: l, attrs: r } = g(N), { visibility: w, active: e, hasActualValue: i, deleting: y, loading: C, loadPending: H, error: T, invalid: A, normalizedOptions: z } = g(F), { handleBlur: B, handleFocus: K, handleKeyDown: L, toggleVisibility: G, clear: J } = g(k), M = oe(s.subscribe, () => {
-    const S = w ? z[re(s.get())] : null;
-    return S ? W(o, S.id) : void 0;
+}), z = /* @__PURE__ */ I(function({ hidden: m, settle: t, wait: i, children: l }) {
+  const { valueAsOption: g, renderOption: o } = h(N), { title: d, valueOption: e, hasActualValue: p, loading: u, error: x } = h(D), [y] = E(() => /* @__PURE__ */ new Set()), s = g && e ? oe(e, o, !0) : null, n = u && !x && !p, c = `${s ? e.id : d}${n ? "-loading" : ""}`, a = e?.type === "boolean" ? String(e.raw) : void 0;
+  return /* @__PURE__ */ O(L, { wait: i, children: [
+    !m && /* @__PURE__ */ O(k, { axis: "x", fade: !0, group: y, className: $("rac-title", s && e.className), style: s ? e.style : void 0, "data-bool": a, onEntered: t, onExited: t, children: [
+      s ? /* @__PURE__ */ f("div", { className: "rac-option-jsx", children: s }) : d,
+      n && ne
+    ] }, c),
+    l
+  ] });
+}), pe = /* @__PURE__ */ I(function() {
+  const { selectedText: m, duration: t, texts: i } = h(N), { selectedIDs: l } = h(D), g = q(ae, ie, () => !1), o = l.length > 0 && !m;
+  return /* @__PURE__ */ f(z, { hidden: o, wait: t > 0 && !g, children: o && l.map((d, e) => /* @__PURE__ */ f(k, { as: "span", axis: "none", exitAxis: "x", fade: !0, className: "rac-pick", "data-last": w(e === l.length - 1), children: d.name || i.emptyOption }, d.id)) });
+}), he = /* @__PURE__ */ I(function() {
+  const { selectRef: m, multiple: t, duration: i, easing: l, ext: g } = h(N), o = t ? g.Value : void 0, d = T(null), [e, p] = E({ Slot: o, multiple: t, enter: !1, left: !1 });
+  let u = e;
+  (o ? e.Slot !== o || e.left : e.Slot && (!t || e.left)) ? u = { Slot: o, multiple: t, enter: !!o && !e.Slot && e.multiple, left: !1 } : e.multiple !== t && (u = { ...e, multiple: t }), u !== e && p(u);
+  const { Slot: x, enter: y } = u, s = le(() => p((a) => a.left ? a : { ...a, left: !0 }), []), [n] = E(() => ({ value: 0, root: "", anim: null })), c = T({ duration: i, easing: l });
+  return V(() => {
+    c.current = { duration: i, easing: l };
+  }, [i, l]), V(() => {
+    const a = d.current;
+    if (!a || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver(() => re(m.current, n, a.offsetHeight, c.current.duration, c.current.easing));
+    return r.observe(a), () => r.disconnect();
+  }, [x, m, n]), H(() => () => n.anim?.cancel(), [n]), x ? /* @__PURE__ */ f(x, { height: n, enter: y, leaving: !o, onLeft: s }) : /* @__PURE__ */ f("div", { className: "rac-value", ref: d, children: t ? /* @__PURE__ */ f(pe, {}) : /* @__PURE__ */ f(z, {}) });
+}), Ce = /* @__PURE__ */ I(function() {
+  const { selectRef: m, selectId: t, highlightStore: i, className: l, style: g, duration: o, easing: d, deleteInline: e, icons: p, texts: u, placeholder: x, id: y, required: s, popup: n, attrs: c } = h(N), { visibility: a, active: r, hasActualValue: b, deleting: S, loading: R, loadPending: B, error: A, invalid: F, normalizedOptions: K } = h(D), { handleBlur: M, handleFocus: G, handleKeyDown: J, toggleVisibility: _, clear: Q } = h(j), U = q(i.subscribe, () => {
+    const C = a ? K[se(i.get())] : null;
+    return C ? Z(t, C.id) : void 0;
   }, () => {
-  }), _ = !!n.clear && i && e && !y, Q = !!n.arrow && e && !y && l, U = l ? { role: "combobox", "aria-haspopup": "listbox", "aria-controls": `${o}-listbox`, "aria-expanded": w, "aria-activedescendant": M, "aria-required": d || void 0 } : { role: "group" };
-  return /* @__PURE__ */ R(
+  }), W = !!p.clear && b && r && !S, X = !!p.arrow && r && !S && n, Y = n ? { role: "combobox", "aria-haspopup": "listbox", "aria-controls": `${t}-listbox`, "aria-expanded": a, "aria-activedescendant": U, "aria-required": s || void 0 } : { role: "group" };
+  return /* @__PURE__ */ O(
     "div",
     {
-      ...r,
-      id: a,
+      ...c,
+      id: y,
       ref: m,
-      style: { "--rac-duration": `${h}ms`, "--rac-ease": x, ...c },
-      className: P("rac-select", p),
-      ...e && {
-        onKeyDown: L,
-        onFocus: K,
-        onClick: G,
-        onBlur: B
+      style: { "--rac-duration": `${o}ms`, "--rac-ease": d, ...g },
+      className: $("rac-select", l),
+      ...r && {
+        onKeyDown: J,
+        onFocus: G,
+        onClick: _,
+        onBlur: M
       },
-      ...U,
-      "aria-disabled": !e,
-      tabIndex: e ? 0 : -1,
-      "aria-busy": C || H || void 0,
-      "aria-label": r["aria-label"] ?? (r["aria-labelledby"] ? void 0 : v),
-      "aria-invalid": A || r["aria-invalid"],
-      "aria-describedby": [r["aria-describedby"], T && `${o}-error`].filter(Boolean).join(" ") || void 0,
-      "data-inline-delete": I(f),
-      "data-empty": I(!i),
-      "data-deleting": I(y),
-      "data-error": I(T),
-      "data-invalid": I(A),
+      ...Y,
+      "aria-disabled": !r,
+      tabIndex: r ? 0 : -1,
+      "aria-busy": R || B || void 0,
+      "aria-label": c["aria-label"] ?? (c["aria-labelledby"] ? void 0 : x),
+      "aria-invalid": F || c["aria-invalid"],
+      "aria-describedby": [c["aria-describedby"], A && `${t}-error`].filter(Boolean).join(" ") || void 0,
+      "data-inline-delete": w(e),
+      "data-empty": w(!b),
+      "data-deleting": w(S),
+      "data-error": w(A),
+      "data-invalid": w(F),
       children: [
-        /* @__PURE__ */ u(ue, {}),
-        /* @__PURE__ */ R(q, { children: [
-          _ && /* @__PURE__ */ u(E, { as: "button", type: "button", axis: "x", className: "rac-clear", tabIndex: -1, "aria-label": t.clear, onMouseDown: X, onClick: (S) => {
-            Y(S, m), J(S);
-          }, children: V(n.clear) }, "clear"),
-          Q && /* @__PURE__ */ u(E, { axis: "x", className: "rac-arrow", "aria-hidden": "true", children: V(n.arrow) }, "arrow")
+        /* @__PURE__ */ f(he, {}),
+        /* @__PURE__ */ O(L, { children: [
+          W && /* @__PURE__ */ f(k, { as: "button", type: "button", axis: "x", className: "rac-clear", tabIndex: -1, "aria-label": u.clear, onMouseDown: ee, onClick: (C) => {
+            te(C, m), Q(C);
+          }, children: P(p.clear) }, "clear"),
+          X && /* @__PURE__ */ f(k, { axis: "x", className: "rac-arrow", "aria-hidden": "true", children: P(p.arrow) }, "arrow")
         ] }),
-        /* @__PURE__ */ u(ce, {})
+        /* @__PURE__ */ f(me, {})
       ]
     }
   );
 });
 export {
-  de as Title,
-  xe as default
+  z as Title,
+  Ce as default
 };

package/dist/useChipLayout.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),F=require("react-dom"),R=require("./state.cjs"),g=require("./utils.cjs"),J=require("./model.cjs"),o=require("./chipGeometry.cjs"),Q=.25,U={hoverId:null,swipedId:null,held:!1,breaks:o.NONE},G=(i,a)=>{const u=new Set(i.map(l=>l.id)),c=new Map(a.map(([l,v])=>[v.id,l])),p=a.filter(([,l])=>!u.has(l.id)),E=new Set(a.map(([l])=>l));return i.map(l=>{if(c.has(l.id))return[c.get(l.id),l];const v=p.findIndex(([,k])=>J.sameValue(k.original,l.original));if(v>=0)return[p.splice(v,1)[0][0],l];let w=l.id;for(;E.has(w);)w+="~";return E.add(w),[w,l]})},X=i=>{const[a,u]=n.useState(()=>({chips:i,keyed:G(i,[])}));if(a.chips===i)return a.keyed;const c=G(i,a.keyed);return u({chips:i,keyed:c}),c};function Y(i){const{selectRef:a,duration:u,easing:c,deleteInline:p,deleteAlways:E,icons:l,valueAsOption:v,renderOption:w}=n.useContext(R.SelectConfigContext),{selectedIDs:k,deleting:C,visibility:B,active:L}=n.useContext(R.SelectStateContext),{setDeleting:q,setVisibility:H}=n.useContext(R.SelectActionsContext),[j,V]=n.useState(0),[s]=n.useState(()=>R.createStore(U)),[W]=n.useState(()=>new Set),A=n.useSyncExternalStore(s.subscribe,()=>s.get().held,()=>!1),O=n.useSyncExternalStore(s.subscribe,()=>s.get().breaks,()=>o.NONE),_=n.useSyncExternalStore(g.watchMotion,g.reducedMotion,()=>!1),S=n.useRef({rows:null,reserve:0,chips:i,swap:!1,duration:u,easing:c}),m=n.useRef(null),h=n.useRef({value:0,root:"",anim:null}),d=n.useRef(null),D=n.useRef(null),N=p&&!E&&!C&&!!l.remove,K=N?j+Q:0,z=N&&!j&&i.length>0,x=v?w?2:1:0,I=n.useEffectEvent((e,t)=>{const r=d.current,f=S.current;if(!r)return;const b=o.isResizing(r);if(b&&t)return;e&&s.get().held&&o.freeze(s,r,f);const y=f.swap?f.duration/2:f.duration;b?f.fit!=null&&g.followHeight(a.current,h.current,f.fit,y,f.easing,r):(t||h.current.value)&&g.followHeight(a.current,h.current,r.offsetHeight,y,f.easing),s.get().held||s.set({breaks:o.restBreaks(s,r,f.chips,f.reserve)})});n.useLayoutEffect(()=>{Object.assign(S.current,{duration:u,easing:c})},[u,c]),n.useLayoutEffect(()=>{const e=S.current,t=d.current,r=e.chips!==i;Object.assign(e,{chips:i,reserve:K}),r&&t&&o.isBusy(t)&&o.freeze(s,t,e),I(!r)},[i,K,s]),n.useLayoutEffect(()=>{const e=()=>I(!0,!0),t=typeof ResizeObserver>"u"?null:new ResizeObserver(e);return t?t.observe(d.current):e(),document.fonts?.addEventListener("loadingdone",e),()=>{t?.disconnect(),document.fonts?.removeEventListener("loadingdone",e)}},[]);const M=n.useCallback(()=>{const e=d.current;if(!e||!s.get().held||o.isBusy(e))return;const t=S.current,r=o.slotsOf(e),f=r.map(y=>y.getBoundingClientRect()),b=o.restBreaks(s,e,t.chips,t.reserve);Object.assign(t,{rows:null,floor:null,fit:null}),F.flushSync(()=>s.set({held:!1,breaks:b})),t.swap=o.isBusy(e),t.swap&&F.flushSync(()=>o.freeze(s,e,t)),g.reducedMotion()||r.forEach((y,T)=>y.isConnected&&o.flip(y,f[T],t.swap?u/2:u,c))},[s,u,c]),P=n.useCallback(e=>{d.current&&(m.current=o.snapOf(d.current,e))},[]);return n.useLayoutEffect(()=>{const e=d.current,t=S.current;if(!e||!m.current||!u||g.reducedMotion())return;const r=o.resizesOf(m.current);r.length&&(t.floor=new Map(r.map(({id:f,from:b})=>[f,b.width])),o.freeze(s,e,t),g.followHeight(a.current,h.current,t.fit,u,c,e),o.resize(r,u,c,()=>{M(),I(!1,!0)}))},[x,s,u,c,a,M]),n.useLayoutEffect(()=>{const e=m.current;!e||O!==s.get().breaks||(m.current=null,g.reducedMotion()||e.forEach((t,r)=>r.isConnected&&o.flip(r,t,u,c)))},[O,i,x,s,u,c]),n.useLayoutEffect(()=>{const e=d.current,t=S.current;!e||!h.current.value||o.isResizing(e)||g.followHeight(a.current,h.current,e.offsetHeight,t.swap?t.duration/2:t.duration,t.easing)},[O,A,a]),n.useEffect(()=>()=>h.current.anim?.cancel(),[]),n.useEffect(()=>{C&&B&&H(!1),C&&(!k.length||!L)&&q(!1),s.set({hoverId:null,...!L&&{swipedId:null}})},[k.length,C,B,L,q,H,s]),n.useLayoutEffect(()=>{const e=D.current;if(!z||!e)return;const t=getComputedStyle(e);V(e.getBoundingClientRect().width+parseFloat(t.marginLeft)+parseFloat(t.marginRight))},[z]),{chipStore:s,delGroup:W,valueRef:d,delIconRef:D,probe:z,settle:M,held:A,snapshot:P,look:x,wait:u>0&&!_}}exports.default=Y;exports.useChipKeys=X;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),V=require("react-dom"),R=require("./state.cjs"),f=require("./utils.cjs"),a=require("./chipGeometry.cjs"),i=require("./chipMotion.cjs"),se=.25,re={hoverId:null,swipedId:null,held:!1,breaks:a.NONE};function oe(y,{height:p,enter:J,leaving:C,onLeft:q}){const{selectRef:m,duration:u,easing:l,deleteInline:B,deleteAlways:j,icons:Q,valueAsOption:U,renderOption:X}=n.useContext(R.SelectConfigContext),{selectedIDs:F,deleting:v,visibility:H,active:O}=n.useContext(R.SelectStateContext),{setDeleting:D,setVisibility:N}=n.useContext(R.SelectActionsContext),[T,Y]=n.useState(0),[s]=n.useState(()=>R.createStore(re)),[Z]=n.useState(()=>new Set),G=n.useSyncExternalStore(s.subscribe,()=>s.get().held,()=>!1),L=n.useSyncExternalStore(s.subscribe,()=>s.get().breaks,()=>a.NONE),$=n.useSyncExternalStore(f.watchMotion,f.reducedMotion,()=>!1),h=n.useRef({rows:null,reserve:0,chips:y,swap:!1,dress:!1,wide:!1,duration:u,easing:l}),w=n.useRef(null),k=n.useRef(null),d=n.useRef(null),W=n.useRef(null),[z,ee]=n.useState(()=>!!J&&u>0&&!f.reducedMotion()),M=C||z,_=!!Q.remove,K=B&&!j&&!v&&_,E=K&&!M?T+se:0,x=K&&!T&&y.length>0,A=M?3:U?X?2:1:0,g=_?(B||v?1:0)|(j||v?2:0):0,P=n.useRef(g),I=n.useEffectEvent((e,t)=>{const r=d.current,o=h.current;if(!r)return;const c=i.isResizing(r);c&&t||(e&&s.get().held&&a.freeze(s,r,o),c?o.fit!=null&&f.followHeight(m.current,p,o.fit,o.duration,o.easing,r):(t||p.value)&&f.followHeight(m.current,p,r.offsetHeight,o.duration,o.easing),s.get().held||s.set({breaks:a.restBreaks(s,r,o.chips,o.reserve)}))}),S=n.useCallback(()=>{const e=d.current,t=h.current;if(!e||!s.get().held||i.isBusy(e,t.dress))return;const r=a.slotsOf(e),o=r.map(b=>b.getBoundingClientRect()),c=a.restBreaks(s,e,t.chips,t.reserve);Object.assign(t,{rows:null,floor:null,fit:null,dress:!1,wide:!1}),V.flushSync(()=>s.set({held:!1,breaks:c})),t.swap=i.isBusy(e),t.swap&&V.flushSync(()=>a.freeze(s,e,t)),f.reducedMotion()||r.forEach((b,ne)=>b.isConnected&&i.flip(b,o[ne],t.swap?u/2:u,l))},[s,u,l]);n.useLayoutEffect(()=>{Object.assign(h.current,{duration:u,easing:l})},[u,l]),n.useLayoutEffect(()=>{const e=P.current,t=d.current,r=h.current;if(P.current=g,e===g||!t||!u||f.reducedMotion()||((e^g)&1&&i.shift(t,!!(g&1),u,l,S),!((e|g)&1)||!i.isBusy(t,!0)))return;const o=r.rows,c=o??a.snapRows(w.current);Object.assign(r,{dress:!0,wide:!1,rows:c,reserve:E}),c&&a.freeze(s,t,r),!(c&&r.rows.length<=c.length)&&(Object.assign(r,{wide:!0,rows:o}),a.freeze(s,t,r))},[g,E,s,u,l,S]),n.useLayoutEffect(()=>{const e=h.current,t=d.current,r=e.chips!==y;Object.assign(e,{chips:y,reserve:E}),r&&t&&i.isBusy(t,e.dress)&&a.freeze(s,t,e),I(!r)},[y,E,s]),n.useLayoutEffect(()=>{const e=()=>I(!0,!0),t=typeof ResizeObserver>"u"?null:new ResizeObserver(e);return t?t.observe(d.current):e(),document.fonts?.addEventListener("loadingdone",e),()=>{t?.disconnect(),document.fonts?.removeEventListener("loadingdone",e)}},[]);const te=n.useCallback(e=>{const t=d.current;t&&(w.current=i.snapOf(t,e),e&&(k.current=i.padOf(t)))},[]);return n.useLayoutEffect(()=>{const e=d.current,t=h.current,r=k.current;if(k.current=null,!e||!w.current||!u||f.reducedMotion())return;i.repad(e,r,u,l);const o=i.resizesOf(w.current);o.length&&(t.floor=new Map(o.map(({id:c,width:b})=>[c,b])),a.freeze(s,e,t),f.followHeight(m.current,p,t.fit,u,l,e),i.resize(o,u,l,()=>{S(),I(!1,!0)}))},[A,s,u,l,m,S,p]),n.useEffect(()=>{const e=z&&requestAnimationFrame(()=>ee(!1));return()=>cancelAnimationFrame(e)},[z]),n.useLayoutEffect(()=>{const e=d.current;if(!C)return;let t;const r=()=>s.get().held||!!e?.getAnimations({subtree:!0}).some(c=>c.playState==="running"&&c.effect?.getComputedTiming().endTime<1/0),o=()=>{r()?t=requestAnimationFrame(o):q()};return o(),()=>cancelAnimationFrame(t)},[C,q,s]),n.useLayoutEffect(()=>{const e=w.current;!e||L!==s.get().breaks||(w.current=null,f.reducedMotion()||e.forEach((t,r)=>r.isConnected&&i.flip(r,t,u,l)))},[L,y,A,g,s,u,l]),n.useLayoutEffect(()=>{const e=d.current,t=h.current;!e||!p.value||i.isResizing(e)||f.followHeight(m.current,p,e.offsetHeight,t.duration,t.easing)},[L,G,m,p]),n.useEffect(()=>{v&&H&&N(!1),v&&(!F.length||!O)&&D(!1),s.set({hoverId:null,...!O&&{swipedId:null}})},[F.length,v,H,O,D,N,s]),n.useLayoutEffect(()=>{const e=W.current;if(!x||!e)return;const t=getComputedStyle(e);Y(e.getBoundingClientRect().width+parseFloat(t.marginLeft)+parseFloat(t.marginRight))},[x]),{chipStore:s,delGroup:Z,valueRef:d,delIconRef:W,probe:x,settle:S,held:G,snapshot:te,look:A,dress:g,plain:M,wait:u>0&&!$}}exports.default=oe;

package/dist/useChipLayout.js

@@ -1,78 +1,77 @@
 "use client";
-import { useContext as j, useState as I, useSyncExternalStore as D, useRef as b, useEffectEvent as se, useLayoutEffect as g, useCallback as P, useEffect as Q } from "react";
-import { flushSync as T } from "react-dom";
-import { SelectConfigContext as oe, SelectStateContext as le, SelectActionsContext as ie, createStore as ce } from "./state.js";
-import { watchMotion as ue, reducedMotion as R, followHeight as O } from "./utils.js";
-import { sameValue as ae } from "./model.js";
-import { NONE as _, isResizing as U, freeze as E, restBreaks as X, isBusy as H, slotsOf as fe, flip as Y, snapOf as de, resizesOf as ge, resize as he } from "./chipGeometry.js";
-const me = 0.25, pe = { hoverId: null, swipedId: null, held: !1, breaks: _ }, Z = (i, c) => {
-  const s = new Set(i.map((o) => o.id)), l = new Map(c.map(([o, h]) => [h.id, o])), y = c.filter(([, o]) => !s.has(o.id)), k = new Set(c.map(([o]) => o));
-  return i.map((o) => {
-    if (l.has(o.id)) return [l.get(o.id), o];
-    const h = y.findIndex(([, S]) => ae(S.original, o.original));
-    if (h >= 0) return [y.splice(h, 1)[0][0], o];
-    let m = o.id;
-    for (; k.has(m); ) m += "~";
-    return k.add(m), [m, o];
-  });
-}, Ce = (i) => {
-  const [c, s] = I(() => ({ chips: i, keyed: Z(i, []) }));
-  if (c.chips === i) return c.keyed;
-  const l = Z(i, c.keyed);
-  return s({ chips: i, keyed: l }), l;
-};
-function Re(i) {
-  const { selectRef: c, duration: s, easing: l, deleteInline: y, deleteAlways: k, icons: o, valueAsOption: h, renderOption: m } = j(oe), { selectedIDs: S, deleting: C, visibility: F, active: x } = j(le), { setDeleting: K, setVisibility: N } = j(ie), [V, $] = I(0), [n] = I(() => ce(pe)), [ee] = I(() => /* @__PURE__ */ new Set()), W = D(n.subscribe, () => n.get().held, () => !1), z = D(n.subscribe, () => n.get().breaks, () => _), te = D(ue, R, () => !1), p = b({ rows: null, reserve: 0, chips: i, swap: !1, duration: s, easing: l }), w = b(null), f = b({ value: 0, root: "", anim: null }), a = b(null), G = b(null), q = y && !k && !C && !!o.remove, J = q ? V + me : 0, L = q && !V && i.length > 0, A = h ? m ? 2 : 1 : 0, B = se((e, t) => {
-    const r = a.current, u = p.current;
+import { useContext as D, useState as C, useSyncExternalStore as H, useRef as w, useEffectEvent as me, useCallback as Y, useLayoutEffect as a, useEffect as Z } from "react";
+import { flushSync as _ } from "react-dom";
+import { SelectConfigContext as ge, SelectStateContext as pe, SelectActionsContext as ve, createStore as he } from "./state.js";
+import { watchMotion as we, reducedMotion as b, followHeight as O } from "./utils.js";
+import { NONE as ne, freeze as y, restBreaks as $, slotsOf as be, snapRows as ye } from "./chipGeometry.js";
+import { isResizing as ee, isBusy as E, flip as te, shift as Re, snapOf as Se, padOf as Ce, repad as Oe, resizesOf as Ee, resize as ke } from "./chipMotion.js";
+const Ae = 0.25, Ie = { hoverId: null, swipedId: null, held: !1, breaks: ne };
+function De(m, { height: f, enter: re, leaving: k, onLeft: M }) {
+  const { selectRef: g, duration: o, easing: l, deleteInline: q, deleteAlways: N, icons: se, valueAsOption: oe, renderOption: ce } = D(ge), { selectedIDs: T, deleting: p, visibility: W, active: A } = D(pe), { setDeleting: G, setVisibility: K } = D(ve), [V, le] = C(0), [n] = C(() => he(Ie)), [ie] = C(() => /* @__PURE__ */ new Set()), J = H(n.subscribe, () => n.get().held, () => !1), I = H(n.subscribe, () => n.get().breaks, () => ne), ue = H(we, b, () => !1), d = w({ rows: null, reserve: 0, chips: m, swap: !1, dress: !1, wide: !1, duration: o, easing: l }), v = w(null), x = w(null), i = w(null), P = w(null), [z, ae] = C(() => !!re && o > 0 && !b()), F = k || z, Q = !!se.remove, U = q && !N && !p && Q, S = U && !F ? V + Ae : 0, j = U && !V && m.length > 0, L = F ? 3 : oe ? ce ? 2 : 1 : 0, u = Q ? (q || p ? 1 : 0) | (N || p ? 2 : 0) : 0, X = w(u), B = me((e, t) => {
+    const r = i.current, s = d.current;
     if (!r) return;
-    const v = U(r);
-    if (v && t) return;
-    e && n.get().held && E(n, r, u);
-    const d = u.swap ? u.duration / 2 : u.duration;
-    v ? u.fit != null && O(c.current, f.current, u.fit, d, u.easing, r) : (t || f.current.value) && O(c.current, f.current, r.offsetHeight, d, u.easing), n.get().held || n.set({ breaks: X(n, r, u.chips, u.reserve) });
-  });
-  g(() => {
-    Object.assign(p.current, { duration: s, easing: l });
-  }, [s, l]), g(() => {
-    const e = p.current, t = a.current, r = e.chips !== i;
-    Object.assign(e, { chips: i, reserve: J }), r && t && H(t) && E(n, t, e), B(!r);
-  }, [i, J, n]), g(() => {
+    const c = ee(r);
+    c && t || (e && n.get().held && y(n, r, s), c ? s.fit != null && O(g.current, f, s.fit, s.duration, s.easing, r) : (t || f.value) && O(g.current, f, r.offsetHeight, s.duration, s.easing), n.get().held || n.set({ breaks: $(n, r, s.chips, s.reserve) }));
+  }), R = Y(() => {
+    const e = i.current, t = d.current;
+    if (!e || !n.get().held || E(e, t.dress)) return;
+    const r = be(e), s = r.map((h) => h.getBoundingClientRect()), c = $(n, e, t.chips, t.reserve);
+    Object.assign(t, { rows: null, floor: null, fit: null, dress: !1, wide: !1 }), _(() => n.set({ held: !1, breaks: c })), t.swap = E(e), t.swap && _(() => y(n, e, t)), b() || r.forEach((h, de) => h.isConnected && te(h, s[de], t.swap ? o / 2 : o, l));
+  }, [n, o, l]);
+  a(() => {
+    Object.assign(d.current, { duration: o, easing: l });
+  }, [o, l]), a(() => {
+    const e = X.current, t = i.current, r = d.current;
+    if (X.current = u, e === u || !t || !o || b() || ((e ^ u) & 1 && Re(t, !!(u & 1), o, l, R), !((e | u) & 1) || !E(t, !0))) return;
+    const s = r.rows, c = s ?? ye(v.current);
+    Object.assign(r, { dress: !0, wide: !1, rows: c, reserve: S }), c && y(n, t, r), !(c && r.rows.length <= c.length) && (Object.assign(r, { wide: !0, rows: s }), y(n, t, r));
+  }, [u, S, n, o, l, R]), a(() => {
+    const e = d.current, t = i.current, r = e.chips !== m;
+    Object.assign(e, { chips: m, reserve: S }), r && t && E(t, e.dress) && y(n, t, e), B(!r);
+  }, [m, S, n]), a(() => {
     const e = () => B(!0, !0), t = typeof ResizeObserver > "u" ? null : new ResizeObserver(e);
-    return t ? t.observe(a.current) : e(), document.fonts?.addEventListener("loadingdone", e), () => {
+    return t ? t.observe(i.current) : e(), document.fonts?.addEventListener("loadingdone", e), () => {
       t?.disconnect(), document.fonts?.removeEventListener("loadingdone", e);
     };
   }, []);
-  const M = P(() => {
-    const e = a.current;
-    if (!e || !n.get().held || H(e)) return;
-    const t = p.current, r = fe(e), u = r.map((d) => d.getBoundingClientRect()), v = X(n, e, t.chips, t.reserve);
-    Object.assign(t, { rows: null, floor: null, fit: null }), T(() => n.set({ held: !1, breaks: v })), t.swap = H(e), t.swap && T(() => E(n, e, t)), R() || r.forEach((d, re) => d.isConnected && Y(d, u[re], t.swap ? s / 2 : s, l));
-  }, [n, s, l]), ne = P((e) => {
-    a.current && (w.current = de(a.current, e));
+  const fe = Y((e) => {
+    const t = i.current;
+    t && (v.current = Se(t, e), e && (x.current = Ce(t)));
   }, []);
-  return g(() => {
-    const e = a.current, t = p.current;
-    if (!e || !w.current || !s || R()) return;
-    const r = ge(w.current);
-    r.length && (t.floor = new Map(r.map(({ id: u, from: v }) => [u, v.width])), E(n, e, t), O(c.current, f.current, t.fit, s, l, e), he(r, s, l, () => {
-      M(), B(!1, !0);
+  return a(() => {
+    const e = i.current, t = d.current, r = x.current;
+    if (x.current = null, !e || !v.current || !o || b()) return;
+    Oe(e, r, o, l);
+    const s = Ee(v.current);
+    s.length && (t.floor = new Map(s.map(({ id: c, width: h }) => [c, h])), y(n, e, t), O(g.current, f, t.fit, o, l, e), ke(s, o, l, () => {
+      R(), B(!1, !0);
     }));
-  }, [A, n, s, l, c, M]), g(() => {
-    const e = w.current;
-    !e || z !== n.get().breaks || (w.current = null, R() || e.forEach((t, r) => r.isConnected && Y(r, t, s, l)));
-  }, [z, i, A, n, s, l]), g(() => {
-    const e = a.current, t = p.current;
-    !e || !f.current.value || U(e) || O(c.current, f.current, e.offsetHeight, t.swap ? t.duration / 2 : t.duration, t.easing);
-  }, [z, W, c]), Q(() => () => f.current.anim?.cancel(), []), Q(() => {
-    C && F && N(!1), C && (!S.length || !x) && K(!1), n.set({ hoverId: null, ...!x && { swipedId: null } });
-  }, [S.length, C, F, x, K, N, n]), g(() => {
-    const e = G.current;
-    if (!L || !e) return;
+  }, [L, n, o, l, g, R, f]), Z(() => {
+    const e = z && requestAnimationFrame(() => ae(!1));
+    return () => cancelAnimationFrame(e);
+  }, [z]), a(() => {
+    const e = i.current;
+    if (!k) return;
+    let t;
+    const r = () => n.get().held || !!e?.getAnimations({ subtree: !0 }).some((c) => c.playState === "running" && c.effect?.getComputedTiming().endTime < 1 / 0), s = () => {
+      r() ? t = requestAnimationFrame(s) : M();
+    };
+    return s(), () => cancelAnimationFrame(t);
+  }, [k, M, n]), a(() => {
+    const e = v.current;
+    !e || I !== n.get().breaks || (v.current = null, b() || e.forEach((t, r) => r.isConnected && te(r, t, o, l)));
+  }, [I, m, L, u, n, o, l]), a(() => {
+    const e = i.current, t = d.current;
+    !e || !f.value || ee(e) || O(g.current, f, e.offsetHeight, t.duration, t.easing);
+  }, [I, J, g, f]), Z(() => {
+    p && W && K(!1), p && (!T.length || !A) && G(!1), n.set({ hoverId: null, ...!A && { swipedId: null } });
+  }, [T.length, p, W, A, G, K, n]), a(() => {
+    const e = P.current;
+    if (!j || !e) return;
     const t = getComputedStyle(e);
-    $(e.getBoundingClientRect().width + parseFloat(t.marginLeft) + parseFloat(t.marginRight));
-  }, [L]), { chipStore: n, delGroup: ee, valueRef: a, delIconRef: G, probe: L, settle: M, held: W, snapshot: ne, look: A, wait: s > 0 && !te };
+    le(e.getBoundingClientRect().width + parseFloat(t.marginLeft) + parseFloat(t.marginRight));
+  }, [j]), { chipStore: n, delGroup: ie, valueRef: i, delIconRef: P, probe: j, settle: R, held: J, snapshot: fe, look: L, dress: u, plain: F, wait: o > 0 && !ue };
 }
 export {
-  Re as default,
-  Ce as useChipKeys
+  De as default
 };

package/dist/useSelectBehavior.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),L=require("./state.cjs"),D=require("./utils.cjs"),S={index:-1,fallback:-1,ready:!1},F=({index:r,fallback:f})=>r===-1?f:r,U=10,C=500,V=new Set(["ArrowDown","ArrowUp","PageDown","PageUp","Home","End"]),_=(r,f)=>h.useMemo(()=>{const c=new Set(r.map(n=>n.group).filter(Boolean)),i=n=>!!n&&!n.disabled&&!n.loading&&(n.groupHeader?c.has(n.name):!n.group||f.has(n.group));return{reach:i,list:r.flatMap((n,o)=>i(n)?[o]:[])}},[r,f]),z=(r,f,c,i)=>{const n=r.length-1;if(n<0)return-1;if(c==="Home")return r[0];if(c==="End")return r[n];const o=c==="ArrowUp"||c==="PageUp"?-1:1,l=r.indexOf(f);if(l===-1)return r[o>0?0:n];const s=l+o*(c.startsWith("Page")?U:1);return s>=0&&s<=n?r[s]:c.startsWith("Page")||i?r[s<0?0:n]:r[(s+r.length)%r.length]},R=(r,f,c,i)=>{const n=[...i].every(u=>u===i[0]),o=n?i[0]:i,l=f.filter(u=>"original"in r[u]),s=Math.max(l.indexOf(c)+(n?1:0),0);for(let u=0;u<l.length;u++){const T=l[(s+u)%l.length];if(String(r[T].name).toLowerCase().startsWith(o))return T}return-1};function I({props:r,state:f,setState:c,normalizedOptions:i,expandedGroups:n,selected:o,selectedIDs:l,visibility:s,setVisibility:u,modelActions:T,highlightStore:w}){const{disabled:E,multiple:y,hasMore:P,loadButton:k,icons:x,onFocus:q,onBlur:M,onKeyDown:A}=r,{selectOption:B,clear:W,removeOption:p}=T,{deleting:v}=f,{reach:H,list:m}=_(i,n),d=h.useRef({lastWindowFocusTime:0,justFocused:!1,focusTimeout:null,query:"",queryTimeout:null}),j=h.useMemo(()=>{const e=new Set(y?l.map(a=>a.id):o?[o.id]:[]),t=e.size?i.findIndex(a=>e.has(a.id)&&H(a)):-1;return t!==-1?t:m.find(a=>!i[a].groupHeader)??m[0]??-1},[i,o,l,y,H,m]);h.useLayoutEffect(()=>{const{index:e}=w.get();w.set({fallback:j,index:e!==-1&&H(i[e])?e:-1})}),h.useEffect(()=>{const e=d.current,t=()=>e.lastWindowFocusTime=Date.now();return window.addEventListener("focus",t),()=>{window.removeEventListener("focus",t),clearTimeout(e.focusTimeout),clearTimeout(e.queryTimeout)}},[]);const b=e=>w.set({index:e}),K=(e,t)=>{const a=d.current;clearTimeout(a.queryTimeout),a.queryTimeout=setTimeout(()=>a.query="",C),a.query+=e.toLowerCase();const g=R(i,m,t,a.query);g!==-1&&b(g),s||u(!0)};return L.useStableActions({highlight:b,handleBlur:e=>{const t=e.relatedTarget?.closest(".rac-options");e.currentTarget.contains(e.relatedTarget)||t||(M?.(e),v&&c({deleting:!1}),s&&u(!1))},handleFocus:e=>{const t=e.currentTarget.contains(e.relatedTarget);t||q?.(e),!(t||e.target!==e.currentTarget||s||E||v||document.hidden||Date.now()-d.current.lastWindowFocusTime<100)&&(clearTimeout(d.current.focusTimeout),d.current.focusTimeout=setTimeout(()=>d.current.justFocused=!1,200),d.current.justFocused=!0,u(!0))},toggleVisibility:e=>{if(v){D.stopEvent(e),c({deleting:!1});return}E||d.current.justFocused||u(!s)},handleKeyDown:e=>{if(A?.(e),e.defaultPrevented||E||e.nativeEvent?.isComposing)return;const{key:t}=e;if(e.target!==e.currentTarget&&(t==="Enter"||t.length===1))return;const a=F(w.get());if(t.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(t!==" "||d.current.query)){e.preventDefault(),K(t,a);return}if(V.has(t)){e.preventDefault(),(s||t==="Home"||t==="End")&&b(z(m,a,t,!k&&P)),s||u(!0);return}switch(t){case"Enter":case" ":e.preventDefault(),s?a!==-1&&i[a]&&(b(a),B(i[a],e)):u(!0);break;case"Escape":if(v)c({deleting:!1});else if(s)u(!1);else break;D.stopEvent(e);break;case"Tab":s&&u(!1);break;case"Backspace":case"Delete":{const g=l.at(-1);if(y&&t==="Backspace"&&x.remove&&g)p(g.id);else if(x.clear&&(o||g))W();else break;e.preventDefault();break}}}})}exports.default=I;exports.effectiveHighlight=F;exports.initialHighlight=S;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react"),L=require("./state.cjs"),M=require("./utils.cjs"),S={index:-1,fallback:-1,ready:!1},D=({index:r,fallback:l})=>r===-1?l:r,U=10,C=500,V=new Set(["ArrowDown","ArrowUp","PageDown","PageUp","Home","End"]),_=(r,l)=>T.useMemo(()=>{const c=new Set(r.map(s=>s.group).filter(Boolean)),i=s=>!!s&&!s.disabled&&!s.loading&&(s.groupHeader?c.has(s.name):!s.group||l.has(s.group));return{reach:i,list:r.flatMap((s,f)=>i(s)?[f]:[])}},[r,l]),z=(r,l,c,i)=>{const s=r.length-1;if(s<0)return-1;if(c==="Home")return r[0];if(c==="End")return r[s];const f=c==="ArrowUp"||c==="PageUp"?-1:1,u=r.findIndex(h=>h>=l),a=(r[u]===l?u:(u===-1?r.length:u)-(f>0?1:0))+f*(c.startsWith("Page")?U:1);return a>=0&&a<=s?r[a]:c.startsWith("Page")||i?r[a<0?0:s]:r[(a+r.length)%r.length]},I=(r,l,c,i)=>{const s=[...i].every(a=>a===i[0]),f=s?i[0]:i,u=l.filter(a=>"original"in r[a]),o=Math.max(u.indexOf(c)+(s?1:0),0);for(let a=0;a<u.length;a++){const h=u[(o+a)%u.length];if(String(r[h].name).toLowerCase().startsWith(f))return h}return-1};function R({props:r,state:l,setState:c,normalizedOptions:i,expandedGroups:s,selected:f,selectedIDs:u,visibility:o,setVisibility:a,modelActions:h,highlightStore:w}){const{disabled:E,multiple:y,hasMore:F,loadButton:P,icons:H,onFocus:k,onBlur:q,onKeyDown:A}=r,{selectOption:B,clear:W,removeOption:j}=h,{deleting:v}=l,{reach:x,list:m}=_(i,s),d=T.useRef({lastWindowFocusTime:0,justFocused:!1,focusTimeout:null,query:"",queryTimeout:null,row:-1}),p=T.useMemo(()=>{const e=new Set(y?u.map(n=>n.id):f?[f.id]:[]),t=e.size?i.findIndex(n=>e.has(n.id)&&x(n)):-1;return t!==-1?t:m.find(n=>!i[n].groupHeader)??m[0]??-1},[i,f,u,y,x,m]);T.useLayoutEffect(()=>{const{index:e}=w.get(),{row:t}=d.current,n=e===-1||x(i[e])||i[e]?.loadMore?e:e===t?m.find(g=>g>t)??m.at(-1)??-1:-1;d.current.row=i[n]?.loadMore?n:-1,w.set({fallback:p,index:n})}),T.useEffect(()=>{const e=d.current,t=()=>e.lastWindowFocusTime=Date.now();return window.addEventListener("focus",t),()=>{window.removeEventListener("focus",t),clearTimeout(e.focusTimeout),clearTimeout(e.queryTimeout)}},[]);const b=e=>w.set({index:e}),K=(e,t)=>{const n=d.current;clearTimeout(n.queryTimeout),n.queryTimeout=setTimeout(()=>n.query="",C),n.query+=e.toLowerCase();const g=I(i,m,t,n.query);g!==-1&&b(g),o||a(!0)};return L.useStableActions({highlight:b,handleBlur:e=>{const t=e.relatedTarget?.closest(".rac-options");e.currentTarget.contains(e.relatedTarget)||t||(q?.(e),v&&c({deleting:!1}),o&&a(!1))},handleFocus:e=>{const t=e.currentTarget.contains(e.relatedTarget);t||k?.(e),!(t||e.target!==e.currentTarget||o||E||v||document.hidden||Date.now()-d.current.lastWindowFocusTime<100)&&(clearTimeout(d.current.focusTimeout),d.current.focusTimeout=setTimeout(()=>d.current.justFocused=!1,200),d.current.justFocused=!0,a(!0))},toggleVisibility:e=>{if(v){M.stopEvent(e),c({deleting:!1});return}E||d.current.justFocused||a(!o)},handleKeyDown:e=>{if(A?.(e),e.defaultPrevented||E||e.nativeEvent?.isComposing)return;const{key:t}=e;if(e.target!==e.currentTarget&&(t==="Enter"||t.length===1))return;const n=D(w.get());if(t.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(t!==" "||d.current.query)){e.preventDefault(),K(t,n);return}if(V.has(t)){e.preventDefault(),(o||t==="Home"||t==="End")&&b(z(m,n,t,!P&&F)),o||a(!0);return}switch(t){case"Enter":case" ":e.preventDefault(),o?n!==-1&&i[n]&&(b(n),B(i[n],e)):a(!0);break;case"Escape":if(v)c({deleting:!1});else if(o)a(!1);else break;M.stopEvent(e);break;case"Tab":o&&a(!1);break;case"Backspace":case"Delete":{const g=u.at(-1);if(y&&t==="Backspace"&&H.remove&&g)j(g.id);else if(H.clear&&(f||g))W();else break;e.preventDefault();break}}}})}exports.default=R;exports.effectiveHighlight=D;exports.initialHighlight=S;

package/dist/useSelectBehavior.js

@@ -2,98 +2,96 @@
 import { useMemo as F, useRef as L, useLayoutEffect as j, useEffect as U } from "react";
 import { useStableActions as C } from "./state.js";
 import { stopEvent as D } from "./utils.js";
-const Q = { index: -1, fallback: -1, ready: !1 }, S = ({ index: r, fallback: f }) => r === -1 ? f : r, V = 10, z = 500, R = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End"]), I = (r, f) => F(() => {
-  const u = new Set(r.map((n) => n.group).filter(Boolean)), i = (n) => !!n && !n.disabled && !n.loading && (n.groupHeader ? u.has(n.name) : !n.group || f.has(n.group));
-  return { reach: i, list: r.flatMap((n, o) => i(n) ? [o] : []) };
-}, [r, f]), Y = (r, f, u, i) => {
-  const n = r.length - 1;
-  if (n < 0) return -1;
-  if (u === "Home") return r[0];
-  if (u === "End") return r[n];
-  const o = u === "ArrowUp" || u === "PageUp" ? -1 : 1, l = r.indexOf(f);
-  if (l === -1) return r[o > 0 ? 0 : n];
-  const s = l + o * (u.startsWith("Page") ? V : 1);
-  return s >= 0 && s <= n ? r[s] : u.startsWith("Page") || i ? r[s < 0 ? 0 : n] : r[(s + r.length) % r.length];
-}, _ = (r, f, u, i) => {
-  const n = [...i].every((c) => c === i[0]), o = n ? i[0] : i, l = f.filter((c) => "original" in r[c]), s = Math.max(l.indexOf(u) + (n ? 1 : 0), 0);
-  for (let c = 0; c < l.length; c++) {
-    const h = l[(s + c) % l.length];
-    if (String(r[h].name).toLowerCase().startsWith(o)) return h;
+const Q = { index: -1, fallback: -1, ready: !1 }, S = ({ index: r, fallback: l }) => r === -1 ? l : r, V = 10, z = 500, I = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End"]), R = (r, l) => F(() => {
+  const s = new Set(r.map((o) => o.group).filter(Boolean)), c = (o) => !!o && !o.disabled && !o.loading && (o.groupHeader ? s.has(o.name) : !o.group || l.has(o.group));
+  return { reach: c, list: r.flatMap((o, f) => c(o) ? [f] : []) };
+}, [r, l]), Y = (r, l, s, c) => {
+  const o = r.length - 1;
+  if (o < 0) return -1;
+  if (s === "Home") return r[0];
+  if (s === "End") return r[o];
+  const f = s === "ArrowUp" || s === "PageUp" ? -1 : 1, i = r.findIndex((h) => h >= l), a = (r[i] === l ? i : (i === -1 ? r.length : i) - (f > 0 ? 1 : 0)) + f * (s.startsWith("Page") ? V : 1);
+  return a >= 0 && a <= o ? r[a] : s.startsWith("Page") || c ? r[a < 0 ? 0 : o] : r[(a + r.length) % r.length];
+}, _ = (r, l, s, c) => {
+  const o = [...c].every((a) => a === c[0]), f = o ? c[0] : c, i = l.filter((a) => "original" in r[a]), u = Math.max(i.indexOf(s) + (o ? 1 : 0), 0);
+  for (let a = 0; a < i.length; a++) {
+    const h = i[(u + a) % i.length];
+    if (String(r[h].name).toLowerCase().startsWith(f)) return h;
   }
   return -1;
 };
-function X({ props: r, state: f, setState: u, normalizedOptions: i, expandedGroups: n, selected: o, selectedIDs: l, visibility: s, setVisibility: c, modelActions: h, highlightStore: T }) {
-  const { disabled: v, multiple: E, hasMore: k, loadButton: H, icons: x, onFocus: P, onBlur: p, onKeyDown: A } = r, { selectOption: B, clear: W, removeOption: q } = h, { deleting: w } = f, { reach: y, list: g } = I(i, n), d = L({ lastWindowFocusTime: 0, justFocused: !1, focusTimeout: null, query: "", queryTimeout: null }), M = F(() => {
-    const e = new Set(E ? l.map((a) => a.id) : o ? [o.id] : []), t = e.size ? i.findIndex((a) => e.has(a.id) && y(a)) : -1;
-    return t !== -1 ? t : g.find((a) => !i[a].groupHeader) ?? g[0] ?? -1;
-  }, [i, o, l, E, y, g]);
+function X({ props: r, state: l, setState: s, normalizedOptions: c, expandedGroups: o, selected: f, selectedIDs: i, visibility: u, setVisibility: a, modelActions: h, highlightStore: w }) {
+  const { disabled: v, multiple: E, hasMore: k, loadButton: H, icons: x, onFocus: P, onBlur: M, onKeyDown: p } = r, { selectOption: A, clear: B, removeOption: W } = h, { deleting: T } = l, { reach: y, list: g } = R(c, o), d = L({ lastWindowFocusTime: 0, justFocused: !1, focusTimeout: null, query: "", queryTimeout: null, row: -1 }), q = F(() => {
+    const e = new Set(E ? i.map((n) => n.id) : f ? [f.id] : []), t = e.size ? c.findIndex((n) => e.has(n.id) && y(n)) : -1;
+    return t !== -1 ? t : g.find((n) => !c[n].groupHeader) ?? g[0] ?? -1;
+  }, [c, f, i, E, y, g]);
   j(() => {
-    const { index: e } = T.get();
-    T.set({ fallback: M, index: e !== -1 && y(i[e]) ? e : -1 });
+    const { index: e } = w.get(), { row: t } = d.current, n = e === -1 || y(c[e]) || c[e]?.loadMore ? e : e === t ? g.find((m) => m > t) ?? g.at(-1) ?? -1 : -1;
+    d.current.row = c[n]?.loadMore ? n : -1, w.set({ fallback: q, index: n });
   }), U(() => {
     const e = d.current, t = () => e.lastWindowFocusTime = Date.now();
     return window.addEventListener("focus", t), () => {
       window.removeEventListener("focus", t), clearTimeout(e.focusTimeout), clearTimeout(e.queryTimeout);
     };
   }, []);
-  const b = (e) => T.set({ index: e }), K = (e, t) => {
-    const a = d.current;
-    clearTimeout(a.queryTimeout), a.queryTimeout = setTimeout(() => a.query = "", z), a.query += e.toLowerCase();
-    const m = _(i, g, t, a.query);
-    m !== -1 && b(m), s || c(!0);
+  const b = (e) => w.set({ index: e }), K = (e, t) => {
+    const n = d.current;
+    clearTimeout(n.queryTimeout), n.queryTimeout = setTimeout(() => n.query = "", z), n.query += e.toLowerCase();
+    const m = _(c, g, t, n.query);
+    m !== -1 && b(m), u || a(!0);
   };
   return C({
     highlight: b,
     handleBlur: (e) => {
       const t = e.relatedTarget?.closest(".rac-options");
-      e.currentTarget.contains(e.relatedTarget) || t || (p?.(e), w && u({ deleting: !1 }), s && c(!1));
+      e.currentTarget.contains(e.relatedTarget) || t || (M?.(e), T && s({ deleting: !1 }), u && a(!1));
     },
     // [DOC: select-behavior]
     handleFocus: (e) => {
       const t = e.currentTarget.contains(e.relatedTarget);
-      t || P?.(e), !(t || e.target !== e.currentTarget || s || v || w || document.hidden || Date.now() - d.current.lastWindowFocusTime < 100) && (clearTimeout(d.current.focusTimeout), d.current.focusTimeout = setTimeout(() => d.current.justFocused = !1, 200), d.current.justFocused = !0, c(!0));
+      t || P?.(e), !(t || e.target !== e.currentTarget || u || v || T || document.hidden || Date.now() - d.current.lastWindowFocusTime < 100) && (clearTimeout(d.current.focusTimeout), d.current.focusTimeout = setTimeout(() => d.current.justFocused = !1, 200), d.current.justFocused = !0, a(!0));
     },
     toggleVisibility: (e) => {
-      if (w) {
-        D(e), u({ deleting: !1 });
+      if (T) {
+        D(e), s({ deleting: !1 });
         return;
       }
-      v || d.current.justFocused || c(!s);
+      v || d.current.justFocused || a(!u);
     },
     handleKeyDown: (e) => {
-      if (A?.(e), e.defaultPrevented || v || e.nativeEvent?.isComposing) return;
+      if (p?.(e), e.defaultPrevented || v || e.nativeEvent?.isComposing) return;
       const { key: t } = e;
       if (e.target !== e.currentTarget && (t === "Enter" || t.length === 1)) return;
-      const a = S(T.get());
+      const n = S(w.get());
       if (t.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (t !== " " || d.current.query)) {
-        e.preventDefault(), K(t, a);
+        e.preventDefault(), K(t, n);
         return;
       }
-      if (R.has(t)) {
-        e.preventDefault(), (s || t === "Home" || t === "End") && b(Y(g, a, t, !H && k)), s || c(!0);
+      if (I.has(t)) {
+        e.preventDefault(), (u || t === "Home" || t === "End") && b(Y(g, n, t, !H && k)), u || a(!0);
         return;
       }
       switch (t) {
         case "Enter":
         case " ":
-          e.preventDefault(), s ? a !== -1 && i[a] && (b(a), B(i[a], e)) : c(!0);
+          e.preventDefault(), u ? n !== -1 && c[n] && (b(n), A(c[n], e)) : a(!0);
           break;
         // [DOC: select-behavior]
         case "Escape":
-          if (w) u({ deleting: !1 });
-          else if (s) c(!1);
+          if (T) s({ deleting: !1 });
+          else if (u) a(!1);
           else break;
           D(e);
           break;
         case "Tab":
-          s && c(!1);
+          u && a(!1);
           break;
         // [DOC: select-behavior]
         case "Backspace":
         case "Delete": {
-          const m = l.at(-1);
-          if (E && t === "Backspace" && x.remove && m) q(m.id);
-          else if (x.clear && (o || m)) W();
+          const m = i.at(-1);
+          if (E && t === "Backspace" && x.remove && m) W(m.id);
+          else if (x.clear && (f || m)) B();
           else break;
           e.preventDefault();
           break;

package/dist/utils.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),p={XMark:({className:t="",...e})=>n.jsx("svg",{className:t,viewBox:"0 0 320 512",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...e,children:n.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:t="",...e})=>n.jsx("svg",{className:t,viewBox:"0 0 448 512",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...e,children:n.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:t="",...e})=>n.jsx("svg",{className:t,viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...e,children:n.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"})})},j=(t,e)=>{if(!t)return null;const i=(s={})=>({...e,...s,style:{...e?.style,...s?.style}});if(typeof t=="string")return n.jsx("img",{src:t,...i(),className:u("rac-icon",e?.className),alt:""});if(d.isValidElement(t))return d.cloneElement(t,i(t.props));if(typeof t=="function"||typeof t=="object"&&t.$$typeof){const s=t;return n.jsx(s,{...i()})}return null},v=(t,e)=>`${t}-${String(e).replace(/[^A-Za-z0-9-]/gu,i=>`_${i.codePointAt(0).toString(36)}_`)}`,m=t=>t?"":void 0,u=(t,e)=>e?`${t} ${e}`:t,y=(t,e,i)=>t.jsx||(e&&"original"in t?e(t.original,{selected:i,disabled:!!t.disabled}):null),E=n.jsxs("span",{className:"rac-dots","aria-hidden":"true",children:[n.jsx("i",{}),n.jsx("i",{}),n.jsx("i",{})]}),C=(()=>{try{return process.env.NODE_ENV!=="production"}catch{return!1}})(),h=new Set,M=(t,e)=>{!C||h.has(t)||(h.add(t),console.warn(`[react-animated-select] ${e}`))},b=t=>{t?.stopPropagation(),t?.preventDefault()},$=(t,e)=>{t?.currentTarget.contains(document.activeElement)&&e.current?.focus()},g="(prefers-reduced-motion: reduce)",f=()=>!!window.matchMedia?.(g).matches,S=t=>{const e=window.matchMedia?.(g);return e?.addEventListener("change",t),()=>e?.removeEventListener("change",t)},D=(t,e,i,s,w,r)=>{if(!t||i===e.value)return;const o=getComputedStyle(t),c=e.anim?o.height:e.root;e.anim?.cancel(),r&&Object.assign(r.style,{height:`${i}px`,boxSizing:"border-box"}),e.root=o.height,r&&Object.assign(r.style,{height:"",boxSizing:""});const x=!e.value||c===e.root||!t.animate||f();if(e.value=i,e.anim=null,x)return;const a={overflow:"hidden",alignItems:"flex-start"},l=e.anim=t.animate([{...a,height:c},{...a,height:e.root}],{duration:s,easing:w});l.onfinish=()=>{e.anim===l&&(e.anim=null)}};exports.dots=E;exports.flag=m;exports.followHeight=D;exports.icons=p;exports.optionContent=y;exports.optionDomId=v;exports.reducedMotion=f;exports.refocus=$;exports.renderIcon=j;exports.stopEvent=b;exports.warnOnce=M;exports.watchMotion=S;exports.withClass=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),p={XMark:({className:t="",...e})=>n.jsx("svg",{className:t,viewBox:"0 0 320 512",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...e,children:n.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:t="",...e})=>n.jsx("svg",{className:t,viewBox:"0 0 448 512",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...e,children:n.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:t="",...e})=>n.jsx("svg",{className:t,viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...e,children:n.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"})})},j=(t,e)=>{if(!t)return null;const i=(r={})=>({...e,...r,style:{...e?.style,...r?.style}});if(typeof t=="string")return n.jsx("img",{src:t,...i(),className:u("rac-icon",e?.className),alt:""});if(d.isValidElement(t))return d.cloneElement(t,i(t.props));if(typeof t=="function"||typeof t=="object"&&t.$$typeof){const r=t;return n.jsx(r,{...i()})}return null},v=(t,e)=>`${t}-${String(e).replace(/[^A-Za-z0-9-]/gu,i=>`_${i.codePointAt(0).toString(36)}_`)}`,m=t=>t?"":void 0,u=(t,e)=>e?`${t} ${e}`:t,y=(t,e,i)=>t.jsx||(e&&"original"in t?e(t.original,{selected:i,disabled:!!t.disabled}):null),E=n.jsxs("span",{className:"rac-dots","aria-hidden":"true",children:[n.jsx("i",{}),n.jsx("i",{}),n.jsx("i",{})]}),C=(()=>{try{return process.env.NODE_ENV!=="production"}catch{return!1}})(),h=new Set,M=(t,e)=>{!C||h.has(t)||(h.add(t),console.warn(`[react-animated-select] ${e}`))},b=t=>{t?.stopPropagation(),t?.preventDefault()},S=(t,e)=>{t?.currentTarget.contains(document.activeElement)&&e.current?.focus()},g="(prefers-reduced-motion: reduce)",f=()=>!!window.matchMedia?.(g).matches,$=t=>{const e=window.matchMedia?.(g);return e?.addEventListener("change",t),()=>e?.removeEventListener("change",t)},D=(t,e,i,r,w,s)=>{if(!t||i===e.value)return;const o=getComputedStyle(t),c=e.anim?.playState==="running"?o.height:e.root;e.anim?.cancel(),s&&Object.assign(s.style,{height:`${i}px`,boxSizing:"border-box"}),e.root=o.height,s&&Object.assign(s.style,{height:"",boxSizing:""});const x=!e.value||c===e.root||!t.animate||f();if(e.value=i,e.anim=null,x)return;const a={overflow:"hidden",alignItems:"flex-start"},l=e.anim=t.animate([{...a,height:c},{...a,height:e.root}],{duration:r,easing:w});l.onfinish=()=>{e.anim===l&&(e.anim=null)}};exports.dots=E;exports.flag=m;exports.followHeight=D;exports.icons=p;exports.optionContent=y;exports.optionDomId=v;exports.reducedMotion=f;exports.refocus=S;exports.renderIcon=j;exports.stopEvent=b;exports.warnOnce=M;exports.watchMotion=$;exports.withClass=u;