@bigbinary/neeto-atoms 1.0.26 → 1.0.27

package/dist/{DataTable-DYam_kUE.js → DataTable-DbSFUmLd.js}

@@ -9,6 +9,7 @@ import { Spinner } from './primitives/Spinner.js';
 import { c as createLucideIcon } from './createLucideIcon-C8ycilSN.js';
 import { Button } from './primitives/Button.js';
 import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationEllipsis, PaginationLink, PaginationNext } from './primitives/Pagination.js';
+import { B as Button$1 } from './Button-Q7MPG6ph.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './primitives/DropdownMenu.js';
 import { E as Ellipsis } from './ellipsis-lb8Ws6br.js';
 import { C as Check } from './check-Cpkv29p1.js';
@@ -3303,7 +3304,7 @@ const useTablePagination = ({ totalCount = 0, pageSize = DEFAULT_PAGE_SIZE, curr
 
 const SelectionCheckbox = ({ checked, onCheckedChange, ariaLabel, }) => {
     const { t } = useTranslation();
-    return (jsx("div", { className: "flex items-center justify-center", children: jsx(Checkbox, { checked: checked, onCheckedChange: onCheckedChange, "aria-label": ariaLabel ?? t("neetoatoms.dataTable.selectRow", "Select row") }) }));
+    return (jsx("div", { className: "flex w-full items-center justify-center", children: jsx(Checkbox, { checked: checked, onCheckedChange: onCheckedChange, "aria-label": ariaLabel ?? t("neetoatoms.dataTable.selectRow", "Select row") }) }));
 };
 
 const useTableSelection = ({ enableRowSelection, selectedRowKeys, onRowSelect, data, getRowId, }) => {
@@ -3353,7 +3354,7 @@ const useTableSelection = ({ enableRowSelection, selectedRowKeys, onRowSelect, d
                 onCheckedChange: value => row.toggleSelected(!!value),
                 ariaLabel: "Select row",
             }),
-            size: 40,
+            size: 56,
             enableSorting: false,
             enableResizing: false,
         };
@@ -3538,7 +3539,7 @@ const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBu
     if (!isAllPageRowsSelected && !isBulkAllSelected)
         return null;
     const { selectAllRowMessage, selectAllRowButtonLabel, allRowsSelectedMessage, clearSelectionButtonLabel, } = bulkSelectAllRowsProps;
-    return (jsx("div", { className: "mb-2 flex items-center justify-center gap-1 rounded-lg bg-primary/10 px-4 py-1.5 text-sm text-primary", children: isBulkAllSelected ? (jsxs(Fragment, { children: [jsx("span", { children: allRowsSelectedMessage ?? selectAllRowMessage }), jsx(Button, { variant: "link", onClick: onClearBulkSelection, children: clearSelectionButtonLabel ?? "Clear selection" })] })) : (jsxs(Fragment, { children: [jsx("span", { children: selectAllRowMessage }), jsx(Button, { variant: "link", onClick: onBulkSelectAll, children: selectAllRowButtonLabel })] })) }));
+    return (jsx("div", { className: "mb-2 flex items-center justify-center gap-1 rounded-sm bg-primary/10 px-4 py-1.5 text-sm text-primary", children: isBulkAllSelected ? (jsxs(Fragment, { children: [jsx("span", { children: allRowsSelectedMessage ?? selectAllRowMessage }), jsx(Button, { variant: "link", onClick: onClearBulkSelection, children: clearSelectionButtonLabel ?? "Clear selection" })] })) : (jsxs(Fragment, { children: [jsx("span", { children: selectAllRowMessage }), jsx(Button, { variant: "link", onClick: onBulkSelectAll, children: selectAllRowButtonLabel })] })) }));
 };
 
 const DataTablePagination = ({ currentPage, pageCount, onPageChange, }) => {
@@ -3580,7 +3581,7 @@ const HeaderCellMenu = ({ column, enableAddColumn, enableColumnFreeze, isColumnP
         moreActions.length > 0;
     if (!hasAnyAction)
         return null;
-    return (jsx("div", { onClick: e => e.stopPropagation(), children: jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", className: "ml-1 size-7 shrink-0 text-muted-foreground data-[state=open]:bg-muted", "data-testid": "column-menu-button", children: jsx(Ellipsis, { className: "size-4" }) }) }), jsxs(DropdownMenuContent, { align: "start", className: "w-48", children: [isSortable && (jsxs(Fragment, { children: [jsxs(DropdownMenuItem, { "data-testid": "ascending-column-menu-button", onClick: () => onSort?.(column.id, false), children: [jsx(ArrowUp, { className: "mr-2 size-4" }), "Ascending", currentSort === "asc" && (jsx(Check, { className: "ml-auto size-4 text-primary" }))] }), jsxs(DropdownMenuItem, { "data-testid": "descending-column-menu-button", onClick: () => onSort?.(column.id, true), children: [jsx(ArrowDown, { className: "mr-2 size-4" }), "Descending", currentSort === "desc" && (jsx(Check, { className: "ml-auto size-4 text-primary" }))] })] })), enableAddColumn && (jsxs(Fragment, { children: [jsxs(DropdownMenuItem, { "data-testid": "insert-right-column-menu-button", onClick: () => onAddColumn?.(columnIndex + 1), children: [jsx(Plus, { className: "mr-2 size-4" }), "Insert column right"] }), jsxs(DropdownMenuItem, { "data-testid": "insert-left-column-menu-button", onClick: () => onAddColumn?.(columnIndex), children: [jsx(Plus, { className: "mr-2 size-4" }), "Insert column left"] })] })), isHidable && onHideColumn && (jsx(Fragment, { children: jsxs(DropdownMenuItem, { "data-testid": "hide-column-menu-button", onClick: () => onHideColumn(column.id), children: [jsx(EyeOff, { className: "mr-2 size-4" }), "Hide column"] }) })), isDeletable && onDeleteColumn && (jsxs(DropdownMenuItem, { "data-testid": "delete-column-menu-button", onClick: () => onDeleteColumn(column.id), children: [jsx(Trash2, { className: "mr-2 size-4" }), "Delete column"] })), enableColumnFreeze && onTogglePin && (jsx(Fragment, { children: jsxs(DropdownMenuItem, { "data-testid": "freeze-unfreeze-column-menu-button", onClick: () => onTogglePin(column.id), children: [jsx(Pin, { className: "mr-2 size-4" }), isColumnPinned ? "Unfreeze column" : "Freeze column"] }) })), onMoveColumn && (canMoveLeft || canMoveRight) && (jsxs(Fragment, { children: [canMoveLeft && (jsxs(DropdownMenuItem, { "data-testid": "move-column-left-menu-button", onClick: () => onMoveColumn(column.id, -1), children: [jsx(MoveLeft, { className: "mr-2 size-4" }), "Move column left"] })), canMoveRight && (jsxs(DropdownMenuItem, { "data-testid": "move-column-right-menu-button", onClick: () => onMoveColumn(column.id, 1), children: [jsx(MoveRight, { className: "mr-2 size-4" }), "Move column right"] }))] })), moreActions.length > 0 && (jsx(Fragment, { children: moreActions.map(action => {
+    return (jsx("div", { onClick: e => e.stopPropagation(), children: jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx(Button$1, { variant: "ghost", size: "icon", icon: Ellipsis, "data-testid": "column-menu-button" }) }), jsxs(DropdownMenuContent, { align: "start", className: "w-48", children: [isSortable && (jsxs(Fragment, { children: [jsxs(DropdownMenuItem, { "data-testid": "ascending-column-menu-button", onClick: () => onSort?.(column.id, false), children: [jsx(ArrowUp, { className: "mr-2 size-4" }), "Ascending", currentSort === "asc" && (jsx(Check, { className: "ml-auto size-4 text-primary" }))] }), jsxs(DropdownMenuItem, { "data-testid": "descending-column-menu-button", onClick: () => onSort?.(column.id, true), children: [jsx(ArrowDown, { className: "mr-2 size-4" }), "Descending", currentSort === "desc" && (jsx(Check, { className: "ml-auto size-4 text-primary" }))] })] })), enableAddColumn && (jsxs(Fragment, { children: [jsxs(DropdownMenuItem, { "data-testid": "insert-right-column-menu-button", onClick: () => onAddColumn?.(columnIndex + 1), children: [jsx(Plus, { className: "mr-2 size-4" }), "Insert column right"] }), jsxs(DropdownMenuItem, { "data-testid": "insert-left-column-menu-button", onClick: () => onAddColumn?.(columnIndex), children: [jsx(Plus, { className: "mr-2 size-4" }), "Insert column left"] })] })), isHidable && onHideColumn && (jsx(Fragment, { children: jsxs(DropdownMenuItem, { "data-testid": "hide-column-menu-button", onClick: () => onHideColumn(column.id), children: [jsx(EyeOff, { className: "mr-2 size-4" }), "Hide column"] }) })), isDeletable && onDeleteColumn && (jsxs(DropdownMenuItem, { "data-testid": "delete-column-menu-button", onClick: () => onDeleteColumn(column.id), children: [jsx(Trash2, { className: "mr-2 size-4" }), "Delete column"] })), enableColumnFreeze && onTogglePin && (jsx(Fragment, { children: jsxs(DropdownMenuItem, { "data-testid": "freeze-unfreeze-column-menu-button", onClick: () => onTogglePin(column.id), children: [jsx(Pin, { className: "mr-2 size-4" }), isColumnPinned ? "Unfreeze column" : "Freeze column"] }) })), onMoveColumn && (canMoveLeft || canMoveRight) && (jsxs(Fragment, { children: [canMoveLeft && (jsxs(DropdownMenuItem, { "data-testid": "move-column-left-menu-button", onClick: () => onMoveColumn(column.id, -1), children: [jsx(MoveLeft, { className: "mr-2 size-4" }), "Move column left"] })), canMoveRight && (jsxs(DropdownMenuItem, { "data-testid": "move-column-right-menu-button", onClick: () => onMoveColumn(column.id, 1), children: [jsx(MoveRight, { className: "mr-2 size-4" }), "Move column right"] }))] })), moreActions.length > 0 && (jsx(Fragment, { children: moreActions.map(action => {
                                 const ActionIcon = action.icon;
                                 return (jsxs(DropdownMenuItem, { "data-testid": `${action.type}-column-menu-button`, onClick: () => onMoreActionClick?.(action.type, column.id), children: [ActionIcon && jsx(ActionIcon, { className: "mr-2 size-4" }), action.label] }, action.type));
                             }) }))] })] }) }));
@@ -3719,6 +3720,32 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
         table.toggleAllPageRowsSelected(false);
         onRowSelect?.([], []);
     };
+    const scrollContainerRef = useRef(null);
+    const [scrollState, setScrollState] = useState({
+        scrolledStart: false,
+        scrolledEnd: false,
+    });
+    useEffect(() => {
+        const el = scrollContainerRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            const { scrollLeft, scrollWidth, clientWidth } = el;
+            const maxScroll = scrollWidth - clientWidth;
+            setScrollState({
+                scrolledStart: scrollLeft > 0,
+                scrolledEnd: scrollLeft < maxScroll - 1,
+            });
+        };
+        update();
+        el.addEventListener("scroll", update, { passive: true });
+        const resizeObserver = new ResizeObserver(update);
+        resizeObserver.observe(el);
+        return () => {
+            el.removeEventListener("scroll", update);
+            resizeObserver.disconnect();
+        };
+    }, []);
     const handleSort = (columnId, desc) => {
         const isSameSort = sorting.length > 0 &&
             sorting[0].id === columnId &&
@@ -3730,7 +3757,7 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
             onSortingChange([{ id: columnId, desc }]);
         }
     };
