@bigbinary/neeto-atoms 1.0.25 → 1.0.27

package/dist/{DataTable-Dre7vc3w.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,
         };
@@ -3534,11 +3535,11 @@ const ResizeHandle = ({ header }) => {
             : "bg-border opacity-0 group-hover/head:opacity-100") }));
 };
 
-const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBulkAllSelected, }) => {
-    if (!isAllPageRowsSelected)
+const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBulkAllSelected, onBulkSelectAll, onClearBulkSelection, }) => {
+    if (!isAllPageRowsSelected && !isBulkAllSelected)
         return null;
-    const { selectAllRowMessage, selectAllRowButtonLabel, setBulkSelectedAllRows, 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 }), clearSelectionButtonLabel && (jsx(Button, { variant: "link", onClick: () => setBulkSelectedAllRows(false), children: clearSelectionButtonLabel }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: selectAllRowMessage }), jsx(Button, { variant: "link", onClick: () => setBulkSelectedAllRows(true), children: selectAllRowButtonLabel })] })) }));
+    const { selectAllRowMessage, selectAllRowButtonLabel, allRowsSelectedMessage, clearSelectionButtonLabel, } = bulkSelectAllRowsProps;
+    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,13 +3581,13 @@ 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));
                             }) }))] })] }) }));
 };
 
-const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting = true, enableURLSort = true, totalCount, pageSize = DEFAULT_PAGE_SIZE, currentPage: currentPageProp, onPageChange: onPageChangeProp, enableURLPagination = true, enableRowSelection: enableRowSelectionProp, selectedRowKeys, onRowSelect, bulkSelectAllRowsProps, enableColumnResize = true, enableColumnFreeze = true, columnPinning: columnPinningProp, onColumnPinningChange: onColumnPinningChangeProp, localStorageKeyPrefix, columnVisibility: columnVisibilityProp, onColumnVisibilityChange: onColumnVisibilityChangeProp, onColumnHide: onColumnHideProp, enableColumnReorder = false, columnOrder: columnOrderProp, onColumnOrderChange: onColumnOrderChangeProp, enableAddColumn = false, onColumnAdd, onColumnDelete, onColumnUpdate, onMoreActionClick, enableHeaderMenu, loading = false, bordered = true, className, emptyMessage, onRowClick, allowRowClick = true, }) => {
+const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting = false, enableURLSort = true, totalCount, pageSize = DEFAULT_PAGE_SIZE, currentPage: currentPageProp, onPageChange: onPageChangeProp, enableURLPagination = true, enableRowSelection: enableRowSelectionProp, selectedRowKeys, onRowSelect, bulkSelectAllRowsProps, enableColumnResize = true, enableColumnFreeze = true, columnPinning: columnPinningProp, onColumnPinningChange: onColumnPinningChangeProp, localStorageKeyPrefix, columnVisibility: columnVisibilityProp, onColumnVisibilityChange: onColumnVisibilityChangeProp, onColumnHide: onColumnHideProp, enableColumnReorder = false, columnOrder: columnOrderProp, onColumnOrderChange: onColumnOrderChangeProp, enableAddColumn = false, onColumnAdd, onColumnDelete, onColumnUpdate, onMoreActionClick, enableHeaderMenu, loading = false, bordered = true, className, emptyMessage, onRowClick, allowRowClick = true, }) => {
     const getRowId = useMemo(() => getRowIdProp ??
         ((row) => row.id), [getRowIdProp]);
     const { sorting, onSortingChange } = useTableSort({
@@ -3601,13 +3602,21 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
         onPageChange: onPageChangeProp,
         enableURLPagination,
     });
-    const { rowSelection, onRowSelectionChange, selectionColumn, enableRowSelection, } = useTableSelection({
+    const { rowSelection, onRowSelectionChange: originalOnRowSelectionChange, selectionColumn, enableRowSelection, } = useTableSelection({
         enableRowSelection: enableRowSelectionProp,
         selectedRowKeys,
         onRowSelect,
         data,
         getRowId,
     });
+    // Wrap selection change to detect manual deselection while in bulk mode
+    const onRowSelectionChange = useCallback((updaterOrValue) => {
+        if (bulkSelectedRef.current && !isAutoSelectingRef.current) {
+            setBulkSelectedAllRowsInternal(false);
+            bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
+        }
+        originalOnRowSelectionChange(updaterOrValue);
+    }, [originalOnRowSelectionChange, bulkSelectAllRowsProps]);
     const { columnPinning, onColumnPinningChange, toggleColumnPin, isColumnPinned, } = useColumnPinning({
         enabled: enableColumnFreeze,
         columnPinning: columnPinningProp,
@@ -3680,7 +3689,63 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
         onColumnVisibilityChange,
         onColumnOrderChange,
     });
-    const isBulkAllSelected = !!bulkSelectAllRowsProps && table.getIsAllPageRowsSelected();
+    const [bulkSelectedAllRows, setBulkSelectedAllRowsInternal] = useState(false);
+    const isAutoSelectingRef = useRef(false);
+    const bulkSelectedRef = useRef(false);
+    bulkSelectedRef.current = bulkSelectedAllRows;
+    // Auto-select all page rows when in bulk mode (handles page navigation)
+    useEffect(() => {
+        if (bulkSelectedAllRows) {
+            isAutoSelectingRef.current = true;
+            table.toggleAllPageRowsSelected(true);
+            // Reset flag after React processes the state update
+            requestAnimationFrame(() => {
+                isAutoSelectingRef.current = false;
+            });
+        }
+    }, [bulkSelectedAllRows, data]);
+    const isAllPageRowsSelected = table.getIsAllPageRowsSelected();
+    const showSelectAllCallout = !!bulkSelectAllRowsProps &&
+        isAllPageRowsSelected &&
+        pageCount > 1 &&
+        !bulkSelectedAllRows;
+    const showAllSelectedCallout = !!bulkSelectAllRowsProps && bulkSelectedAllRows;
+    const handleBulkSelectAll = () => {
+        setBulkSelectedAllRowsInternal(true);
+        bulkSelectAllRowsProps?.setBulkSelectedAllRows(true);
+    };
+    const handleClearBulkSelection = () => {
+        setBulkSelectedAllRowsInternal(false);
+        bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
+        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 &&
@@ -3692,8 +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, {}), bulkSelectAllRowsProps &&
-                (data.length !== totalCount || isBulkAllSelected) && (jsx(BulkSelectCallout, { bulkSelectAllRowsProps: bulkSelectAllRowsProps, isAllPageRowsSelected: table.getIsAllPageRowsSelected(), isBulkAllSelected: isBulkAllSelected })), 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) => {
@@ -3701,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
@@ -3726,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-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(),
@@ -3754,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-Dre7vc3w.js.map
+//# sourceMappingURL=DataTable-DbSFUmLd.js.map