@sito/dashboard 0.0.81 → 0.0.83

package/README.md

@@ -91,6 +91,7 @@ export function UsersTable() {
 ## Form Input Notes
 
 - `SelectInput` expects `Option` items with an `id` (plus optional `value`/`name`).
+- `AutocompleteInput` supports `autoSelectOnBlur` (`true` by default). In single-select mode, blur selects the matching option when the typed text exactly matches an option label, ignoring case and surrounding spaces.
 - `CheckInput` is controlled with `checked` (not `value`).
 - `FileInput` `onChange` receives the native input event; read files from `e.currentTarget.files`.
 - `FileInput` supports `unstyled` (and alias `hiddenContainer`) to render only the native file input when you provide a custom upload UI.

package/dist/{Dropdown-C5blCAyI.cjs → Dropdown-CE03Yftt.cjs}

@@ -1 +1 @@
-var C=require("./Dropdown.css");const R=require("react/jsx-runtime"),u=require("react"),y=require("react-dom"),d=8,g=4;function h(c,f){const e=f.getBoundingClientRect(),o=window.innerWidth,n=window.innerHeight;let r=c.bottom+g,i=c.left;return i+e.width>o-d&&(i=c.right-e.width),i<d&&(i=d),r+e.height>n-d&&(r=c.top-e.height-g),r<d&&(r=d),{top:r,left:i}}const D=c=>{const{children:f,open:e,onClose:o,anchorEl:n,className:r,closeOnClick:i=!0,...E}=c,l=u.useRef(null);u.useLayoutEffect(()=>{const t=l.current;if(!e||!n||!t)return;const s=n.getBoundingClientRect(),{top:w,left:m}=h(s,t);t.style.top=`${w}px`,t.style.left=`${m}px`},[e,n]),u.useEffect(()=>{if(!e||!n)return;const t=l.current;if(!t)return;const s=()=>{const w=n.getBoundingClientRect(),{top:m,left:v}=h(w,t);t.style.top=`${m}px`,t.style.left=`${v}px`};return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[e,n]);const a=u.useCallback(t=>{const s=l.current;!e||!s||n?.contains(t.target)||s.contains(t.target)||o()},[e,o,n]),p=u.useCallback(t=>{e&&t.key==="Escape"&&o()},[e,o]);return u.useEffect(()=>{if(e)return setTimeout(()=>l.current?.focus(),0),document.addEventListener("mousedown",a),document.addEventListener("keydown",p),()=>{document.removeEventListener("mousedown",a),document.removeEventListener("keydown",p)}},[e,a,p]),e?y.createPortal(R.jsx("div",{ref:l,role:"menu",tabIndex:-1,className:`dropdown-main opened ${r??""}`,onClick:t=>{t.stopPropagation(),i&&o()},...E,children:f}),document.body):null};exports.Dropdown=D;
+var C=require("./Dropdown.css");const R=require("react/jsx-runtime"),u=require("react"),y=require("react-dom"),d=8,g=4;function h(c,f){const e=f.getBoundingClientRect(),o=window.innerWidth,n=window.innerHeight;let r=c.bottom+g,i=c.left;return i+e.width>o-d&&(i=c.right-e.width),i<d&&(i=d),r+e.height>n-d&&(r=c.top-e.height-g),r<d&&(r=d),{top:r,left:i}}const D=c=>{const{children:f,open:e,onClose:o,anchorEl:n,className:r,closeOnClick:i=!0,...E}=c,l=u.useRef(null);u.useLayoutEffect(()=>{const t=l.current;if(!e||!n||!t)return;const s=n.getBoundingClientRect(),{top:w,left:m}=h(s,t);t.style.top=`${w}px`,t.style.left=`${m}px`},[e,n]),u.useEffect(()=>{if(!e||!n)return;const t=l.current;if(!t)return;const s=()=>{const w=n.getBoundingClientRect(),{top:m,left:v}=h(w,t);t.style.top=`${m}px`,t.style.left=`${v}px`};return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[e,n]);const a=u.useCallback(t=>{const s=l.current;!e||!s||n?.contains(t.target)||s.contains(t.target)||o()},[e,o,n]),p=u.useCallback(t=>{e&&t.key==="Escape"&&o()},[e,o]);return u.useEffect(()=>{if(e)return setTimeout(()=>l.current?.focus(),0),document.addEventListener("mousedown",a),document.addEventListener("keydown",p),()=>{document.removeEventListener("mousedown",a),document.removeEventListener("keydown",p)}},[e,a,p]),e?y.createPortal(R.jsx("div",{ref:l,role:"menu",tabIndex:-1,className:`dropdown-main opened ${r??""}`,onClick:t=>{i&&o(),t.stopPropagation()},...E,children:f}),document.body):null};exports.Dropdown=D;

package/dist/{Dropdown-WnR9AjVf.js → Dropdown-DQLnDEAD.js}

@@ -59,7 +59,7 @@ const N = (c) => {
         tabIndex: -1,
         className: `dropdown-main opened ${r ?? ""}`,
         onClick: (t) => {
-          t.stopPropagation(), i && o();
+          i && o(), t.stopPropagation();
         },
         ...E,
         children: l

package/dist/Dropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Dropdown-C5blCAyI.cjs");exports.Dropdown=o.Dropdown;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Dropdown-CE03Yftt.cjs");exports.Dropdown=o.Dropdown;

package/dist/Dropdown.js

@@ -1,4 +1,4 @@
-import { D as p } from "./Dropdown-WnR9AjVf.js";
+import { D as p } from "./Dropdown-DQLnDEAD.js";
 export {
   p as Dropdown
 };

package/dist/Form.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectInput-BrKnfhB0.cjs"),t=require("./FileInput-MZRpXGKC.cjs");exports.AutocompleteInput=e.AutocompleteInput;exports.CheckInput=e.CheckInput;exports.SelectInput=e.SelectInput;exports.State=e.State;exports.TextInput=e.TextInput;exports.helperTextStateClassName=e.helperTextStateClassName;exports.inputStateClassName=e.inputStateClassName;exports.labelStateClassName=e.labelStateClassName;exports.FileInput=t.FileInput;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectInput-ckBfPXet.cjs"),t=require("./FileInput-MZRpXGKC.cjs");exports.AutocompleteInput=e.AutocompleteInput;exports.CheckInput=e.CheckInput;exports.SelectInput=e.SelectInput;exports.State=e.State;exports.TextInput=e.TextInput;exports.helperTextStateClassName=e.helperTextStateClassName;exports.inputStateClassName=e.inputStateClassName;exports.labelStateClassName=e.labelStateClassName;exports.FileInput=t.FileInput;

package/dist/Form.js

@@ -1,4 +1,4 @@
-import { A as e, C as s, S as l, a as p, T as u, h as m, i as n, l as o } from "./SelectInput-D09muy0T.js";
+import { A as e, C as s, S as l, a as p, T as u, h as m, i as n, l as o } from "./SelectInput-DwiR4IIb.js";
 import { F as r } from "./FileInput-9ARA_AWC.js";
 export {
   e as AutocompleteInput,

package/dist/SelectInput-DwiR4IIb.js

@@ -0,0 +1,624 @@
+import "./SelectInput.css";
+import { jsxs as S, jsx as l, Fragment as he } from "react/jsx-runtime";
+import { c as u } from "./classNames-DDRjbGA1.js";
+import { forwardRef as $, useState as O, useEffect as _, useCallback as p, useMemo as Y, useRef as j, useLayoutEffect as pe } from "react";
+import { C as J } from "./Chip-6bEZ7uwv.js";
+import { I as me } from "./IconButton-CqPk_OXG.js";
+import { C as fe } from "./Close-rKC9AcNX.js";
+const Ae = $(function(s, f) {
+  const {
+    state: g,
+    value: n,
+    onChange: r,
+    options: b = [],
+    name: D = "",
+    id: A = "",
+    label: v = "",
+    containerClassName: I = "",
+    inputContainerClassName: w = "",
+    helperText: L = "",
+    placeholder: F = "",
+    multiple: h = !1,
+    autoSelectOnBlur: k = !0,
+    required: c = !1,
+    "aria-required": T = !1,
+    onBlur: P,
+    onFocus: H,
+    ...M
+  } = s, U = T === !0 || String(T).toLowerCase() === "true", E = !!(c || U), m = h && Array.isArray(n) && n.length > 0, C = E && !m, [x, d] = O("");
+  _(() => {
+    if (!h && n && !Array.isArray(n)) {
+      d(String(n.value ?? n.name ?? ""));
+      return;
+    }
+    d("");
+  }, [h, n]);
+  const [o, y] = O(!1), [B, q] = O(-1), R = p(
+    (e) => String(e.value ?? e.name ?? ""),
+    []
+  ), V = Y(
+    () => b.filter((e) => Array.isArray(n) && n.length ? !n.some((a) => a.id === e.id) : n && !Array.isArray(n) ? n.id !== e.id : !0),
+    [b, n]
+  ), t = Y(
+    () => V.filter(
+      (e) => R(e).toLowerCase().includes(x.toLowerCase())
+    ),
+    [V, R, x]
+  );
+  _(() => {
+    if (!o || !t.length) {
+      q(-1);
+      return;
+    }
+    q(0);
+  }, [o, t]);
+  const i = j(null), W = j(null), [Z, G] = O(!1), ee = j(null);
+  _(() => {
+    const e = (N) => {
+      i.current && !i.current.contains(N.target) && y(!1);
+    }, a = (N) => {
+      N.key === "Escape" && y(!1);
+    };
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", a), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", a);
+    };
+  }, []);
+  const se = p((e) => {
+    d(e.target.value);
+  }, []), K = p(
+    (e) => {
+      e ? h ? (d(""), Array.isArray(n) && n.length ? r([...n, e]) : r([e])) : (d(String(e.name ?? e.value ?? "")), r(e)) : r(null), y(!1);
+    },
+    [h, r, n]
+  ), te = p(
+    (e) => {
+      const a = e.trim().toLowerCase();
+      return a ? V.find(
+        (N) => R(N).trim().toLowerCase() === a
+      ) ?? null : null;
+    },
+    [V, R]
+  ), ie = p(
+    (e) => {
+      y(!0), H?.(e);
+    },
+    [H]
+  ), oe = p(
+    (e) => {
+      if (P?.(e), i.current && e.relatedTarget instanceof Node && i.current.contains(e.relatedTarget))
+        return;
+      const a = k ? te(e.currentTarget.value) : null;
+      if (a) {
+        K(a);
+        return;
+      }
+      y(!1);
+    },
+    [
+      k,
+      te,
+      K,
+      P
+    ]
+  ), ue = p(
+    (e) => {
+      if (!t.length) {
+        e.key === "Escape" && y(!1);
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        if (e.preventDefault(), !o) {
+          y(!0), q(0);
+          return;
+        }
+        q((a) => {
+          const N = a >= 0 ? a : 0;
+          return e.key === "ArrowDown" ? (N + 1 + t.length) % t.length : (N - 1 + t.length) % t.length;
+        });
+        return;
+      }
+      if (e.key === "Enter" && o) {
+        e.preventDefault();
+        const a = B >= 0 ? B : 0;
+        K(t[a]);
+        return;
+      }
+      e.key === "Escape" && o && (e.preventDefault(), y(!1));
+    },
+    [
+      K,
+      B,
+      o,
+      t
+    ]
+  ), ne = p(
+    (e) => {
+      if (!Array.isArray(n)) {
+        r(null);
+        return;
+      }
+      const a = n.filter((N, de) => de !== e);
+      a.length ? r(a) : r(null);
+    },
+    [r, n]
+  ), ce = p(() => {
+    Array.isArray(n) && r([n[0]]);
+  }, [r, n]);
+  return pe(() => {
+    const e = ee.current?.offsetWidth ?? 0, a = i.current?.offsetWidth ?? 0;
+    G(e > a * 0.4);
+  }, [n]), /* @__PURE__ */ S(
+    "div",
+    {
+      className: u("autocomplete-input-container", I),
+      ref: i,
+      children: [
+        /* @__PURE__ */ S("div", { className: "autocomplete-value-input-container", children: [
+          /* @__PURE__ */ l(
+            le,
+            {
+              state: g,
+              name: D,
+              id: A,
+              value: x,
+              onChange: se,
+              placeholder: F,
+              helperText: L,
+              onFocus: ie,
+              onBlur: oe,
+              onKeyDown: ue,
+              label: v,
+              containerClassName: u(
+                "autocomplete-text-input",
+                w
+              ),
+              required: C,
+              "aria-required": E,
+              ref: f ?? W,
+              ...M,
+              children: !h && n && !Array.isArray(n) && (n.value || n.name) && /* @__PURE__ */ l(
+                me,
+                {
+                  icon: /* @__PURE__ */ l(fe, {}),
+                  className: "autocomplete-delete-button",
+                  onClick: (e) => {
+                    K(), e.stopPropagation();
+                  }
+                }
+              )
+            }
+          ),
+          h && Array.isArray(n) && n.length ? /* @__PURE__ */ l("ul", { ref: ee, className: "autocomplete-value-container", children: Z ? /* @__PURE__ */ S(he, { children: [
+            /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+              J,
+              {
+                text: n[0]?.value ?? n[0]?.name,
+                onDelete: (e) => {
+                  ne(0), e.stopPropagation();
+                }
+              }
+            ) }),
+            n.length > 1 && /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+              J,
+              {
+                text: `+${n.length - 1}`,
+                onDelete: (e) => {
+                  ce(), e.stopPropagation();
+                }
+              }
+            ) })
+          ] }) : n.map((e, a) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+            J,
+            {
+              text: String(e.value ?? e.name),
+              onDelete: (N) => {
+                ne(a), N.stopPropagation();
+              }
+            }
+          ) }, e.id ?? e.value ?? e.name)) }) : null
+        ] }),
+        o && /* @__PURE__ */ l(
+          "ul",
+          {
+            className: "autocomplete-suggestions-container",
+            style: { width: i.current?.offsetWidth },
+            children: t.map((e) => /* @__PURE__ */ l(
+              "li",
+              {
+                className: u(
+                  "autocomplete-suggestion-item",
+                  e.id === t[B]?.id ? "highlighted" : ""
+                ),
+                onMouseEnter: () => q(
+                  t.findIndex((a) => a.id === e.id)
+                ),
+                onMouseDown: (a) => a.preventDefault(),
+                onClick: (a) => {
+                  K(e), a.stopPropagation();
+                },
+                children: e.value ?? e.name
+              },
+              e.id ?? e.value ?? e.name
+            ))
+          }
+        )
+      ]
+    }
+  );
+});
+var z = /* @__PURE__ */ ((s) => (s.error = "error", s.good = "good", s.default = "default", s))(z || {});
+const Q = (s) => {
+  switch (s) {
+    case "error":
+      return "input-error";
+    case "good":
+      return "input-good";
+    default:
+      return "input-normal";
+  }
+}, X = (s) => {
+  switch (s) {
+    case "error":
+      return "input-label-error";
+    case "good":
+      return "input-label-good";
+    default:
+      return "input-label-normal";
+  }
+}, ae = (s) => {
+  switch (s) {
+    case "error":
+      return "input-helper-text-error";
+    case "good":
+      return "input-helper-text-good";
+    default:
+      return "input-helper-text-normal";
+  }
+}, ke = $(function(s, f) {
+  const {
+    checked: g,
+    onChange: n,
+    name: r = "",
+    id: b = "",
+    label: D = "",
+    state: A = z.default,
+    containerClassName: v = "",
+    inputClassName: I = "",
+    labelClassName: w = "",
+    ...L
+  } = s;
+  return /* @__PURE__ */ S("label", { className: u("input-check-container", v), children: [
+    /* @__PURE__ */ l(
+      "input",
+      {
+        id: b,
+        ref: f,
+        name: r,
+        type: "checkbox",
+        checked: g,
+        onChange: n,
+        className: u(
+          "input-check",
+          Q(A),
+          I
+        ),
+        ...L
+      }
+    ),
+    /* @__PURE__ */ l(
+      "span",
+      {
+        className: u(
+          "input-check-label",
+          X(A),
+          w
+        ),
+        children: D
+      }
+    )
+  ] });
+}), re = (s) => s == null ? !1 : Array.isArray(s) ? s.length > 0 : `${s}`.length > 0, ge = /* @__PURE__ */ new Set([
+  "date",
+  "datetime-local",
+  "time",
+  "month",
+  "week",
+  "range",
+  "color",
+  "file"
+]), le = $(function(s, f) {
+  const {
+    children: g,
+    state: n = z.default,
+    label: r = "",
+    containerClassName: b = "",
+    inputClassName: D = "",
+    labelClassName: A = "",
+    helperText: v = "",
+    helperTextClassName: I = "",
+    value: w,
+    defaultValue: L,
+    onChange: F,
+    onFocus: h,
+    onBlur: k,
+    ...c
+  } = s, T = w !== void 0, [P, H] = O(
+    () => re(L)
+  ), M = T ? re(w) : P, U = ge.has(
+    c.type ?? ""
+  ), E = !!c.placeholder || U, m = c["aria-required"] === !0 || String(c["aria-required"]).toLowerCase() === "true", C = !!(c.required || m), x = (d) => {
+    T || H(d.currentTarget.value.length > 0), F?.(d);
+  };
+  return /* @__PURE__ */ S("div", { className: u("text-input-container", b), children: [
+    /* @__PURE__ */ S("div", { className: "text-input-field", children: [
+      /* @__PURE__ */ l(
+        "input",
+        {
+          ref: f,
+          defaultValue: L,
+          onChange: x,
+          onFocus: h,
+          onBlur: k,
+          ...T ? { value: w } : {},
+          className: u(
+            "text-input",
+            Q(n),
+            D,
+            M ? "has-value" : "",
+            c.placeholder ? "has-placeholder" : "",
+            E ? "keep-label-up" : ""
+          ),
+          ...c
+        }
+      ),
+      !!r && /* @__PURE__ */ S(
+        "label",
+        {
+          htmlFor: c.id,
+          className: u(
+            "text-input-label",
+            X(n),
+            A
+          ),
+          children: [
+            r,
+            C ? " *" : ""
+          ]
+        }
+      ),
+      g
+    ] }),
+    !!v && /* @__PURE__ */ l(
+      "p",
+      {
+        className: u(
+          "text-input-helper-text",
+          ae(n),
+          I
+        ),
+        children: v
+      }
+    )
+  ] });
+}), Se = $(function(s, f) {
+  const {
+    value: g,
+    onChange: n,
+    options: r,
+    containerClassName: b = "",
+    inputClassName: D = "",
+    labelClassName: A = "",
+    helperText: v = "",
+    helperTextClassName: I = "",
+    label: w = "",
+    placeholder: L = "",
+    name: F = "",
+    id: h = "",
+    state: k = z.default,
+    native: c = !0,
+    disabled: T,
+    required: P,
+    autoFocus: H,
+    children: M,
+    ...U
+  } = s, E = j(null), [m, C] = O(!1), [x, d] = O(-1), o = Y(
+    () => r.findIndex(
+      (t) => String(t.id) === String(g ?? r[0]?.id ?? "")
+    ),
+    [r, g]
+  ), y = Y(
+    () => o >= 0 ? r[o] : void 0,
+    [r, o]
+  );
+  _(() => {
+    if (!(c || !m)) {
+      if (!r.length) {
+        d(-1);
+        return;
+      }
+      d(o >= 0 ? o : 0);
+    }
+  }, [c, r.length, o, m]), _(() => {
+    if (c) return;
+    const t = (i) => {
+      E.current && !E.current.contains(i.target) && C(!1);
+    };
+    return document.addEventListener("mousedown", t), () => {
+      document.removeEventListener("mousedown", t);
+    };
+  }, [c]);
+  const B = p(
+    (t) => {
+      f && (typeof f == "function" ? f(t) : f.current = t);
+    },
+    [f]
+  ), q = p(
+    (t) => {
+      if (!n) return;
+      const i = {
+        target: { value: String(t) },
+        currentTarget: { value: String(t) }
+      };
+      n(i);
+    },
+    [n]
+  ), R = p(
+    (t) => {
+      const i = r[t];
+      i && (q(i.id), C(!1));
+    },
+    [q, r]
+  ), V = p(
+    (t) => {
+      if (r.length) {
+        if (t.key === "ArrowDown" || t.key === "ArrowUp") {
+          if (t.preventDefault(), !m) {
+            C(!0);
+            const i = o >= 0 ? o : 0;
+            d(i);
+            return;
+          }
+          d((i) => {
+            const W = i >= 0 ? i : o;
+            return t.key === "ArrowDown" ? (W + 1 + r.length) % r.length : (W - 1 + r.length) % r.length;
+          });
+          return;
+        }
+        if (t.key === "Enter") {
+          if (!m) {
+            t.preventDefault(), C(!0), d(o >= 0 ? o : 0);
+            return;
+          }
+          t.preventDefault(), R(x >= 0 ? x : 0);
+          return;
+        }
+        t.key === "Escape" && m && (t.preventDefault(), C(!1));
+      }
+    },
+    [x, r, R, o, m]
+  );
+  return c ? /* @__PURE__ */ S("div", { className: u("select-input-container", b), children: [
+    /* @__PURE__ */ l(
+      "select",
+      {
+        ...U,
+        id: h,
+        ref: B,
+        name: F,
+        value: g,
+        onChange: n,
+        className: u(
+          "select-input",
+          Q(k),
+          "peer",
+          D
+        ),
+        children: r?.map((t) => /* @__PURE__ */ l("option", { value: t.id, children: t.value ?? t.name ?? t.id }, t.id))
+      }
+    ),
+    /* @__PURE__ */ l(
+      "label",
+      {
+        htmlFor: h,
+        className: u(
+          "select-input-label",
+          X(k),
+          A
+        ),
+        children: w
+      }
+    ),
+    M,
+    v && /* @__PURE__ */ l(
+      "p",
+      {
+        className: u(
+          "select-input-helper-text",
+          ae(k),
+          I
+        ),
+        children: v
+      }
+    )
+  ] }) : /* @__PURE__ */ S(
+    "div",
+    {
+      ref: E,
+      className: u("select-input-container", b),
+      children: [
+        /* @__PURE__ */ l(
+          "select",
+          {
+            ...U,
+            ref: B,
+            name: F,
+            id: h,
+            value: g,
+            onChange: n,
+            className: "select-input-native-hidden",
+            tabIndex: -1,
+            "aria-hidden": !0,
+            children: r?.map((t) => /* @__PURE__ */ l("option", { value: t.id, children: t.value ?? t.name ?? t.id }, t.id))
+          }
+        ),
+        /* @__PURE__ */ l(
+          le,
+          {
+            id: h,
+            name: F,
+            state: k,
+            value: String(y?.value ?? y?.name ?? ""),
+            readOnly: !0,
+            label: w,
+            helperText: v,
+            containerClassName: "select-input-text-container",
+            inputClassName: u("select-input-text", D),
+            labelClassName: A,
+            helperTextClassName: I,
+            placeholder: L,
+            disabled: T,
+            required: P,
+            autoFocus: H,
+            onClick: () => C((t) => !t),
+            onKeyDown: V,
+            onFocus: () => C(!0),
+            role: "combobox",
+            "aria-expanded": m,
+            "aria-haspopup": "listbox",
+            children: M
+          }
+        ),
+        m && /* @__PURE__ */ l("ul", { className: "select-input-options-container", role: "listbox", children: r.map((t, i) => {
+          const W = String(t.id) === String(g);
+          return /* @__PURE__ */ l(
+            "li",
+            {
+              role: "option",
+              "aria-selected": W,
+              className: u(
+                "select-input-option-item",
+                i === x ? "highlighted" : ""
+              ),
+              onMouseEnter: () => d(i),
+              onClick: (G) => {
+                R(i), G.stopPropagation();
+              },
+              children: t.value ?? t.name ?? t.id
+            },
+            t.id
+          );
+        }) })
+      ]
+    }
+  );
+});
+export {
+  Ae as A,
+  ke as C,
+  Se as S,
+  le as T,
+  z as a,
+  ae as h,
+  Q as i,
+  X as l
+};

