react-science 19.11.0 → 20.1.0

package/lib/components/value-renderers/Title.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/components/value-renderers/Title.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAEpD"}
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/components/value-renderers/Title.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEtD,MAAM,WAAW,UAAW,SAAQ,mBAAmB;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAEpD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "19.11.0",
+  "version": "20.1.0",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {
@@ -23,7 +23,7 @@
     "createData": "npm run prepack && node scripts/createData",
     "dev": "echo Use npm run dev-app or npm run storybook && exit 1",
     "dev-app": "vite --open /pages/demo.html",
-    "eslint": "eslint . --cache --max-warnings=40",
+    "eslint": "eslint . --cache --max-warnings=39",
     "eslint-fix": "npm run eslint -- --fix",
     "playwright": "npm run playwright-ct -- --project chromium && npm run playwright-e2e -- --project chromium",
     "playwright-ct": "playwright test -c playwright-ct.config.mts",
@@ -48,22 +48,23 @@
   },
   "homepage": "https://github.com/zakodium-oss/react-science#readme",
   "peerDependencies": {
-    "@blueprintjs/core": "^6.0.0",
-    "@blueprintjs/icons": "^6.0.0",
-    "@blueprintjs/select": "^6.0.0",
-    "fifo-logger": "^1.0.0 || ^2.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "@blueprintjs/core": "^6.16.0",
+    "@blueprintjs/icons": "^6.11.0",
+    "@blueprintjs/select": "^6.3.0",
+    "fifo-logger": "^2.0.1",
+    "react": "^18.3.1 || ^19.2.7",
+    "react-dom": "^18.3.1 || ^19.2.7"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.5",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
     "@emotion/styled": "^11.14.1",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "@tanstack/react-form": "^1.29.0",
+    "@radix-ui/react-use-controllable-state": "^1.2.3",
+    "@tanstack/react-form": "^1.33.0",
+    "@tanstack/react-store": "^0.11.0",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.24",
+    "@tanstack/react-virtual": "^3.14.2",
     "@zakodium/pdnd-esm": "^1.0.2",
     "d3-scale-chromatic": "^3.1.0",
     "react-d3-utils": "^3.1.2",
@@ -73,66 +74,63 @@
     "react-inspector": "^9.0.0",
     "tinycolor2": "^1.6.0",
     "ts-pattern": "^5.9.0",
-    "zod": "^4.3.6"
+    "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@blueprintjs/core": "6.0.0",
-    "@blueprintjs/icons": "6.0.0",
-    "@blueprintjs/select": "6.0.0",
+    "@blueprintjs/core": "6.16.0",
+    "@blueprintjs/icons": "6.11.0",
+    "@blueprintjs/select": "6.3.0",
     "@floating-ui/react": "^0.27.19",
-    "@playwright/experimental-ct-react": "^1.59.1",
-    "@playwright/test": "^1.59.1",
-    "@storybook/addon-docs": "^10.3.5",
-    "@storybook/react-vite": "^10.3.5",
-    "@tanstack/react-query": "^5.99.0",
+    "@playwright/experimental-ct-react": "^1.60.0",
+    "@playwright/test": "^1.60.0",
+    "@storybook/addon-docs": "^10.4.3",
+    "@storybook/react-vite": "^10.4.3",
+    "@tanstack/react-query": "^5.101.0",
     "@types/babel__core": "^7.20.5",
     "@types/d3-scale-chromatic": "^3.1.0",
-    "@types/node": "^24.7.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/node": "^24.13.1",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
     "@types/tinycolor2": "^1.4.6",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.1.4",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/coverage-v8": "^4.1.8",
     "@zakodium/tsconfig": "^1.0.5",
     "biologic-converter": "^1.0.0",
-    "cheminfo-font": "^1.26.0",
+    "cheminfo-font": "^1.27.0",
     "cheminfo-types": "^1.15.0",
     "cross-env": "^10.1.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "eslint-config-zakodium": "^20.0.0",
-    "eslint-plugin-storybook": "^10.3.5",
-    "fifo-logger": "^2.0.1",
+    "eslint-plugin-storybook": "^10.4.3",
+    "fifo-logger": "2.0.1",
     "filelist-utils": "^1.11.3",
-    "immer": "^11.1.4",
-    "jcampconverter": "^12.2.7",
-    "ml-gsd": "^13.1.1",
-    "ml-peak-shape-generator": "^4.2.0",
-    "ml-signal-processing": "^2.2.0",
-    "ml-spectra-processing": "^14.28.1",
-    "ms-spectrum": "^3.10.0",
+    "immer": "^11.1.8",
+    "jcampconverter": "^12.3.3",
+    "ml-gsd": "^14.1.0",
+    "ml-peak-shape-generator": "^5.1.0",
+    "ml-signal-processing": "^2.2.1",
+    "ml-spectra-processing": "^14.29.0",
+    "ms-spectrum": "^3.10.1",
     "netcdfjs": "^4.0.0",
     "postcss-styled-syntax": "^0.7.1",
-    "prettier": "^3.8.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-error-boundary": "^6.1.1",
+    "prettier": "^3.8.4",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-error-boundary": "^6.1.2",
     "react-kbs": "^3.1.0",
-    "react-ocl": "^8.7.0",
+    "react-ocl": "^8.7.1",
     "react-plot": "^3.1.2",
     "rimraf": "^6.1.3",
     "spc-parser": "^2.0.0",
-    "storybook": "^10.3.5",
-    "stylelint": "^17.8.0",
+    "storybook": "^10.4.3",
+    "stylelint": "^17.13.0",
     "stylelint-config-standard": "^40.0.0",
     "typescript": "^6.0.3",
-    "vite": "^8.0.8",
-    "vitest": "^4.1.4",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8",
     "wdf-parser": "^1.0.0"
   },
   "volta": {
-    "node": "24.15.0"
-  },
-  "overrides": {
-    "storybook": "$storybook"
+    "node": "24.16.0"
   }
 }

