@underverse-ui/underverse 1.0.109 → 1.0.110

package/dist/index.d.cts

@@ -1588,7 +1588,7 @@ interface ComboboxProps {
     selectedOption?: ComboboxOption;
     error?: string;
     helperText?: string;
-    /** Enable OverlayScrollbars on dropdown options list. Default: false */
+    /** Enable OverlayScrollbars on dropdown options list. Default: true when not virtualized */
     useOverlayScrollbar?: boolean;
     /** Virtualize large flat option lists. Grouped lists fall back to normal rendering. Default: false */
     virtualized?: boolean;
@@ -1654,7 +1654,7 @@ interface MultiComboboxProps {
     error?: string;
     helperText?: string;
     maxTagsVisible?: number;
-    /** Enable OverlayScrollbars on dropdown options list. Default: false */
+    /** Enable OverlayScrollbars on dropdown options list. Default: true when not virtualized */
     useOverlayScrollbar?: boolean;
     /** Virtualize large flat option lists. Grouped lists fall back to normal rendering. Default: false */
     virtualized?: boolean;

package/dist/index.d.ts

@@ -1588,7 +1588,7 @@ interface ComboboxProps {
     selectedOption?: ComboboxOption;
     error?: string;
     helperText?: string;
-    /** Enable OverlayScrollbars on dropdown options list. Default: false */
+    /** Enable OverlayScrollbars on dropdown options list. Default: true when not virtualized */
     useOverlayScrollbar?: boolean;
     /** Virtualize large flat option lists. Grouped lists fall back to normal rendering. Default: false */
     virtualized?: boolean;
@@ -1654,7 +1654,7 @@ interface MultiComboboxProps {
     error?: string;
     helperText?: string;
     maxTagsVisible?: number;
-    /** Enable OverlayScrollbars on dropdown options list. Default: false */
+    /** Enable OverlayScrollbars on dropdown options list. Default: true when not virtualized */
     useOverlayScrollbar?: boolean;
     /** Virtualize large flat option lists. Grouped lists fall back to normal rendering. Default: false */
     virtualized?: boolean;

package/dist/index.js

@@ -7179,6 +7179,20 @@ var getOptionDisabled = (option) => {
 var findOptionByValue = (options, value) => {
   return options.find((opt) => getOptionValue(opt) === value);
 };
+var comboboxScrollClassName = [
+  "scrollbar-thin",
+  "[scrollbar-width:thin]",
+  "[scrollbar-color:color-mix(in_oklch,var(--muted-foreground)_28%,transparent)_transparent]",
+  "[&::-webkit-scrollbar]:w-2",
+  "[&::-webkit-scrollbar-track]:bg-transparent",
+  "[&::-webkit-scrollbar-thumb]:rounded-full",
+  "[&::-webkit-scrollbar-thumb]:border-2",
+  "[&::-webkit-scrollbar-thumb]:border-solid",
+  "[&::-webkit-scrollbar-thumb]:border-transparent",
+  "[&::-webkit-scrollbar-thumb]:bg-clip-padding",
+  "[&::-webkit-scrollbar-thumb]:bg-muted-foreground/25",
+  "[&::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/45"
+].join(" ");
 var Combobox = ({
   id,
   options,
@@ -7207,7 +7221,7 @@ var Combobox = ({
   selectedOption: selectedOptionProp,
   error,
   helperText,
-  useOverlayScrollbar = false,
+  useOverlayScrollbar = true,
   virtualized = false,
   estimatedItemHeight = 44,
   overscan = 8,
@@ -7226,7 +7240,7 @@ var Combobox = ({
   useShadCNAnimations();
   const inputRef = React24.useRef(null);
   const optionsViewportRef = React24.useRef(null);
-  useOverlayScrollbarTarget(optionsViewportRef, { enabled: useOverlayScrollbar });
+  useOverlayScrollbarTarget(optionsViewportRef, { enabled: useOverlayScrollbar && !virtualized });
   const autoId = useId6();
   const resolvedId = id ? String(id) : `combobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
@@ -7493,7 +7507,7 @@ var Combobox = ({
             id: `${resolvedId}-listbox`,
             role: "listbox",
             "aria-labelledby": labelId,
-            className: "overflow-y-auto overscroll-contain",
+            className: cn("overflow-y-auto overscroll-contain", (!useOverlayScrollbar || virtualized) && comboboxScrollClassName),
             style: { maxHeight },
             children: /* @__PURE__ */ jsx29("div", { className: cn(size === "sm" ? "p-1" : size === "lg" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ jsx29("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
               /* @__PURE__ */ jsx29("div", { className: "relative", children: /* @__PURE__ */ jsx29("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
@@ -15499,6 +15513,20 @@ import { useId as useId9 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { ChevronDown as ChevronDown4, Search as Search5, Check as Check6, SearchX as SearchX2, Loader2 as Loader23, X as X13, Sparkles as Sparkles2 } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+var comboboxScrollClassName2 = [
+  "scrollbar-thin",
+  "[scrollbar-width:thin]",
+  "[scrollbar-color:color-mix(in_oklch,var(--muted-foreground)_28%,transparent)_transparent]",
+  "[&::-webkit-scrollbar]:w-2",
+  "[&::-webkit-scrollbar-track]:bg-transparent",
+  "[&::-webkit-scrollbar-thumb]:rounded-full",
+  "[&::-webkit-scrollbar-thumb]:border-2",
+  "[&::-webkit-scrollbar-thumb]:border-solid",
+  "[&::-webkit-scrollbar-thumb]:border-transparent",
+  "[&::-webkit-scrollbar-thumb]:bg-clip-padding",
+  "[&::-webkit-scrollbar-thumb]:bg-muted-foreground/25",
+  "[&::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/45"
+].join(" ");
 var MultiCombobox = ({
   id,
   options,
@@ -15531,7 +15559,7 @@ var MultiCombobox = ({
   error,
   helperText,
   maxTagsVisible = 3,
-  useOverlayScrollbar = false,
+  useOverlayScrollbar = true,
   virtualized = false,
   estimatedItemHeight = 44,
   overscan = 8,
@@ -15550,7 +15578,7 @@ var MultiCombobox = ({
   const inputRef = React39.useRef(null);
   const listRef = React39.useRef([]);
   const optionsListRef = React39.useRef(null);
-  useOverlayScrollbarTarget(optionsListRef, { enabled: useOverlayScrollbar });
+  useOverlayScrollbarTarget(optionsListRef, { enabled: useOverlayScrollbar && !virtualized });
   const triggerRef = React39.useRef(null);
   useShadCNAnimations();
   const normalizedOptions = React39.useMemo(
@@ -15853,7 +15881,11 @@ var MultiCombobox = ({
         "aria-multiselectable": "true",
         ref: optionsListRef,
         style: { maxHeight },
-        className: cn("overflow-y-auto p-1.5", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"),
+        className: cn(
+          "overflow-y-auto p-1.5",
+          (!useOverlayScrollbar || virtualized) && comboboxScrollClassName2,
+          size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"
+        ),
         children: loading2 ? /* @__PURE__ */ jsx45("li", { className: "px-3 py-8 text-center", children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
           /* @__PURE__ */ jsxs35("div", { className: "relative", children: [
             /* @__PURE__ */ jsx45(Loader23, { className: "h-8 w-8 animate-spin text-primary" }),