package/dist/SelectInput-ckBfPXet.cjs

@@ -0,0 +1 @@
+var he=require("./SelectInput.css");const r=require("react/jsx-runtime"),c=require("./classNames-DHAzUjfZ.cjs"),n=require("react"),$=require("./Chip-N4r2Xf9l.cjs"),le=require("./IconButton-DVZCHIHB.cjs"),ie=require("./Close-O9P7wJGf.cjs"),oe=n.forwardRef(function(i,f){const{state:g,value:a,onChange:s,options:w=[],name:j="",id:S="",label:b="",containerClassName:A="",inputContainerClassName:y="",helperText:I="",placeholder:q="",multiple:p=!1,autoSelectOnBlur:v=!0,required:d=!1,"aria-required":D=!1,onBlur:B,onFocus:F,...O}=i,M=D===!0||String(D).toLowerCase()==="true",E=!!(d||M),m=p&&Array.isArray(a)&&a.length>0,x=E&&!m,[k,h]=n.useState("");n.useEffect(()=>{if(!p&&a&&!Array.isArray(a)){h(String(a.value??a.name??""));return}h("")},[p,a]);const[u,C]=n.useState(!1),[R,L]=n.useState(-1),T=n.useCallback(e=>String(e.value??e.name??""),[]),P=n.useMemo(()=>w.filter(e=>Array.isArray(a)&&a.length?!a.some(l=>l.id===e.id):a&&!Array.isArray(a)?a.id!==e.id:!0),[w,a]),t=n.useMemo(()=>P.filter(e=>T(e).toLowerCase().includes(k.toLowerCase())),[P,T,k]);n.useEffect(()=>{if(!u||!t.length){L(-1);return}L(0)},[u,t]);const o=n.useRef(null),U=n.useRef(null),[_,Y]=n.useState(!1),J=n.useRef(null);n.useEffect(()=>{const e=N=>{o.current&&!o.current.contains(N.target)&&C(!1)},l=N=>{N.key==="Escape"&&C(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",l),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",l)}},[]);const ee=n.useCallback(e=>{h(e.target.value)},[]),V=n.useCallback(e=>{e?p?(h(""),Array.isArray(a)&&a.length?s([...a,e]):s([e])):(h(String(e.name??e.value??"")),s(e)):s(null),C(!1)},[p,s,a]),Q=n.useCallback(e=>{const l=e.trim().toLowerCase();return l?P.find(N=>T(N).trim().toLowerCase()===l)??null:null},[P,T]),te=n.useCallback(e=>{C(!0),F?.(e)},[F]),ae=n.useCallback(e=>{if(B?.(e),o.current&&e.relatedTarget instanceof Node&&o.current.contains(e.relatedTarget))return;const l=v?Q(e.currentTarget.value):null;if(l){V(l);return}C(!1)},[v,Q,V,B]),ne=n.useCallback(e=>{if(!t.length){e.key==="Escape"&&C(!1);return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),!u){C(!0),L(0);return}L(l=>{const N=l>=0?l:0;return e.key==="ArrowDown"?(N+1+t.length)%t.length:(N-1+t.length)%t.length});return}if(e.key==="Enter"&&u){e.preventDefault();const l=R>=0?R:0;V(t[l]);return}e.key==="Escape"&&u&&(e.preventDefault(),C(!1))},[V,R,u,t]),X=n.useCallback(e=>{if(!Array.isArray(a)){s(null);return}const l=a.filter((N,re)=>re!==e);l.length?s(l):s(null)},[s,a]),se=n.useCallback(()=>{Array.isArray(a)&&s([a[0]])},[s,a]);return n.useLayoutEffect(()=>{const e=J.current?.offsetWidth??0,l=o.current?.offsetWidth??0;Y(e>l*.4)},[a]),r.jsxs("div",{className:c.classNames("autocomplete-input-container",A),ref:o,children:[r.jsxs("div",{className:"autocomplete-value-input-container",children:[r.jsx(G,{state:g,name:j,id:S,value:k,onChange:ee,placeholder:q,helperText:I,onFocus:te,onBlur:ae,onKeyDown:ne,label:b,containerClassName:c.classNames("autocomplete-text-input",y),required:x,"aria-required":E,ref:f??U,...O,children:!p&&a&&!Array.isArray(a)&&(a.value||a.name)&&r.jsx(le.IconButton,{icon:r.jsx(ie.Close,{}),className:"autocomplete-delete-button",onClick:e=>{V(),e.stopPropagation()}})}),p&&Array.isArray(a)&&a.length?r.jsx("ul",{ref:J,className:"autocomplete-value-container",children:_?r.jsxs(r.Fragment,{children:[r.jsx("li",{children:r.jsx($.Chip,{text:a[0]?.value??a[0]?.name,onDelete:e=>{X(0),e.stopPropagation()}})}),a.length>1&&r.jsx("li",{children:r.jsx($.Chip,{text:`+${a.length-1}`,onDelete:e=>{se(),e.stopPropagation()}})})]}):a.map((e,l)=>r.jsx("li",{children:r.jsx($.Chip,{text:String(e.value??e.name),onDelete:N=>{X(l),N.stopPropagation()}})},e.id??e.value??e.name))}):null]}),u&&r.jsx("ul",{className:"autocomplete-suggestions-container",style:{width:o.current?.offsetWidth},children:t.map(e=>r.jsx("li",{className:c.classNames("autocomplete-suggestion-item",e.id===t[R]?.id?"highlighted":""),onMouseEnter:()=>L(t.findIndex(l=>l.id===e.id)),onMouseDown:l=>l.preventDefault(),onClick:l=>{V(e),l.stopPropagation()},children:e.value??e.name},e.id??e.value??e.name))})]})});var W=(i=>(i.error="error",i.good="good",i.default="default",i))(W||{});const H=i=>{switch(i){case"error":return"input-error";case"good":return"input-good";default:return"input-normal"}},K=i=>{switch(i){case"error":return"input-label-error";case"good":return"input-label-good";default:return"input-label-normal"}},z=i=>{switch(i){case"error":return"input-helper-text-error";case"good":return"input-helper-text-good";default:return"input-helper-text-normal"}},ue=n.forwardRef(function(i,f){const{checked:g,onChange:a,name:s="",id:w="",label:j="",state:S=W.default,containerClassName:b="",inputClassName:A="",labelClassName:y="",...I}=i;return r.jsxs("label",{className:c.classNames("input-check-container",b),children:[r.jsx("input",{id:w,ref:f,name:s,type:"checkbox",checked:g,onChange:a,className:c.classNames("input-check",H(S),A),...I}),r.jsx("span",{className:c.classNames("input-check-label",K(S),y),children:j})]})}),Z=i=>i==null?!1:Array.isArray(i)?i.length>0:`${i}`.length>0,ce=new Set(["date","datetime-local","time","month","week","range","color","file"]),G=n.forwardRef(function(i,f){const{children:g,state:a=W.default,label:s="",containerClassName:w="",inputClassName:j="",labelClassName:S="",helperText:b="",helperTextClassName:A="",value:y,defaultValue:I,onChange:q,onFocus:p,onBlur:v,...d}=i,D=y!==void 0,[B,F]=n.useState(()=>Z(I)),O=D?Z(y):B,M=ce.has(d.type??""),E=!!d.placeholder||M,m=d["aria-required"]===!0||String(d["aria-required"]).toLowerCase()==="true",x=!!(d.required||m),k=h=>{D||F(h.currentTarget.value.length>0),q?.(h)};return r.jsxs("div",{className:c.classNames("text-input-container",w),children:[r.jsxs("div",{className:"text-input-field",children:[r.jsx("input",{ref:f,defaultValue:I,onChange:k,onFocus:p,onBlur:v,...D?{value:y}:{},className:c.classNames("text-input",H(a),j,O?"has-value":"",d.placeholder?"has-placeholder":"",E?"keep-label-up":""),...d}),!!s&&r.jsxs("label",{htmlFor:d.id,className:c.classNames("text-input-label",K(a),S),children:[s,x?" *":""]}),g]}),!!b&&r.jsx("p",{className:c.classNames("text-input-helper-text",z(a),A),children:b})]})}),de=n.forwardRef(function(i,f){const{value:g,onChange:a,options:s,containerClassName:w="",inputClassName:j="",labelClassName:S="",helperText:b="",helperTextClassName:A="",label:y="",placeholder:I="",name:q="",id:p="",state:v=W.default,native:d=!0,disabled:D,required:B,autoFocus:F,children:O,...M}=i,E=n.useRef(null),[m,x]=n.useState(!1),[k,h]=n.useState(-1),u=n.useMemo(()=>s.findIndex(t=>String(t.id)===String(g??s[0]?.id??"")),[s,g]),C=n.useMemo(()=>u>=0?s[u]:void 0,[s,u]);n.useEffect(()=>{if(!(d||!m)){if(!s.length){h(-1);return}h(u>=0?u:0)}},[d,s.length,u,m]),n.useEffect(()=>{if(d)return;const t=o=>{E.current&&!E.current.contains(o.target)&&x(!1)};return document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[d]);const R=n.useCallback(t=>{f&&(typeof f=="function"?f(t):f.current=t)},[f]),L=n.useCallback(t=>{if(!a)return;const o={target:{value:String(t)},currentTarget:{value:String(t)}};a(o)},[a]),T=n.useCallback(t=>{const o=s[t];o&&(L(o.id),x(!1))},[L,s]),P=n.useCallback(t=>{if(s.length){if(t.key==="ArrowDown"||t.key==="ArrowUp"){if(t.preventDefault(),!m){x(!0);const o=u>=0?u:0;h(o);return}h(o=>{const U=o>=0?o:u;return t.key==="ArrowDown"?(U+1+s.length)%s.length:(U-1+s.length)%s.length});return}if(t.key==="Enter"){if(!m){t.preventDefault(),x(!0),h(u>=0?u:0);return}t.preventDefault(),T(k>=0?k:0);return}t.key==="Escape"&&m&&(t.preventDefault(),x(!1))}},[k,s,T,u,m]);return d?r.jsxs("div",{className:c.classNames("select-input-container",w),children:[r.jsx("select",{...M,id:p,ref:R,name:q,value:g,onChange:a,className:c.classNames("select-input",H(v),"peer",j),children:s?.map(t=>r.jsx("option",{value:t.id,children:t.value??t.name??t.id},t.id))}),r.jsx("label",{htmlFor:p,className:c.classNames("select-input-label",K(v),S),children:y}),O,b&&r.jsx("p",{className:c.classNames("select-input-helper-text",z(v),A),children:b})]}):r.jsxs("div",{ref:E,className:c.classNames("select-input-container",w),children:[r.jsx("select",{...M,ref:R,name:q,id:p,value:g,onChange:a,className:"select-input-native-hidden",tabIndex:-1,"aria-hidden":!0,children:s?.map(t=>r.jsx("option",{value:t.id,children:t.value??t.name??t.id},t.id))}),r.jsx(G,{id:p,name:q,state:v,value:String(C?.value??C?.name??""),readOnly:!0,label:y,helperText:b,containerClassName:"select-input-text-container",inputClassName:c.classNames("select-input-text",j),labelClassName:S,helperTextClassName:A,placeholder:I,disabled:D,required:B,autoFocus:F,onClick:()=>x(t=>!t),onKeyDown:P,onFocus:()=>x(!0),role:"combobox","aria-expanded":m,"aria-haspopup":"listbox",children:O}),m&&r.jsx("ul",{className:"select-input-options-container",role:"listbox",children:s.map((t,o)=>{const U=String(t.id)===String(g),_=o===k;return r.jsx("li",{role:"option","aria-selected":U,className:c.classNames("select-input-option-item",_?"highlighted":""),onMouseEnter:()=>h(o),onClick:Y=>{T(o),Y.stopPropagation()},children:t.value??t.name??t.id},t.id)})})]})});exports.AutocompleteInput=oe;exports.CheckInput=ue;exports.SelectInput=de;exports.State=W;exports.TextInput=G;exports.helperTextStateClassName=z;exports.inputStateClassName=H;exports.labelStateClassName=K;