chore: Bump react-data-grid to fix a Sentry issue (#42934)

This pull request updates the `react-data-grid` dependency and refactors
code throughout the codebase to use the new import structure and updated
APIs. The changes improve compatibility with the latest version of
`react-data-grid`, simplify imports, and update row selection logic to
match new hook signatures. Additionally, some code is reorganized to use
absolute imports for internal components.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/design-system/package.json

@@ -31,7 +31,7 @@
     "next-contentlayer2": "0.4.6",
     "next-themes": "^0.3.0",
     "react": "catalog:",
-    "react-data-grid": "7.0.0-beta.41",
+    "react-data-grid": "7.0.0-beta.47",
     "react-day-picker": "^9.11.1",
     "react-dom": "catalog:",
     "react-hook-form": "^7.45.0",

apps/design-system/registry/default/example/data-grid-demo.tsx

@@ -33,7 +33,7 @@ export default function DataGridDemo() {
       headerCellClass: 'border-default border-r border-b',
       renderCell: ({ row }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const [isRowSelected, onRowSelectionChange] = useRowSelection()
+        const { isRowSelected, onRowSelectionChange } = useRowSelection()
 
         return (
           <div className="flex items-center justify-center h-full">
@@ -43,7 +43,6 @@ export default function DataGridDemo() {
                 e.stopPropagation()
                 onRowSelectionChange({
                   row,
-                  type: 'ROW',
                   checked: !isRowSelected,
                   isShiftClick: e.shiftKey,
                 })

apps/studio/components/grid/components/grid/AddColumn.tsx

@@ -1,10 +1,10 @@
 import { Plus } from 'lucide-react'
 import type { CalculatedColumn } from 'react-data-grid'
-
-import { useTableEditorStateSnapshot } from 'state/table-editor'
 import { Button } from 'ui'
+
 import { ADD_COLUMN_KEY } from '../../constants'
 import { DefaultFormatter } from '../formatter/DefaultFormatter'
+import { useTableEditorStateSnapshot } from '@/state/table-editor'
 
 export const AddColumn: CalculatedColumn<any, any> = {
   key: ADD_COLUMN_KEY,
@@ -15,7 +15,6 @@ export const AddColumn: CalculatedColumn<any, any> = {
   resizable: false,
   sortable: false,
   frozen: false,
-  isLastFrozenColumn: false,
   renderHeaderCell() {
     return <AddColumnHeader aria-label="Add New Row" />
   },

apps/studio/components/grid/components/grid/Grid.tsx

@@ -203,7 +203,7 @@ export const Grid = memo(
       // Compute rowClass function to style pending add/delete rows
       const computedRowClass = useMemo(() => {
         return (row: SupaRow) => {
-          const classes: string[] = []
+          const classes: string[] = ['[&>.rdg-cell]:flex', '[&>.rdg-cell]:items-center']
 
           // Call the original rowClass if provided
           if (rowClass) {

apps/studio/components/grid/components/grid/SelectColumn.tsx

@@ -5,14 +5,15 @@ import {
   RenderCellProps,
   RenderGroupCellProps,
   RenderHeaderCellProps,
+  useHeaderRowSelection,
   useRowSelection,
 } from 'react-data-grid'
 
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { useTableEditorStateSnapshot } from 'state/table-editor'
-import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
 import { SELECT_COLUMN_KEY } from '../../constants'
 import type { SupaRow } from '../../types'
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { useTableEditorStateSnapshot } from '@/state/table-editor'
+import { useTableEditorTableStateSnapshot } from '@/state/table-editor-table'
 
 export const SelectColumn: CalculatedColumn<any, any> = {
   key: SELECT_COLUMN_KEY,
@@ -23,25 +24,24 @@ export const SelectColumn: CalculatedColumn<any, any> = {
   resizable: false,
   sortable: false,
   frozen: true,
-  isLastFrozenColumn: false,
   renderHeaderCell: (props: RenderHeaderCellProps<unknown>) => {
     // [Joshen] formatter is actually a valid React component, so we can use hooks here
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isRowSelected, onRowSelectionChange] = useRowSelection()
+    const { isRowSelected, onRowSelectionChange } = useHeaderRowSelection()
 
     return (
       <SelectCellHeader
         aria-label="Select All"
         tabIndex={props.tabIndex}
         value={isRowSelected}
-        onChange={(checked) => onRowSelectionChange({ type: 'HEADER', checked })}
+        onChange={(checked) => onRowSelectionChange({ checked })}
       />
     )
   },
   renderCell: (props: RenderCellProps<SupaRow>) => {
     // [Alaister] formatter is actually a valid React component, so we can use hooks here
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isRowSelected, onRowSelectionChange] = useRowSelection()
+    const { isRowSelected, onRowSelectionChange } = useRowSelection()
     return (
       <SelectCellFormatter
         aria-label="Select"
@@ -49,7 +49,7 @@ export const SelectColumn: CalculatedColumn<any, any> = {
         value={isRowSelected}
         row={props.row}
         onChange={(checked, isShiftClick) => {
-          onRowSelectionChange({ type: 'ROW', row: props.row, checked, isShiftClick })
+          onRowSelectionChange({ row: props.row, checked, isShiftClick })
         }}
         // Stop propagation to prevent row selection
         onClick={stopPropagation}
@@ -59,7 +59,7 @@ export const SelectColumn: CalculatedColumn<any, any> = {
   renderGroupCell: (props: RenderGroupCellProps<SupaRow>) => {
     // [Alaister] groupFormatter is actually a valid React component, so we can use hooks here
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isRowSelected, onRowSelectionChange] = useRowSelection()
+    const { isRowSelected, onRowSelectionChange } = useRowSelection()
     return (
       <SelectCellFormatter
         aria-label="Select Group"
@@ -67,7 +67,6 @@ export const SelectColumn: CalculatedColumn<any, any> = {
         value={isRowSelected}
         onChange={(checked) => {
           onRowSelectionChange({
-            type: 'ROW',
             row: props.row,
             checked,
             isShiftClick: false,

apps/studio/components/grid/utils/gridColumns.tsx

@@ -1,4 +1,3 @@
-import { COLUMN_MIN_WIDTH } from 'components/grid/constants'
 import { CalculatedColumn, RenderCellProps } from 'react-data-grid'
 
 import { DefaultValue } from '../components/common/DefaultValue'
@@ -39,6 +38,7 @@ import {
   isTextColumn,
   isTimeColumn,
 } from './types'
+import { COLUMN_MIN_WIDTH } from '@/components/grid/constants'
 
 export const ESTIMATED_CHARACTER_PIXEL_WIDTH = 9
 
@@ -73,7 +73,6 @@ export function getGridColumns(
       width: columnWidth,
       minWidth: COLUMN_MIN_WIDTH,
       frozen: false,
-      isLastFrozenColumn: false,
       renderHeaderCell: (props) => (
         <ColumnHeader
           {...props}

apps/studio/components/interfaces/Auth/Users/Users.utils.tsx

@@ -1,6 +1,4 @@
-import { User } from 'data/auth/users-infinite-query'
 import dayjs from 'dayjs'
-import { BASE_PATH } from 'lib/constants'
 import { Copy, Trash, UserIcon } from 'lucide-react'
 import { Column, useRowSelection } from 'react-data-grid'
 import {
@@ -17,6 +15,8 @@ import {
 import { PROVIDERS_SCHEMAS } from '../AuthProvidersFormValidation'
 import { ColumnConfiguration, UsersTableColumn } from './Users.constants'
 import { HeaderCell } from './UsersGridComponents'
+import { User } from '@/data/auth/users-infinite-query'
+import { BASE_PATH } from '@/lib/constants'
 
 const GITHUB_AVATAR_URL = 'https://avatars.githubusercontent.com'
 const SUPPORTED_CSP_AVATAR_URLS = [GITHUB_AVATAR_URL, 'https://lh3.googleusercontent.com']
@@ -299,7 +299,7 @@ export const formatUserColumns = ({
       renderCell: ({ row }) => {
         // This is actually a valid React component, so we can use hooks here
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const [isRowSelected, onRowSelectionChange] = useRowSelection()
+        const { isRowSelected, onRowSelectionChange } = useRowSelection()
 
         const value = row?.[col.id]
         const user = users?.find((u) => u.id === row.id)
@@ -329,7 +329,6 @@ export const formatUserColumns = ({
                   e.stopPropagation()
                   onRowSelectionChange({
                     row,
-                    type: 'ROW',
                     checked: !isRowSelected,
                     isShiftClick: e.shiftKey,
                   })

apps/studio/components/interfaces/Auth/Users/UsersGridComponents.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown, SortAsc, SortDesc } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
-import { useRowSelection } from 'react-data-grid'
+import { useHeaderRowSelection } from 'react-data-grid'
 import {
   Button,
   DropdownMenu,
@@ -18,7 +18,7 @@ export const SelectHeaderCell = ({
   allRowsSelected: boolean
 }) => {
   const inputRef = useRef<HTMLInputElement>(null)
-  const [isRowSelected, onRowSelectionChange] = useRowSelection()
+  const { isRowSelected, onRowSelectionChange } = useHeaderRowSelection()
 
   const isIndeterminate = selectedUsers.size > 0 && !allRowsSelected
 
@@ -36,7 +36,7 @@ export const SelectHeaderCell = ({
           className="sb-grid-select-cell__header__input"
           disabled={false}
           checked={isRowSelected}
-          onChange={(e) => onRowSelectionChange({ type: 'HEADER', checked: e.target.checked })}
+          onChange={(e) => onRowSelectionChange({ checked: e.target.checked })}
         />
       </div>
     </div>

apps/studio/components/ui/APIDocsButton.tsx

@@ -1,8 +1,9 @@
-import { BookOpenText } from 'lucide-react'
 import { useParams } from 'common'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { BookOpenText } from 'lucide-react'
 import { useAppStateSnapshot } from 'state/app-state'
+
 import { ButtonTooltip } from './ButtonTooltip'
 
 interface APIDocsButtonProps {
@@ -36,7 +37,7 @@ export const APIDocsButton = ({ section, source }: APIDocsButtonProps) => {
         })
       }}
       icon={<BookOpenText />}
-      className="h-7 w-7"
+      className="w-7"
       tooltip={{
         content: {
           side: 'bottom',

apps/studio/package.json

@@ -114,7 +114,7 @@
     "react": "catalog:",
     "react-beautiful-dnd": "^13.1.0",
     "react-contexify": "^5.0.0",
-    "react-data-grid": "7.0.0-beta.41",
+    "react-data-grid": "7.0.0-beta.47",
     "react-day-picker": "^9.11.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",

pnpm-lock.yaml

@@ -171,8 +171,8 @@ importers:
         specifier: 'catalog:'
         version: 18.3.1
       react-data-grid:
-        specifier: 7.0.0-beta.41
-        version: 7.0.0-beta.41(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 7.0.0-beta.47
+        version: 7.0.0-beta.47(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-day-picker:
         specifier: ^9.11.1
         version: 9.11.1(react@18.3.1)
@@ -1002,8 +1002,8 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-data-grid:
-        specifier: 7.0.0-beta.41
-        version: 7.0.0-beta.41(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 7.0.0-beta.47
+        version: 7.0.0-beta.47(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-day-picker:
         specifier: ^9.11.1
         version: 9.11.1(react@18.3.1)
@@ -15800,11 +15800,11 @@ packages:
       react: '>= 15'
       react-dom: '>= 15'
 
-  react-data-grid@7.0.0-beta.41:
-    resolution: {integrity: sha512-WmTP/PV+vtVjIaGVLgyG6WAhqvuPBM8I54bsR7oJZl6w43+mIasZM9rEBWjQ52XHJEy41/tjcMBIMNiWqoEbrQ==}
+  react-data-grid@7.0.0-beta.47:
+    resolution: {integrity: sha512-28kjsmwQGD/9RXYC50zn5Zv/SQMhBBoSvG5seq0fM8XXi9TZ0zr9Z5T3YJqLwcEtoNzTOq3y0njkmdujGkIwQQ==}
     peerDependencies:
-      react: ^18.0
-      react-dom: ^18.0
+      react: ^18.0 || ^19.0
+      react-dom: ^18.0 || ^19.0
 
   react-day-picker@9.11.1:
     resolution: {integrity: sha512-l3ub6o8NlchqIjPKrRFUCkTUEq6KwemQlfv3XZzzwpUeGwmDJ+0u0Upmt38hJyd7D/vn2dQoOoLV/qAp0o3uUw==}
@@ -34816,7 +34816,7 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  react-data-grid@7.0.0-beta.41(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-data-grid@7.0.0-beta.47(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       clsx: 2.1.1
       react: 18.3.1