package/src/components/activity_bar/activity_bar.tsx

@@ -43,8 +43,12 @@ export function ActivityBar(props: ActivityBarProps) {
 const ActivityButton = styled(Button)`
   font-size: 1.125em;
   width: fit-content;
+
+  /* Override the padding set by the large button group */
+  padding: var(--bp-surface-spacing) calc(var(--bp-surface-spacing) * 2) !important;
+
   .${Classes.ICON} {
-    color: ${Colors.DARK_GRAY3};
+    color: ${Colors.DARK_GRAY3} !important;
   }
 
   .${Classes.TAG} {

package/src/components/button/Button.tsx

@@ -7,11 +7,10 @@ import type {
 import {
   AnchorButton,
   Button as BlueprintButton,
-  Icon,
+  Classes,
   Tag,
   Tooltip,
 } from '@blueprintjs/core';
-import type { CSSObject } from '@emotion/styled';
 import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
 
@@ -41,21 +40,40 @@ const ButtonTag = styled(Tag)`
   z-index: 20;
 `;
 
-// Setting the line-height makes sure regular sized buttons have a
-// height consistent with the input fields and across variants.
-// Using the same line height as in the blueprint docs.
-const buttonStyles: CSSObject = {
-  lineHeight: 1.15,
-  position: 'relative',
-};
+interface InnerButtonProps {
+  isIconButton: boolean;
+}
+
+/*
+  Setting the line-height makes sure that when passing regular text in icons instead of an svg, they are vertically centered
+  max-width makes sure buttons with tag or hoverability indicator (both implying absolutely positioned elements) keep their intended width
+  When a button just has an icon, we override BP styles and remove the margin-right, because if it also has tag prop this is required to keep the layout correct.
+*/
+const buttonStyles = ({ isIconButton }: InnerButtonProps) => `
+  line-height: 1em;
+  position: relative;
+  max-width: ${isIconButton ? '30px' : 'none'};
+
+  & .${Classes.ICON} {
+    ${isIconButton ? 'margin-right: 0px;' : ''}
+  }
+`;
 
-const TooltipAnchorButton = styled(AnchorButton)<{
-  children: ReactNode;
-}>(buttonStyles);
+function shouldForwardButtonProp(propName: string) {
+  return propName !== 'isIconButton';
+}
 
-const TooltipButton = styled(BlueprintButton)<{ children: ReactNode }>(
-  buttonStyles,
-);
+const TooltipAnchorButton = styled(AnchorButton, {
+  shouldForwardProp: shouldForwardButtonProp,
+})<InnerButtonProps>`
+  ${(props) => buttonStyles(props)}
+`;
+
+const TooltipButton = styled(BlueprintButton, {
+  shouldForwardProp: shouldForwardButtonProp,
+})<InnerButtonProps>`
+  ${(props) => buttonStyles(props)}
+`;
 
 export function Button(props: ButtonProps) {
   const { tooltipProps = {}, children, tag, tagProps, ...buttonProps } = props;
@@ -80,34 +98,13 @@ export function Button(props: ButtonProps) {
         <InnerButton
           {...targetProps}
           {...buttonProps}
-          icon={
-            /*
-             icon and children will be children of the same node.
-             Blueprintjs' stylesheet treats the presence of multiple child elements
-             as there being icon and text, styling the icon with a right margin
-             so that the text is not right next to it.
-             In blueprint alone, this only happens when the button has children.
-             Here, we need to handle the case when the button has a tag, which
-             adds a sibling but should not affect the margin on its own.
-            */
-            tag ? (
-              <>
-                {children ? (
-                  <Icon icon={buttonProps.icon} />
-                ) : (
-                  <div style={{ display: 'contents' }}>
-                    <Icon icon={buttonProps.icon} />
-                  </div>
-                )}
-                <ButtonTag round intent="success" {...tagProps}>
-                  {tag}
-                </ButtonTag>
-              </>
-            ) : (
-              buttonProps.icon
-            )
-          }
+          isIconButton={!children && !buttonProps.text}
         >
+          {tag && (
+            <ButtonTag round intent="success" {...tagProps}>
+              {tag}
+            </ButtonTag>
+          )}
           {children}
         </InnerButton>
       )}

package/src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx

@@ -1,5 +1,5 @@
-import type { PopoverProps } from '@blueprintjs/core';
-import { Popover } from '@blueprintjs/core';
+import type { PopoverNextProps } from '@blueprintjs/core';
+import { PopoverNext } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 
 import FixedColorPreview from '../preview/FixedColorPreview.js';
@@ -16,7 +16,7 @@ export interface ColorPickerDropdownProps extends Pick<
   | 'onChangeComplete'
   | 'onBlur'
 > {
-  popoverProps?: Omit<PopoverProps, 'content'>;
+  popoverProps?: Omit<PopoverNextProps, 'content'>;
 
   /**
    * To link with label
@@ -45,10 +45,12 @@ export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
   const { hex } = colorHelper.toState(color || 'white');
 
   return (
-    <Popover
+    <PopoverNext
       targetProps={{ style: { width: '100%' } }}
       content={<ColorPicker color={color} {...otherProps} />}
-      minimal
+      shouldReturnFocusOnClose={false}
+      animation="minimal"
+      arrow={false}
       {...popoverProps}
     >
       <ColorPickerRoot type="button" id={id}>
@@ -56,6 +58,6 @@ export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
           <FixedColorPreview color={hex} />
         </ColorPickerPreview>
       </ColorPickerRoot>
-    </Popover>
+    </PopoverNext>
   );
 }

package/src/components/color-picker/gradient_select/gradient_select.tsx

@@ -26,7 +26,7 @@ const GradientSelectChevron = styled(FaChevronDown)`
   right: 0.5rem;
 `;
 
-const GradientSelectOption = styled.li`
+const GradientSelectOption = styled.div`
   display: flex;
   flex-direction: column;
   padding-top: 5px;

package/src/components/color-picker/react-color/ColorPicker.tsx

@@ -6,6 +6,7 @@ import { defaultColorPalette } from '../palette.js';
 
 import { Alpha, CheckBoard, Hue, Saturation } from './common/index.js';
 import * as colorHelper from './helpers/color.js';
+import type { SketchFieldsProps } from './sketch/SketchFields.js';
 import SketchFields from './sketch/SketchFields.js';
 import SketchPresetColors from './sketch/SketchPresetColors.js';
 
@@ -168,11 +169,14 @@ export function ColorPicker(props: ColorPickerProps) {
     setState(colorHelper.toState(color, 0));
   }
 
-  const handleChange = useCallback(
-    (data: any, event: any) => {
+  const handleChange = useCallback<SketchFieldsProps['onChange']>(
+    (data, event) => {
       const isValidColor = colorHelper.simpleCheckForValidColor(data);
       if (isValidColor) {
-        const colors = colorHelper.toState(data, data.h || state.oldHue);
+        const colors = colorHelper.toState(
+          data,
+          ('h' in data && data.h) || state.oldHue,
+        );
         setState(colors);
         if (onChangeComplete) {
           debounceRef.current(onChangeComplete, colors, event);
@@ -245,7 +249,7 @@ export function ColorPicker(props: ColorPickerProps) {
       />
       <SketchPresetColors
         colors={presetColors}
-        onClick={(data, e) => handleChange?.(data as ChangeCallbackProps, e)}
+        onClick={(data, e) => handleChange(data, e)}
         onSwatchHover={handleSwatchHover}
       />
     </div>

package/src/components/color-picker/react-color/sketch/SketchFields.tsx

@@ -5,7 +5,7 @@ import type { HSL, RGB } from '../ColorPicker.js';
 import { EditableInput } from '../common/index.js';
 import * as color from '../helpers/color.js';
 
-interface SketchFieldsProps {
+export interface SketchFieldsProps {
   onChange: (
     data: (RGB | HSL | { hex: string }) & { source: string },
     e: Event,

package/src/components/form/components/input/numeric_input.tsx

@@ -10,6 +10,8 @@ interface NumericInputProps extends FormGroupInputProps, BPNumericInputProps {
   step?: number;
   min?: number;
   max?: number;
+
+  autoFocus?: boolean;
 }
 
 export function NumericInput(props: NumericInputProps) {

package/src/components/form/components/input/radio_group.tsx

@@ -1,6 +1,6 @@
 import type { RadioGroupProps as BPRadioGroupProps } from '@blueprintjs/core';
 import { RadioGroup as BPRadioGroup } from '@blueprintjs/core';
-import type { FormEvent } from 'react';
+import type { ChangeEvent } from 'react';
 
 import { useFieldContext } from '../../context/use_ts_form.ts';
 import { useFormContext } from '../input_groups/form_context.ts';
@@ -41,7 +41,7 @@ export function RadioGroup(props: RadioGroupProps) {
     .errors.map((e) => e.message)
     .at(0);
 
-  function onChange(event: FormEvent<HTMLInputElement>) {
+  function onChange(event: ChangeEvent<HTMLInputElement>) {
     return field.handleChange(event.currentTarget.value);
   }
 

package/src/components/form/components/input/submit_button.tsx

@@ -1,4 +1,4 @@
-import { useStore } from '@tanstack/react-form';
+import { useSelector } from '@tanstack/react-store';
 
 import type { ButtonProps } from '../../../button/index.js';
 import { Button } from '../../../button/index.js';
@@ -10,7 +10,7 @@ export function SubmitButton(props: SubmitButtonProps) {
   const { intent, disabled, ...otherProps } = props;
 
   const form = useFormContext();
-  const isSubmitting = useStore(form.store, (state) => state.isSubmitting);
+  const isSubmitting = useSelector(form.store, (state) => state.isSubmitting);
 
   return (
     <Button

package/src/components/fullscreen/fullscreen_context.provider.tsx

@@ -4,12 +4,15 @@ import { useFullScreenHandle } from 'react-full-screen';
 
 import { fullscreenContext } from './fullscreen_context.js';
 
+// Remove for React 19.
+type RefObject<T> = MutableRefObject<T>;
+
 export interface FullscreenProviderProps {
   /**
    * Callback providing the ref which should be passed to the element that can be displayed fullscreen.
    * @param ref
    */
-  children: (ref: MutableRefObject<HTMLDivElement | null>) => ReactNode;
+  children: (ref: RefObject<HTMLDivElement | null>) => ReactNode;
   /**
    * Callback which will be called in case toggling results in an error.
    * @param error - The error that happened. Value is not necessarily an instance of `Error` and may even be `undefined`.

package/src/components/info-panel/InfoPanel.tsx

@@ -277,19 +277,20 @@ function valueSearch(
   search: string,
   lowerCase = true,
 ): boolean {
+  let stringValue = match(value)
+    .with(P.boolean, String)
+    .with(P.number, String)
+    .with(P.string, (value) => {
+      return value === 'true' ? 'yes' : value === 'false' ? 'no' : value;
+    })
+    .with({}, (value) => JSON.stringify(value))
+    .otherwise(() => null);
+  if (stringValue === null) {
+    return true;
+  }
   if (lowerCase) {
-    value = String(value as unknown).toLowerCase();
+    stringValue = stringValue.toLowerCase();
     search = search.toLowerCase();
   }
-  return match(value)
-    .with(P.boolean, (value) => String(value).includes(search))
-    .with(P.number, (value) => String(value).includes(search))
-    .with(P.string, (value) => {
-      const newValue =
-        value === 'true' ? 'yes' : value === 'false' ? 'no' : value;
-
-      return newValue.includes(search);
-    })
-    .with({}, (value) => JSON.stringify(value).includes(search))
-    .otherwise(() => true);
+  return stringValue.includes(search);
 }

package/src/components/input/radio-button-group/RadioButtonGroup.tsx

@@ -1,6 +1,7 @@
 import type { RadioGroupProps, RadioProps } from '@blueprintjs/core';
 import { RadioGroup } from '@blueprintjs/core';
 import styled from '@emotion/styled';
+import type { ReactElement } from 'react';
 import { Children, cloneElement } from 'react';
 
 import { RadioButton } from './RadioButton.js';
@@ -68,13 +69,17 @@ export function RadioButtonGroup(props: RadioButtonGroupProps) {
             return child;
           }
           if (child.type === RadioButton) {
-            return cloneElement(child, {
-              ...child.props,
+            const radioChild = child as ReactElement<
+              RadioProps,
+              typeof RadioButton
+            >;
+            return cloneElement(radioChild, {
+              ...radioChild.props,
               size,
               name,
               onChange,
-              checked: child.props.value === selectedValue,
-              disabled: groupDisabled || child.props.disabled,
+              checked: radioChild.props.value === selectedValue,
+              disabled: groupDisabled || radioChild.props.disabled,
             });
           }
           return child;

package/src/components/root-layout/root_layout.tsx

@@ -1,5 +1,5 @@
 import { BlueprintProvider, FocusStyleManager } from '@blueprintjs/core';
-import type { CSSProperties, MutableRefObject, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 
 import { AccordionProvider } from '../accordion/index.js';
@@ -43,9 +43,7 @@ export function RootLayout(props: RootLayoutProps) {
           id="root-layout"
           ref={(node) => {
             if (node) {
-              const mutableRef =
-                fullscreenRef as MutableRefObject<HTMLDivElement>;
-              mutableRef.current = node;
+              fullscreenRef.current = node;
               refCallback(node);
             }
           }}

package/src/components/split_pane/split_pane.tsx

@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import type {
   CSSProperties,
+  MutableRefObject,
   PointerEvent as ReactPointerEvent,
   ReactNode,
-  RefObject,
 } from 'react';
 import { useEffect, useReducer, useRef } from 'react';
 import { useResizeObserver } from 'react-d3-utils';
@@ -15,6 +15,9 @@ import type { SplitPaneSize, SplitPaneType } from './split_pane_helpers.js';
 import { parseSize, serializeSize } from './split_pane_helpers.js';
 import { useSplitPaneSize } from './use_split_pane_size.js';
 
+// Remove for React 19.
+type RefObject<T> = MutableRefObject<T>;
+
 export type SplitPaneDirection = 'vertical' | 'horizontal';
 export type SplitPaneSide = 'start' | 'end';
 
@@ -223,7 +226,7 @@ interface SplitterProps {
   direction: SplitPaneDirection;
   isOpen: boolean;
   isResizing: boolean;
-  splitterRef: RefObject<HTMLDivElement>;
+  splitterRef: RefObject<HTMLDivElement | null>;
 }
 
 function Splitter(props: SplitterProps) {

package/src/components/split_pane/use_split_pane_size.tsx

@@ -12,7 +12,7 @@ import { serializeSize } from './split_pane_helpers.js';
 interface UseSplitPaneSizeOptions {
   controlledSide: SplitPaneSide;
   direction: SplitPaneDirection;
-  splitterRef: RefObject<HTMLDivElement>;
+  splitterRef: RefObject<HTMLDivElement | null>;
   sizeType: SplitPaneType;
   onSizeChange: (newSize: ParsedSplitPaneSize) => void;
   onResize?: (newSize: SplitPaneSize) => void;

package/src/components/table/flash_row/use_flash_row_effect.ts

@@ -6,7 +6,7 @@ import { useFlashedRowContext } from './flashed_row_context.js';
 
 export function useFlashRowEffect(
   id: string,
-  tableRowRef: RefObject<HTMLTableRowElement>,
+  tableRowRef: RefObject<HTMLTableRowElement | null>,
 ) {
   const [flashedItemId, setFlashedItemId] = useFlashedRowContext();
   useEffect(() => {

package/src/components/table/reorder_rows/draggable_row_context.ts

@@ -1,11 +1,14 @@
-import type { RefObject } from 'react';
+import type { MutableRefObject } from 'react';
 import { createContext, useContext } from 'react';
 
 import type { DraggableItemState } from './item_data.js';
 
+// Remove for React 19.
+type RefObject<T> = MutableRefObject<T>;
+
 export interface DraggableRowContext {
   state: DraggableItemState;
-  dragHandleRef: RefObject<HTMLButtonElement>;
+  dragHandleRef: RefObject<HTMLButtonElement | null>;
 }
 
 export const draggableRowContext = createContext<DraggableRowContext | null>(

package/src/components/table/reorder_rows/draggable_row_tr.tsx

@@ -73,7 +73,7 @@ export function TableDraggableRowTr<TData extends RowData>(
       );
     }
 
-    const data = getItemData(row as Row<unknown>, instanceId);
+    const data = getItemData(row, instanceId);
 
     return combine(
       draggable({

package/src/components/table/reorder_rows/item_data.ts

@@ -11,7 +11,10 @@ export interface ItemData {
   [key: symbol]: unknown;
 }
 
-export function getItemData(row: Row<unknown>, instanceId: symbol): ItemData {
+export function getItemData<RowType>(
+  row: Row<RowType>,
+  instanceId: symbol,
+): ItemData {
   return {
     [itemKey]: true,
     id: row.id,

package/src/components/table/reorder_rows/item_order_provider.tsx

@@ -43,14 +43,16 @@ export function ItemOrderProvider<T = unknown>(
     [items, onOrderChanged],
   );
 
-  const value = useMemo(
-    () => ({
+  const value = useMemo(() => {
+    // This assertion is necessary because the provider cannot contain the
+    // T type instantiated by this component.
+    const contextItems = items as Array<Row<unknown>>;
+    return {
       reorderItem,
-      items: items as Array<Row<unknown>>,
+      items: contextItems,
       instanceId,
-    }),
-    [reorderItem, items, instanceId],
-  );
+    };
+  }, [reorderItem, items, instanceId]);
 
   return (
     <itemOrderContext.Provider value={value}>

package/src/components/table/reorder_rows/use_drop_monitor.ts

@@ -21,7 +21,7 @@ import { useItemOrder } from './item_order_context.js';
  * @param enabled Enable or disable the monitoring.
  */
 export function useDropMonitor(
-  scrollElementRef: RefObject<Element>,
+  scrollElementRef: RefObject<Element | null>,
   enabled: boolean,
 ) {
   const { reorderItem, items } = useItemOrder();