@underverse-ui/underverse 1.0.83 → 1.0.84

package/dist/index.d.cts

@@ -765,6 +765,7 @@ interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     contentClassName?: string;
     variant?: "default" | "muted" | "primary" | "accent";
     outlined?: boolean;
+    overflowHidden?: boolean;
     useOverlayScrollbar?: boolean;
 }
 declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -794,6 +795,7 @@ interface OverlayScrollAreaProps extends React__default.HTMLAttributes<HTMLDivEl
     viewportClassName?: string;
     viewportProps?: React__default.HTMLAttributes<HTMLDivElement>;
     enabled?: boolean;
+    overflowHidden?: boolean;
     overlayScrollbarOptions?: Omit<UseOverlayScrollbarTargetOptions, "enabled">;
 }
 declare const OverlayScrollArea: React__default.ForwardRefExoticComponent<OverlayScrollAreaProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -1918,6 +1920,8 @@ interface ListProps extends React$1.HTMLAttributes<HTMLUListElement> {
     dense?: boolean;
     /** Class name customization for all list items */
     itemClassName?: string;
+    /** Clip overflow on the outer list wrapper. Mainly relevant for striped/card-like variants. */
+    overflowHidden?: boolean;
 }
 interface ListItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     as?: "li" | "div" | "a" | "button";
