docthub-core-components 3.2.8 → 3.2.9

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

@@ -2,7 +2,7 @@
 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 { useState as Z, useEffect as K, 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";
@@ -68,8 +68,8 @@ const Te = (l) => {
   }, 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 ? (u = (p) => {
+    (p.key === "Enter" || p.key === " ") && (p.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
@@ -111,11 +111,11 @@ const Fe = (l) => {
   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: [
+  let p;
+  return e[15] !== d || e[16] !== f || e[17] !== u || e[18] !== b ? (p = /* @__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;
+  ] }, d), e[15] = d, e[16] = f, e[17] = u, e[18] = b, e[19] = p) : p = e[19], p;
 };
 Fe.displayName = "AutocompleteTag";
 const Sr = ({
@@ -137,7 +137,7 @@ const Sr = ({
   label: V = "",
   helperText: N = "",
   error: b,
-  required: H = !1,
+  required: p = !1,
   fullWidth: te = !0,
   clearable: ue = !0,
   disableCloseOnSelect: se = !1,
@@ -150,20 +150,20 @@ const Sr = ({
   fields: L,
   // New prop for field mapping
   noOptionsText: Ve = "No options",
-  emptyMessage: He,
-  className: Ke = "",
+  emptyMessage: pe,
+  className: He = "",
   inputClassName: ye = "",
   chipClassName: be,
   debounceMs: ie = 0,
   // New: Debounce filtering
   minSearchLength: xe = 0,
   // New prop: Min chars before search
-  ntt: pe = !1,
+  ntt: Ke = !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({
+  const [n, w] = Z(!1), [k, A] = Z(""), [je, we] = Z(""), [z, g] = Z(-1), [I, R] = Z(!1), [G, Be] = Z({
     top: 0,
     left: 0,
     width: 0,
@@ -173,7 +173,7 @@ const Sr = ({
     containerProps: Ue,
     onOpenChange: ve
   } = ir();
-  p(() => {
+  K(() => {
     if (ie <= 0) {
       we(k);
       return;
@@ -181,27 +181,27 @@ const Sr = ({
     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) => {
+  const X = rr(je), v = O(null), Ne = O(null), M = O(null), Q = O(null), W = O(!1), Ee = tr(), Y = 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));
+    const o = Y.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);
+  }, [Y, E, F]), B = J(() => {
+    if (X.length < xe)
+      return Y;
+    let r = Y;
+    return c && Array.isArray(t) && (r = Y.filter((o) => !t.some((m) => F(o, m)))), !c && !I && t && X === E(t) ? r : ce ? ce(r, {
+      inputValue: X
+    }) : br(r, X, E, L);
   }, [
-    X,
+    Y,
     t,
-    G,
+    X,
     // Use deferred value
     ce,
     E,
@@ -214,11 +214,11 @@ const Sr = ({
     const o = r.target.value;
     R(!0), A(o), s == null || s(r, o), !n && o && w(!0);
   }, [n, s]);
-  p(() => {
+  K(() => {
     if (c || I) return;
     const r = C(t);
     A(r);
-  }, [t, c, I, C]), p(() => {
+  }, [t, c, I, C]), K(() => {
     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) => {
@@ -290,8 +290,8 @@ const Sr = ({
           }, ""));
           break;
       }
-  }, [n, B, z, ee, x, k, c, s]), K = P(() => {
-    const r = Ne.current ?? W.current;
+  }, [n, B, z, ee, x, k, c, s]), H = P(() => {
+    const r = Ne.current ?? Q.current;
     if (!r) return;
     const o = r.getBoundingClientRect(), m = dr(r);
     Be(lr({
@@ -300,34 +300,34 @@ const Sr = ({
       strategy: "absolute",
       clipRects: m
     }));
-  }, []), Ze = P(() => {
-    n || (K(), k === "" && (s == null || s({
+  }, []), Ye = P(() => {
+    n || (H(), 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({
+  }, [n, H, k, s]), Ze = P(() => {
+    if (W.current) {
+      W.current = !1, H(), R(!1), !c && !t && (A(""), s == null || s({
         target: {
           value: ""
         }
       }, ""));
       return;
     }
-    K(), R(!1), w(!0), !c && !t && (A(""), s == null || s({
+    H(), R(!1), w(!0), !c && !t && (A(""), s == null || s({
       target: {
         value: ""
       }
     }, ""));
-  }, [K, c, t, s]), Me = P((r) => {
+  }, [H, c, t, s]), Je = P((r) => {
     document.activeElement === v.current && w((o) => !o), _ == null || _(r);
   }, [_]);
-  p(() => {
+  K(() => {
     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;
+      const D = Q.current ? !Q.current.contains(m) : !0, de = M.current ? !M.current.contains(m) : !0;
       if (D && de) {
         if (w(!1), R(!1), c) {
           A(""), s == null || s({
@@ -348,12 +348,12 @@ const Sr = ({
     return document.addEventListener("pointerdown", r, !0), () => {
       document.removeEventListener("pointerdown", r, !0);
     };
-  }, [c, s, C, t, n, k]), p(() => {
+  }, [c, s, C, t, n, k]), K(() => {
     if (!n || typeof window > "u") return;
     const r = () => {
-      K();
-    }, o = W.current, m = ar(o), $ = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => {
-      K();
+      H();
+    }, o = Q.current, m = ar(o), $ = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => {
+      H();
     });
     return $ == null || $.observe(o ?? document.body), m.forEach((D) => {
       D.addEventListener("scroll", r, {
@@ -364,86 +364,87 @@ const Sr = ({
         D.removeEventListener("scroll", r);
       }), window.removeEventListener("resize", r);
     };
-  }, [n, K]), p(() => {
-    if (n && z >= 0 && Q.current) {
-      const r = Q.current.children[z];
+  }, [n, H]), K(() => {
+    if (n && z >= 0 && M.current) {
+      const r = M.current.children[z];
       r && r.scrollIntoView({
         block: "nearest"
       });
     }
-  }, [z, n]), p(() => {
+  }, [z, n]), K(() => {
     if (!n || !c) return;
     const r = requestAnimationFrame(() => {
-      K();
+      H();
     });
     return () => cancelAnimationFrame(r);
-  }, [n, c, t, K]), p(() => {
+  }, [n, c, t, H]), K(() => {
     w(!1);
-  }, []), p(() => {
+  }, []), K(() => {
     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({
+    document.activeElement !== v.current && (W.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) : (
+  }, [c, s]), Me = 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(() => `
+  ), [c, t, oe, le, $e, E, j, be]), Qe = 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: [
+  `, [T, u, b, y, ye]), We = pe ?? Ve;
+  return /* @__PURE__ */ q("div", { className: `relative ${te ? "w-full" : "w-auto"} ${He}`, ref: Q, 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({
+      r.preventDefault(), document.activeElement !== v.current && (W.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({
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), document.activeElement !== v.current && (W.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: "*" })
+      p && /* @__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 }),
+      Me,
+      /* @__PURE__ */ q("div", { ref: Ne, className: Qe, children: [
+        /* @__PURE__ */ a(or, { id: Ee, ref: v, value: k, onChange: qe, onKeyDown: Xe, onFocus: Ze, onPointerDown: Je, 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" : ""}` }) })
+          /* @__PURE__ */ a("button", { type: "button", disabled: y, onClick: Ye, 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: `
+      n && G.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) => {
+        top: G.top,
+        left: G.left,
+        width: G.width,
+        maxHeight: G.maxHeight,
+        transform: G.placement === "top" ? "translateY(-100%)" : void 0
+      }, ref: M, children: B.length === 0 ? /* @__PURE__ */ a("div", { className: "p-3 text-sm text-muted-foreground text-center", children: We }) : 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() : "";
+          const ae = E(U), ne = Ke ? String(X || "").trim() : "";
           if (!ne) return /* @__PURE__ */ a("span", { children: ae });
           try {
             const he = new RegExp(`(${de(ne)})`, "ig"), Oe = ae.split(he);

package/dist/lib/get-floating-dropdown-position.js

@@ -8,7 +8,7 @@ const I = ({
   viewportPadding: l = 8,
   clipRects: e = []
 }) => {
-  const w = window.innerHeight, H = window.innerWidth, S = M === "absolute" ? window.scrollX : 0, p = M === "absolute" ? window.scrollY : 0, u = e.reduce((i, o) => Math.max(i, o.top), 0), d = e.reduce((i, o) => Math.min(i, o.bottom), w), s = e.reduce((i, o) => Math.max(i, o.left), 0), n = e.reduce((i, o) => Math.min(i, o.right), H), c = t.bottom < u || t.top > d || t.left + t.width < s || t.left > n, A = Math.max(0, d - t.bottom - l - m), B = Math.max(0, t.top - u - l - m), C = Math.max(0, w - t.bottom - l - m), L = Math.max(0, t.top - l - m), W = Math.min(f, 160), a = x === "auto" ? A >= W || A >= B ? "bottom" : "top" : x, F = Math.max(0, Math.min(f, a === "bottom" ? C : L)), v = c ? 0 : F, X = t.left >= s && t.left + t.width <= n;
+  const w = window.innerHeight, v = window.innerWidth, H = M === "absolute" ? window.scrollX : 0, p = M === "absolute" ? window.scrollY : 0, u = e.reduce((i, o) => Math.max(i, o.top), 0), d = e.reduce((i, o) => Math.min(i, o.bottom), w), s = e.reduce((i, o) => Math.max(i, o.left), 0), n = e.reduce((i, o) => Math.min(i, o.right), v), c = t.bottom < u || t.top > d || t.left + t.width < s || t.left > n, A = Math.max(0, d - t.bottom - l - m), S = Math.max(0, t.top - u - l - m), B = Math.max(0, w - t.bottom - l - m), C = Math.max(0, t.top - l - m), L = Math.min(f, 160), a = x === "auto" ? A >= L || A >= S ? "bottom" : "top" : x, W = Math.max(0, Math.min(f, a === "bottom" ? B : C)), F = c ? 0 : W, X = t.left >= s && t.left + t.width <= n;
   let h, b;
   if (X)
     h = t.width, b = t.left;
@@ -19,10 +19,10 @@ const I = ({
     b = Math.min(Math.max(t.left, o), Y);
   }
   return {
-    top: a === "bottom" ? t.bottom + m + p : t.top - m - v + p,
-    left: b + S,
+    top: a === "bottom" ? t.bottom + m + p : t.top - m + p,
+    left: b + H,
     width: h,
-    maxHeight: v,
+    maxHeight: F,
     placement: a,
     isAnchorClipped: c
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docthub-core-components",
-  "version": "3.2.8",
+  "version": "3.2.9",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",