docthub-core-components 3.0.0 → 3.1.0

package/dist/components/overrides/ui/auto-complete.js

@@ -0,0 +1,466 @@
+"use client";
+import { jsx as a, jsxs as q, Fragment as Ie } from "react/jsx-runtime";
+import { c as fe } from "react-compiler-runtime";
+import { X as Re, ChevronDown as Ce, Check as er } from "lucide-react";
+import { useState as Z, useEffect as p, useDeferredValue as rr, useRef as O, useId as tr, useMemo as J, useCallback as P, memo as sr } from "react";
+import { createPortal as cr } from "react-dom";
+import { Input as or } from "../../ui/input.js";
+import { useExclusiveDropdown as ir } from "../../../hooks/use-exclusive-dropdown.js";
+import { getFloatingDropdownPosition as lr } from "../../../lib/get-floating-dropdown-position.js";
+import { getScrollParentClipRects as dr, getScrollParents as ar } from "../../../lib/get-scroll-parents.js";
+const nr = {
+  small: "h-8 text-xs px-2",
+  medium: "h-10 text-sm px-3",
+  large: "h-12 text-base px-4"
+}, fr = {
+  outlined: "border border-input",
+  filled: "border-0 bg-accent",
+  standard: "border-0 border-b border-input rounded-none"
+}, ur = (l, e) => e && typeof l == "object" && l !== null ? l[e.text] : typeof l == "string" ? l : (l == null ? void 0 : l.label) || "", mr = (l, e) => e && typeof l == "object" && l !== null ? l[e.value] : typeof l == "string" ? l : (l == null ? void 0 : l.value) || l, yr = (l, e, t, d) => t(l, d) === t(e, d), ke = (l) => {
+  if (l == null) return "";
+  try {
+    return String(l).toLowerCase().replace(/[^a-z0-9]/g, "");
+  } catch {
+    return "";
+  }
+}, br = (l, e, t, d) => {
+  if (!e) return l;
+  const i = ke(e);
+  return l.filter((s) => {
+    const S = t(s, d);
+    return ke(S).includes(i);
+  });
+}, Se = sr((l) => {
+  const e = fe(10);
+  let t, d, i, s;
+  e[0] !== l ? ({
+    className: i,
+    variant: s,
+    children: t,
+    ...d
+  } = l, e[0] = l, e[1] = t, e[2] = d, e[3] = i, e[4] = s) : (t = e[1], d = e[2], i = e[3], s = e[4]);
+  const S = i === void 0 ? "" : i, c = s === void 0 ? "default" : s;
+  let x;
+  e[5] === Symbol.for("react.memo_cache_sentinel") ? (x = {
+    default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+    secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+    destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+    outline: "text-foreground border-border bg-background hover:bg-accent hover:text-accent-foreground"
+  }, e[5] = x) : x = e[5];
+  const f = `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${x[c]} ${S}`;
+  let u;
+  return e[6] !== t || e[7] !== d || e[8] !== f ? (u = /* @__PURE__ */ a("div", { className: f, ...d, children: t }), e[6] = t, e[7] = d, e[8] = f, e[9] = u) : u = e[9], u;
+});
+Se.displayName = "Badge";
+const Te = (l) => {
+  const e = fe(17), {
+    option: t,
+    index: d,
+    isSelected: i,
+    isHighlighted: s,
+    onSelect: S,
+    getOptionLabel: c,
+    renderOption: x
+  } = l;
+  let y;
+  e[0] !== S || e[1] !== t ? (y = () => {
+    S(t);
+  }, e[0] = S, e[1] = t, e[2] = y) : y = e[2];
+  const f = y;
+  let u;
+  e[3] !== f ? (u = (H) => {
+    (H.key === "Enter" || H.key === " ") && (H.preventDefault(), f());
+  }, e[3] = f, e[4] = u) : u = e[4];
+  const T = u, V = `
+        px-3 py-2 cursor-pointer flex items-center justify-between
+        text-sm transition-colors mb-[0.4vh]
+        ${s ? "bg-accent text-accent-foreground" : ""}
+        ${i ? "bg-primary/10" : ""}
+        hover:bg-accent hover:text-accent-foreground
+      `;
+  let N;
+  e[5] !== c || e[6] !== d || e[7] !== i || e[8] !== t || e[9] !== x ? (N = x ? x(t, d) : /* @__PURE__ */ q(Ie, { children: [
+    /* @__PURE__ */ a("span", { children: c(t) }),
+    i && /* @__PURE__ */ a(er, { className: "h-4 w-4 text-primary" })
+  ] }), e[5] = c, e[6] = d, e[7] = i, e[8] = t, e[9] = x, e[10] = N) : N = e[10];
+  let b;
+  return e[11] !== f || e[12] !== T || e[13] !== i || e[14] !== V || e[15] !== N ? (b = /* @__PURE__ */ a("div", { role: "option", "aria-selected": i, onClick: f, onKeyDown: T, tabIndex: 0, className: V, children: N }), e[11] = f, e[12] = T, e[13] = i, e[14] = V, e[15] = N, e[16] = b) : b = e[16], b;
+};
+Te.displayName = "AutocompleteOption";
+const Fe = (l) => {
+  const e = fe(20), {
+    tag: t,
+    index: d,
+    getOptionLabel: i,
+    onRemove: s,
+    chipClassName: S
+  } = l;
+  let c;
+  e[0] !== s || e[1] !== t ? (c = (te) => {
+    te.stopPropagation(), s(t);
+  }, e[0] = s, e[1] = t, e[2] = c) : c = e[2];
+  const x = c, y = `text-xs ${S ?? ""}`;
+  let f;
+  e[3] !== y ? (f = y.trim(), e[3] = y, e[4] = f) : f = e[4];
+  let u;
+  e[5] !== i || e[6] !== t ? (u = i(t), e[5] = i, e[6] = t, e[7] = u) : u = e[7];
+  let T;
+  e[8] !== i || e[9] !== t ? (T = i(t), e[8] = i, e[9] = t, e[10] = T) : T = e[10];
+  const V = `Remove ${T}`;
+  let N;
+  e[11] === Symbol.for("react.memo_cache_sentinel") ? (N = /* @__PURE__ */ a(Re, { className: "h-3 w-3" }), e[11] = N) : N = e[11];
+  let b;
+  e[12] !== x || e[13] !== V ? (b = /* @__PURE__ */ a("button", { type: "button", onClick: x, className: "ml-1 hover:bg-secondary-foreground/20 rounded-full p-0.5", "data-testid": "tag-remove", "aria-label": V, children: N }), e[12] = x, e[13] = V, e[14] = b) : b = e[14];
+  let H;
+  return e[15] !== d || e[16] !== f || e[17] !== u || e[18] !== b ? (H = /* @__PURE__ */ q(Se, { variant: "secondary", className: f, children: [
+    u,
+    b
+  ] }, d), e[15] = d, e[16] = f, e[17] = u, e[18] = b, e[19] = H) : H = e[19], H;
+};
+Fe.displayName = "AutocompleteTag";
+const Sr = ({
+  options: l = [],
+  dataSource: e = [],
+  // Default to empty array
+  value: t = null,
+  onChange: d,
+  change: i,
+  // New prop for stories
+  onInputChange: s,
+  placeholder: S = "Search...",
+  multiple: c = !1,
+  freeSolo: x = !1,
+  disabled: y = !1,
+  loading: f = !1,
+  size: u = "medium",
+  variant: T = "outlined",
+  label: V = "",
+  helperText: N = "",
+  error: b,
+  required: H = !1,
+  fullWidth: te = !0,
+  clearable: ue = !0,
+  disableCloseOnSelect: se = !1,
+  filterOptions: ce,
+  getOptionLabel: E = (n) => ur(n, L),
+  getOptionValue: j = (n) => mr(n, L),
+  isOptionEqualToValue: me,
+  renderOption: Pe,
+  renderTags: oe,
+  fields: L,
+  // New prop for field mapping
+  noOptionsText: Ve = "No options",
+  emptyMessage: He,
+  className: Ke = "",
+  inputClassName: ye = "",
+  chipClassName: be,
+  debounceMs: ie = 0,
+  // New: Debounce filtering
+  minSearchLength: xe = 0,
+  // New prop: Min chars before search
+  ntt: pe = !1,
+  clearInputOnSelect: xr = !0,
+  onPointerDown: _,
+  ...ze
+}) => {
+  const [n, w] = Z(!1), [k, A] = Z(""), [je, we] = Z(""), [z, g] = Z(-1), [I, R] = Z(!1), [M, Be] = Z({
+    top: 0,
+    left: 0,
+    width: 0,
+    maxHeight: 0,
+    placement: "bottom"
+  }), {
+    containerProps: Ue,
+    onOpenChange: ve
+  } = ir();
+  p(() => {
+    if (ie <= 0) {
+      we(k);
+      return;
+    }
+    const r = setTimeout(() => we(k), ie);
+    return () => clearTimeout(r);
+  }, [k, ie]);
+  const G = rr(je), v = O(null), Ne = O(null), Q = O(null), W = O(null), Y = O(!1), Ee = tr(), X = e.length > 0 ? e : l, F = J(() => me || ((r, o) => yr(r, o, j, L)), [me, j, L]), C = P((r) => {
+    if (r == null) return "";
+    if (typeof r == "object") return E(r);
+    const o = X.find((m) => F(m, r));
+    if (o) return E(o);
+    try {
+      return String(r);
+    } catch {
+      return "";
+    }
+  }, [X, E, F]), B = J(() => {
+    if (G.length < xe)
+      return X;
+    let r = X;
+    return c && Array.isArray(t) && (r = X.filter((o) => !t.some((m) => F(o, m)))), !c && !I && t && G === E(t) ? r : ce ? ce(r, {
+      inputValue: G
+    }) : br(r, G, E, L);
+  }, [
+    X,
+    t,
+    G,
+    // Use deferred value
+    ce,
+    E,
+    c,
+    F,
+    L,
+    I,
+    xe
+  ]), qe = P((r) => {
+    const o = r.target.value;
+    R(!0), A(o), s == null || s(r, o), !n && o && w(!0);
+  }, [n, s]);
+  p(() => {
+    if (c || I) return;
+    const r = C(t);
+    A(r);
+  }, [t, c, I, C]), p(() => {
+    i && process.env.NODE_ENV !== "production" && console.warn('[DoctAutocomplete] The "change" prop is deprecated. Please use "onChange" instead. "change" will be removed in v3.0.');
+  }, [i]);
+  const ee = P((r) => {
+    if (c) {
+      const o = Array.isArray(t) ? t : [], m = o.some((D) => F(r, D));
+      let $;
+      m ? $ = o.filter((D) => !F(r, D)) : $ = [...o, r], d == null || d(null, $), i == null || i({
+        itemData: $
+      }), R(!1), se || w(!1), setTimeout(() => {
+        var D;
+        (D = v.current) == null || D.focus();
+      }, 0);
+    } else
+      d == null || d(null, r), i == null || i({
+        itemData: r
+      }), A(E(r)), R(!1), se || w(!1);
+    g(-1);
+  }, [c, t, F, d, i, se, E]), le = P((r) => {
+    if (c && Array.isArray(t)) {
+      const o = t.filter((m) => !F(r, m));
+      d == null || d(null, o), i == null || i({
+        itemData: o
+      });
+    }
+  }, [c, t, F, d, i]), Le = P((r) => {
+    r.stopPropagation(), c ? (A(""), R(!1), s == null || s({
+      target: {
+        value: ""
+      }
+    }, ""), setTimeout(() => {
+      v.current && (v.current.value = "", v.current.focus());
+    }, 0), w(!1)) : (d == null || d(null, null), i == null || i({
+      itemData: null
+    }), A(""), R(!1), s == null || s({
+      target: {
+        value: ""
+      }
+    }, ""), setTimeout(() => {
+      v.current && (v.current.value = "", v.current.focus());
+    }, 0), w(!1));
+  }, [d, i, c, s]), Ae = J(() => c ? Array.isArray(t) && t.length > 0 : t != null, [c, t]), Ge = J(() => !ue || y ? !1 : c ? k !== "" : Ae, [ue, y, c, k, Ae]), Xe = P((r) => {
+    if (!n && (r.key === "ArrowDown" || r.key === "ArrowUp")) {
+      w(!0);
+      return;
+    }
+    if (n)
+      switch (r.key) {
+        case "ArrowDown":
+          r.preventDefault(), g((o) => o < B.length - 1 ? o + 1 : 0);
+          break;
+        case "ArrowUp":
+          r.preventDefault(), g((o) => o > 0 ? o - 1 : B.length - 1);
+          break;
+        case "Enter":
+          r.preventDefault(), z >= 0 && B[z] ? ee(B[z]) : x && k && ee(k);
+          break;
+        case "Escape":
+          w(!1), g(-1), c && (A(""), R(!1), s == null || s({
+            target: {
+              value: ""
+            }
+          }, ""));
+          break;
+        case "Tab":
+          w(!1), c && (A(""), R(!1), s == null || s({
+            target: {
+              value: ""
+            }
+          }, ""));
+          break;
+      }
+  }, [n, B, z, ee, x, k, c, s]), K = P(() => {
+    const r = Ne.current ?? W.current;
+    if (!r) return;
+    const o = r.getBoundingClientRect(), m = dr(r);
+    Be(lr({
+      anchorRect: o,
+      placement: "auto",
+      strategy: "absolute",
+      clipRects: m
+    }));
+  }, []), Ze = P(() => {
+    n || (K(), k === "" && (s == null || s({
+      target: {
+        value: ""
+      }
+    }, ""))), w(!n);
+  }, [n, K, k, s]), Je = P(() => {
+    if (Y.current) {
+      Y.current = !1, K(), R(!1), !c && !t && (A(""), s == null || s({
+        target: {
+          value: ""
+        }
+      }, ""));
+      return;
+    }
+    K(), R(!1), w(!0), !c && !t && (A(""), s == null || s({
+      target: {
+        value: ""
+      }
+    }, ""));
+  }, [K, c, t, s]), Me = P((r) => {
+    document.activeElement === v.current && w((o) => !o), _ == null || _(r);
+  }, [_]);
+  p(() => {
+    const r = (o) => {
+      const m = o.target;
+      if (!(n || c && k !== "")) return;
+      const D = W.current ? !W.current.contains(m) : !0, de = Q.current ? !Q.current.contains(m) : !0;
+      if (D && de) {
+        if (w(!1), R(!1), c) {
+          A(""), s == null || s({
+            target: {
+              value: ""
+            }
+          }, "");
+          return;
+        }
+        const h = C(t);
+        A(h), s == null || s({
+          target: {
+            value: h
+          }
+        }, h);
+      }
+    };
+    return document.addEventListener("pointerdown", r, !0), () => {
+      document.removeEventListener("pointerdown", r, !0);
+    };
+  }, [c, s, C, t, n, k]), p(() => {
+    if (!n || typeof window > "u") return;
+    const r = () => {
+      K();
+    }, o = W.current, m = ar(o), $ = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => {
+      K();
+    });
+    return $ == null || $.observe(o ?? document.body), m.forEach((D) => {
+      D.addEventListener("scroll", r, {
+        passive: !0
+      });
+    }), window.addEventListener("resize", r), () => {
+      $ == null || $.disconnect(), m.forEach((D) => {
+        D.removeEventListener("scroll", r);
+      }), window.removeEventListener("resize", r);
+    };
+  }, [n, K]), p(() => {
+    if (n && z >= 0 && Q.current) {
+      const r = Q.current.children[z];
+      r && r.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }, [z, n]), p(() => {
+    if (!n || !c) return;
+    const r = requestAnimationFrame(() => {
+      K();
+    });
+    return () => cancelAnimationFrame(r);
+  }, [n, c, t, K]), p(() => {
+    w(!1);
+  }, []), p(() => {
+    ve(n);
+  }, [n, ve]);
+  const $e = P(() => {
+    var r;
+    document.activeElement !== v.current && (Y.current = !0), w(!1), c && (A(""), R(!1), s == null || s({
+      target: {
+        value: ""
+      }
+    }, "")), (r = v.current) == null || r.focus();
+  }, [c, s]), Qe = J(() => !c || !Array.isArray(t) || t.length === 0 ? null : oe ? oe(t, le) : (
+    // biome-ignore lint/a11y/noStaticElementInteractions: chips container wraps nested buttons (tag remove)
+    // biome-ignore lint/a11y/useKeyWithClickEvents: Escape/click-outside already close; click is convenience
+    /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-1 mb-1 min-h-0", onClick: $e, children: t.map((r, o) => {
+      const m = j ? String(j(r)) : `${E(r)}-${o}`;
+      return /* @__PURE__ */ a(Fe, { tag: r, index: o, getOptionLabel: E, onRemove: le, chipClassName: be }, m);
+    }) })
+  ), [c, t, oe, le, $e, E, j, be]), We = J(() => `
+    relative flex items-center rounded-md
+    ${b ? "border border-destructive" : fr[T]}
+    ${nr[u]}
+    ${y ? "opacity-50 cursor-not-allowed" : "cursor-text"}
+    transition-colors ${ye}
+  `, [T, u, b, y, ye]), Ye = He ?? Ve;
+  return /* @__PURE__ */ q("div", { className: `relative ${te ? "w-full" : "w-auto"} ${Ke}`, ref: W, children: [
+    V && /* @__PURE__ */ q("label", { htmlFor: Ee, className: "block text-sm font-medium mb-1 w-full", onClick: (r) => {
+      var o;
+      r.preventDefault(), document.activeElement !== v.current && (Y.current = !0), w(!1), c && (A(""), R(!1), s == null || s({
+        target: {
+          value: ""
+        }
+      }, "")), (o = v.current) == null || o.focus();
+    }, onKeyDown: (r) => {
+      var o;
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), document.activeElement !== v.current && (Y.current = !0), w(!1), c && (A(""), R(!1), s == null || s({
+        target: {
+          value: ""
+        }
+      }, "")), (o = v.current) == null || o.focus());
+    }, children: [
+      V,
+      H && /* @__PURE__ */ a("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ a("div", { ...Ue, children: /* @__PURE__ */ q("div", { className: "relative overflow-visible", children: [
+      Qe,
+      /* @__PURE__ */ q("div", { ref: Ne, className: We, children: [
+        /* @__PURE__ */ a(or, { id: Ee, ref: v, value: k, onChange: qe, onKeyDown: Xe, onFocus: Je, onPointerDown: Me, placeholder: S, disabled: y, className: "px-0 border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent rounded-md", ...ze }),
+        /* @__PURE__ */ q("div", { className: "flex items-center gap-1 ml-auto", children: [
+          f && /* @__PURE__ */ a("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-muted-foreground border-t-transparent" }),
+          Ge && /* @__PURE__ */ a("button", { type: "button", onClick: Le, className: "p-1 hover:bg-accent rounded-sm transition-colors", tabIndex: -1, "data-testid": "autocomplete-clear", children: /* @__PURE__ */ a(Re, { className: "h-4 w-4 text-muted-foreground" }) }),
+          /* @__PURE__ */ a("button", { type: "button", disabled: y, onClick: Ze, className: `p-1 hover:bg-accent rounded-sm transition-colors ${y ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`, tabIndex: -1, "data-testid": "autocomplete-toggle", children: /* @__PURE__ */ a(Ce, { className: `h-4 w-4 text-muted-foreground transition-transform ${n ? "rotate-180" : ""}` }) })
+        ] })
+      ] }),
+      n && M.maxHeight > 0 && cr(/* @__PURE__ */ a("div", { className: `
+              absolute bg-popover border border-border rounded-md shadow-lg
+              max-h-60 overflow-auto z-[9999]
+              
+            `, style: {
+        top: M.top,
+        left: M.left,
+        width: M.width,
+        maxHeight: M.maxHeight
+      }, ref: Q, children: B.length === 0 ? /* @__PURE__ */ a("div", { className: "p-3 text-sm text-muted-foreground text-center", children: Ye }) : B.map((r, o) => {
+        const m = c ? Array.isArray(t) && t.some((U) => F(r, U)) : F(r, t), $ = o === z, D = j ? String(j(r)) : `${E(r)}-${o}`, de = (U) => U.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = (U) => {
+          const ae = E(U), ne = pe ? String(G || "").trim() : "";
+          if (!ne) return /* @__PURE__ */ a("span", { children: ae });
+          try {
+            const he = new RegExp(`(${de(ne)})`, "ig"), Oe = ae.split(he);
+            return /* @__PURE__ */ a("span", { children: Oe.map((re, _e) => {
+              const ge = re.toLowerCase() === ne.toLowerCase(), De = `${re}-${_e}`;
+              return ge ? /* @__PURE__ */ a("span", { className: "font-bold", children: re }, De) : /* @__PURE__ */ a("span", { children: re }, De);
+            }) });
+          } catch {
+            return /* @__PURE__ */ a("span", { children: ae });
+          }
+        };
+        return /* @__PURE__ */ a(Te, { option: r, index: o, isSelected: m, isHighlighted: $, onSelect: ee, getOptionLabel: E, renderOption: Pe || ((U) => h(U)) }, D);
+      }) }), document.body)
+    ] }) }),
+    (N || b) && /* @__PURE__ */ a("p", { className: `mt-1 text-xs ${b ? "text-destructive" : "text-muted-foreground"}`, children: b || N })
+  ] });
+};
+export {
+  Sr as DoctAutocomplete
+};