@underverse-ui/underverse 1.0.90 → 1.0.92

package/dist/index.d.cts

@@ -780,6 +780,8 @@ interface OverlayScrollbarBehavior {
     autoHideDelay: number;
     dragScroll: boolean;
     clickScroll: boolean;
+    overflowX: "hidden" | "visible" | "scroll" | "visible-hidden" | "visible-scroll";
+    overflowY: "hidden" | "visible" | "scroll" | "visible-hidden" | "visible-scroll";
     exclude: string;
 }
 
@@ -790,7 +792,7 @@ interface OverlayScrollbarProviderProps extends Partial<OverlayScrollbarBehavior
 }
 interface UseOverlayScrollbarTargetOptions extends Partial<OverlayScrollbarBehavior> {
 }
-declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, exclude, selector, children, }?: OverlayScrollbarProviderProps): react_jsx_runtime.JSX.Element;
+declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, overflowX, overflowY, exclude, selector, children, }?: OverlayScrollbarProviderProps): react_jsx_runtime.JSX.Element;
 declare function useOverlayScrollbarTarget<T extends HTMLElement>(targetRef: React__default.RefObject<T | null>, options?: UseOverlayScrollbarTargetOptions): void;
 
 interface OverlayScrollAreaProps extends React__default.HTMLAttributes<HTMLDivElement> {
@@ -2249,6 +2251,7 @@ declare const loading: LoadingManager;
 type FilterType = "text" | "select" | "date";
 type DataTableSize = "sm" | "md" | "lg";
 type DataTableDensity = "compact" | "normal" | "comfortable";
+type DataTableHorizontalMode = "auto" | "scroll" | "fit";
 type DataTableColumn<T> = {
     key: string;
     title: React__default.ReactNode;
@@ -2324,6 +2327,13 @@ 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;
+    /**
+     * Horizontal sizing strategy for the table viewport.
+     * - "auto": default, prefer fitting the container and only scroll when content truly overflows
+     * - "scroll": preserve explicit column widths and force horizontal scrolling via min-width aggregation
+     * - "fit": use fixed table layout and suppress horizontal scrolling
+     */
+    horizontalMode?: DataTableHorizontalMode;
     /** 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 */
@@ -2333,7 +2343,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, overflowHidden, 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, horizontalMode, 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

@@ -780,6 +780,8 @@ interface OverlayScrollbarBehavior {
     autoHideDelay: number;
     dragScroll: boolean;
     clickScroll: boolean;
+    overflowX: "hidden" | "visible" | "scroll" | "visible-hidden" | "visible-scroll";
+    overflowY: "hidden" | "visible" | "scroll" | "visible-hidden" | "visible-scroll";
     exclude: string;
 }
 
@@ -790,7 +792,7 @@ interface OverlayScrollbarProviderProps extends Partial<OverlayScrollbarBehavior
 }
 interface UseOverlayScrollbarTargetOptions extends Partial<OverlayScrollbarBehavior> {
 }
-declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, exclude, selector, children, }?: OverlayScrollbarProviderProps): react_jsx_runtime.JSX.Element;
+declare function OverlayScrollbarProvider({ enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, overflowX, overflowY, exclude, selector, children, }?: OverlayScrollbarProviderProps): react_jsx_runtime.JSX.Element;
 declare function useOverlayScrollbarTarget<T extends HTMLElement>(targetRef: React__default.RefObject<T | null>, options?: UseOverlayScrollbarTargetOptions): void;
 
 interface OverlayScrollAreaProps extends React__default.HTMLAttributes<HTMLDivElement> {
@@ -2249,6 +2251,7 @@ declare const loading: LoadingManager;
 type FilterType = "text" | "select" | "date";
 type DataTableSize = "sm" | "md" | "lg";
 type DataTableDensity = "compact" | "normal" | "comfortable";
+type DataTableHorizontalMode = "auto" | "scroll" | "fit";
 type DataTableColumn<T> = {
     key: string;
     title: React__default.ReactNode;
@@ -2324,6 +2327,13 @@ 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;
+    /**
+     * Horizontal sizing strategy for the table viewport.
+     * - "auto": default, prefer fitting the container and only scroll when content truly overflows
+     * - "scroll": preserve explicit column widths and force horizontal scrolling via min-width aggregation
+     * - "fit": use fixed table layout and suppress horizontal scrolling
+     */
+    horizontalMode?: DataTableHorizontalMode;
     /** 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 */
@@ -2333,7 +2343,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, overflowHidden, 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, horizontalMode, overflowHidden, useOverlayScrollbar, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
     containerClassName?: string;

package/dist/index.js

@@ -1879,6 +1879,8 @@ var DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR = {
   autoHideDelay: 600,
   dragScroll: true,
   clickScroll: false,
+  overflowX: "scroll",
+  overflowY: "scroll",
   exclude: DEFAULT_OVERLAY_SCROLLBAR_EXCLUDE
 };
 function resolveOverlayScrollbarBehavior(overrides = {}) {
@@ -1889,6 +1891,10 @@ function resolveOverlayScrollbarBehavior(overrides = {}) {
 }
 function buildOverlayScrollbarOptions(config) {
   return {
+    overflow: {
+      x: config.overflowX,
+      y: config.overflowY
+    },
     scrollbars: {
       theme: config.theme,
       visibility: config.visibility,
@@ -2033,6 +2039,8 @@ function OverlayScrollbarProvider({
   autoHideDelay = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.autoHideDelay,
   dragScroll = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.dragScroll,
   clickScroll = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.clickScroll,
+  overflowX = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.overflowX,
+  overflowY = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.overflowY,
   exclude = DEFAULT_OVERLAY_SCROLLBAR_BEHAVIOR.exclude,
   selector,
   children
@@ -2046,9 +2054,11 @@ function OverlayScrollbarProvider({
       autoHideDelay,
       dragScroll,
       clickScroll,
+      overflowX,
+      overflowY,
       exclude
     }),
-    [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, exclude]
+    [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, overflowX, overflowY, exclude]
   );
   void selector;
   return /* @__PURE__ */ jsx8(OverlayScrollbarConfigContext.Provider, { value, children: children ?? null });
@@ -2062,6 +2072,8 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
   const autoHideDelay = options.autoHideDelay ?? inherited.autoHideDelay;
   const dragScroll = options.dragScroll ?? inherited.dragScroll;
   const clickScroll = options.clickScroll ?? inherited.clickScroll;
+  const overflowX = options.overflowX ?? inherited.overflowX;
+  const overflowY = options.overflowY ?? inherited.overflowY;
   const exclude = options.exclude ?? inherited.exclude;
   const resolved = useMemo2(
     () => resolveOverlayScrollbarBehavior({
@@ -2072,9 +2084,11 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
       autoHideDelay,
       dragScroll,
       clickScroll,
+      overflowX,
+      overflowY,
       exclude
     }),
-    [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, exclude]
+    [enabled, theme, visibility, autoHide, autoHideDelay, dragScroll, clickScroll, overflowX, overflowY, exclude]
   );
   useEffect2(() => {
     if (typeof window === "undefined") return;
@@ -2099,6 +2113,8 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
     resolved.autoHideDelay,
     resolved.dragScroll,
     resolved.clickScroll,
+    resolved.overflowX,
+    resolved.overflowY,
     resolved.exclude
   ]);
 }
@@ -16236,6 +16252,25 @@ Slider.displayName = "Slider";
 import { Dot as Dot2, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
 import React42 from "react";
 import { Fragment as Fragment15, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+function resolveKeyboardEventElement(target) {
+  if (target instanceof Element) return target;
+  if (target instanceof Node) return target.parentElement;
+  return null;
+}
+function isEditableKeyboardTarget(target) {
+  const element = resolveKeyboardEventElement(target);
+  if (!element) return false;
+  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+    return true;
+  }
+  if (element instanceof HTMLElement && element.isContentEditable) {
+    return true;
+  }
+  if (element.closest?.('[contenteditable=""],[contenteditable="true"],[contenteditable="plaintext-only"]') || element.closest?.('[role="textbox"]')) {
+    return true;
+  }
+  return false;
+}
 function OverlayControls({
   mode,
   value,
@@ -16334,7 +16369,7 @@ function OverlayControls({
   React42.useEffect(() => {
     if (!enableKeyboardShortcuts) return;
     const handleKeyDown2 = (e) => {
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      if (isEditableKeyboardTarget(e.target)) return;
       switch (e.key) {
         case " ":
         case "k":
@@ -20774,7 +20809,7 @@ var LoadingBar = ({
 // src/components/Table.tsx
 import React52 from "react";
 import { jsx as jsx62, jsxs as jsxs51 } from "react/jsx-runtime";
-var TABLE_BASE_CLASS = "w-full caption-bottom text-sm";
+var TABLE_BASE_CLASS = "w-full border-collapse caption-bottom text-sm";
 var TABLE_CONTAINER_BASE_CLASS = [
   "relative w-full overflow-auto",
   "rounded-2xl md:rounded-3xl border border-border/50",
@@ -21209,6 +21244,7 @@ function DataTableHeader({
     const prevCol = prevCell?.column;
     const isAfterFixedLeft = prevCol?.fixed === "left";
     const showBorderLeft = columnDividers && cellIndex > 0 && !isAfterFixedLeft && !col.fixed;
+    const isLastCell = cellIndex === row.length - 1;
     return /* @__PURE__ */ jsxs53(
       TableHead,
       {
@@ -21248,7 +21284,8 @@ function DataTableHeader({
                     onAutoFitColumn?.(col.key);
                   },
                   className: cn(
-                    "absolute inset-y-0 right-0 z-10 w-3 -mr-1",
+                    "absolute inset-y-0 right-0 z-10 w-3",
+                    !isLastCell && "-mr-1",
                     "cursor-col-resize select-none bg-transparent",
                     "after:absolute after:inset-y-2 after:right-0.8 after:w-px after:bg-border/0 after:transition-colors",
                     "hover:after:bg-primary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
@@ -22019,6 +22056,7 @@ function DataTable({
   storageKey,
   stickyHeader = true,
   maxHeight = 500,
+  horizontalMode = "auto",
   overflowHidden = true,
   useOverlayScrollbar = false,
   enableHeaderAutoFit = true,
@@ -22092,6 +22130,10 @@ function DataTable({
     total
   });
   const { getStickyCellClass, getStickyColumnStyle, getStickyHeaderClass, getStickyHeaderCellStyle } = useStickyColumns(visibleColumns);
+  const shouldForceHorizontalScroll = horizontalMode === "scroll";
+  const shouldUseFixedLayout = horizontalMode !== "auto";
+  const viewportOverflowXClass = horizontalMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto";
+  const overlayOverflowX = horizontalMode === "fit" ? "hidden" : "scroll";
   const getRowKey = (row, idx) => {
     if (!rowKey) return String(idx);
     if (typeof rowKey === "function") return String(rowKey(row));
@@ -22099,7 +22141,10 @@ function DataTable({
   };
   const viewportRef = React62.useRef(null);
   const tableRef = React62.useRef(null);
-  useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
+  useOverlayScrollbarTarget(viewportRef, {
+    enabled: useOverlayScrollbar,
+    overflowX: overlayOverflowX
+  });
   const autoFitColumn = React62.useCallback((columnKey) => {
     const tableElement = tableRef.current;
     if (!tableElement) return;
@@ -22161,7 +22206,7 @@ function DataTable({
           "div",
           {
             ref: viewportRef,
-            className: cn("w-full overflow-x-auto", stickyHeader && "overflow-y-auto"),
+            className: cn("w-full", viewportOverflowXClass, stickyHeader && "overflow-y-auto"),
             style: stickyHeader ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
             children: /* @__PURE__ */ jsxs56(
               Table,
@@ -22169,10 +22214,10 @@ function DataTable({
                 ref: tableRef,
                 disableContainer: true,
                 className: cn(
-                  "table-fixed",
+                  shouldUseFixedLayout ? "table-fixed" : "table-auto",
                   stickyHeader && ["[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-20", "[&_thead]:shadow-[0_1px_3px_rgba(0,0,0,0.1)]"]
                 ),
-                style: { minWidth: totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
+                style: { minWidth: shouldForceHorizontalScroll && totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
                 children: [
                   /* @__PURE__ */ jsx67(TableHeader, { children: /* @__PURE__ */ jsx67(
                     DataTableHeader,