Various small fixes

src/components/Chip/components.tsx

@@ -5,6 +5,7 @@ export const ChipRoot = styled.div`
   width: fit-content;
 
   /* Size dependent */
+  height: var(--sscds-chip-size);
   padding: var(--sscds-chip-padding-block);
   border-radius: var(--sscds-chip-radius);
 

src/components/Chip/utils.ts

@@ -8,6 +8,7 @@ export const getCommonChipStyles = ({
   size: Sizes;
   color: PillColors;
 }) => ({
+  '--sscds-chip-size': size === 'md' ? '2rem' : '1.5rem',
   '--sscds-chip-padding-block':
     size === 'md' ? 'var(--sscds-space-1x)' : '0 var(--sscds-space-half-x)',
   '--sscds-chip-radius':

src/components/ListView/ListView.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ListView from './ListView';
+
+const data = [{ name: 'abc' }, { name: 'xyz' }];
+describe('ListView', () => {
+  it('should select row on click', () => {
+    render(
+      <ListView
+        data={data}
+        renderListViewRow={({ row }) => <span>{row.name}</span>}
+        enableRowSelection
+      />,
+    );
+
+    const checkbox = screen.getAllByRole('checkbox')[0];
+
+    userEvent.click(checkbox);
+
+    expect(checkbox).toBeChecked();
+  });
+  it('should navigate to next page', () => {
+    render(
+      <ListView
+        data={data}
+        renderListViewRow={({ row }) => <span>{row.name}</span>}
+        enableRowSelection
+        initialState={{
+          pagination: {
+            pageSize: 1,
+          },
+        }}
+      />,
+    );
+
+    userEvent.click(
+      screen.getByRole('button', { name: /Go to the next page/i }),
+    );
+
+    expect(screen.getByRole('listitem')).toHaveTextContent('xyz');
+  });
+});

src/components/ListView/ListView.tsx

@@ -87,6 +87,7 @@ function ListView<D>({
     initialState?.activeRowId ?? undefined,
   );
   const listView = useReactTable({
+    debugAll: true,
     columns,
     data: listData,
     enableMultiRowSelection,
@@ -100,8 +101,6 @@ function ListView<D>({
     initialState,
     manualPagination,
     onRowClick,
-    onPaginationChange,
-    onRowSelectionChange,
     renderRowSelectionActions,
     rowActions,
     rowActionsCount,
@@ -111,6 +110,12 @@ function ListView<D>({
       activeRowId,
       ...state,
     },
+    ...(typeof onPaginationChange !== 'undefined'
+      ? { onPaginationChange }
+      : {}),
+    ...(typeof onRowSelectionChange !== 'undefined'
+      ? { onRowSelectionChange }
+      : {}),
   } as ParsedListViewOptions<D>) as unknown as ListViewInstance<D>;
   listView.setActiveRowId = onActiveRowIdChange ?? setActiveRowId;
 
@@ -127,7 +132,12 @@ function ListView<D>({
        *
        * Ref https://bugs.webkit.org/show_bug.cgi?id=170179#c1 */}
       {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
-      <ul {...props} role="list" style={styles}>
+      <ul
+        {...props}
+        data-paginated={enablePagination}
+        role="list"
+        style={styles}
+      >
         {listView.getRowModel().rows.map((row) => {
           return <ListViewRow key={row.id} listView={listView} row={row} />;
         })}

src/components/ListView/ListViewRow.tsx

@@ -9,7 +9,11 @@ import RowActionsButton from '../_internal/buttons/RowActionsButton';
 const ListViewRowRoot = styled.li`
   display: flex;
   position: relative;
-  border-bottom: 1px solid var(--sscds-color-border-default);
+
+  [data-paginated='true'] &,
+  [data-paginated='false'] &:not(:last-child) {
+    border-bottom: 1px solid var(--sscds-color-border-default);
+  }
 `;
 const ListViewRowContent = styled.div`
   display: flex;