@purpurds/autocomplete 7.5.0 → 7.5.1

package/dist/autocomplete.es.js

@@ -1,6 +1,6 @@
 import { jsx as l, jsxs as j, Fragment as et } from "react/jsx-runtime";
 import * as m from "react";
-import { forwardRef as X, Children as qt, isValidElement as nt, useId as kt, useRef as K, useCallback as Ct, useEffect as Pt, useState as ar, cloneElement as Mt } from "react";
+import { forwardRef as J, Children as qt, isValidElement as nt, useId as kt, useRef as Y, useCallback as Ct, useEffect as Pt, useState as ar, cloneElement as Mt } from "react";
 import "react-dom";
 function Rt(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
@@ -275,7 +275,7 @@ function ie() {
   }(Nr)), Nr.exports;
 }
 var oe = ie();
-const pe = /* @__PURE__ */ ae(oe), V = {
+const pe = /* @__PURE__ */ ae(oe), Z = {
   "purpur-paragraph": "_purpur-paragraph_1rh57_1",
   "purpur-paragraph--disabled": "_purpur-paragraph--disabled_1rh57_7",
   "purpur-paragraph--hyphens": "_purpur-paragraph--hyphens_1rh57_10",
@@ -292,7 +292,7 @@ const pe = /* @__PURE__ */ ae(oe), V = {
   "purpur-paragraph--overline-200": "_purpur-paragraph--overline-200_1rh57_75"
 }, le = {
   PARAGRAPH100: "paragraph-100"
-}, Z = "purpur-paragraph", st = ({
+}, H = "purpur-paragraph", st = ({
   ["data-testid"]: t,
   children: a,
   className: n,
@@ -304,18 +304,18 @@ const pe = /* @__PURE__ */ ae(oe), V = {
 }) => {
   const f = pe([
     n,
-    V[Z],
-    V[`${Z}--${e}`],
+    Z[H],
+    Z[`${H}--${e}`],
     {
-      [V[`${Z}--hyphens`]]: o,
-      [V[`${Z}--disabled`]]: i,
-      [V[`${Z}--negative`]]: r
+      [Z[`${H}--hyphens`]]: o,
+      [Z[`${H}--disabled`]]: i,
+      [Z[`${H}--negative`]]: r
     }
   ]);
   return /* @__PURE__ */ l("p", { ...u, className: f, "data-testid": t, children: a });
 };
 st.displayName = "Paragraph";
-const Ar = it.bind(ot), B = "purpur-listbox", sr = X(
+const Ar = it.bind(ot), B = "purpur-listbox", sr = J(
   (t, a) => {
     const { disabled: n, highlighted: i, hovered: o, selected: r, children: e, noninteractive: u, ...f } = t, y = Ar(`${B}-item`, f.className, {
       [`${B}-item--highlighted`]: i,
@@ -342,7 +342,7 @@ const Ar = it.bind(ot), B = "purpur-listbox", sr = X(
   }
 ), se = (t) => nt(t) && (t == null ? void 0 : t.type) === sr;
 sr.displayName = "ListBoxItem";
-const ce = it.bind(ot), de = "purpur-listbox", Y = X(
+const ce = it.bind(ot), de = "purpur-listbox", X = J(
   ({ children: t, ...a }, n) => /* @__PURE__ */ l(
     "ul",
     {
@@ -354,8 +354,8 @@ const ce = it.bind(ot), de = "purpur-listbox", Y = X(
     }
   )
 );
-Y.Item = sr;
-Y.displayName = "ListBox";
+X.Item = sr;
+X.displayName = "ListBox";
 const _e = {
   LG: "lg"
 };
@@ -402,7 +402,7 @@ function ve() {
   }(Or)), Or.exports;
 }
 var me = ve();
-const kr = /* @__PURE__ */ fe(me), ge = "_rotate_12t9p_1", he = "_dash_12t9p_1", H = {
+const kr = /* @__PURE__ */ fe(me), ge = "_rotate_12t9p_1", he = "_dash_12t9p_1", F = {
   "purpur-spinner": "_purpur-spinner_12t9p_2",
   rotate: ge,
   "purpur-spinner--xxs": "_purpur-spinner--xxs_12t9p_6",
@@ -414,7 +414,7 @@ const kr = /* @__PURE__ */ fe(me), ge = "_rotate_12t9p_1", he = "_dash_12t9p_1",
   dash: he,
   "purpur-spinner__circle--disabled": "_purpur-spinner__circle--disabled_12t9p_41",
   "purpur-spinner__circle--negative": "_purpur-spinner__circle--negative_12t9p_44"
-}, F = "purpur-spinner", be = {
+}, W = "purpur-spinner", be = {
   SM: "sm"
 }, ye = ({
   ["data-testid"]: t,
@@ -425,15 +425,15 @@ const kr = /* @__PURE__ */ fe(me), ge = "_rotate_12t9p_1", he = "_dash_12t9p_1",
 }) => /* @__PURE__ */ l(
   "div",
   {
-    className: kr([H[F], H[`${F}--${i}`]]),
+    className: kr([F[W], F[`${W}--${i}`]]),
     "data-testid": t,
     ...o,
     children: /* @__PURE__ */ l("svg", { viewBox: "0 0 50 50", children: /* @__PURE__ */ l(
       "circle",
       {
-        className: kr(H[`${F}__circle`], {
-          [H[`${F}__circle--disabled`]]: a,
-          [H[`${F}__circle--negative`]]: n
+        className: kr(F[`${W}__circle`], {
+          [F[`${W}__circle--disabled`]]: a,
+          [F[`${W}__circle--negative`]]: n
         }),
         cx: "25",
         cy: "25",
@@ -557,7 +557,7 @@ const Se = /* @__PURE__ */ xe($e), Ne = {
       ]
     }
   );
-}, ct = X(Ae);
+}, ct = J(Ae);
 ct.displayName = "Button";
 function Oe(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
@@ -1070,7 +1070,7 @@ function $n() {
   }(Yr)), Yr.exports;
 }
 var Sn = $n();
-const Jr = /* @__PURE__ */ wn(Sn), Nn = "_rotate_12t9p_1", jn = "_dash_12t9p_1", W = {
+const Jr = /* @__PURE__ */ wn(Sn), Nn = "_rotate_12t9p_1", jn = "_dash_12t9p_1", G = {
   "purpur-spinner": "_purpur-spinner_12t9p_2",
   rotate: Nn,
   "purpur-spinner--xxs": "_purpur-spinner--xxs_12t9p_6",
@@ -1082,7 +1082,7 @@ const Jr = /* @__PURE__ */ wn(Sn), Nn = "_rotate_12t9p_1", jn = "_dash_12t9p_1",
   dash: jn,
   "purpur-spinner__circle--disabled": "_purpur-spinner__circle--disabled_12t9p_41",
   "purpur-spinner__circle--negative": "_purpur-spinner__circle--negative_12t9p_44"
-}, G = "purpur-spinner", An = {
+}, U = "purpur-spinner", An = {
   SM: "sm"
 }, On = ({
   ["data-testid"]: t,
@@ -1093,15 +1093,15 @@ const Jr = /* @__PURE__ */ wn(Sn), Nn = "_rotate_12t9p_1", jn = "_dash_12t9p_1",
 }) => /* @__PURE__ */ l(
   "div",
   {
-    className: Jr([W[G], W[`${G}--${i}`]]),
+    className: Jr([G[U], G[`${U}--${i}`]]),
     "data-testid": t,
     ...o,
     children: /* @__PURE__ */ l("svg", { viewBox: "0 0 50 50", children: /* @__PURE__ */ l(
       "circle",
       {
-        className: Jr(W[`${G}__circle`], {
-          [W[`${G}__circle--disabled`]]: a,
-          [W[`${G}__circle--negative`]]: n
+        className: Jr(G[`${U}__circle`], {
+          [G[`${U}__circle--disabled`]]: a,
+          [G[`${U}__circle--negative`]]: n
         }),
         cx: "25",
         cy: "25",
@@ -1170,7 +1170,7 @@ const Pn = /* @__PURE__ */ qn(Cn), Mn = {
   "purpur-text-field__input--error": "_purpur-text-field__input--error_3gl1k_94",
   "purpur-text-field__adornment-container": "_purpur-text-field__adornment-container_3gl1k_106",
   "purpur-text-field__valid-icon": "_purpur-text-field__valid-icon_3gl1k_111"
-}, Rn = (t) => K(t), k = Pn.bind(Mn), v = "purpur-text-field", Ln = ({
+}, Rn = (t) => Y(t), k = Pn.bind(Mn), v = "purpur-text-field", Ln = ({
   ["data-testid"]: t,
   className: a,
   clearButtonAriaLabel: n,
@@ -1189,7 +1189,7 @@ const Pn = /* @__PURE__ */ qn(Cn), Mn = {
   var N;
   const w = kt(), s = _.id ?? w, g = (h) => t ? `${t}-${h}` : void 0, C = S && !e, M = u ? `${s}-helper-text` : void 0, T = [A].filter((h) => !!h), d = (typeof _.value == "number" ? _.value !== void 0 : (N = _.value) == null ? void 0 : N.length) && !_.disabled && !_.readOnly && !y && x && n, O = Rn(null), I = (h) => {
     O.current = h, typeof $ == "function" ? $(h) : $ && ($.current = h);
-  }, J = () => {
+  }, Q = () => {
     var h;
     x == null || x(), (h = O.current) == null || h.focus();
   }, R = [
@@ -1206,7 +1206,7 @@ const Pn = /* @__PURE__ */ qn(Cn), Mn = {
       ct,
       {
         variant: "tertiary-purple",
-        onClick: J,
+        onClick: Q,
         iconOnly: !0,
         "aria-label": n ?? "",
         "data-testid": g("clear-button"),
@@ -1294,7 +1294,7 @@ const Pn = /* @__PURE__ */ qn(Cn), Mn = {
     M && /* @__PURE__ */ l(Ue, { "data-testid": g("helper-text"), id: M, children: u }),
     e && /* @__PURE__ */ l(Ze, { "data-testid": g("error-text"), children: e })
   ] });
-}, gt = X(Ln);
+}, gt = J(Ln);
 gt.displayName = "TextField";
 const Bn = (t) => nt(t) && t.type.displayName === gt.displayName;
 function En(t) {
@@ -1346,7 +1346,7 @@ const zn = /* @__PURE__ */ En(In), Dn = {
   "purpur-autocomplete__chevron-button": "_purpur-autocomplete__chevron-button_1u8x6_9",
   "purpur-autocomplete__chevron-icon": "_purpur-autocomplete__chevron-icon_1u8x6_15",
   "purpur-autocomplete__chevron-icon--up": "_purpur-autocomplete__chevron-icon--up_1u8x6_19"
-}, Vn = (t) => K(t), Zn = (t, a) => {
+}, Vn = (t) => Y(t), Zn = (t, a) => {
   const n = Ct(
     (i) => {
       t && !t.contains(i.target) && a();
@@ -1379,15 +1379,15 @@ const zn = /* @__PURE__ */ En(In), Dn = {
 }) => {
   const [C, M] = ar(
     ((typeof i == "string" ? i : n) || (s == null ? void 0 : s.label)) ?? ""
-  ), T = typeof i == "string" ? i : C, [d, O] = ar(a ? w[0] : void 0), I = K(null), J = Vn(null), R = K(null), z = K({}), [h, dr] = ar(!1);
+  ), T = typeof i == "string" ? i : C, [d, O] = ar(a ? w[0] : void 0), I = Y(null), Q = Vn(null), R = Y(null), z = Y({}), [h, dr] = ar(!1);
   function tr(p) {
     return g ? `${g}-${p}` : void 0;
   }
-  const Q = () => {
+  const D = () => {
     dr(!1), O(void 0);
   };
-  Zn(J.current, Q);
-  const D = ({ eventType: p }) => {
+  Zn(Q.current, D);
+  const V = ({ eventType: p }) => {
     dr(!0), s && requestAnimationFrame(() => {
       O({ ...s, isSetByClickEvent: p === "CLICK" }), nr(z.current[s.id]);
     });
@@ -1412,12 +1412,12 @@ const zn = /* @__PURE__ */ En(In), Dn = {
     }
   }, fr = (p) => {
     var c;
-    p && ((c = I.current) == null || c.focus(), er(p.label), N == null || N(p)), Q();
+    p && ((c = I.current) == null || c.focus(), er(p.label), N == null || N(p)), D();
   }, bt = (p) => {
     const c = a && !d ? 0 : P.findIndex((q) => q && (d == null ? void 0 : d.id) === q.id), b = P.length;
     return p === "ArrowDown" ? P[(c ?? -1) + 1] || P[0] : P[(c ?? b) - 1] || P[b - 1];
   }, L = h && (!!P.length || !!$), yt = (p) => {
-    !L && D({ eventType: "KEYBOARD" });
+    !L && V({ eventType: "KEYBOARD" });
     const c = bt(p);
     O(c), c && nr(z.current[c.id]);
   }, xt = (p) => {
@@ -1428,26 +1428,26 @@ const zn = /* @__PURE__ */ En(In), Dn = {
         break;
       case "Enter": {
         const c = d || (a ? w[0] : void 0);
-        L && fr(c), !L && D({ eventType: "KEYBOARD" });
+        L && fr(c), !L && V({ eventType: "KEYBOARD" });
         break;
       }
       case "Escape":
       case "Tab":
-        Q();
+        D();
         break;
     }
   }, wt = (p) => {
     const c = _r(p.target.value);
-    er(p.target.value), O(void 0), !L && D({ eventType: "KEYBOARD" }), a && c[0] && nr(z.current[c[0].id]);
+    er(p.target.value), O(void 0), !L && V({ eventType: "KEYBOARD" }), a && c[0] && nr(z.current[c[0].id]);
   }, $t = (p) => {
-    S == null || S(p), L ? Q() : D({ eventType: "CLICK" });
+    S == null || S(p), L ? D() : V({ eventType: "CLICK" });
   }, St = (p) => {
     var c;
-    x == null || x(p), !h && _ && D({ eventType: "KEYBOARD" }), (c = I.current) == null || c.select();
+    x == null || x(p), !h && _ && V({ eventType: "KEYBOARD" }), (c = I.current) == null || c.select();
   }, Nt = (p) => {
-    f == null || f(p), t && setTimeout(() => {
+    f == null || f(p), setTimeout(() => {
       var c, b;
-      !((c = I.current) != null && c.contains(document.activeElement)) && !((b = R.current) != null && b.contains(document.activeElement)) && er(s ? s.label : "");
+      !((c = I.current) != null && c.contains(document.activeElement)) && !((b = R.current) != null && b.contains(document.activeElement)) && (D(), t && er(s ? s.label : ""));
     });
   }, jt = {
     maxHeight: typeof u == "number" ? `${u}px` : u
@@ -1495,7 +1495,7 @@ const zn = /* @__PURE__ */ En(In), Dn = {
   return {
     id: r,
     inputProps: Ot,
-    internalRef: J,
+    internalRef: Q,
     optionsToShow: P,
     showListbox: L,
     noOptionsText: $,
@@ -1503,7 +1503,7 @@ const zn = /* @__PURE__ */ En(In), Dn = {
     getListBoxItemProps: At,
     listboxProps: vr
   };
-}, rr = zn.bind(Dn), U = "purpur-autocomplete", Fn = ({ className: t, renderInput: a, renderOption: n, ...i }, o) => {
+}, rr = zn.bind(Dn), K = "purpur-autocomplete", Fn = ({ className: t, renderInput: a, renderOption: n, ...i }, o) => {
   const {
     id: r,
     inputProps: e,
@@ -1516,7 +1516,7 @@ const zn = /* @__PURE__ */ En(In), Dn = {
     listboxProps: _
   } = Hn(i), $ = (s, g) => {
     const { key: C, ...M } = S(s, g);
-    return /* @__PURE__ */ l(Y.Item, { ...M, children: n ? n == null ? void 0 : n(s) : s.label }, C);
+    return /* @__PURE__ */ l(X.Item, { ...M, children: n ? n == null ? void 0 : n(s) : s.label }, C);
   }, N = (s) => {
     u.current = s, typeof o == "function" ? o(s) : o && (o.current = s);
   }, w = () => {
@@ -1529,7 +1529,7 @@ const zn = /* @__PURE__ */ En(In), Dn = {
           {
             "data-testid": "chevron button",
             type: "button",
-            className: rr(`${U}__chevron-button`),
+            className: rr(`${K}__chevron-button`),
             onClick: () => {
               e.onFocus(void 0), e.onMouseDown(void 0);
             },
@@ -1538,8 +1538,8 @@ const zn = /* @__PURE__ */ En(In), Dn = {
               at,
               {
                 size: "sm",
-                className: rr(`${U}__chevron-icon`, {
-                  [`${U}__chevron-icon--up`]: y
+                className: rr(`${K}__chevron-icon`, {
+                  [`${K}__chevron-icon--up`]: y
                 })
               }
             )
@@ -1550,11 +1550,11 @@ const zn = /* @__PURE__ */ En(In), Dn = {
     }
     return s;
   };
-  return /* @__PURE__ */ j("div", { id: r, ref: N, className: rr([t, U]), children: [
+  return /* @__PURE__ */ j("div", { id: r, ref: N, className: rr([t, K]), children: [
     w(),
-    y && /* @__PURE__ */ l(Y, { ..._, className: rr(`${U}__listbox`), children: f.length ? f.filter((s) => !!s).map($) : /* @__PURE__ */ l(Y.Item, { noninteractive: !0, children: x }) })
+    y && /* @__PURE__ */ l(X, { ..._, className: rr(`${K}__listbox`), children: f.length ? f.filter((s) => !!s).map($) : /* @__PURE__ */ l(X.Item, { noninteractive: !0, children: x }) })
   ] });
-}, Wn = X(Fn);
+}, Wn = J(Fn);
 Wn.displayName = "Autocomplete";
 export {
   Wn as Autocomplete,