EDS Data Grid Feature: onRowContextMenu

packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx

@@ -286,6 +286,76 @@ RowSelection.args = {
   columnResizeMode: 'onChange',
 } satisfies Partial<EdsDataGridProps<Photo>>
 
+const BasicModal = ({
+  text,
+  top,
+  left,
+  onHide,
+}: {
+  text: string
+  top: number
+  left: number
+  onHide: () => void
+}) => (
+  <div
+    id="modal"
+    style={{
+      position: 'absolute',
+      top,
+      left,
+      zIndex: 10,
+      backgroundColor: '#fff',
+      padding: '1rem',
+      border: '1px solid #000',
+      width: 'fit-content',
+      textAlign: 'right',
+    }}
+  >
+    <Typography>{text}</Typography>
+    <br />
+    <Button onClick={() => onHide()}>Close</Button>
+  </div>
+)
+
+export const RowContextmenuPopup: StoryFn<EdsDataGridProps<Photo>> = (
+  args,
+) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [modalProps, setModalProps] = useState<{
+    text: string
+    top: number
+    left: number
+    onHide: () => void
+  } | null>(null)
+
+  const showModal = (
+    row: Row<Photo>,
+    event: React.MouseEvent<HTMLTableRowElement>,
+  ) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setModalProps({
+      text: `Row id: ${row.original.id} - Opening position (${event.pageX},${event.pageY})`,
+      top: event.pageY,
+      left: event.pageX,
+      onHide: () => setIsOpen(false),
+    })
+    setIsOpen(true)
+  }
+
+  return (
+    <>
+      <Typography>Right click a row to open a basic popup.</Typography>
+      <Divider />
+      <br />
+      {isOpen && <BasicModal {...modalProps} />}
+      <EdsDataGrid {...args} onRowContextMenu={showModal} />
+    </>
+  )
+}
+
+RowContextmenuPopup.args = {} satisfies Partial<EdsDataGridProps<Photo>>
+
 export const Paging: StoryFn<EdsDataGridProps<Photo>> = (args) => {
   return <EdsDataGrid {...args} />
 }

packages/eds-data-grid-react/src/EdsDataGrid.tsx

@@ -91,6 +91,7 @@ export function EdsDataGrid<T>({
   setExpansionState,
   getSubRows,
   defaultColumn,
+  onRowContextMenu,
   onRowClick,
   onCellClick,
   enableFooter,
@@ -459,6 +460,11 @@ export function EdsDataGrid<T>({
                     <TableRow
                       key={virtualItem.index}
                       row={row}
+                      onContextMenu={
+                        onRowContextMenu
+                          ? (event) => onRowContextMenu(row, event)
+                          : undefined
+                      }
                       onClick={
                         onRowClick
                           ? (event) => onRowClick(row, event)
@@ -491,6 +497,11 @@ export function EdsDataGrid<T>({
                   <TableRow
                     key={row.id}
                     row={row}
+                    onContextMenu={
+                      onRowContextMenu
+                        ? (event) => onRowContextMenu(row, event)
+                        : undefined
+                    }
                     onClick={
                       onRowClick ? (event) => onRowClick(row, event) : undefined
                     }

packages/eds-data-grid-react/src/EdsDataGridProps.ts

@@ -210,6 +210,16 @@ type FilterProps = {
 }
 
 type HandlersProps<T> = {
+  /**
+   *
+   * @param row the current row
+   * @param event The right-click event
+   * @returns
+   */
+  onRowContextMenu?: (
+    row: Row<T>,
+    event: MouseEvent<HTMLTableRowElement>,
+  ) => unknown
   /**
    * Row click handler.
    *

packages/eds-data-grid-react/src/components/TableRow.tsx

@@ -11,7 +11,12 @@ type Props<T> = {
   onCellClick?: EdsDataGridProps<T>['onCellClick']
 } & HTMLAttributes<HTMLTableRowElement>
 
-export function TableRow<T>({ row, onCellClick, onClick }: Props<T>) {
+export function TableRow<T>({
+  row,
+  onCellClick,
+  onClick,
+  onContextMenu,
+}: Props<T>) {
   const { rowClass, rowStyle } = useTableContext()
 
   return (
@@ -21,6 +26,7 @@ export function TableRow<T>({ row, onCellClick, onClick }: Props<T>) {
       }}
       className={`${row.getIsSelected() ? 'selected' : ''} ${rowClass?.(row)}`}
       onClick={onClick}
+      onContextMenu={onContextMenu}
     >
       {row.getVisibleCells().map((cell) => (
         <TableBodyCell

packages/eds-data-grid-react/src/tests/EdsDataGrid.test.tsx

@@ -300,6 +300,27 @@ describe('EdsDataGrid', () => {
       await userEvent.click(screen.getAllByRole('row')[1])
       expect(spy).toHaveBeenCalledTimes(1)
     })
+    it('right-click should call onRowSelectionChange if enableRowSelection is set', async () => {
+      const spy = jest.fn()
+      render(
+        <EdsDataGrid
+          enableRowSelection
+          onRowSelectionChange={spy}
+          onRowContextMenu={(row) =>
+            row.getCanSelect() ? row.toggleSelected() : null
+          }
+          columns={columns}
+          rows={data}
+        />,
+      )
+
+      await userEvent.pointer({
+        keys: '[MouseRight]',
+        target: screen.getAllByRole('row')[1],
+      })
+
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
   })
 
   describe('Paging', () => {