@sito/dashboard 0.0.73 → 0.0.75

package/dist/SelectInput-2oVsA3EU.js

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