react-animated-select 0.7.7 → 0.8.0

package/dist/useSelectBehavior.js

@@ -0,0 +1,109 @@
+"use client";
+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;
+  }
+  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]);
+  j(() => {
+    const { index: e } = T.get();
+    T.set({ fallback: M, index: e !== -1 && y(i[e]) ? e : -1 });
+  }), 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);
+  };
+  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));
+    },
+    // [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));
+    },
+    toggleVisibility: (e) => {
+      if (w) {
+        D(e), u({ deleting: !1 });
+        return;
+      }
+      v || d.current.justFocused || c(!s);
+    },
+    handleKeyDown: (e) => {
+      if (A?.(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());
+      if (t.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (t !== " " || d.current.query)) {
+        e.preventDefault(), K(t, a);
+        return;
+      }
+      if (R.has(t)) {
+        e.preventDefault(), (s || t === "Home" || t === "End") && b(Y(g, a, t, !H && k)), s || c(!0);
+        return;
+      }
+      switch (t) {
+        case "Enter":
+        case " ":
+          e.preventDefault(), s ? a !== -1 && i[a] && (b(a), B(i[a], e)) : c(!0);
+          break;
+        // [DOC: select-behavior]
+        case "Escape":
+          if (w) u({ deleting: !1 });
+          else if (s) c(!1);
+          else break;
+          D(e);
+          break;
+        case "Tab":
+          s && c(!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();
+          else break;
+          e.preventDefault();
+          break;
+        }
+      }
+    }
+  });
+}
+export {
+  X as default,
+  S as effectiveHighlight,
+  Q as initialHighlight
+};

package/dist/useSelectModel.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./model.cjs"),O=require("./state.cjs"),b=require("./utils.cjs"),c=require("react"),I=[];function oe({props:m,jsxOptions:G,state:X,setState:y,ext:q,setVisibility:C,loadMoreOnce:Y}){const{onChange:Z,disabled:S,loading:E,error:w,multiple:n,childrenFirst:A,groupsClosed:D,hasMore:P,loadButton:T,placeholder:_,selectedText:g,texts:i}=m,{disabledOption:k,emptyOption:V,invalidOption:z,emptyGroup:H,loadMore:K,loadingMore:N}=i,{loadPending:j,internalValue:$,toggledGroups:x,picked:B}=X,F=O.useDeepStable(m.options),J=O.useDeepStable(m.value),L=J!==void 0,s=L?J:$,Q=c.useMemo(()=>q.row?.({hasMore:P,loadButton:T,loadPending:j,moreText:K,pendingText:N})??null,[q,P,T,j,K,N]),o=c.useMemo(()=>h.normalizeOptions({options:F,jsxOptions:G,childrenFirst:A,tail:Q,emptyOption:V,invalidOption:z,disabledOption:k,emptyGroup:H}),[F,G,A,Q,V,z,k,H]),ee=c.useMemo(()=>new Set(o.filter(e=>e.groupHeader&&!e.disabled&&D===x.has(e.name)).map(e=>e.name)),[o,x,D]),{selected:r,selectedIDs:d}=c.useMemo(()=>h.resolveSelection(s,o,n,B),[s,o,n,B]),p=o.length>0,te=!S&&p,f=s!=null&&!(Array.isArray(s)&&!s.length)&&!(h.isPlain(s)&&!Object.keys(s).length),le=f&&g?null:r,ne=c.useMemo(()=>f&&g?g:r?r.name:w?i.error:E?i.loading:S?i.disabled:p?_:i.empty,[w,E,S,f,g,r,p,_,i]),R=e=>y(t=>{const l=new Set(t.toggledGroups);return l.has(e)?l.delete(e):l.add(e),{toggledGroups:l}}),v=(e,t,l)=>{y(L?{picked:l}:{internalValue:e,picked:l}),Z?.(e,t)},U=e=>v(e.map(t=>t.original),e.map(t=>t.userId),e.map(t=>t.id)),se=O.useStableActions({toggleGroup:R,selectOption:(e,t)=>{if(e.groupHeader){b.stopEvent(t),e.disabled||R(e.name);return}if(e.disabled||e.loadMore){b.stopEvent(t),e.loadMore&&!e.loading&&Y();return}if(n){b.stopEvent(t);const l=d.some(a=>a.id===e.id);U(l?d.filter(a=>a.id!==e.id):[...d,e]);return}r?.id!==e.id&&v(e.original,e.userId,[e.id]),C(!1)},clear:e=>{b.stopEvent(e),v(n?[]:null,n?[]:null,I)},removeOption:e=>U(d.filter(t=>t.id!==e)),reset:()=>{y({deleting:!1,invalid:!1}),C(!1);const e=n?[]:null,t=m.defaultValue??e,{selected:l,selectedIDs:a}=h.resolveSelection(t,o,n,I),M=n?a:l?[l]:[],W=n?d:r?[r]:[];O.deepEqual(s??e,t)&&M.length===W.length&&M.every((u,re)=>u.id===W[re].id)||v(t,n?M.map(u=>u.userId):l?.userId??null,M.map(u=>u.id))}});return{normalizedOptions:o,expandedGroups:ee,selected:r,selectedIDs:d,hasOptions:p,active:te,hasActualValue:f,title:ne,valueOption:le,actions:se}}exports.NO_PICK=I;exports.default=oe;

