feat(ListView): add component

Closes UXD-1542

src/components/ButtonV2/components.tsx

@@ -20,7 +20,6 @@ export const ButtonRoot = styled.button`
   white-space: nowrap;
   transition: var(--sscds-action-transition),
     transform 50ms var(--sscds-transition-fn);
-  backdrop-filter: blur(2px);
 
   /* Size dependent */
   font-size: var(--sscds-button-font-size);

src/components/DatatableV2/Datatable.types.ts

@@ -15,7 +15,7 @@ import {
 } from '@tanstack/react-table';
 import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
 
-import { IconNames, RegularIconTypes } from '../Icon';
+import { RowAction } from '../_internal/buttons/RowActionsButton';
 
 export type DatatableColumnDef<D, V = unknown> = Omit<
   ColumnDef<D, V>,
@@ -179,22 +179,6 @@ export type DatatableHeaderGroup<D> = Omit<HeaderGroup<D>, 'headers'> & {
   headers: DatatableHeader<D>[];
 };
 
-type RowActionCallbackUnion<D, Type> =
-  | Type
-  | ((props: { row: DatatableRow<D>; table: DatatableInstance<D> }) => Type);
-
-export type DatatableRowAction<D> = null | {
-  label: RowActionCallbackUnion<D, string>;
-  iconName: RowActionCallbackUnion<D, IconNames>;
-  iconType?: RowActionCallbackUnion<D, RegularIconTypes>;
-  onClick(props: {
-    row: DatatableRow<D>;
-    table: DatatableInstance<D>;
-  }): (event: Event) => void;
-  isDisabled?: RowActionCallbackUnion<D, boolean>;
-  isDestructive?: boolean;
-};
-
 interface CustomState {
   /** Opens column settings panel in table */
   showColumnSettings: boolean;
@@ -553,7 +537,7 @@ export interface DatatableOptions<D>
    * If only one action is provided it will be rendered directly in the column. If multiple actions
    * are provided actions will be rendered in dropdown menu.
    */
-  rowActions?: DatatableRowAction<D>[];
+  rowActions?: RowAction<D>[];
   /**
    * Expected number of rows in the dataset which is used for displaying pagination correctly when
    * pagination is not managed internally. This property is REQUIRED for the manual (managed,

src/components/DatatableV2/hooks/useDisplayColumns.tsx

@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
+import { Row } from '@tanstack/react-table';
 
 import ExpandAllButton from '../buttons/ExpandAllButton';
 import ExpandButton from '../buttons/ExpandButton';
-import RowActionsButton from '../buttons/RowActionsButton';
 import SelectButton from '../buttons/SelectButton';
 import { DatatableColumnDef, ParsedDatatableOptions } from '../Datatable.types';
+import RowActionsButton from '../../_internal/buttons/RowActionsButton';
 
 export const displayColumnIds = {
   expand: 'ssc_dt_expand',
@@ -48,7 +49,10 @@ export const useDisplayColumns = <D,>(
             id: displayColumnIds.actions,
             header: '',
             cell: ({ table, row }) => (
-              <RowActionsButton row={row} table={table} />
+              <RowActionsButton
+                instance={table}
+                row={row as unknown as Row<D>}
+              />
             ),
             size: 56,
             ...tableOptions.defaultDisplayColumn,

src/components/DatatableV2/index.ts

@@ -4,6 +4,6 @@ export type {
   DatatableOptions,
   DatatableInstance,
   DatatableRow,
-  DatatableRowAction,
   DatatableState,
 } from './Datatable.types';
+export type { RowAction as DatatableRowAction } from '../_internal/buttons/RowActionsButton';

src/components/DatatableV2/table/TableSurface.tsx

@@ -2,10 +2,10 @@ import styled, { css } from 'styled-components';
 
 import { Surface } from '../../layout';
 import { DatatableInstance } from '../Datatable.types';
-import Pagination from '../toolbar/Pagination';
-import Selection from '../toolbar/Selection';
 import Table from './Table';
 import TopToolbar from '../toolbar/TopToolbar';
+import SelectionToolbar from '../../_internal/toolbars/SelectionToolbar';
+import PaginationToolbar from '../../_internal/toolbars/PaginationToolbar';
 
 const DatatableRoot = styled.div<{ $isFullscreen }>`
   ${({ $isFullscreen }) =>
@@ -86,9 +86,13 @@ const TableSurface = <D,>({ table }: { table: DatatableInstance<D> }) => {
         <Table table={table} />
       </Surface>
       {table.options.enableRowSelection &&
-        table.options.enableSelectionToolbar && <Selection table={table} />}
+        table.options.enableSelectionToolbar && (
+          <SelectionToolbar<D> instance={table} />
+        )}
       {table.options.enablePagination &&
-        table.getRowModel().rows.length > 0 && <Pagination table={table} />}
+        table.getRowModel().rows.length > 0 && (
+          <PaginationToolbar instance={table} />
+        )}
     </DatatableRoot>
   );
 };