prometeo-design-system 2.3.1 → 2.3.3

package/dist/Select.es.js

@@ -1,211 +1,394 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
-import { Icons as w } from "./Icons.es.js";
-import { c as o } from "./cn-B6yFEsav.js";
-import { memo as se, useState as y, useRef as re, useEffect as oe } from "react";
-import le from "./Spinner.es.js";
-const ae = ({
-  label: I,
-  onOptionClick: z,
-  value: u = [],
-  isFetching: O = !1,
-  options: p,
-  multiple: d = !0,
-  onClear: N,
-  onClose: P,
-  className: k,
-  id: D,
-  emptyMessage: B = "No hay opciones disponibles",
-  optionValue: a,
-  optionLabel: x,
-  renderOption: E,
-  placeholder: F,
-  renderSelection: H,
-  containerClassName: M,
-  buttonClassName: L,
-  dropdownClassName: A,
-  displayMode: C = "compact",
-  onRemoveOption: T,
-  width: f = "100%",
+import { j as r } from "./jsx-runtime-DKDX3adD.js";
+import { Icons as T } from "./Icons.es.js";
+import { c as p } from "./cn-B6yFEsav.js";
+import Z, { useRef as $, useLayoutEffect as me, memo as S, useState as V, useMemo as Y, useEffect as U, useCallback as R } from "react";
+import xe from "./Spinner.es.js";
+import { createPortal as ge } from "react-dom";
+import { u as pe } from "./useDragScroll-CHN9OMwn.js";
+const ye = (n) => {
+  let t = n;
+  for (; t && t !== document.body; ) {
+    const s = window.getComputedStyle(t).backgroundColor;
+    if (s && s !== "transparent" && s !== "rgba(0, 0, 0, 0)")
+      return s;
+    t = t.parentElement;
+  }
+  const o = window.getComputedStyle(document.body).backgroundColor;
+  return o && o !== "transparent" && o !== "rgba(0, 0, 0, 0)" ? o : "rgb(255, 255, 255)";
+};
+function he() {
+  const n = $(null);
+  return me(() => {
+    if (!n.current || !n.current.parentElement) return;
+    const t = ye(n.current.parentElement);
+    n.current.style.backgroundColor = t;
+  }, []), {
+    ref: n
+  };
+}
+function x(n, t) {
+  if (typeof t == "function")
+    return t(n);
+  const o = t.split(".");
+  let c = n;
+  for (const s of o)
+    if (c && typeof c == "object" && s in c)
+      c = c[s];
+    else
+      return;
+  return c;
+}
+const be = ({
+  label: n,
+  onOptionClick: t,
+  value: o = [],
+  isFetching: c = !1,
+  options: s,
+  multiple: i = !1,
+  onClear: g,
+  onClose: y,
+  className: u,
+  id: w,
+  emptyMessage: C = "No hay opciones disponibles",
+  optionValue: d,
+  optionLabel: h,
+  renderOption: M,
+  placeholder: j,
+  renderSelection: P,
+  containerClassName: B,
+  buttonClassName: k,
+  dropdownClassName: G,
+  displayMode: H = "compact",
+  onRemoveOption: E,
+  width: a = "100%",
   height: l,
-  labelVariant: c = "default"
+  labelVariant: f = "default",
+  attachToParent: D = !1,
+  name: b,
+  overflow: ne = "wrap",
+  onChange: O
 }) => {
-  const [r, h] = y(!1), [g, b] = y(!1), [$, R] = y("down"), i = re(null), m = u && u.length > 0, q = p?.filter((e) => u.includes(a(e))), G = () => c === "static" || r || m || g ? "-top-2 left-2 scale-90" : "top-1/2 -translate-y-1/2 scale-100", j = {};
-  f && f !== "100%" && (j.width = f), l && (j.height = l);
-  const J = () => c === "static" ? l ? "text-sm" : "text-xs" : "text-sm", K = () => l ? { height: l } : {};
-  oe(() => {
-    const e = (n) => {
-      i.current && !i.current.contains(n.target) && h(!1);
+  const [v, W] = V(!1), I = $(null), F = $(null), { ref: se } = he(), { bind: N, ref: le } = pe({
+    axis: "x",
+    cursor: { idle: "default", dragging: "grabbing" }
+  }), _ = o && o.length > 0, K = s?.filter((e) => o.includes(x(e, d))), oe = () => f === "static" || v || _ ? "-top-2 left-2 scale-90" : "top-1/2 -translate-y-1/2 scale-100", L = {}, z = Y(() => s.map((e) => ({
+    id: x(e, d),
+    value: x(e, d),
+    label: x(e, h)
+  })), [s, d, h]);
+  a && a !== "100%" && (L.width = a), l && (L.height = l);
+  const ae = () => f === "static" ? l ? "text-sm" : "text-xs" : "text-sm", ce = () => l ? { height: l } : {};
+  U(() => {
+    const e = (m) => {
+      if (I.current) {
+        if (m.type === "mousedown" && I.current.contains(m.target) || m.type === "scroll" && F.current?.contains(m.target))
+          return;
+        W(!1);
+      }
     };
-    return r && document.addEventListener("mousedown", e), () => {
-      document.removeEventListener("mousedown", e);
+    return document.addEventListener("mousedown", e), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e, !0), () => {
+      document.removeEventListener("mousedown", e), window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e, !0);
     };
-  }, [r]);
-  const Q = () => {
-    r || Z(), h(!r);
-  }, U = (e) => {
-    const n = a(e);
-    z(n, e), d || (h(!1), P?.());
-  }, W = (e) => {
-    e.stopPropagation(), b(!1), e.target.blur(), N?.();
-  }, X = (e, n) => {
-    n?.stopPropagation();
-    const s = a(e);
-    T?.(s);
-  }, Y = ({ option: e, onRemove: n }) => /* @__PURE__ */ t.jsxs("div", { className: "inline-flex items-center gap-1 px-2 py-1 bg-primary-default-default text-white text-xs rounded-md", children: [
-    /* @__PURE__ */ t.jsx("span", { className: "truncate max-w-20", children: x(e) }),
-    /* @__PURE__ */ t.jsx(
-      "button",
-      {
-        onMouseDown: (s) => {
-          s.preventDefault(), n(e, s);
-        },
-        className: "flex-shrink-0 hover:bg-primary-strong-default rounded-sm p-0.5 transition-colors",
-        type: "button",
-        tabIndex: -1,
-        children: /* @__PURE__ */ t.jsx(w.Close, { size: 12, className: "" })
+  }, []);
+  const q = () => {
+    W(!v);
+  }, J = R((e) => {
+    if (console.log("onchange en el select, is multiple", i), i) {
+      const A = [...z.filter((fe) => o.includes(fe.id)), e];
+      O?.(A, b);
+    } else
+      O?.([e], b);
+  }, [i, O, b, z, o]), ie = R((e) => {
+    t?.(e, b), J(e), i || (W(!1), y?.());
+  }, [i, t, y, b, J]), ue = (e) => {
+    e.stopPropagation(), e.target.blur(), g?.();
+  }, Q = R((e) => {
+    i || O?.([], b);
+    const m = s.find((A) => x(A, d) === e);
+    m && (t?.({ id: x(m, d), label: x(m, h), value: x(m, d) }, b), E?.(m));
+  }, [t, E, h, d, s, b, i, O]), de = Y(() => f === "static" && j ? j : "", [f, j]), X = K.map((e) => x(e, d));
+  return /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: p(
+        "relative bg-inherit select-none",
+        B,
+        !a && "w-full",
+        f === "static" && "mt-2"
+      ),
+      ref: I,
+      style: L,
+      draggable: !1,
+      children: [
+        /* @__PURE__ */ r.jsxs("div", { className: p("relative bg-inherit ", u), children: [
+          /* @__PURE__ */ r.jsx(
+            "label",
+            {
+              htmlFor: w,
+              ref: se,
+              className: p(
+                "absolute left-3 pointer-events-none bg-inherit px-1 z-10",
+                f === "default" && "transition-all duration-200 ease-in-out",
+                ae(),
+                oe(),
+                _ || v ? "text-primary-default-default" : "text-neutral-medium-default"
+              ),
+              children: n
+            }
+          ),
+          /* @__PURE__ */ r.jsxs(
+            "div",
+            {
+              role: "button",
+              id: w,
+              onClick: q,
+              onKeyDown: (e) => {
+                (e.key === "Enter" || e.key === " ") && (e.preventDefault(), q());
+              },
+              tabIndex: 0,
+              className: p(
+                "w-full px-2 text-left border rounded-lg transition-all duration-200 ease-in-out",
+                "flex items-center justify-start bg-inherit gap-2 ",
+                "focus:outline-none",
+                H === "chips" && i && _ ? "min-h-12 py-2" : !l && "h-12",
+                v ? "border-primary-default-default ring-[1px] ring-primary-default-default" : "border-neutral-default-default hover:border-neutral-strong-default",
+                k
+              ),
+              style: ce(),
+              children: [
+                /* @__PURE__ */ r.jsx(
+                  "div",
+                  {
+                    className: p("flex-1 overflow-x-auto overflow-y-hidden px-1 prometeo-scrollbar-none"),
+                    ref: le,
+                    onPointerDown: N.onPointerDown,
+                    onPointerMove: N.onPointerMove,
+                    onPointerUp: N.onPointerUp,
+                    onPointerLeave: N.onPointerLeave,
+                    onPointerCancel: N.onPointerCancel,
+                    onClickCapture: N.onClickCapture,
+                    children: P ? Z.createElement(P, {
+                      selectedOptions: K,
+                      placeholder: j,
+                      multiple: i,
+                      onRemoveOption: (e) => {
+                        Q(e);
+                      }
+                    }) : /* @__PURE__ */ r.jsx(
+                      te,
+                      {
+                        displayMode: H,
+                        selectedOptions: z.filter((e) => X.includes(e.id)),
+                        placeholder: de,
+                        onRemoveOption: Q,
+                        multiple: i,
+                        className: p(ne === "scroll" ? "flex-nowrap" : "flex-wrap")
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
+                  c && /* @__PURE__ */ r.jsx(xe, { size: "small" }),
+                  _ && g && /* @__PURE__ */ r.jsx(
+                    "button",
+                    {
+                      onMouseDown: (e) => {
+                        e.preventDefault(), e.stopPropagation(), ue(e);
+                      },
+                      className: "text-neutral-medium-default hover:text-neutral-default-default transition-colors",
+                      type: "button",
+                      tabIndex: -1,
+                      children: /* @__PURE__ */ r.jsx(T.Close, { size: 16, className: "" })
+                    }
+                  ),
+                  /* @__PURE__ */ r.jsx(
+                    T.ChevronDown,
+                    {
+                      size: 20,
+                      className: p(
+                        "transition-transform text-neutral-default-default",
+                        v ? "rotate-180" : ""
+                      )
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r.jsx(
+          we,
+          {
+            options: M ? s : z,
+            selectedOptionsIds: X,
+            onOptionClick: ie,
+            emptyMessage: C,
+            dropdownClassName: G,
+            multiple: i,
+            attachToParent: D,
+            selectRef: I,
+            dropdownRef: F,
+            isOpen: v,
+            renderOption: M,
+            optionLabel: h,
+            optionValue: d
+          }
+        )
+      ]
+    }
+  );
+}, Ce = S(be);
+function De({
+  options: n,
+  onOptionClick: t,
+  dropdownClassName: o,
+  emptyMessage: c,
+  selectedOptionsIds: s,
+  multiple: i,
+  attachToParent: g,
+  selectRef: y,
+  dropdownRef: u,
+  isOpen: w,
+  renderOption: C,
+  optionValue: d,
+  optionLabel: h
+}) {
+  const [P, B] = V("down"), k = (a) => {
+    if (!u.current || !y.current) return;
+    const l = y.current.getBoundingClientRect();
+    switch (a || P) {
+      case "down":
+        u.current.style.top = `${l.top + l.height}px`;
+        break;
+      case "up":
+        u.current.style.top = `${l.top - 240 - 16}px`;
+        break;
+    }
+    u.current.style.left = `${l.left}px`, u.current.style.width = `${l.width}px`;
+  }, G = () => {
+    if (!u.current || !y.current) return P;
+    const a = y.current.getBoundingClientRect(), l = a.bottom + 240 < window.innerHeight, f = a.top - 240 - 16 > 0;
+    let D = "down";
+    return l ? D = "down" : f && (D = "up"), D;
+  }, H = (a) => {
+    if (!(!u.current || !y.current)) {
+      if (u.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !a) {
+        u.current.style.maxHeight = "0", u.current.style.opacity = "0";
+        return;
+      }
+      if (!g) {
+        const l = G();
+        B(l), k(l);
       }
-    )
-  ] }), Z = () => {
-    if (i.current) {
-      const e = i.current.getBoundingClientRect(), n = 250, s = window.innerHeight - e.bottom, v = e.top;
-      s < n && v > n ? R("up") : R("down");
+      u.current.style.maxHeight = "240px", u.current.style.opacity = "1";
     }
-  }, _ = ({ option: e, isSelected: n, onSelect: s, isMultiple: v }) => /* @__PURE__ */ t.jsxs(
+  };
+  U(() => {
+    g || !y.current || !w || k();
+  }, [s]), U(() => {
+    H(w);
+  }, [w]);
+  const E = /* @__PURE__ */ r.jsx(
     "div",
     {
-      onMouseDown: (S) => {
-        S.preventDefault(), s(), S.stopPropagation();
+      ref: u,
+      style: {
+        opacity: "0",
+        maxHeight: "0"
       },
-      className: o(
+      className: p(
+        " z-50 w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-md shadow-lg",
+        "max-h-60 overflow-auto",
+        g ? "absolute z-50 " : "fixed z-100 top-0 left-0",
+        o
+      ),
+      children: n.length === 0 ? /* @__PURE__ */ r.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: c }) : n.map((a) => {
+        const l = typeof a.id < "u" ? a.id : x(a, d), f = s.includes(l), D = R(() => {
+          t({
+            id: l,
+            label: String(x(a, h)),
+            value: x(a, d)
+          });
+        }, [t, l, h, d, a]);
+        return C ? Z.createElement(C, {
+          key: l,
+          option: a,
+          isSelected: f,
+          multiple: i,
+          onSelect: D
+        }) : /* @__PURE__ */ r.jsx(
+          ee,
+          {
+            option: a,
+            multiple: i,
+            isSelected: f,
+            onSelect: t
+          },
+          l
+        );
+      })
+    }
+  );
+  return g ? E : ge(E, document.body);
+}
+const we = S(De), ee = S(({ option: n, isSelected: t, onSelect: o, multiple: c }) => (
+  // biome-ignore lint/a11y/noStaticElementInteractions: no keyboard interaction needed
+  /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      onMouseDown: (s) => {
+        s.preventDefault(), o?.(n), s.stopPropagation();
+      },
+      className: p(
         "px-3 py-2 cursor-pointer flex items-center transition-colors",
-        n ? "bg-primary-default-default text-white" : "hover:bg-neutral-medium-selected text-neutral-default-default"
+        t ? "bg-primary-default-default text-white" : "hover:bg-neutral-medium-selected text-neutral-default-default"
       ),
       children: [
-        v && /* @__PURE__ */ t.jsx(
+        c && /* @__PURE__ */ r.jsx(
           "input",
           {
             type: "checkbox",
-            checked: n,
+            checked: t,
             onChange: () => {
             },
             className: "mr-2 pointer-events-none"
           }
         ),
-        /* @__PURE__ */ t.jsx("span", { children: x(e) })
+        /* @__PURE__ */ r.jsx("span", { children: n.label })
       ]
     }
-  ), V = () => c === "static" ? F : "", ee = ({ selectedOptions: e, placeholder: n }) => e?.length === 0 ? n ? /* @__PURE__ */ t.jsx("span", { className: "text-neutral-medium-default opacity-50", children: n }) : null : C === "chips" && d ? /* @__PURE__ */ t.jsx("div", { className: "flex items-center gap-1 flex-wrap py-1", children: e.map((s) => /* @__PURE__ */ t.jsx(
-    Y,
-    {
-      option: s,
-      onRemove: X
-    },
-    a(s)
-  )) }) : e?.length === 1 ? /* @__PURE__ */ t.jsx("span", { children: x(e[0]) }) : /* @__PURE__ */ t.jsxs("span", { children: [
-    e?.length,
-    " seleccionados"
-  ] }), te = E || _, ne = H || ee;
-  return /* @__PURE__ */ t.jsx(
-    "div",
+  )
+));
+ee.displayName = "DefaultOptionRenderer";
+const te = S(({ selectedOptions: n, placeholder: t, onRemoveOption: o, displayMode: c, multiple: s, className: i }) => n?.length === 0 ? t ? /* @__PURE__ */ r.jsx("span", { className: "text-neutral-medium-default opacity-50", children: t }) : null : c === "chips" && s ? /* @__PURE__ */ r.jsx("div", { className: p("flex items-center gap-1 ", i), children: n.map((g) => /* @__PURE__ */ r.jsx(
+  re,
+  {
+    id: g.id,
+    label: g.label,
+    onRemove: o
+  },
+  g.id
+)) }) : n?.length === 1 ? /* @__PURE__ */ r.jsx("span", { children: n[0].label }) : /* @__PURE__ */ r.jsxs("span", { children: [
+  n?.length,
+  " seleccionados"
+] }));
+te.displayName = "DefaultSelectionDisplay";
+const re = S(({ id: n, label: t, onRemove: o, className: c }) => /* @__PURE__ */ r.jsxs("div", { className: "inline-flex max-w-[calc(50%-0.25rem)] items-center gap-1 px-2 py-1 bg-primary-default-default text-white text-xs rounded-md", children: [
+  /* @__PURE__ */ r.jsx("span", { className: "truncate w-max ", children: t }),
+  /* @__PURE__ */ r.jsx(
+    "button",
     {
-      className: o(
-        "relative bg-inherit select-none",
-        M,
-        !f && "w-full",
-        c === "static" && "mt-2"
-      ),
-      ref: i,
-      style: j,
-      children: /* @__PURE__ */ t.jsxs("div", { className: o("relative bg-inherit", k), children: [
-        /* @__PURE__ */ t.jsxs(
-          "button",
-          {
-            id: D,
-            type: "button",
-            onClick: Q,
-            onFocus: () => b(!0),
-            onBlur: () => b(!1),
-            className: o(
-              "w-full px-3 text-left border-1 rounded-lg transition-all duration-200 ease-in-out",
-              "flex items-center justify-between bg-inherit",
-              "focus:outline-none",
-              C === "chips" && d && m ? "min-h-12 py-2" : !l && "h-12",
-              r || g ? "border-primary-default-default border-2" : "border-neutral-default-default hover:border-neutral-strong-default",
-              L
-            ),
-            style: K(),
-            children: [
-              /* @__PURE__ */ t.jsx(
-                "label",
-                {
-                  htmlFor: D,
-                  className: o(
-                    "absolute left-3 pointer-events-none bg-inherit px-1 z-10",
-                    c === "default" && "transition-all duration-200 ease-in-out",
-                    J(),
-                    G(),
-                    m || r || g ? "text-primary-default-default" : "text-neutral-medium-default"
-                  ),
-                  children: I
-                }
-              ),
-              /* @__PURE__ */ t.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ t.jsx(ne, { selectedOptions: q, placeholder: V() }) }),
-              /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2 ml-2", children: [
-                O && /* @__PURE__ */ t.jsx(le, { size: "small" }),
-                m && N && /* @__PURE__ */ t.jsx(
-                  "button",
-                  {
-                    onMouseDown: (e) => {
-                      e.preventDefault(), e.stopPropagation(), W(e);
-                    },
-                    className: "text-neutral-medium-default hover:text-neutral-default-default transition-colors",
-                    type: "button",
-                    tabIndex: -1,
-                    children: /* @__PURE__ */ t.jsx(w.Close, { size: 16, className: "" })
-                  }
-                ),
-                /* @__PURE__ */ t.jsx(
-                  w.ChevronDown,
-                  {
-                    size: 20,
-                    className: o(
-                      "transition-transform text-neutral-default-default",
-                      r ? "rotate-180" : ""
-                    )
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        r && /* @__PURE__ */ t.jsx(
-          "div",
-          {
-            className: o(
-              "absolute z-50 w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-md shadow-lg",
-              "max-h-60 overflow-auto",
-              $ === "up" ? "bottom-full mb-1" : "top-full mt-1",
-              A
-            ),
-            children: p.length === 0 ? /* @__PURE__ */ t.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: B }) : p.map((e) => {
-              const n = a(e), s = u.includes(n);
-              return /* @__PURE__ */ t.jsx(
-                te,
-                {
-                  option: e,
-                  isSelected: s,
-                  onSelect: () => U(e),
-                  isMultiple: d
-                },
-                n
-              );
-            })
-          }
-        )
-      ] })
+      onMouseDown: (s) => {
+        s.preventDefault(), o?.(n);
+      },
+      className: p("shrink-0 hover:bg-primary-strong-default rounded-sm p-0.5 transition-colors", c),
+      type: "button",
+      tabIndex: -1,
+      children: /* @__PURE__ */ r.jsx(T.Close, { size: 12, className: "" })
     }
-  );
-}, me = se(ae);
+  )
+] }));
+re.displayName = "Chip";
 export {
-  me as default
+  Ce as default
 };