package/dist/useSelectModel.js

@@ -0,0 +1,59 @@
+"use client";
+import { normalizeOptions as oe, resolveSelection as R, isPlain as de } from "./model.js";
+import { useDeepStable as U, useStableActions as ie, deepEqual as ae } from "./state.js";
+import { stopEvent as O } from "./utils.js";
+import { useMemo as c } from "react";
+const W = [];
+function ge({ props: m, jsxOptions: M, state: X, setState: b, ext: I, setVisibility: G, loadMoreOnce: Y }) {
+  const { onChange: Z, disabled: y, loading: S, error: w, multiple: n, childrenFirst: A, groupsClosed: C, hasMore: k, loadButton: D, placeholder: T, selectedText: f, texts: d } = m, { disabledOption: V, emptyOption: x, invalidOption: z, emptyGroup: E, loadMore: H, loadingMore: P } = d, { loadPending: q, internalValue: $, toggledGroups: B, picked: F } = X, K = U(m.options), N = U(m.value), _ = N !== void 0, r = _ ? N : $, j = c(() => I.row?.({ hasMore: k, loadButton: D, loadPending: q, moreText: H, pendingText: P }) ?? null, [I, k, D, q, H, P]), o = c(() => oe({
+    options: K,
+    jsxOptions: M,
+    childrenFirst: A,
+    tail: j,
+    emptyOption: x,
+    invalidOption: z,
+    disabledOption: V,
+    emptyGroup: E
+  }), [K, M, A, j, x, z, V, E]), ee = c(() => new Set(
+    o.filter((e) => e.groupHeader && !e.disabled && C === B.has(e.name)).map((e) => e.name)
+  ), [o, B, C]), { selected: s, selectedIDs: i } = c(() => R(r, o, n, F), [r, o, n, F]), g = o.length > 0, le = !y && g, p = r != null && !(Array.isArray(r) && !r.length) && !(de(r) && !Object.keys(r).length), te = p && f ? null : s, ne = c(() => p && f ? f : s ? s.name : w ? d.error : S ? d.loading : y ? d.disabled : g ? T : d.empty, [w, S, y, p, f, s, g, T, d]), J = (e) => b((l) => {
+    const t = new Set(l.toggledGroups);
+    return t.has(e) ? t.delete(e) : t.add(e), { toggledGroups: t };
+  }), h = (e, l, t) => {
+    b(_ ? { picked: t } : { internalValue: e, picked: t }), Z?.(e, l);
+  }, L = (e) => h(e.map((l) => l.original), e.map((l) => l.userId), e.map((l) => l.id)), re = ie({
+    toggleGroup: J,
+    selectOption: (e, l) => {
+      if (e.groupHeader) {
+        O(l), e.disabled || J(e.name);
+        return;
+      }
+      if (e.disabled || e.loadMore) {
+        O(l), e.loadMore && !e.loading && Y();
+        return;
+      }
+      if (n) {
+        O(l);
+        const t = i.some((a) => a.id === e.id);
+        L(t ? i.filter((a) => a.id !== e.id) : [...i, e]);
+        return;
+      }
+      s?.id !== e.id && h(e.original, e.userId, [e.id]), G(!1);
+    },
+    clear: (e) => {
+      O(e), h(n ? [] : null, n ? [] : null, W);
+    },
+    removeOption: (e) => L(i.filter((l) => l.id !== e)),
+    // [DOC: form-field]
+    reset: () => {
+      b({ deleting: !1, invalid: !1 }), G(!1);
+      const e = n ? [] : null, l = m.defaultValue ?? e, { selected: t, selectedIDs: a } = R(l, o, n, W), v = n ? a : t ? [t] : [], Q = n ? i : s ? [s] : [];
+      ae(r ?? e, l) && v.length === Q.length && v.every((u, se) => u.id === Q[se].id) || h(l, n ? v.map((u) => u.userId) : t?.userId ?? null, v.map((u) => u.id));
+    }
+  });
+  return { normalizedOptions: o, expandedGroups: ee, selected: s, selectedIDs: i, hasOptions: g, active: le, hasActualValue: p, title: ne, valueOption: te, actions: re };
+}
+export {
+  W as NO_PICK,
+  ge as default
+};