@@ -2314,6 +2318,8 @@ interface DataTableProps<T> {
     stickyHeader?: boolean;
     /** Chiều cao tối đa của bảng khi bật stickyHeader (mặc định: 500px) */
     maxHeight?: number | string;
+    /** Clip overflow của outer wrapper. Tắt khi cần cho phép shadow/focus ring tràn ra ngoài. */
+    overflowHidden?: boolean;
     /** Enable OverlayScrollbars on table viewport. Default: false */
     useOverlayScrollbar?: boolean;
     /** Double-click leaf headers to auto-fit column width based on visible content. Default: true */
@@ -2321,7 +2327,7 @@ interface DataTableProps<T> {
     labels?: DataTableLabels;
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, overflowHidden, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
     containerClassName?: string;

package/dist/index.d.ts

@@ -765,6 +765,7 @@ interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     contentClassName?: string;
     variant?: "default" | "muted" | "primary" | "accent";
     outlined?: boolean;
+    overflowHidden?: boolean;
     useOverlayScrollbar?: boolean;
 }
 declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -794,6 +795,7 @@ interface OverlayScrollAreaProps extends React__default.HTMLAttributes<HTMLDivEl
     viewportClassName?: string;
     viewportProps?: React__default.HTMLAttributes<HTMLDivElement>;
     enabled?: boolean;
+    overflowHidden?: boolean;
     overlayScrollbarOptions?: Omit<UseOverlayScrollbarTargetOptions, "enabled">;
 }
 declare const OverlayScrollArea: React__default.ForwardRefExoticComponent<OverlayScrollAreaProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -1918,6 +1920,8 @@ interface ListProps extends React$1.HTMLAttributes<HTMLUListElement> {
     dense?: boolean;
     /** Class name customization for all list items */
     itemClassName?: string;
+    /** Clip overflow on the outer list wrapper. Mainly relevant for striped/card-like variants. */
+    overflowHidden?: boolean;
 }
 interface ListItemProps extends React$1.HTMLAttributes<HTMLLIElement> {
     as?: "li" | "div" | "a" | "button";
@@ -2314,6 +2318,8 @@ interface DataTableProps<T> {
     stickyHeader?: boolean;
     /** Chiều cao tối đa của bảng khi bật stickyHeader (mặc định: 500px) */
     maxHeight?: number | string;
+    /** Clip overflow của outer wrapper. Tắt khi cần cho phép shadow/focus ring tràn ra ngoài. */
+    overflowHidden?: boolean;
     /** Enable OverlayScrollbars on table viewport. Default: false */
     useOverlayScrollbar?: boolean;
     /** Double-click leaf headers to auto-fit column width based on visible content. Default: true */
@@ -2321,7 +2327,7 @@ interface DataTableProps<T> {
     labels?: DataTableLabels;
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, overflowHidden, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
     containerClassName?: string;

package/dist/index.js

@@ -7749,19 +7749,23 @@ var variantClasses2 = {
   accent: "bg-accent/10"
 };
 var ScrollArea = forwardRef6(
-  ({ className, contentClassName, children, variant = "default", outlined = false, useOverlayScrollbar = false, ...props }, ref) => {
+  ({
+    className,
+    contentClassName,
+    children,
+    variant = "default",
+    outlined = false,
+    overflowHidden = true,
+    useOverlayScrollbar = false,
+    ...props
+  }, ref) => {
     const viewportRef = useRef11(null);
     useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
     return /* @__PURE__ */ jsx32(
       "div",
       {
         ref,
-        className: cn(
-          "relative overflow-hidden rounded-2xl md:rounded-3xl",
-          variantClasses2[variant],
-          outlined && "border border-border/60",
-          className
-        ),
+        className: cn("relative", variantClasses2[variant], outlined && "border border-border/60", overflowHidden && "overflow-hidden", className),
         ...props,
         children: /* @__PURE__ */ jsx32("div", { ref: viewportRef, className: cn("h-full w-full overflow-y-auto scroll-area-viewport", contentClassName), children })
       }
@@ -7774,13 +7778,13 @@ ScrollArea.displayName = "ScrollArea";
 import { forwardRef as forwardRef7, useRef as useRef12 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var OverlayScrollArea = forwardRef7(
-  ({ className, viewportClassName, viewportProps, enabled = true, overlayScrollbarOptions, children, ...props }, ref) => {
+  ({ className, viewportClassName, viewportProps, enabled = true, overflowHidden = true, overlayScrollbarOptions, children, ...props }, ref) => {
     const viewportRef = useRef12(null);
     useOverlayScrollbarTarget(viewportRef, {
       enabled,
       ...overlayScrollbarOptions
     });
-    return /* @__PURE__ */ jsx33("div", { ref, className: cn("relative overflow-hidden", className), ...props, children: /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsx33("div", { ref, className: cn("relative", overflowHidden && "overflow-hidden", className), ...props, children: /* @__PURE__ */ jsx33(
       "div",
       {
         ref: viewportRef,
@@ -18793,6 +18797,7 @@ var ListRoot = React46.forwardRef(
     className,
     itemClassName,
     // New prop
+    overflowHidden = true,
     children,
     ...rest
   }, ref) => {
@@ -18806,21 +18811,36 @@ var ListRoot = React46.forwardRef(
       bordered: "border border-border/50 rounded-2xl md:rounded-3xl max-md:rounded-xl",
       card: "rounded-2xl md:rounded-3xl bg-card shadow-md border border-border/50 max-md:rounded-xl max-md:shadow-sm",
       flush: "",
-      striped: "rounded-2xl md:rounded-3xl border border-border/50 overflow-hidden max-md:rounded-xl"
+      striped: "rounded-2xl md:rounded-3xl border border-border/50 max-md:rounded-xl"
     };
     if (loading2) {
       return /* @__PURE__ */ jsx54(
         Comp,
         {
           ref,
-          className: cn("group/list", variantClasses3[variant], inset && "p-1.5 md:p-2 max-md:p-1", divided && "divide-y divide-border/60", className),
+          className: cn(
+            "group/list",
+            variantClasses3[variant],
+            variant === "striped" && overflowHidden && "overflow-hidden",
+            inset && "p-1.5 md:p-2 max-md:p-1",
+            divided && "divide-y divide-border/60",
+            className
+          ),
           ...rest,
           children: Array.from({ length: loadingCount }).map((_, i) => /* @__PURE__ */ jsx54(ListItemSkeleton, { size }, i))
         }
       );
     }
     if (!hasChildren && emptyText) {
-      return /* @__PURE__ */ jsx54(Comp, { ref, className: cn("group/list", variantClasses3[variant], inset && "p-1.5 md:p-2 max-md:p-1", className), ...rest, children: /* @__PURE__ */ jsx54("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
+      return /* @__PURE__ */ jsx54(
+        Comp,
+        {
+          ref,
+          className: cn("group/list", variantClasses3[variant], variant === "striped" && overflowHidden && "overflow-hidden", inset && "p-1.5 md:p-2 max-md:p-1", className),
+          ...rest,
+          children: /* @__PURE__ */ jsx54("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText })
+        }
+      );
     }
     return /* @__PURE__ */ jsx54(
       Comp,
@@ -18829,6 +18849,7 @@ var ListRoot = React46.forwardRef(
         className: cn(
           "group/list",
           variantClasses3[variant],
+          variant === "striped" && overflowHidden && "overflow-hidden",
           inset && "p-1.5 md:p-2 max-md:p-1",
           divided && "divide-y divide-border/60",
           variant === "striped" && "[&>*:nth-child(even)]:bg-muted/30",
@@ -21923,6 +21944,7 @@ function DataTable({
   storageKey,
   stickyHeader = true,
   maxHeight = 500,
+  overflowHidden = true,
   useOverlayScrollbar = false,
   enableHeaderAutoFit = true,
   labels
@@ -22056,7 +22078,8 @@ function DataTable({
       "div",
       {
         className: cn(
-          "relative rounded-2xl md:rounded-3xl border border-border/50 bg-card overflow-hidden",
+          "relative rounded-2xl md:rounded-3xl border border-border/50 bg-card",
+          overflowHidden && "overflow-hidden",
           loading2 && "opacity-60 pointer-events-none"
         ),
         children: /* @__PURE__ */ jsx67(