@eml-payments/ui-kit 0.1.17 → 0.1.18

package/dist/src/components/Table/Pagination/PaginationControls.js

@@ -3,7 +3,7 @@ import { Button } from '../../Button';
 import { SelectWrapper } from '../../SelectWrapper';
 import { cn } from '../../../lib/utils';
 export const PageSizeSelector = ({ id, value, onChange, options = ['5', '10', '20', '50', '100'], label = 'Rows per page:', className, size = 'default', }) => {
-    return (_jsxs("div", { className: cn('flex items-center gap-2 px-4 py-2 text-sm', className), children: [_jsx("label", { htmlFor: `page-size-select-${id}`, children: label }), _jsx("div", { className: "w-fit", children: _jsx(SelectWrapper, { size: size, value: value, onChange: onChange, options: options.map((option) => ({
+    return (_jsxs("div", { className: cn('flex items-center gap-2 px-4 py-2 text-sm', className), id: `page-size-select-${id}`, children: [_jsx("label", { htmlFor: `page-size-select-${id}`, children: label }), _jsx("div", { className: "w-fit", children: _jsx(SelectWrapper, { size: size, value: value, onChange: onChange, options: options.map((option) => ({
                         label: option,
                         value: option,
                     })) }) })] }));
@@ -15,5 +15,5 @@ export const PaginationFooter = ({ table, tableId, paginationMode = 'client', pa
                     const newSize = Number(val);
                     table.setPageSize(newSize);
                     onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(newSize);
-                }, size: "small" }), table.getRowModel().rows.length > 0 && (_jsxs("div", { className: "flex justify-center gap-3", children: [_jsx(Button, { variant: "secondary", title: "Previous", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage() }), _jsx(Button, { variant: "secondary", title: "Next", onClick: () => table.nextPage(), disabled: !table.getCanNextPage() })] })), _jsxs("div", { className: "flex justify-end", children: ["Page ", pageIndex + 1, " of ", totalPages] })] }));
+                }, size: "small" }), table.getRowModel().rows.length > 0 && (_jsxs("div", { className: "flex justify-center gap-3", id: `pagination-controls-${tableId}`, children: [_jsx(Button, { variant: "secondary", title: "Previous", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage() }), _jsx(Button, { variant: "secondary", title: "Next", onClick: () => table.nextPage(), disabled: !table.getCanNextPage() })] })), _jsxs("div", { className: "flex justify-end", id: `page-indicator-${tableId}`, children: ["Page ", pageIndex + 1, " of ", totalPages] })] }));
 };

package/dist/src/components/Table/Table.js

@@ -19,7 +19,7 @@ export function Table(props) {
                 return (_jsx("td", { style: { width }, className: cell.column.id === 'select' ? 'p-1' : 'px-4 py-2', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
             }) }, row.id)));
     }