package/dist/utils.cjs

@@ -0,0 +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;

package/dist/utils.js

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

package/index.d.ts

@@ -1,4 +1,7 @@
-import {FC, FunctionComponent, ReactNode, CSSProperties, ElementType, Ref, FocusEvent, AriaAttributes} from 'react'
+import {FC, FunctionComponent, ReactNode, CSSProperties, ElementType, Ref, FocusEvent, KeyboardEvent, AriaAttributes} from 'react'
+
+/** Live region message: a template with {label} / {n}, or a function for plural forms. */
+export type LiveText = string | ((value: string | number) => string)
 
 export interface SelectTexts {
     empty: string
@@ -13,7 +16,21 @@ export interface SelectTexts {
     invalidOption: string
     disabledOption: string
     emptyGroup: string
+    /** State word in a group header's accessible name. Default `'expanded'`. */
+    groupOpen: string
+    /** State word in a group header's accessible name. Default `'collapsed'`. */
+    groupClosed: string
     list: string
+    /** Validation bubble text of an empty required Select; default: the browser's own. */
+    required?: string
+    /** Default `'Removed {label}'`. */
+    removed?: LiveText
+    /** Default `'Selection cleared'`. */
+    cleared?: LiveText
+    /** Default `'{n} selected'`. */
+    selected?: LiveText
+    /** Default `'{n} more options loaded'`. */
+    loaded?: LiveText
 }
 
 export type SelectIcon = ElementType | string | ReactNode | null | false
@@ -32,9 +49,13 @@ export interface SelectProps extends AriaAttributes {
     ref?: Ref<HTMLDivElement>
     children?: ReactNode
 
+    /** 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/>). */
     options?: any[] | Record<string, any>
+    /** undefined = uncontrolled; keep one mode, clear a controlled Select with null / [] (a switch warns in dev). */
     value?: any
+    /** Initial value of an uncontrolled Select; also the target of form.reset(), in both modes, with or without name. */
     defaultValue?: any
+    /** 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. */
     onChange?: (value: any, ids: any) => void
     multiple?: boolean
     childrenFirst?: boolean
@@ -46,11 +67,17 @@ export interface SelectProps extends AriaAttributes {
 
     open?: boolean
     onOpenChange?: (open: boolean) => void
+    /** false: no panel, a tag list: role="group" without the combobox ARIA, never opens, no arrow; chip deletion and clear keep working. Default true. */
+    popup?: boolean
     onFocus?: (e: FocusEvent<HTMLDivElement>) => void
     onBlur?: (e: FocusEvent<HTMLDivElement>) => void
+    /** Runs before the Select handles a key; event.preventDefault() makes the Select skip it. */
+    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void
 
     id?: string
     name?: string
+    /** Id of the owner <form>, like <select form="id">: submits and resets with it even when placed outside. */
+    form?: string
     required?: boolean
 
     hasMore?: boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animated-select",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "type": "module",
   "author": {
     "name": "l1nway",
@@ -39,20 +39,20 @@
     "prepublishOnly": "npm run build"
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.es.js",
+  "module": "./dist/index.js",
   "types": "./index.d.ts",
   "exports": {
     ".": {
       "import": {
         "types": "./index.d.ts",
-        "default": "./dist/index.es.js"
+        "default": "./dist/index.js"
       },
       "require": {
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
     },
-    "./style.css": "./dist/index.css",
+    "./style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
   "sideEffects": [

package/dist/index.css

@@ -1 +0,0 @@
-@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{max-width:calc(100% - .25px);white-space:nowrap}.rac-title,.rac-chip-text,.rac-chip>.rac-option-jsx{min-width:0;overflow-x:clip}.rac-title,.rac-chip-text{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,.rac-chip-del{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}.rac-chip-slot{display:flex;align-items:center;max-width:100%}.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}.rac-chip-del:disabled{cursor:inherit}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{position:relative}@media(any-pointer:coarse){.rac-clear{position:relative}.rac-arrow{pointer-events:none}.rac-clear:before,.rac-chip-del:before{content:"";position:absolute;inset:min(0px,50% - 12px)}}.rac-spacer{flex-basis:100%;height:0;margin-inline-end:1px}.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}}}@layer rac.base,rac.theme;@layer rac.theme{:root{--rac-bg: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-fg: CanvasText;--rac-danger: #e7000b;--rac-success: #4caf50;--rac-radius: 0px}.rac-select,.rac-options{--rac-tint-1: color-mix(in srgb, var(--rac-fg) 5%, var(--rac-bg));--rac-tint-2: color-mix(in srgb, var(--rac-fg) 10%, var(--rac-bg));--rac-tint-3: color-mix(in srgb, var(--rac-fg) 20%, var(--rac-bg));--rac-muted: color-mix(in srgb, var(--rac-fg) 55%, var(--rac-bg))}.rac-select,.rac-options{border-radius:var(--rac-radius)}.rac-select{padding:0 .5em;border:2px solid var(--rac-bg);background-color:var(--rac-bg);color:var(--rac-fg);transition:background-color var(--rac-duration) var(--rac-ease),border-color var(--rac-duration) var(--rac-ease),opacity var(--rac-duration) var(--rac-ease)}.rac-select[aria-haspopup]:not([aria-disabled=true]):hover{background-color:var(--rac-tint-1)}.rac-select[aria-haspopup]:not([aria-disabled=true],[data-error],[data-invalid]):hover{border-color:var(--rac-tint-1)}.rac-select[aria-disabled=true]{opacity:.75}.rac-select:is([data-error],[data-invalid]){border-color:var(--rac-danger)}.rac-select[aria-busy=true]:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--rac-muted),transparent) 0 100% / 40% 2px no-repeat;animation:rac-busy 1.5s ease-in-out infinite;pointer-events:none}@media(prefers-reduced-motion:reduce){.rac-select[aria-busy=true]:after{animation:none;background-size:100% 2px}}:is(.rac-title,.rac-option)[data-bool=true]{color:var(--rac-success)}:is(.rac-title,.rac-option)[data-bool=false]{color:var(--rac-danger)}.rac-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}.rac-list{background-color:var(--rac-bg);color:var(--rac-fg);scrollbar-color:var(--rac-tint-2) var(--rac-tint-1);scrollbar-width:thin;scroll-padding-block:.5em}.rac-option{gap:.5em;padding:.5em;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-option[data-highlighted]{background-color:var(--rac-tint-2)}.rac-option[aria-selected=true]{background-color:var(--rac-tint-3)}.rac-option[aria-selected=true][data-highlighted]{background-color:color-mix(in srgb,var(--rac-fg) 30%,var(--rac-bg))}.rac-option[aria-disabled=true]{color:var(--rac-muted)}.rac-option[data-invalid]{color:var(--rac-danger)}.rac-option[data-loading]{gap:0;color:var(--rac-muted)}.rac-option[data-error]{color:var(--rac-danger)}.rac-check{margin-inline-end:.2em}.rac-check[data-default]{border-color:var(--rac-muted)}.rac-group{padding:.5em;font-size:1.25em;font-weight:700;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-group[data-highlighted]{background-color:var(--rac-tint-2)}.rac-group[data-disabled]{color:var(--rac-muted)}.rac-group-items{padding-inline-start:1em}@keyframes rac-busy{0%{background-position-x:-100%}to{background-position-x:200%}}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}}