@underverse-ui/underverse 1.0.30 → 1.0.32

package/dist/index.js

@@ -5643,7 +5643,7 @@ var ScrollArea = forwardRef7(
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsx28("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport", contentClassName), children })
+        children: /* @__PURE__ */ jsx28("div", { className: cn("h-full w-full overflow-y-auto scroll-area-viewport custom-scrollbar", contentClassName), "data-os-scrollbar": true, children })
       }
     );
   }
@@ -6913,7 +6913,6 @@ function WheelColumn({
           ref: scrollRef,
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
-            "scrollbar-none",
             "select-none cursor-grab active:cursor-grabbing",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-xl"
           ),
@@ -8337,7 +8336,6 @@ function WheelColumn2({
           ref: scrollRef,
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
-            "scrollbar-none",
             "select-none cursor-grab active:cursor-grabbing",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-xl"
           ),
@@ -10098,7 +10096,7 @@ function CalendarTimelineHeader(props) {
           ]
         }
       ) : null,
-      /* @__PURE__ */ jsx35("div", { ref: headerRef, className: "flex-1 min-w-0 overflow-x-auto overflow-y-hidden scrollbar-none", children: slotHeaderNodes })
+      /* @__PURE__ */ jsx35("div", { ref: headerRef, className: "flex-1 min-w-0 overflow-x-auto overflow-y-hidden", children: slotHeaderNodes })
     ] })
   ] });
 }
