docthub-core-components 3.1.0 → 3.2.2

package/dist/components/overrides/ui/pickers/date-range-picker-field.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as d, jsxs as F } from "react/jsx-runtime";
+import { jsx as a, jsxs as F } from "react/jsx-runtime";
 import { c as Le } from "react-compiler-runtime";
 import K from "dayjs";
 import $e from "dayjs/plugin/customParseFormat";
@@ -23,29 +23,29 @@ const Qe = i.memo(function(B) {
   } = B, V = r === void 0 ? "en" : r, c = s === void 0 ? 2 : s;
   let u;
   e[0] !== m || e[1] !== l ? (u = () => {
-    const a = new Date(m);
-    a.setMonth(a.getMonth() - 1), l(a);
+    const d = new Date(m);
+    d.setMonth(d.getMonth() - 1), l(d);
   }, e[0] = m, e[1] = l, e[2] = u) : u = e[2];
   const h = u;
   let k;
   e[3] !== m || e[4] !== l ? (k = () => {
-    const a = new Date(m);
-    a.setMonth(a.getMonth() + 1), l(a);
+    const d = new Date(m);
+    d.setMonth(d.getMonth() + 1), l(d);
   }, e[3] = m, e[4] = l, e[5] = k) : k = e[5];
   const M = k;
   let O;
   if (e[6] !== V || e[7] !== m || e[8] !== c) {
-    let a;
-    e[10] !== V || e[11] !== m ? (a = (se, W) => K(m).add(W, "month").locale(V).format("MMMM YYYY"), e[10] = V, e[11] = m, e[12] = a) : a = e[12], O = Array.from({
+    let d;
+    e[10] !== V || e[11] !== m ? (d = (se, W) => K(m).add(W, "month").locale(V).format("MMMM YYYY"), e[10] = V, e[11] = m, e[12] = d) : d = e[12], O = Array.from({
       length: c
-    }, a), e[6] = V, e[7] = m, e[8] = c, e[9] = O;
+    }, d), e[6] = V, e[7] = m, e[8] = c, e[9] = O;
   } else
     O = e[9];
   const v = O;
   let L;
-  e[13] === Symbol.for("react.memo_cache_sentinel") ? (L = /* @__PURE__ */ d(ze, { className: "h-4 w-4" }), e[13] = L) : L = e[13];
+  e[13] === Symbol.for("react.memo_cache_sentinel") ? (L = /* @__PURE__ */ a(ze, { className: "h-4 w-4" }), e[13] = L) : L = e[13];
   let b;
-  e[14] !== h ? (b = /* @__PURE__ */ d("button", { type: "button", onClick: h, className: "flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background p-0 text-foreground hover:bg-accent", "aria-label": "Previous month", children: L }), e[14] = h, e[15] = b) : b = e[15];
+  e[14] !== h ? (b = /* @__PURE__ */ a("button", { type: "button", onClick: h, className: "flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background p-0 text-foreground hover:bg-accent", "aria-label": "Previous month", children: L }), e[14] = h, e[15] = b) : b = e[15];
   const T = `repeat(${c}, minmax(0, 1fr))`;
   let P;
   e[16] !== T ? (P = {
@@ -54,11 +54,11 @@ const Qe = i.memo(function(B) {
   let p;
   e[18] !== v ? (p = v.map(Ze), e[18] = v, e[19] = p) : p = e[19];
   let x;
-  e[20] !== p || e[21] !== P ? (x = /* @__PURE__ */ d("div", { className: "grid flex-1 gap-2 px-2 text-center text-sm font-semibold text-foreground", style: P, children: p }), e[20] = p, e[21] = P, e[22] = x) : x = e[22];
+  e[20] !== p || e[21] !== P ? (x = /* @__PURE__ */ a("div", { className: "grid flex-1 gap-2 px-2 text-center text-sm font-semibold text-foreground", style: P, children: p }), e[20] = p, e[21] = P, e[22] = x) : x = e[22];
   let D;
-  e[23] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ d(Ae, { className: "h-4 w-4" }), e[23] = D) : D = e[23];
+  e[23] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ a(Ae, { className: "h-4 w-4" }), e[23] = D) : D = e[23];
   let R;
-  e[24] !== M ? (R = /* @__PURE__ */ d("button", { type: "button", onClick: M, className: "flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background p-0 text-foreground hover:bg-accent", "aria-label": "Next month", children: D }), e[24] = M, e[25] = R) : R = e[25];
+  e[24] !== M ? (R = /* @__PURE__ */ a("button", { type: "button", onClick: M, className: "flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background p-0 text-foreground hover:bg-accent", "aria-label": "Next month", children: D }), e[24] = M, e[25] = R) : R = e[25];
   let $;
   return e[26] !== x || e[27] !== R || e[28] !== b ? ($ = /* @__PURE__ */ F("div", { className: "flex items-center border-b border-border bg-muted px-2 py-1.5", children: [
     b,
@@ -90,7 +90,7 @@ const Qe = i.memo(function(B) {
   open: D,
   onOpenChange: R,
   dayPickerProps: $,
-  manual: a = !1,
+  manual: d = !1,
   // Default to false: calendar-only selection unless enabled
   popoverAlign: se = "end",
   iconPosition: W = "right",
@@ -106,16 +106,16 @@ const Qe = i.memo(function(B) {
   ...ye
 }) => {
   const {
-    disabled: ae,
+    disabled: de,
     fromDate: Ce,
     toDate: Se,
     startMonth: he,
     endMonth: ve,
     showOutsideDays: xe,
     ...C
-  } = $ ?? {}, ge = T ?? xe, de = L ?? v, [we, ke] = i.useState(!1), q = D !== void 0 ? D : we, j = R || ke, [S, y] = i.useState(""), [E, g] = i.useState(l), [ne, le] = i.useState(p ?? (l == null ? void 0 : l.from) ?? /* @__PURE__ */ new Date()), ce = i.useMemo(() => p ?? ne, [p, ne]), G = i.useCallback((t) => {
+  } = $ ?? {}, ge = T ?? xe, ae = L ?? v, [we, ke] = i.useState(!1), q = D !== void 0 ? D : we, j = R || ke, [S, y] = i.useState(""), [E, g] = i.useState(l), [ne, le] = i.useState(p ?? (l == null ? void 0 : l.from) ?? /* @__PURE__ */ new Date()), ce = i.useMemo(() => p ?? ne, [p, ne]), G = i.useCallback((t) => {
     x ? x(t) : le(t);
-  }, [x]), Me = i.useMemo(() => B || (a ? `${v.toLowerCase()} - ${v.toLowerCase()}` : "Click to select date range"), [B, v, a]), H = i.useCallback((t) => K(t).locale(M).format(de), [de, M]), w = i.useCallback((t) => t != null && t.from ? t.from && t.to ? `${H(t.from)} - ${H(t.to)}` : H(t.from) : "", [H]), J = i.useCallback((t) => {
+  }, [x]), Me = i.useMemo(() => B || (d ? `${v.toLowerCase()} - ${v.toLowerCase()}` : "Click to select date range"), [B, v, d]), H = i.useCallback((t) => K(t).locale(M).format(ae), [ae, M]), w = i.useCallback((t) => t != null && t.from ? t.from && t.to ? `${H(t.from)} - ${H(t.to)}` : H(t.from) : "", [H]), J = i.useCallback((t) => {
     const o = t.trim();
     if (!o) return null;
     const f = K(o, v, !0).locale(M);
@@ -175,7 +175,8 @@ const Qe = i.memo(function(B) {
     // react-day-picker v9 selection state keys
     selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
     day_today: "bg-accent text-accent-foreground",
-    day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+    // react-day-picker v9 uses modifier key `outside` (not `day_outside`); `.day-outside` kept for `[&:has(...day-outside)]` cell selectors.
+    outside: "day-outside text-muted-foreground/60 [&_button:not(:disabled)]:text-muted-foreground/60 hover:[&_button:not(:disabled)]:text-muted-foreground",
     disabled: "text-muted-foreground opacity-40 grayscale pointer-events-none cursor-not-allowed",
     day_disabled: "text-muted-foreground opacity-40 grayscale pointer-events-none cursor-not-allowed",
     day_range_middle: (
@@ -186,12 +187,12 @@ const Qe = i.memo(function(B) {
     // react-day-picker v9 selection state keys
     range_middle: "!bg-muted !text-foreground rounded-none [&>button]:!rounded-none",
     day_hidden: "invisible"
-  }), []), _e = i.useMemo(() => He(Je(c, u), ae), [c, u, ae]), Pe = c ? me(c) : he, Re = u ? me(u) : ve;
+  }), []), _e = i.useMemo(() => He(Je(c, u), de), [c, u, de]), Pe = c ? me(c) : he, Re = u ? me(u) : ve;
   i.useEffect(() => {
     y(w(l)), g(l), l != null && l.from && !p && le(l.from);
   }, [l, w, p]);
   const Ve = i.useCallback((t) => {
-    if (!a) return;
+    if (!d) return;
     let o = t.target.value;
     if (y(o), !o.trim()) {
       g(void 0), r == null || r(void 0), s == null || s(void 0);
@@ -201,7 +202,7 @@ const Qe = i.memo(function(B) {
     f !== o && (y(f), o = f);
     const n = Q(o);
     n && U(n, c, u) && (g(n), r == null || r(n), s == null || s(n));
-  }, [a, r, s, ue, Q, c, u]), ee = i.useCallback(() => {
+  }, [d, r, s, ue, Q, c, u]), ee = i.useCallback(() => {
     const t = S.trim();
     if (!t) {
       g(void 0), r == null || r(void 0), s == null || s(void 0);
@@ -217,12 +218,12 @@ const Qe = i.memo(function(B) {
     const o = t.getRange();
     U(o, c, u) && (y(w(o)), g(o), o.from && G(o.from), r == null || r(o), s == null || s(o));
   }, [w, G, c, u, s, r]), Ee = !!(P && E && !h && !k), N = !!(h || k), Ye = i.useCallback((t) => {
-    if (!a) {
+    if (!d) {
       !N && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), j(!q));
       return;
     }
     t.key === "Enter" && (t.preventDefault(), ee());
-  }, [a, ee, j, q, N]), Oe = i.useMemo(() => {
+  }, [d, ee, j, q, N]), Oe = i.useMemo(() => {
     var t, o;
     if (z) {
       if (i.isValidElement(z)) {
@@ -237,51 +238,51 @@ const Qe = i.memo(function(B) {
           }
         });
       }
-      return /* @__PURE__ */ d("span", { className: _("h-5 w-5 inline-flex items-center justify-center", X), style: I ? {
+      return /* @__PURE__ */ a("span", { className: _("h-5 w-5 inline-flex items-center justify-center", X), style: I ? {
         color: I
       } : void 0, children: z });
     }
-    return /* @__PURE__ */ d(Be, { strokeWidth: 1, className: _("h-5 w-5", X, h && "opacity-50"), style: I ? {
+    return /* @__PURE__ */ a(Be, { strokeWidth: 1, className: _("h-5 w-5", X, h && "opacity-50"), style: I ? {
       color: I
     } : void 0 });
   }, [z, X, I, h]);
   return /* @__PURE__ */ F("div", { className: _("space-y-1", V), ...ye, children: [
     Y && /* @__PURE__ */ F(Xe, { className: "text-sm font-medium text-foreground", children: [
       Y,
-      m && /* @__PURE__ */ d("span", { className: "text-red-500 ml-1", children: "*" })
+      m && /* @__PURE__ */ a("span", { className: "text-red-500 ml-1", children: "*" })
     ] }),
     /* @__PURE__ */ F(qe, { open: q, onOpenChange: (t) => {
       N && t || j(t);
     }, children: [
-      ie ? /* @__PURE__ */ d(fe, { asChild: !0, children: ie }) : /* @__PURE__ */ F("div", { className: _("w-80 relative", O), onMouseDownCapture: () => {
-        a && be && !h && !k && j(!0);
+      ie ? /* @__PURE__ */ a(fe, { asChild: !0, children: ie }) : /* @__PURE__ */ F("div", { className: _("w-80 relative", O), onMouseDownCapture: () => {
+        d && be && !h && !k && j(!0);
       }, children: [
-        /* @__PURE__ */ d(We, { type: "text", value: S, onChange: Ve, onBlur: ee, onKeyDown: Ye, onClick: () => {
-          (!a && !N || a && pe && !N) && j(!0);
-        }, placeholder: Me, disabled: h, readOnly: k || !a, className: _("w-full pr-12", W === "left" && "pl-12", b && "border border-destructive focus-visible:ring-destructive", !a && !N && "cursor-pointer") }),
-        Ee && /* @__PURE__ */ d("button", { type: "button", onClick: Ie, className: "absolute right-10 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring", "aria-label": "Clear date range", children: /* @__PURE__ */ d(Te, { className: "h-4 w-4 text-muted-foreground" }) }),
-        /* @__PURE__ */ d(fe, { asChild: !0, children: /* @__PURE__ */ d("button", { type: "button", className: _("absolute top-1/2 -translate-y-1/2 border-0 bg-transparent outline-none", W === "left" ? "left-3" : "right-1", N ? "cursor-default text-muted-foreground" : "cursor-pointer text-black hover:text-black"), style: {
+        /* @__PURE__ */ a(We, { type: "text", value: S, onChange: Ve, onBlur: ee, onKeyDown: Ye, onClick: () => {
+          (!d && !N || d && pe && !N) && j(!0);
+        }, placeholder: Me, disabled: h, readOnly: k || !d, className: _("w-full pr-12", W === "left" && "pl-12", b && "border border-destructive focus-visible:ring-destructive", !d && !N && "cursor-pointer") }),
+        Ee && /* @__PURE__ */ a("button", { type: "button", onClick: Ie, className: "absolute right-10 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring", "aria-label": "Clear date range", children: /* @__PURE__ */ a(Te, { className: "h-4 w-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ a(fe, { asChild: !0, children: /* @__PURE__ */ a("button", { type: "button", className: _("absolute top-1/2 -translate-y-1/2 border-0 bg-transparent outline-none", W === "left" ? "left-3" : "right-1", N ? "cursor-default text-muted-foreground" : "cursor-pointer text-black hover:text-black"), style: {
           height: "1.75rem",
           width: "1.75rem"
         }, onClick: N ? void 0 : () => {
           j(!q);
         }, disabled: N, "aria-label": "Open calendar", children: Oe }) })
       ] }),
-      /* @__PURE__ */ d(Ge, { className: "w-auto p-0 mt-2", align: se, children: /* @__PURE__ */ F("div", { className: "rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
-        Z && Z.length > 0 && /* @__PURE__ */ d("div", { className: "flex flex-wrap gap-2 p-3 border-b bg-muted/40", children: Z.map((t) => /* @__PURE__ */ d("button", { type: "button", className: "rounded-md border bg-background px-2.5 py-1.5 text-xs font-medium hover:bg-accent hover:text-accent-foreground", onClick: () => je(t), children: t.label }, t.label)) }),
-        /* @__PURE__ */ d(Qe, { month: ce, onMonthChange: G, locale: M, numberOfMonths: oe }),
-        /* @__PURE__ */ d("div", { className: "p-3", children: /* @__PURE__ */ d(Ke, { ...C, mode: "range", selected: E, onSelect: De, month: ce, onMonthChange: G, startMonth: Pe, endMonth: Re, disabled: _e, numberOfMonths: oe, showOutsideDays: ge, className: _("p-0", C.className), classNames: {
+      /* @__PURE__ */ a(Ge, { className: "w-auto p-0 mt-2", align: se, children: /* @__PURE__ */ F("div", { className: "rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
+        Z && Z.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-2 p-3 border-b bg-muted/40", children: Z.map((t) => /* @__PURE__ */ a("button", { type: "button", className: "rounded-md border bg-background px-2.5 py-1.5 text-xs font-medium hover:bg-accent hover:text-accent-foreground", onClick: () => je(t), children: t.label }, t.label)) }),
+        /* @__PURE__ */ a(Qe, { month: ce, onMonthChange: G, locale: M, numberOfMonths: oe }),
+        /* @__PURE__ */ a("div", { className: "p-3", children: /* @__PURE__ */ a(Ke, { ...C, mode: "range", selected: E, onSelect: De, month: ce, onMonthChange: G, startMonth: Pe, endMonth: Re, disabled: _e, numberOfMonths: oe, showOutsideDays: ge, className: _("p-0", C.className), classNames: {
           ...Ne,
           ...C.classNames
         } }) })
       ] }) })
     ] }),
-    (e || b) && /* @__PURE__ */ d("p", { className: _("text-xs", b ? "text-destructive" : "text-muted-foreground"), children: b || e })
+    (e || b) && /* @__PURE__ */ a("p", { className: _("text-xs", b ? "text-destructive" : "text-muted-foreground"), children: b || e })
   ] });
 });
 Ue.displayName = "DateRangePickerField";
 function Ze(Y) {
-  return /* @__PURE__ */ d("span", { className: "truncate", children: Y }, Y);
+  return /* @__PURE__ */ a("span", { className: "truncate", children: Y }, Y);
 }
 export {
   Ue as DateRangePickerField

package/dist/src/components/overrides/ui/autocomplete-checkbox.d.ts

@@ -33,6 +33,21 @@ export interface AutocompleteCheckboxProps<T = unknown> {
     checkboxColor?: string;
     showSearch?: boolean;
     searchPlaceholder?: string;
+    /**
+     * Show the scrollbar styling on the dropdown list. Defaults to true.
+     * When false, the scrollbar is hidden but the list remains scrollable.
+     */
+    showScroller?: boolean;
+    /**
+     * Allow multiple selection. Defaults to true.
+     * When false, selecting an item replaces the previous selection and closes the dropdown.
+     */
+    multiple?: boolean;
+    /**
+     * Hide the per-option checkbox indicator. Defaults to false.
+     * Useful for single-select usage where the selected row is shown only via the highlight background.
+     */
+    hideCheckbox?: boolean;
     /**
      * Trigger type: "input" (default) uses text input, "button" uses DoctButton
      */
@@ -80,5 +95,5 @@ export interface AutocompleteCheckboxProps<T = unknown> {
  * Autocomplete component with checkbox selection.
  * Supports two modes: "input" (default) with tags display, or "button" for filter bars.
  */
-export declare function AutocompleteCheckbox<T extends OptionType>({ options, dataSource, value, onChange, change, onInputChange, placeholder, label, helperText, error, noOptionsText, emptyMessage, disabled, loading, required, clearable, disableCloseOnSelect, freeSolo, size, variant, fullWidth, className, inputClassName, checkboxPosition, showChip, showTags, checkboxProps, chipProps, checkboxColor, showSearch, searchPlaceholder, triggerType, triggerButtonLabel, triggerButtonVariant, triggerButtonSize, triggerButtonProps, triggerButtonIcon, triggerButtonIconPosition, portalContainer, disablePortal, dropdownWidth, getOptionLabel, getOptionValue, isOptionEqualToValue, filterOptions, renderOption, renderTags, limitTags, fields, }: AutocompleteCheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function AutocompleteCheckbox<T extends OptionType>({ options, dataSource, value, onChange, change, onInputChange, placeholder, label, helperText, error, noOptionsText, emptyMessage, disabled, loading, required, clearable, disableCloseOnSelect, freeSolo, size, variant, fullWidth, className, inputClassName, checkboxPosition, showChip, showTags, checkboxProps, chipProps, checkboxColor, showSearch, searchPlaceholder, showScroller, multiple, hideCheckbox, triggerType, triggerButtonLabel, triggerButtonVariant, triggerButtonSize, triggerButtonProps, triggerButtonIcon, triggerButtonIconPosition, portalContainer, disablePortal, dropdownWidth, getOptionLabel, getOptionValue, isOptionEqualToValue, filterOptions, renderOption, renderTags, limitTags, fields, }: AutocompleteCheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
 export default AutocompleteCheckbox;

package/dist/src/components/overrides/ui/pickers/date-range-picker-field.d.ts

@@ -23,7 +23,11 @@ export interface DateRangePickerFieldProps extends Omit<React.HTMLAttributes<HTM
     displayFormat?: string;
     inputClassName?: string;
     error?: string;
-    /** When set, shows days from adjacent months in each month grid (react-day-picker `showOutsideDays`). Overrides `dayPickerProps.showOutsideDays`. */
+    /**
+     * Passes through to react-day-picker `showOutsideDays` (neighbor-month cells fill the grid).
+     * When visible, adjacent-month days use the muted `outside` styles on this picker.
+     * Top-level wins over `dayPickerProps.showOutsideDays` when both are set. When neither is set, behavior matches react-day-picker (outside days omitted).
+     */
     showOutsideDays?: boolean;
     clearable?: boolean;
     month?: Date;