-    return (jsxs("div", { className: cn("relative flex min-h-0 w-full flex-col", className), children: [loading && jsx(LoadingOverlay, {}), (showSelectAllCallout || showAllSelectedCallout) && (jsx(BulkSelectCallout, { bulkSelectAllRowsProps: bulkSelectAllRowsProps, isAllPageRowsSelected: isAllPageRowsSelected, isBulkAllSelected: bulkSelectedAllRows, onBulkSelectAll: handleBulkSelectAll, onClearBulkSelection: handleClearBulkSelection })), jsx("div", { className: cn("min-h-0 flex-1 overflow-auto", bordered && "rounded-lg border"), children: jsxs(Table, { children: [jsx(TableHeader, { className: "sticky top-0 z-20 bg-muted", children: table.getHeaderGroups().map(headerGroup => {
+    return (jsxs("div", { className: cn("relative flex min-h-0 w-full flex-col", className), children: [loading && jsx(LoadingOverlay, {}), (showSelectAllCallout || showAllSelectedCallout) && (jsx(BulkSelectCallout, { bulkSelectAllRowsProps: bulkSelectAllRowsProps, isAllPageRowsSelected: isAllPageRowsSelected, isBulkAllSelected: bulkSelectedAllRows, onBulkSelectAll: handleBulkSelectAll, onClearBulkSelection: handleClearBulkSelection })), jsx("div", { ref: scrollContainerRef, "data-scrolled-start": scrollState.scrolledStart || undefined, "data-scrolled-end": scrollState.scrolledEnd || undefined, className: cn("group/scroll min-h-0 flex-1 overflow-auto", bordered && "rounded-lg border"), children: jsxs(Table, { children: [jsx(TableHeader, { className: "sticky top-0 z-20 bg-muted", children: table.getHeaderGroups().map(headerGroup => {
                                 const dataHeaders = headerGroup.headers.filter(h => h.column.id !== "_selection");
                                 const totalDataSize = dataHeaders.reduce((sum, h) => sum + h.getSize(), 0);
                                 return (jsx(TableRow, { className: "hover:bg-muted", children: headerGroup.headers.map((header, headerIndex) => {
@@ -3738,7 +3765,9 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
                                         const isSelectionCol = header.column.id === "_selection";
                                         const columnIndexInData = dataHeaders.findIndex(h => h.id === header.id);
                                         return (jsxs(TableHead, { className: cn("group/head relative", header.column.getCanSort() &&
-                                                "cursor-pointer select-none", isPinned && "sticky z-10 bg-muted"), style: {
+                                                "cursor-pointer select-none", isSelectionCol && "!pe-2", isPinned && "sticky z-10 bg-muted", isPinned === "left" &&
+                                                "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6", isPinned === "right" &&
+                                                "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"), style: {
                                                 width: selectionColumn && isSelectionCol
                                                     ? 0
                                                     : selectionColumn
@@ -3763,13 +3792,15 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
                                                                 ? (colId, dir) => moveColumn(colId, dir)
                                                                 : undefined, onMoreActionClick: onMoreActionClick }))] })), enableColumnResize && jsx(ResizeHandle, { header: header })] }, header.id));
                                     }) }, headerGroup.id));
-                            }) }), jsx(TableBody, { className: loading ? "opacity-50" : undefined, children: table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map(row => (jsx(TableRow, { "data-state": row.getIsSelected() ? "selected" : undefined, className: cn("group", allowRowClick && onRowClick && "cursor-pointer"), onClick: allowRowClick && onRowClick
+                            }) }), jsx(TableBody, { className: loading ? "opacity-50" : undefined, children: table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map(row => (jsx(TableRow, { "data-state": row.getIsSelected() ? "selected" : undefined, className: cn("group data-[state=selected]:bg-info", allowRowClick && onRowClick && "cursor-pointer"), onClick: allowRowClick && onRowClick
                                     ? event => onRowClick(event, row.original, row.index)
                                     : undefined, children: row.getVisibleCells().map(cell => {
                                     const isPinned = cell.column.getIsPinned();
                                     const isSelCell = cell.column.id === "_selection";
-                                    return (jsx(TableCell, { className: cn(isPinned &&
-                                            "sticky z-10 bg-background group-hover:bg-muted/50 group-data-[state=selected]:bg-muted"), style: {
+                                    return (jsx(TableCell, { className: cn(isSelCell && "!pe-2", isPinned &&
+                                            "sticky z-10 bg-background group-data-[state=selected]:bg-info", isPinned === "left" &&
+                                            "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6", isPinned === "right" &&
+                                            "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"), style: {
                                             width: selectionColumn && isSelCell
                                                 ? 0
                                                 : cell.column.getSize(),
@@ -3791,4 +3822,4 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
 };
 
 export { DataTable as D, useColumnPinning as a, useColumnVisibility as b, useTablePagination as c, useTableSelection as d, useTableSort as e, useColumnOrdering as u };
-//# sourceMappingURL=DataTable-DYam_kUE.js.map
+//# sourceMappingURL=DataTable-DbSFUmLd.js.map