@@ -11689,7 +11687,7 @@ function CalendarTimeline({
             "div",
             {
               ref: leftRef,
-              className: "shrink-0 overflow-y-auto overflow-x-hidden scrollbar-none",
+              className: "shrink-0 overflow-y-auto overflow-x-hidden",
               style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
               children: [
                 /* @__PURE__ */ jsx39("div", { style: { height: topSpacer } }),
@@ -11719,7 +11717,8 @@ function CalendarTimeline({
             "div",
             {
               ref: bodyRef,
-              className: "relative flex-1 overflow-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent",
+              className: "relative flex-1 overflow-auto custom-scrollbar",
+              "data-os-scrollbar": true,
               onPointerMove,
               onPointerUp,
               onPointerLeave: () => setHoverCell(null),
@@ -13932,12 +13931,13 @@ function CategoryTreeSelect(props) {
         "div",
         {
           className: cn(
-            "absolute z-20 mt-2 w-full max-h-80 overflow-auto",
+            "absolute z-20 mt-2 w-full max-h-80 overflow-auto custom-scrollbar",
             "rounded-2xl md:rounded-3xl border border-border/40 bg-popover/95 text-popover-foreground",
             "shadow-2xl backdrop-blur-xl",
             "p-2",
             "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
           ),
+          "data-os-scrollbar": true,
           children: [
             renderSearch(),
             renderTreeContent()
@@ -18849,16 +18849,14 @@ var LoadingBar = ({
 // ../../components/ui/OverlayScrollbarProvider.tsx
 import { useEffect as useEffect28 } from "react";
 import { OverlayScrollbars } from "overlayscrollbars";
-var EXPLICIT_SCROLLABLE_SELECTOR = [".thin-scrollbar", ".scrollbar-thin", ".custom-scrollbar", "[data-os-scrollbar]"].join(", ");
-var GENERIC_SCROLLABLE_SELECTOR = [
-  ".overflow-auto",
-  ".overflow-x-auto",
-  ".overflow-y-auto",
-  ".overflow-scroll",
-  ".overflow-x-scroll",
-  ".overflow-y-scroll"
+var EXPLICIT_SELECTOR = [".thin-scrollbar", ".scrollbar-thin", ".custom-scrollbar", "[data-os-scrollbar]"].join(", ");
+var PORTAL_EXCLUDE_SELECTOR = [
+  "[data-radix-portal]",
+  "[role='dialog']",
+  "[aria-modal='true']",
+  "[data-sonner-toaster]"
 ].join(", ");
-var SCROLLBAR_OPTIONS = {
+var OPTIONS = {
   scrollbars: {
     theme: "os-theme-underverse",
     visibility: "auto",
@@ -18868,42 +18866,27 @@ var SCROLLBAR_OPTIONS = {
     clickScroll: false
   }
 };
+function shouldSkip(element) {
+  if (element === document.body || element === document.documentElement) return true;
+  if (element.hasAttribute("data-os-ignore")) return true;
+  if (element.hasAttribute("data-overlayscrollbars")) return true;
+  if (element.closest(PORTAL_EXCLUDE_SELECTOR)) return true;
+  return false;
+}
 function OverlayScrollbarProvider() {
   useEffect28(() => {
-    const bodyInstance = OverlayScrollbars(document.body, SCROLLBAR_OPTIONS);
     const instances = /* @__PURE__ */ new Map();
-    const shouldSkip = (element) => {
-      if (element === document.body) return true;
-      if (element.classList.contains("scrollbar-none")) return true;
-      if (element.hasAttribute("data-overlayscrollbars")) return true;
-      return false;
-    };
-    const initElement = (element) => {
+    let rafId = 0;
+    const init = (element) => {
       if (shouldSkip(element)) return;
       if (instances.has(element)) return;
-      instances.set(element, OverlayScrollbars(element, SCROLLBAR_OPTIONS));
-    };
-    const collectCandidates = (root, selector) => {
-      const candidates = [];
-      if (root instanceof HTMLElement && root.matches(selector)) {
-        candidates.push(root);
-      }
-      if ("querySelectorAll" in root) {
-        root.querySelectorAll(selector).forEach((element) => {
-          candidates.push(element);
-        });
-      }
-      return candidates.filter((element, index) => candidates.indexOf(element) === index);
+      instances.set(element, OverlayScrollbars(element, OPTIONS));
     };
     const scan = (root) => {
-      const explicitCandidates = collectCandidates(root, EXPLICIT_SCROLLABLE_SELECTOR).filter((element) => !shouldSkip(element));
-      explicitCandidates.forEach(initElement);
-      const genericCandidates = collectCandidates(root, GENERIC_SCROLLABLE_SELECTOR).filter((element) => !shouldSkip(element));
-      const filteredGeneric = genericCandidates.filter(
-        (element) => !explicitCandidates.some((explicit) => explicit === element || explicit.contains(element) || element.contains(explicit))
-      );
-      const leafGeneric = filteredGeneric.filter((element) => !filteredGeneric.some((other) => other !== element && element.contains(other)));
-      leafGeneric.forEach(initElement);
+      if (root instanceof HTMLElement && root.matches(EXPLICIT_SELECTOR)) {
+        init(root);
+      }
+      root.querySelectorAll(EXPLICIT_SELECTOR).forEach(init);
     };
     const cleanup = () => {
       instances.forEach((instance, element) => {
@@ -18914,14 +18897,13 @@ function OverlayScrollbarProvider() {
       });
     };
     scan(document.body);
-    let rafId = 0;
     const observer = new MutationObserver((mutations) => {
       if (rafId) return;
-      rafId = window.requestAnimationFrame(() => {
+      rafId = requestAnimationFrame(() => {
         rafId = 0;
         const scanRoots = /* @__PURE__ */ new Set();
         mutations.forEach((mutation) => {
-          if (mutation.target instanceof Element || mutation.target instanceof Document || mutation.target instanceof DocumentFragment) {
+          if (mutation.target instanceof HTMLElement || mutation.target instanceof Document || mutation.target instanceof DocumentFragment) {
             scanRoots.add(mutation.target);
           }
           mutation.addedNodes.forEach((node) => {
@@ -18934,16 +18916,17 @@ function OverlayScrollbarProvider() {
         cleanup();
       });
     });
-    observer.observe(document.body, { childList: true, subtree: true });
+    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class"] });
     return () => {
-      if (rafId) window.cancelAnimationFrame(rafId);
+      if (rafId) cancelAnimationFrame(rafId);
       observer.disconnect();
       instances.forEach((instance) => instance.destroy());
-      bodyInstance.destroy();
+      instances.clear();
     };
   }, []);
   return null;
 }
+var OverlayScrollbarProvider_default = OverlayScrollbarProvider;
 
 // ../../components/ui/Table.tsx
 import React55 from "react";
@@ -18956,12 +18939,13 @@ var Table = React55.forwardRef(({ className, containerClassName, disableContaine
     "div",
     {
       className: cn(
-        "relative w-full overflow-auto",
+        "relative w-full overflow-auto custom-scrollbar",
         "rounded-2xl md:rounded-3xl border border-border",
         "bg-card text-card-foreground shadow-sm",
         "backdrop-blur-sm transition-all duration-300",
         containerClassName
       ),
+      "data-os-scrollbar": true,
       children: /* @__PURE__ */ jsx65("table", { ref, className: cn("w-full caption-bottom text-sm", className), ...props })
     }
   );
@@ -19893,7 +19877,7 @@ function DataTable({
         children: /* @__PURE__ */ jsx68(
           "div",
           {
-            className: "thin-scrollbar custom-scrollbar w-full",
+            className: "custom-scrollbar w-full",
             "data-os-scrollbar": true,
             style: stickyHeader ? {
               maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
@@ -24911,7 +24895,7 @@ export {
   NotificationModal_default as NotificationModal,
   NumberInput,
   OverlayControls,
-  OverlayScrollbarProvider,
+  OverlayScrollbarProvider_default as OverlayScrollbarProvider,
   PageLoading,
   Pagination,
   PasswordInput,