-    return (_jsxs("div", { className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader" }), _jsx("div", { className: "rounded-[var(--uikit-radius)] overflow-hidden border", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed', props.className), role: "table", children: [_jsx("thead", { className: "bg-[var(--uikit-tertiary)]", children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => {
+    return (_jsxs("div", { className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader" }), _jsx("div", { className: "rounded-[var(--uikit-radius)] overflow-hidden border", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed', props.className), role: "table", id: props.id, children: [_jsx("thead", { className: "bg-[var(--uikit-tertiary)]", children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => {
                                     return (_jsx("th", { style: { width: header.getSize() }, className: classNames('select-none text-[16px]', header.id === 'select' ? 'p-0' : 'px-4 py-2 text-left cursor-pointer'), onClick: header.column.getCanSort()
                                             ? header.column.getToggleSortingHandler()
                                             : undefined, children: _jsxs("div", { className: classNames('w-full h-full', header.id === 'select'

package/dist/src/components/Table/Table.stories.d.ts

@@ -17,5 +17,7 @@ export declare const LoadingWithSkeleton: Story;
 export declare const ClientPagination: Story;
 export declare const WithCheckboxSelection: Story;
 export declare const WithDisabledSelection: Story;
+export declare const WithSingleRowSelection: Story;
+export declare const WithDefaultRowsSelected: Story;
 export declare const FlexColumnWidths: Story;
 export declare const WithControlledSorting: Story;

package/dist/src/components/Table/Table.stories.js

@@ -53,12 +53,22 @@ export const LoadingWithSkeleton = {
 export const ClientPagination = {
     render: () => _jsx(Table, { id: "example-table", data: data, columns: columns, paginationMode: "client", rowsPerPage: 5 }),
 };
+const handleSelectionChange = (selectedRowIds) => {
+    console.log('Selected Row IDs:', selectedRowIds);
+    // Update your state or perform actions based on selected rows
+};
 export const WithCheckboxSelection = {
-    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, checkboxPosition: "start", paginationMode: "client" })),
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, checkboxPosition: "start", paginationMode: "client", onSelectionChange: handleSelectionChange })),
 };
 export const WithDisabledSelection = {
     render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, checkboxPosition: "start", enableRowSelection: (row) => row.original.role !== 'Admin' })),
 };
+export const WithSingleRowSelection = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, isMultiRowSelection: false })),
+};
+export const WithDefaultRowsSelected = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, selectedRowIds: ['user-1', 'user-3'] })),
+};
 export const FlexColumnWidths = {
     render: () => {
         const testColumns = [

package/dist/src/components/Table/Table.types.d.ts

@@ -2,12 +2,11 @@ import type { ColumnDef, Row, SortingState } from '@tanstack/react-table';
 export type FlexColumnDef<T> = ColumnDef<T> & {
     flex?: number;
 };
-export interface TableProps<T extends {
-    id: string;
-}> {
+export interface TableProps<T> {
     id: string;
     data: T[];
     columns: FlexColumnDef<T>[];
+    rowIdKey?: keyof T | 'id';
     className?: string;
     isLoading?: boolean;
     showSkeletonRows?: boolean;
@@ -15,10 +14,12 @@ export interface TableProps<T extends {
     checkboxPosition?: 'start' | 'end';
     sorting?: SortingState;
     onSortingChange?: (s: SortingState) => void;
-    onSelectionChange?: (selectedRows: T[]) => void;
+    onSelectionChange?: (selectedIds: string[]) => void;
     enableRowSelection?: (row: Row<T>) => boolean;
+    isMultiRowSelection?: boolean;
     pageCount?: number;
     paginationMode?: 'client' | 'server';
     noRowsMessage?: string;
     rowsPerPage?: number;
+    selectedRowIds?: string[];
 }

package/dist/src/components/Table/hooks/useTableController.d.ts

@@ -2,7 +2,7 @@ import { type SortingState } from '@tanstack/react-table';
 import type { TableProps } from '../Table.types';
 export declare function useTableController<T extends {
     id: string;
-}>({ data, columns, checkboxSelection, checkboxPosition, paginationMode, pageCount, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage, }: TableProps<T>): {
+}>({ data, columns, checkboxSelection, checkboxPosition, paginationMode, pageCount, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage, isMultiRowSelection, selectedRowIds, rowIdKey, }: TableProps<T>): {
     table: import("@tanstack/react-table").Table<T>;
     pageSize: number;
     pageIndex: number;

package/dist/src/components/Table/hooks/useTableController.js

@@ -1,19 +1,29 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, } from '@tanstack/react-table';
 import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
-export function useTableController({ data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', pageCount, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, }) {
+export function useTableController({ data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', pageCount, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, isMultiRowSelection = true, selectedRowIds, rowIdKey = 'id', }) {
     const safeData = Array.isArray(data) ? data : [];
     const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : []));
     const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
+    const [internalRowSelection, setInternalRowSelection] = useState(() => {
+        if (selectedRowIds) {
+            return selectedRowIds.reduce((acc, id) => {
+                acc[id] = true;
+                return acc;
+            }, {});
+        }
+        return {};
+    });
     const [pageIndex, setPageIndex] = useState(0);
     const [pageSize, setPageSize] = useState(rowsPerPage !== null && rowsPerPage !== void 0 ? rowsPerPage : 10);
     const table = useReactTable({
         data: safeData,
         columns: tableColumns,
-        getRowId: (row) => row.id,
+        getRowId: (row) => String(row[rowIdKey]),
         state: {
             pagination: { pageSize, pageIndex },
             sorting: sorting !== null && sorting !== void 0 ? sorting : internalSorting,
+            rowSelection: internalRowSelection,
         },
         getSortedRowModel: getSortedRowModel(),
         getCoreRowModel: getCoreRowModel(),
@@ -31,6 +41,15 @@ export function useTableController({ data, columns, checkboxSelection, checkboxP
             onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(nextSorting);
         },
         enableRowSelection: enableRowSelection !== null && enableRowSelection !== void 0 ? enableRowSelection : true,
+        onRowSelectionChange: (updater) => {
+            const newSelection = typeof updater === 'function' ? updater(internalRowSelection) : updater;
+            setInternalRowSelection(newSelection);
+            if (onSelectionChange) {
+                const selectedIdsArray = Object.keys(newSelection).filter((id) => newSelection[id]);
+                onSelectionChange(selectedIdsArray);
+            }
+        },
+        enableMultiRowSelection: isMultiRowSelection,
     });
     useEffect(() => {
         const normalized = applyFlexSizes(columns !== null && columns !== void 0 ? columns : []);
@@ -52,12 +71,6 @@ export function useTableController({ data, columns, checkboxSelection, checkboxP
         }
         setTableColumns(finalColumns);
     }, [columns, checkboxSelection, checkboxPosition, table]);
-    const selectedRows = useMemo(() => {
-        return table.getSelectedRowModel().rows.map((row) => row.original);
-    }, [table.getSelectedRowModel().rows]);
-    useEffect(() => {
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedRows);
-    }, [selectedRows, onSelectionChange]);
     return {
         table,
         pageSize,

package/dist/src/components/Table/table.helpers.js

@@ -5,8 +5,13 @@ export function getCheckboxSelectionColumn(table) {
         id: 'select',
         size: 24,
         header: () => {
+            if (!table.options.enableMultiRowSelection) {
+                return null;
+            }
             const hasSelectableRows = table.getRowModel().rows.some((row) => row.getCanSelect());
-            return (_jsx("div", { className: "flex justify-center items-center h-full", children: _jsx(Checkbox, { checked: table.getIsAllPageRowsSelected(), disabled: !hasSelectableRows, onCheckedChange: (checked) => {
+            return (_jsx("div", { className: "flex justify-center items-center h-full", children: _jsx(Checkbox, { checked: table.getIsAllPageRowsSelected(), 
+                    // indeterminate={table.getIsSomeRowsSelected()} TODO: Implement indeterminate state
+                    disabled: !hasSelectableRows, onCheckedChange: (checked) => {
                         table.toggleAllPageRowsSelected(Boolean(checked));
                     } }) }));
         },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "0.1.17",
+	"version": "0.1.18",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -50,6 +50,7 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-checkbox": "^1.3.2",
+		"@radix-ui/react-dropdown-menu": "^2.1.15",
 		"@radix-ui/react-label": "^2.1.7",
 		"@radix-ui/react-radio-group": "^1.3.7",
 		"@radix-ui/react-select": "^2.2.5",