@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
|
@@ -3375,7 +3375,6 @@ const useTableSelection = ({ enableRowSelection, selectedRowKeys, onRowSelect, d
|
|
|
3375
3375
|
ariaLabel: "Select row",
|
|
3376
3376
|
}),
|
|
3377
3377
|
size: 40,
|
|
3378
|
-
maxSize: 40,
|
|
3379
3378
|
enableSorting: false,
|
|
3380
3379
|
enableResizing: false,
|
|
3381
3380
|
};
|
|
@@ -3556,11 +3555,11 @@ const ResizeHandle = ({ header }) => {
|
|
|
3556
3555
|
: "bg-border opacity-0 group-hover/head:opacity-100") }));
|
|
3557
3556
|
};
|
|
3558
3557
|
|
|
3559
|
-
const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBulkAllSelected, }) => {
|
|
3560
|
-
if (!isAllPageRowsSelected)
|
|
3558
|
+
const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBulkAllSelected, onBulkSelectAll, onClearBulkSelection, }) => {
|
|
3559
|
+
if (!isAllPageRowsSelected && !isBulkAllSelected)
|
|
3561
3560
|
return null;
|
|
3562
|
-
const { selectAllRowMessage, selectAllRowButtonLabel,
|
|
3563
|
-
return (jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: allRowsSelectedMessage ?? selectAllRowMessage }),
|
|
3561
|
+
const { selectAllRowMessage, selectAllRowButtonLabel, allRowsSelectedMessage, clearSelectionButtonLabel, } = bulkSelectAllRowsProps;
|
|
3562
|
+
return (jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: allRowsSelectedMessage ?? selectAllRowMessage }), jsxRuntime.jsx(primitives_Button.Button, { variant: "link", onClick: onClearBulkSelection, children: clearSelectionButtonLabel ?? "Clear selection" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: selectAllRowMessage }), jsxRuntime.jsx(primitives_Button.Button, { variant: "link", onClick: onBulkSelectAll, children: selectAllRowButtonLabel })] })) }));
|
|
3564
3563
|
};
|
|
3565
3564
|
|
|
3566
3565
|
const DataTablePagination = ({ currentPage, pageCount, onPageChange, }) => {
|
|
@@ -3608,7 +3607,7 @@ const HeaderCellMenu = ({ column, enableAddColumn, enableColumnFreeze, isColumnP
|
|
|
3608
3607
|
}) }))] })] }) }));
|
|
3609
3608
|
};
|
|
3610
3609
|
|
|
3611
|
-
const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting =
|
|
3610
|
+
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, }) => {
|
|
3612
3611
|
const getRowId = React.useMemo(() => getRowIdProp ??
|
|
3613
3612
|
((row) => row.id), [getRowIdProp]);
|
|
3614
3613
|
const { sorting, onSortingChange } = useTableSort({
|
|
@@ -3623,13 +3622,21 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
|
|
|
3623
3622
|
onPageChange: onPageChangeProp,
|
|
3624
3623
|
enableURLPagination,
|
|
3625
3624
|
});
|
|
3626
|
-
const { rowSelection, onRowSelectionChange, selectionColumn, enableRowSelection, } = useTableSelection({
|
|
3625
|
+
const { rowSelection, onRowSelectionChange: originalOnRowSelectionChange, selectionColumn, enableRowSelection, } = useTableSelection({
|
|
3627
3626
|
enableRowSelection: enableRowSelectionProp,
|
|
3628
3627
|
selectedRowKeys,
|
|
3629
3628
|
onRowSelect,
|
|
3630
3629
|
data,
|
|
3631
3630
|
getRowId,
|
|
3632
3631
|
});
|
|
3632
|
+
// Wrap selection change to detect manual deselection while in bulk mode
|
|
3633
|
+
const onRowSelectionChange = React.useCallback((updaterOrValue) => {
|
|
3634
|
+
if (bulkSelectedRef.current && !isAutoSelectingRef.current) {
|
|
3635
|
+
setBulkSelectedAllRowsInternal(false);
|
|
3636
|
+
bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
|
|
3637
|
+
}
|
|
3638
|
+
originalOnRowSelectionChange(updaterOrValue);
|
|
3639
|
+
}, [originalOnRowSelectionChange, bulkSelectAllRowsProps]);
|
|
3633
3640
|
const { columnPinning, onColumnPinningChange, toggleColumnPin, isColumnPinned, } = useColumnPinning({
|
|
3634
3641
|
enabled: enableColumnFreeze,
|
|
3635
3642
|
columnPinning: columnPinningProp,
|
|
@@ -3702,7 +3709,37 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
|
|
|
3702
3709
|
onColumnVisibilityChange,
|
|
3703
3710
|
onColumnOrderChange,
|
|
3704
3711
|
});
|
|
3705
|
-
const
|
|
3712
|
+
const [bulkSelectedAllRows, setBulkSelectedAllRowsInternal] = React.useState(false);
|
|
3713
|
+
const isAutoSelectingRef = React.useRef(false);
|
|
3714
|
+
const bulkSelectedRef = React.useRef(false);
|
|
3715
|
+
bulkSelectedRef.current = bulkSelectedAllRows;
|
|
3716
|
+
// Auto-select all page rows when in bulk mode (handles page navigation)
|
|
3717
|
+
React.useEffect(() => {
|
|
3718
|
+
if (bulkSelectedAllRows) {
|
|
3719
|
+
isAutoSelectingRef.current = true;
|
|
3720
|
+
table.toggleAllPageRowsSelected(true);
|
|
3721
|
+
// Reset flag after React processes the state update
|
|
3722
|
+
requestAnimationFrame(() => {
|
|
3723
|
+
isAutoSelectingRef.current = false;
|
|
3724
|
+
});
|
|
3725
|
+
}
|
|
3726
|
+
}, [bulkSelectedAllRows, data]);
|
|
3727
|
+
const isAllPageRowsSelected = table.getIsAllPageRowsSelected();
|
|
3728
|
+
const showSelectAllCallout = !!bulkSelectAllRowsProps &&
|
|
3729
|
+
isAllPageRowsSelected &&
|
|
3730
|
+
pageCount > 1 &&
|
|
3731
|
+
!bulkSelectedAllRows;
|
|
3732
|
+
const showAllSelectedCallout = !!bulkSelectAllRowsProps && bulkSelectedAllRows;
|
|
3733
|
+
const handleBulkSelectAll = () => {
|
|
3734
|
+
setBulkSelectedAllRowsInternal(true);
|
|
3735
|
+
bulkSelectAllRowsProps?.setBulkSelectedAllRows(true);
|
|
3736
|
+
};
|
|
3737
|
+
const handleClearBulkSelection = () => {
|
|
3738
|
+
setBulkSelectedAllRowsInternal(false);
|
|
3739
|
+
bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
|
|
3740
|
+
table.toggleAllPageRowsSelected(false);
|
|
3741
|
+
onRowSelect?.([], []);
|
|
3742
|
+
};
|
|
3706
3743
|
const handleSort = (columnId, desc) => {
|
|
3707
3744
|
const isSameSort = sorting.length > 0 &&
|
|
3708
3745
|
sorting[0].id === columnId &&
|
|
@@ -3714,43 +3751,52 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
|
|
|
3714
3751
|
onSortingChange([{ id: columnId, desc }]);
|
|
3715
3752
|
}
|
|
3716
3753
|
};
|
|
3717
|
-
return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex min-h-0 w-full flex-col", className), children: [loading && jsxRuntime.jsx(LoadingOverlay, {}),
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
|
|
3754
|
+
return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex min-h-0 w-full flex-col", className), children: [loading && jsxRuntime.jsx(LoadingOverlay, {}), (showSelectAllCallout || showAllSelectedCallout) && (jsxRuntime.jsx(BulkSelectCallout, { bulkSelectAllRowsProps: bulkSelectAllRowsProps, isAllPageRowsSelected: isAllPageRowsSelected, isBulkAllSelected: bulkSelectedAllRows, onBulkSelectAll: handleBulkSelectAll, onClearBulkSelection: handleClearBulkSelection })), jsxRuntime.jsx("div", { className: utils.cn("min-h-0 flex-1 overflow-auto", bordered && "rounded-lg border"), children: jsxRuntime.jsxs(primitives_Table.Table, { children: [jsxRuntime.jsx(primitives_Table.TableHeader, { className: "sticky top-0 z-20 bg-muted", children: table.getHeaderGroups().map(headerGroup => {
|
|
3755
|
+
const dataHeaders = headerGroup.headers.filter(h => h.column.id !== "_selection");
|
|
3756
|
+
const totalDataSize = dataHeaders.reduce((sum, h) => sum + h.getSize(), 0);
|
|
3757
|
+
return (jsxRuntime.jsx(primitives_Table.TableRow, { className: "hover:bg-muted", children: headerGroup.headers.map((header, headerIndex) => {
|
|
3758
|
+
const isPinned = header.column.getIsPinned();
|
|
3759
|
+
const isSelectionCol = header.column.id === "_selection";
|
|
3760
|
+
const columnIndexInData = dataHeaders.findIndex(h => h.id === header.id);
|
|
3761
|
+
return (jsxRuntime.jsxs(primitives_Table.TableHead, { className: utils.cn("group/head relative", header.column.getCanSort() &&
|
|
3762
|
+
"cursor-pointer select-none", isPinned && "sticky z-10 bg-muted"), style: {
|
|
3763
|
+
width: selectionColumn && isSelectionCol
|
|
3764
|
+
? 0
|
|
3765
|
+
: selectionColumn
|
|
3766
|
+
? `${(header.getSize() / totalDataSize) * 100}%`
|
|
3767
|
+
: header.getSize(),
|
|
3768
|
+
minWidth: enableColumnResize
|
|
3769
|
+
? header.getSize()
|
|
3770
|
+
: undefined,
|
|
3771
|
+
...(isPinned === "left"
|
|
3772
|
+
? {
|
|
3773
|
+
left: header.column.getStart("left"),
|
|
3774
|
+
}
|
|
3775
|
+
: {}),
|
|
3776
|
+
...(isPinned === "right"
|
|
3777
|
+
? {
|
|
3778
|
+
right: header.column.getAfter("right"),
|
|
3779
|
+
}
|
|
3780
|
+
: {}),
|
|
3781
|
+
}, onClick: header.column.getCanSort()
|
|
3782
|
+
? header.column.getToggleSortingHandler()
|
|
3783
|
+
: undefined, children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx("div", { className: "flex-1 truncate", children: flexRender(header.column.columnDef.header, header.getContext()) }), jsxRuntime.jsx(SortIndicator, { column: header.column }), showHeaderMenu && !isSelectionCol && (jsxRuntime.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
|
|
3784
|
+
? (colId, dir) => moveColumn(colId, dir)
|
|
3785
|
+
: undefined, onMoreActionClick: onMoreActionClick }))] })), enableColumnResize && jsxRuntime.jsx(ResizeHandle, { header: header })] }, header.id));
|
|
3786
|
+
}) }, headerGroup.id));
|
|
3787
|
+
}) }), jsxRuntime.jsx(primitives_Table.TableBody, { className: loading ? "opacity-50" : undefined, children: table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map(row => (jsxRuntime.jsx(primitives_Table.TableRow, { "data-state": row.getIsSelected() ? "selected" : undefined, className: utils.cn("group", allowRowClick && onRowClick && "cursor-pointer"), onClick: allowRowClick && onRowClick
|
|
3745
3788
|
? event => onRowClick(event, row.original, row.index)
|
|
3746
3789
|
: undefined, children: row.getVisibleCells().map(cell => {
|
|
3747
3790
|
const isPinned = cell.column.getIsPinned();
|
|
3748
|
-
|
|
3749
|
-
|
|
3791
|
+
const isSelCell = cell.column.id === "_selection";
|
|
3792
|
+
return (jsxRuntime.jsx(primitives_Table.TableCell, { className: utils.cn(isPinned &&
|
|
3793
|
+
"sticky z-10 bg-background group-hover:bg-muted/50 group-data-[state=selected]:bg-muted"), style: {
|
|
3794
|
+
width: selectionColumn && isSelCell
|
|
3795
|
+
? 0
|
|
3796
|
+
: cell.column.getSize(),
|
|
3750
3797
|
minWidth: enableColumnResize
|
|
3751
3798
|
? cell.column.getSize()
|
|
3752
3799
|
: undefined,
|
|
3753
|
-
maxWidth: cell.column.columnDef.maxSize,
|
|
3754
3800
|
...(isPinned === "left"
|
|
3755
3801
|
? {
|
|
3756
3802
|
left: cell.column.getStart("left"),
|
|
@@ -3772,4 +3818,4 @@ exports.useColumnVisibility = useColumnVisibility;
|
|
|
3772
3818
|
exports.useTablePagination = useTablePagination;
|
|
3773
3819
|
exports.useTableSelection = useTableSelection;
|
|
3774
3820
|
exports.useTableSort = useTableSort;
|
|
3775
|
-
//# sourceMappingURL=DataTable-
|
|
3821
|
+
//# sourceMappingURL=DataTable-BBxgDBnO.js.map
|