@bigbinary/neeto-atoms 1.0.24 → 1.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{DataTable-CfcHsQuw.js → DataTable-DYam_kUE.js} +86 -40
- package/dist/DataTable-DYam_kUE.js.map +1 -0
- package/dist/cjs/{DataTable-BOeCq0s4.js → DataTable-BBxgDBnO.js} +86 -40
- package/dist/cjs/DataTable-BBxgDBnO.js.map +1 -0
- package/dist/cjs/components/DataTable.js +1 -1
- package/dist/cjs/components/index.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/components/DataTable/components/BulkSelectCallout.d.ts +3 -1
- package/dist/components/DataTable.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/DataTable-CfcHsQuw.js.map +0 -1
- package/dist/cjs/DataTable-BOeCq0s4.js.map +0 -1
|
@@ -3354,7 +3354,6 @@ const useTableSelection = ({ enableRowSelection, selectedRowKeys, onRowSelect, d
|
|
|
3354
3354
|
ariaLabel: "Select row",
|
|
3355
3355
|
}),
|
|
3356
3356
|
size: 40,
|
|
3357
|
-
maxSize: 40,
|
|
3358
3357
|
enableSorting: false,
|
|
3359
3358
|
enableResizing: false,
|
|
3360
3359
|
};
|
|
@@ -3535,11 +3534,11 @@ const ResizeHandle = ({ header }) => {
|
|
|
3535
3534
|
: "bg-border opacity-0 group-hover/head:opacity-100") }));
|
|
3536
3535
|
};
|
|
3537
3536
|
|
|
3538
|
-
const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBulkAllSelected, }) => {
|
|
3539
|
-
if (!isAllPageRowsSelected)
|
|
3537
|
+
const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBulkAllSelected, onBulkSelectAll, onClearBulkSelection, }) => {
|
|
3538
|
+
if (!isAllPageRowsSelected && !isBulkAllSelected)
|
|
3540
3539
|
return null;
|
|
3541
|
-
const { selectAllRowMessage, selectAllRowButtonLabel,
|
|
3542
|
-
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 }),
|
|
3540
|
+
const { selectAllRowMessage, selectAllRowButtonLabel, allRowsSelectedMessage, clearSelectionButtonLabel, } = bulkSelectAllRowsProps;
|
|
3541
|
+
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 })] })) }));
|
|
3543
3542
|
};
|
|
3544
3543
|
|
|
3545
3544
|
const DataTablePagination = ({ currentPage, pageCount, onPageChange, }) => {
|
|
@@ -3587,7 +3586,7 @@ const HeaderCellMenu = ({ column, enableAddColumn, enableColumnFreeze, isColumnP
|
|
|
3587
3586
|
}) }))] })] }) }));
|
|
3588
3587
|
};
|
|
3589
3588
|
|
|
3590
|
-
const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting =
|
|
3589
|
+
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, }) => {
|
|
3591
3590
|
const getRowId = useMemo(() => getRowIdProp ??
|
|
3592
3591
|
((row) => row.id), [getRowIdProp]);
|
|
3593
3592
|
const { sorting, onSortingChange } = useTableSort({
|
|
@@ -3602,13 +3601,21 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
|
|
|
3602
3601
|
onPageChange: onPageChangeProp,
|
|
3603
3602
|
enableURLPagination,
|
|
3604
3603
|
});
|
|
3605
|
-
const { rowSelection, onRowSelectionChange, selectionColumn, enableRowSelection, } = useTableSelection({
|
|
3604
|
+
const { rowSelection, onRowSelectionChange: originalOnRowSelectionChange, selectionColumn, enableRowSelection, } = useTableSelection({
|
|
3606
3605
|
enableRowSelection: enableRowSelectionProp,
|
|
3607
3606
|
selectedRowKeys,
|
|
3608
3607
|
onRowSelect,
|
|
3609
3608
|
data,
|
|
3610
3609
|
getRowId,
|
|
3611
3610
|
});
|
|
3611
|
+
// Wrap selection change to detect manual deselection while in bulk mode
|
|
3612
|
+
const onRowSelectionChange = useCallback((updaterOrValue) => {
|
|
3613
|
+
if (bulkSelectedRef.current && !isAutoSelectingRef.current) {
|
|
3614
|
+
setBulkSelectedAllRowsInternal(false);
|
|
3615
|
+
bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
|
|
3616
|
+
}
|
|
3617
|
+
originalOnRowSelectionChange(updaterOrValue);
|
|
3618
|
+
}, [originalOnRowSelectionChange, bulkSelectAllRowsProps]);
|
|
3612
3619
|
const { columnPinning, onColumnPinningChange, toggleColumnPin, isColumnPinned, } = useColumnPinning({
|
|
3613
3620
|
enabled: enableColumnFreeze,
|
|
3614
3621
|
columnPinning: columnPinningProp,
|
|
@@ -3681,7 +3688,37 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
|
|
|
3681
3688
|
onColumnVisibilityChange,
|
|
3682
3689
|
onColumnOrderChange,
|
|
3683
3690
|
});
|
|
3684
|
-
const
|
|
3691
|
+
const [bulkSelectedAllRows, setBulkSelectedAllRowsInternal] = useState(false);
|
|
3692
|
+
const isAutoSelectingRef = useRef(false);
|
|
3693
|
+
const bulkSelectedRef = useRef(false);
|
|
3694
|
+
bulkSelectedRef.current = bulkSelectedAllRows;
|
|
3695
|
+
// Auto-select all page rows when in bulk mode (handles page navigation)
|
|
3696
|
+
useEffect(() => {
|
|
3697
|
+
if (bulkSelectedAllRows) {
|
|
3698
|
+
isAutoSelectingRef.current = true;
|
|
3699
|
+
table.toggleAllPageRowsSelected(true);
|
|
3700
|
+
// Reset flag after React processes the state update
|
|
3701
|
+
requestAnimationFrame(() => {
|
|
3702
|
+
isAutoSelectingRef.current = false;
|
|
3703
|
+
});
|
|
3704
|
+
}
|
|
3705
|
+
}, [bulkSelectedAllRows, data]);
|
|
3706
|
+
const isAllPageRowsSelected = table.getIsAllPageRowsSelected();
|
|
3707
|
+
const showSelectAllCallout = !!bulkSelectAllRowsProps &&
|
|
3708
|
+
isAllPageRowsSelected &&
|
|
3709
|
+
pageCount > 1 &&
|
|
3710
|
+
!bulkSelectedAllRows;
|
|
3711
|
+
const showAllSelectedCallout = !!bulkSelectAllRowsProps && bulkSelectedAllRows;
|
|
3712
|
+
const handleBulkSelectAll = () => {
|
|
3713
|
+
setBulkSelectedAllRowsInternal(true);
|
|
3714
|
+
bulkSelectAllRowsProps?.setBulkSelectedAllRows(true);
|
|
3715
|
+
};
|
|
3716
|
+
const handleClearBulkSelection = () => {
|
|
3717
|
+
setBulkSelectedAllRowsInternal(false);
|
|
3718
|
+
bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
|
|
3719
|
+
table.toggleAllPageRowsSelected(false);
|
|
3720
|
+
onRowSelect?.([], []);
|
|
3721
|
+
};
|
|
3685
3722
|
const handleSort = (columnId, desc) => {
|
|
3686
3723
|
const isSameSort = sorting.length > 0 &&
|
|
3687
3724
|
sorting[0].id === columnId &&
|
|
@@ -3693,43 +3730,52 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
|
|
|
3693
3730
|
onSortingChange([{ id: columnId, desc }]);
|
|
3694
3731
|
}
|
|
3695
3732
|
};
|
|
3696
|
-
return (jsxs("div", { className: cn("relative flex min-h-0 w-full flex-col", className), children: [loading && jsx(LoadingOverlay, {}),
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3733
|
+
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 => {
|
|
3734
|
+
const dataHeaders = headerGroup.headers.filter(h => h.column.id !== "_selection");
|
|
3735
|
+
const totalDataSize = dataHeaders.reduce((sum, h) => sum + h.getSize(), 0);
|
|
3736
|
+
return (jsx(TableRow, { className: "hover:bg-muted", children: headerGroup.headers.map((header, headerIndex) => {
|
|
3737
|
+
const isPinned = header.column.getIsPinned();
|
|
3738
|
+
const isSelectionCol = header.column.id === "_selection";
|
|
3739
|
+
const columnIndexInData = dataHeaders.findIndex(h => h.id === header.id);
|
|
3740
|
+
return (jsxs(TableHead, { className: cn("group/head relative", header.column.getCanSort() &&
|
|
3741
|
+
"cursor-pointer select-none", isPinned && "sticky z-10 bg-muted"), style: {
|
|
3742
|
+
width: selectionColumn && isSelectionCol
|
|
3743
|
+
? 0
|
|
3744
|
+
: selectionColumn
|
|
3745
|
+
? `${(header.getSize() / totalDataSize) * 100}%`
|
|
3746
|
+
: header.getSize(),
|
|
3747
|
+
minWidth: enableColumnResize
|
|
3748
|
+
? header.getSize()
|
|
3749
|
+
: undefined,
|
|
3750
|
+
...(isPinned === "left"
|
|
3751
|
+
? {
|
|
3752
|
+
left: header.column.getStart("left"),
|
|
3753
|
+
}
|
|
3754
|
+
: {}),
|
|
3755
|
+
...(isPinned === "right"
|
|
3756
|
+
? {
|
|
3757
|
+
right: header.column.getAfter("right"),
|
|
3758
|
+
}
|
|
3759
|
+
: {}),
|
|
3760
|
+
}, onClick: header.column.getCanSort()
|
|
3761
|
+
? header.column.getToggleSortingHandler()
|
|
3762
|
+
: undefined, children: [header.isPlaceholder ? null : (jsxs("div", { className: "flex items-center", children: [jsx("div", { className: "flex-1 truncate", children: flexRender(header.column.columnDef.header, header.getContext()) }), jsx(SortIndicator, { column: header.column }), showHeaderMenu && !isSelectionCol && (jsx(HeaderCellMenu, { column: header.column, columnIndex: columnIndexInData, enableAddColumn: enableAddColumn, enableColumnFreeze: enableColumnFreeze, isColumnPinned: isColumnPinned(header.column.id), canMoveLeft: headerIndex > (selectionColumn ? 1 : 0), canMoveRight: headerIndex < headerGroup.headers.length - 1, onSort: handleSort, onHideColumn: onColumnHideProp ? hideColumn : undefined, onTogglePin: toggleColumnPin, onAddColumn: onColumnAdd, onDeleteColumn: onColumnDelete, onMoveColumn: onColumnUpdate
|
|
3763
|
+
? (colId, dir) => moveColumn(colId, dir)
|
|
3764
|
+
: undefined, onMoreActionClick: onMoreActionClick }))] })), enableColumnResize && jsx(ResizeHandle, { header: header })] }, header.id));
|
|
3765
|
+
}) }, headerGroup.id));
|
|
3766
|
+
}) }), 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
|
|
3724
3767
|
? event => onRowClick(event, row.original, row.index)
|
|
3725
3768
|
: undefined, children: row.getVisibleCells().map(cell => {
|
|
3726
3769
|
const isPinned = cell.column.getIsPinned();
|
|
3727
|
-
|
|
3728
|
-
|
|
3770
|
+
const isSelCell = cell.column.id === "_selection";
|
|
3771
|
+
return (jsx(TableCell, { className: cn(isPinned &&
|
|
3772
|
+
"sticky z-10 bg-background group-hover:bg-muted/50 group-data-[state=selected]:bg-muted"), style: {
|
|
3773
|
+
width: selectionColumn && isSelCell
|
|
3774
|
+
? 0
|
|
3775
|
+
: cell.column.getSize(),
|
|
3729
3776
|
minWidth: enableColumnResize
|
|
3730
3777
|
? cell.column.getSize()
|
|
3731
3778
|
: undefined,
|
|
3732
|
-
maxWidth: cell.column.columnDef.maxSize,
|
|
3733
3779
|
...(isPinned === "left"
|
|
3734
3780
|
? {
|
|
3735
3781
|
left: cell.column.getStart("left"),
|
|
@@ -3745,4 +3791,4 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
|
|
|
3745
3791
|
};
|
|
3746
3792
|
|
|
3747
3793
|
export { DataTable as D, useColumnPinning as a, useColumnVisibility as b, useTablePagination as c, useTableSelection as d, useTableSort as e, useColumnOrdering as u };
|
|
3748
|
-
//# sourceMappingURL=DataTable-
|
|
3794
|
+
//# sourceMappingURL=DataTable-DYam_kUE.js.map
|