react-science 23.1.0 → 24.0.0

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

@@ -9,6 +9,7 @@ import { FullScreenProvider } from '../fullscreen/index.js';
 import { CustomDivPreflight } from './css-reset/customPreflight.js';
 import { RootLayoutProvider } from './root_layout_context.provider.js';
 
+// eslint-disable-next-line unicorn/no-top-level-side-effects
 FocusStyleManager.onlyShowFocusOnTabs();
 
 interface RootLayoutProps {
@@ -42,10 +43,12 @@ export function RootLayout(props: RootLayoutProps) {
         <CustomDivPreflight
           id="root-layout"
           ref={(node) => {
-            if (node) {
-              fullscreenRef.current = node;
-              refCallback(node);
+            if (!node) {
+              return;
             }
+
+            fullscreenRef.current = node;
+            refCallback(node);
           }}
           style={{
             ...style,

package/src/components/root-layout/root_layout_context.provider.tsx

@@ -1,14 +1,14 @@
 import type { ReactNode } from 'react';
 
-import { rootLayoutContext } from './root_layout_context.js';
+import { RootLayoutContext } from './root_layout_context.js';
 
 export function RootLayoutProvider(props: {
   children: ReactNode;
   innerRef: HTMLElement | null;
 }) {
   return (
-    <rootLayoutContext.Provider value={props.innerRef}>
+    <RootLayoutContext value={props.innerRef}>
       {props.children}
-    </rootLayoutContext.Provider>
+    </RootLayoutContext>
   );
 }

package/src/components/root-layout/root_layout_context.ts

@@ -1,12 +1,12 @@
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
 const defaultPortalContext =
   typeof document === 'undefined' ? null : document.body;
 
-export const rootLayoutContext = createContext<HTMLElement | null>(
+export const RootLayoutContext = createContext<HTMLElement | null>(
   defaultPortalContext,
 );
 
 export function useRootLayoutContext() {
-  return useContext(rootLayoutContext);
+  return use(RootLayoutContext);
 }

package/src/components/selected-total/SelectedTotal.tsx

@@ -18,7 +18,7 @@ export function SelectedTotal(props: SelectedTotalProps) {
 }
 
 function formatCounterLabel(count?: number, total?: number) {
-  const thinSpace = '\u2009';
+  const thinSpace = '\u{2009}';
   if (count !== undefined && total !== undefined) {
     return `[${thinSpace}${count}${thinSpace}/${thinSpace}${total}${thinSpace}]`;
   }

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,9 +15,6 @@ 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';
 
@@ -279,11 +276,11 @@ function isSideVisible(
 ) {
   if (!isOpen) {
     return !isControlledSide;
-  } else if (type === '%') {
-    return isControlledSide ? size !== 0 : size !== 100;
-  } else {
-    return isControlledSide ? size !== 0 : size !== parentSize;
   }
+  if (type === '%') {
+    return size !== (isControlledSide ? 0 : 100);
+  }
+  return size !== (isControlledSide ? 0 : parentSize);
 }
 
 function getItemStyle(
@@ -297,7 +294,8 @@ function getItemStyle(
   const base: CSSProperties = { display: 'flex', overflow: 'hidden' };
   if (!isOpen) {
     return isControlledSide ? { display: 'none' } : { flex: '1 1 0%', ...base };
-  } else if (type === '%' && size !== 0) {
+  }
+  if (type === '%' && size !== 0) {
     return isControlledSide
       ? {
           ...base,
@@ -308,18 +306,17 @@ function getItemStyle(
           flex: `${percentToFlex(size)} 0 0%`,
           [isHorizontal ? 'minWidth' : 'minHeight']: 0,
         };
-  } else {
-    return isControlledSide
-      ? {
-          ...base,
-          [isHorizontal ? 'width' : 'height']: size,
-        }
-      : {
-          ...base,
-          flex: '1 1 0%',
-          [isHorizontal ? 'minWidth' : 'minHeight']: 0,
-        };
   }
+  return isControlledSide
+    ? {
+        ...base,
+        [isHorizontal ? 'width' : 'height']: size,
+      }
+    : {
+        ...base,
+        flex: '1 1 0%',
+        [isHorizontal ? 'minWidth' : 'minHeight']: 0,
+      };
 }
 
 const Split = styled.div<{

package/src/components/split_pane/split_pane_helpers.ts

@@ -7,7 +7,7 @@ export interface ParsedSplitPaneSize {
 }
 
 export function parseSize(size: string): ParsedSplitPaneSize {
-  const value = Number.parseFloat(size);
+  const value = Number(size);
   // remove numbers and dots from the string
   const type = size.replaceAll(/[\d .]/g, '') as SplitPaneType;
 

package/src/components/split_pane/use_split_pane_size.tsx

@@ -61,10 +61,11 @@ export function useSplitPaneSize(options: UseSplitPaneSizeOptions) {
           ? clientX - bounds.left
           : clientY - bounds.top;
 
-      const centralizingValue =
+      const centralizingClientValue =
         direction === 'horizontal'
-          ? splitterRef.current.clientWidth / 2
-          : splitterRef.current.clientHeight / 2;
+          ? splitterRef.current.clientWidth
+          : splitterRef.current.clientHeight;
+      const centralizingValue = centralizingClientValue / 2;
 
       const value =
         controlledSide === 'start' ? client : parentDimension - client;

package/src/components/table/default_table_cell.tsx

@@ -1,4 +1,5 @@
 import type { CellContext, RowData } from '@tanstack/react-table';
+import { P, match } from 'ts-pattern';
 
 import * as ValueRenderers from '../value-renderers/index.js';
 
@@ -8,15 +9,13 @@ import type { ReactScienceTableFeatures } from './table_features.js';
 export function defaultTableCell<TData extends RowData, TValue = unknown>(
   context: CellContext<ReactScienceTableFeatures, TData, TValue>,
 ) {
-  const value = context.getValue();
-  if (typeof value === 'string') {
-    return <ValueRenderers.Text value={value} />;
-  } else if (typeof value === 'number') {
-    return <ValueRenderers.Number value={value} />;
-  } else if (typeof value === 'boolean') {
-    return <ValueRenderers.Boolean value={value} />;
-  } else {
-    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-    return <ValueRenderers.Text value={`${value}`} />;
-  }
+  return match(context.getValue())
+    .with(P.string, (value) => <ValueRenderers.Text value={value as string} />)
+    .with(P.number, (value) => (
+      <ValueRenderers.Number value={value as number} />
+    ))
+    .with(P.boolean, (value) => (
+      <ValueRenderers.Boolean value={value as boolean} />
+    ))
+    .otherwise((value) => <ValueRenderers.Text value={String(value)} />);
 }

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

@@ -1,17 +1,17 @@
 import type { useState } from 'react';
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
 /**
  * An editable state containing the ID of the next item to flash.
  */
 type FlashedRowContextValue = ReturnType<typeof useState<string>>;
 
-export const flashedRowContext = createContext<FlashedRowContextValue | null>(
+export const FlashedRowContext = createContext<FlashedRowContextValue | null>(
   null,
 );
 
 export function useFlashedRowContext() {
-  const context = useContext(flashedRowContext);
+  const context = use(FlashedRowContext);
 
   if (!context) {
     throw new Error(

package/src/components/table/flash_row/flashed_row_provider.tsx

@@ -1,13 +1,15 @@
 import type { ReactNode } from 'react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
-import { flashedRowContext } from './flashed_row_context.js';
+import { FlashedRowContext } from './flashed_row_context.js';
 
 export function FlashedRowProvider(props: { children: ReactNode }) {
-  const value = useState<string>();
+  const [value, setValue] = useState<string>();
+  const contextValue: ReturnType<typeof useState<string>> = useMemo(
+    () => [value, setValue],
+    [value],
+  );
   return (
-    <flashedRowContext.Provider value={value}>
-      {props.children}
-    </flashedRowContext.Provider>
+    <FlashedRowContext value={contextValue}>{props.children}</FlashedRowContext>
   );
 }

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

@@ -10,12 +10,14 @@ export function useFlashRowEffect(
 ) {
   const [flashedItemId, setFlashedItemId] = useFlashedRowContext();
   useEffect(() => {
-    if (flashedItemId === id && tableRowRef.current) {
-      triggerPostFlash(tableRowRef.current);
-      // In a virtualized table, prevent the flash from happening again
-      // when the component remounts
-      setFlashedItemId(undefined);
+    if (flashedItemId !== id || !tableRowRef.current) {
+      return;
     }
+
+    triggerPostFlash(tableRowRef.current);
+    // In a virtualized table, prevent the flash from happening again
+    // when the component remounts
+    setFlashedItemId(undefined);
   }, [flashedItemId, id, setFlashedItemId, tableRowRef]);
 }
 

package/src/components/table/preview_table.tsx

@@ -1,7 +1,7 @@
 import type { Row, RowData } from '@tanstack/react-table';
 
 import {
-  isPreviewTableContext,
+  IsPreviewTableContext,
   usePreviewTableProps,
 } from './preview_table_context.js';
 import type { ReactScienceTableFeatures } from './table_features.js';
@@ -12,8 +12,8 @@ export function PreviewTable<TData extends RowData>(props: {
 }) {
   const tablePreviewProps = usePreviewTableProps<TData>();
   return (
-    <isPreviewTableContext.Provider value>
+    <IsPreviewTableContext value>
       <Table {...tablePreviewProps} noHeader data={[props.row.original]} />
-    </isPreviewTableContext.Provider>
+    </IsPreviewTableContext>
   );
 }

package/src/components/table/preview_table_context.ts

@@ -1,5 +1,5 @@
 import type { RowData } from '@tanstack/react-table';
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
 import type { TableProps } from './table_root.js';
 
@@ -10,11 +10,11 @@ export type PreviewTablePropsContextValue<TData extends RowData> = Pick<
   'getTdProps' | 'columns' | 'className' | 'renderRowTr' | 'compact'
 >;
 
-export const previewTablePropsContext =
+export const PreviewTablePropsContext =
   createContext<PreviewTablePropsContextValue<RowData> | null>(null);
 
 export function usePreviewTableProps<TData extends RowData>() {
-  const value = useContext(previewTablePropsContext);
+  const value = use(PreviewTablePropsContext);
   if (value === null) {
     throw new Error(
       'useTablePreviewProps must be used within a TablePreviewContextProvider',
@@ -24,10 +24,10 @@ export function usePreviewTableProps<TData extends RowData>() {
 }
 
 export const PreviewTablePropsContextProvider =
-  previewTablePropsContext.Provider;
+  PreviewTablePropsContext.Provider;
 
-export const isPreviewTableContext = createContext(false);
+export const IsPreviewTableContext = createContext(false);
 
 export function useIsPreviewTable() {
-  return useContext(isPreviewTableContext);
+  return use(IsPreviewTableContext);
 }

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

@@ -1,22 +1,18 @@
-import type { MutableRefObject } from 'react';
-import { createContext, useContext } from 'react';
+import type { RefObject } from 'react';
+import { createContext, use } from 'react';
 
 import type { DraggableItemState } from './item_data.js';
 
-// Remove for React 19.
-type RefObject<T> = MutableRefObject<T>;
-
-export interface DraggableRowContext {
+export interface DraggableRowContextValue {
   state: DraggableItemState;
   dragHandleRef: RefObject<HTMLButtonElement | null>;
 }
 
-export const draggableRowContext = createContext<DraggableRowContext | null>(
-  null,
-);
+export const DraggableRowContext =
+  createContext<DraggableRowContextValue | null>(null);
 
 export function useTableDraggableRowContext() {
-  const context = useContext(draggableRowContext);
+  const context = use(DraggableRowContext);
   if (!context) {
     throw new Error(
       'useDraggableItemContext must be used within an ItemContextProvider',

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

@@ -9,6 +9,7 @@ import {
   pointerOutsideOfPreview,
   setCustomNativeDragPreview,
 } from '@zakodium/pdnd-esm';
+import type { Mandatory } from '@zakodium/utils';
 import { assert } from '@zakodium/utils';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -22,8 +23,8 @@ import type {
   TableRowTrRenderProps,
 } from '../table_utils.js';
 
-import type { DraggableRowContext } from './draggable_row_context.js';
-import { draggableRowContext } from './draggable_row_context.js';
+import type { DraggableRowContextValue } from './draggable_row_context.js';
+import { DraggableRowContext } from './draggable_row_context.js';
 import type { DraggableItemState } from './item_data.js';
 import { getItemData, isItemData } from './item_data.js';
 import { useItemOrder } from './item_order_context.js';
@@ -43,13 +44,17 @@ export interface TableDraggableRowTrProps<TData extends RowData> {
   renderRowPreview?: TableRowPreviewRenderer<TData>;
 }
 
+const defaultRenderRowPreview: Mandatory<
+  TableDraggableRowTrProps<RowData>['renderRowPreview']
+> = (row) => <PreviewTable row={row} />;
+
 export function TableDraggableRowTr<TData extends RowData>(
   props: TableDraggableRowTrProps<TData>,
 ) {
   const {
     trProps,
     row,
-    renderRowPreview = (row) => <PreviewTable row={row} />,
+    renderRowPreview = defaultRenderRowPreview as TableRowPreviewRenderer<TData>,
   } = props;
   const { instanceId } = useItemOrder();
   const isPreview = useIsPreviewTable();
@@ -137,7 +142,7 @@ export function TableDraggableRowTr<TData extends RowData>(
 
   useFlashRowEffect(row.id, tableRowRef);
 
-  const value = useMemo<DraggableRowContext>(() => {
+  const value = useMemo<DraggableRowContextValue>(() => {
     return {
       dragHandleRef,
       state,
@@ -146,9 +151,9 @@ export function TableDraggableRowTr<TData extends RowData>(
 
   return (
     <>
-      <draggableRowContext.Provider value={value}>
+      <DraggableRowContext value={value}>
         <tr {...trProps} ref={tableRowRef} />
-      </draggableRowContext.Provider>
+      </DraggableRowContext>
       {state.type === 'preview' &&
         createPortal(renderRowPreview(row), state.container)}
     </>

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

@@ -1,7 +1,7 @@
 import type { Edge } from '@zakodium/pdnd-esm';
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
-export type ReorderItemCallback = (args: {
+export type ReorderItemCallback = (options: {
   startIndex: number;
   indexOfTarget: number;
   closestEdgeOfTarget: Edge | null;
@@ -13,12 +13,12 @@ export interface ItemOrderContextValue {
   instanceId: symbol;
 }
 
-export const itemOrderContext = createContext<ItemOrderContextValue | null>(
+export const ItemOrderContext = createContext<ItemOrderContextValue | null>(
   null,
 );
 
 export function useItemOrder() {
-  const context = useContext(itemOrderContext);
+  const context = use(ItemOrderContext);
   if (!context) {
     throw new Error('useItemOrder must be used within a ListContextProvider');
   }

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

@@ -9,7 +9,7 @@ import type {
   ItemOrderContextValue,
   ReorderItemCallback,
 } from './item_order_context.js';
-import { itemOrderContext } from './item_order_context.js';
+import { ItemOrderContext } from './item_order_context.js';
 
 interface ItemOrderProviderProps<T extends RowData> {
   items: Array<Row<ReactScienceTableFeatures, T>>;
@@ -56,9 +56,5 @@ export function ItemOrderProvider<T extends RowData = RowData>(
     };
   }, [reorderItem, items, instanceId]);
 
-  return (
-    <itemOrderContext.Provider value={value}>
-      {children}
-    </itemOrderContext.Provider>
-  );
+  return <ItemOrderContext value={value}>{children}</ItemOrderContext>;
 }

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

@@ -18,16 +18,16 @@ import { useItemOrder } from './item_order_context.js';
  * Monitor drop events.
  * Check if they can be acted on to reorder items.
  * @param scrollElementRef The element to auto-scroll when dragging elements.
- * @param enabled Enable or disable the monitoring.
+ * @param isEnabled Enable or disable the monitoring.
  */
 export function useDropMonitor(
   scrollElementRef: RefObject<Element | null>,
-  enabled: boolean,
+  isEnabled: boolean,
 ) {
   const { reorderItem, items } = useItemOrder();
   const [, setFlashedRow] = useFlashedRowContext();
   useEffect(() => {
-    if (!enabled) {
+    if (!isEnabled) {
       return;
     }
 
@@ -75,5 +75,5 @@ export function useDropMonitor(
         element: scrollContainer,
       }),
     );
-  }, [items, reorderItem, scrollElementRef, setFlashedRow, enabled]);
+  }, [items, reorderItem, scrollElementRef, setFlashedRow, isEnabled]);
 }

package/src/components/table/table_body.tsx

@@ -4,7 +4,7 @@ import type { Row, RowData } from '@tanstack/react-table';
 import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import { notUndefined } from '@tanstack/react-virtual';
 import type { CSSProperties, ReactNode } from 'react';
-import { Fragment } from 'react';
+import { Fragment, useMemo } from 'react';
 
 import { TableDraggableRowTr } from './reorder_rows/index.js';
 import type { ReactScienceTableFeatures } from './table_features.js';
@@ -43,7 +43,6 @@ export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
     getTdProps,
     isReorderingEnabled,
     renderRowPreview,
-    renderRowTr = getDefaultRenderRowTr(isReorderingEnabled, renderRowPreview),
     virtualizer,
     virtualizeRows,
     emptyContent,
@@ -51,6 +50,13 @@ export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
     columns,
   } = props;
 
+  const renderRowTr = useMemo(
+    () =>
+      props.renderRowTr ??
+      getDefaultRenderRowTr(isReorderingEnabled, renderRowPreview),
+    [props.renderRowTr, isReorderingEnabled, renderRowPreview],
+  );
+
   if (virtualizeRows) {
     const virtualItems = virtualizer.getVirtualItems();
     const [before, after] =
@@ -128,9 +134,11 @@ interface EmptyRowProps {
   columns: number;
 }
 
+const defaultEmptyIcon = <Icon icon="eye-off" />;
+
 function EmptyRow(props: EmptyRowProps) {
   const {
-    emptyIcon = <Icon icon="eye-off" />,
+    emptyIcon = defaultEmptyIcon,
     emptyContent = 'No data',
     columns,
   } = props;
@@ -208,9 +216,15 @@ function getDefaultRenderRowTr<TData extends RowData>(
 ): TableRowTrRenderer<TData> {
   if (isReorderingEnabled) {
     return getDefaultRenderDraggableRowTr(renderRowPreview);
-  } else {
-    return (trProps, row) => <TableRowTr trProps={{ ...trProps }} row={row} />;
   }
+  return defaultRenderRowTr;
+}
+
+function defaultRenderRowTr<TData extends RowData>(
+  trProps: TableRowTrRenderProps,
+  row: Row<ReactScienceTableFeatures, TData>,
+) {
+  return <TableRowTr trProps={trProps} row={row} />;
 }
 
 function getDefaultRenderDraggableRowTr<TData extends RowData>(

package/src/components/table/table_features.ts

@@ -2,12 +2,12 @@ import {
   columnVisibilityFeature,
   createSortedRowModel,
   rowSortingFeature,
-  sortFn_alphanumeric as sortFnAlphanumeric,
-  sortFn_alphanumericCaseSensitive as sortFnAlphanumericCaseSensitive,
-  sortFn_basic as sortFnBasic,
-  sortFn_datetime as sortFnDatetime,
-  sortFn_text as sortFnText,
-  sortFn_textCaseSensitive as sortFnTextCaseSensitive,
+  sortFn_alphanumeric as sortFunctionAlphanumeric,
+  sortFn_alphanumericCaseSensitive as sortFunctionAlphanumericCaseSensitive,
+  sortFn_basic as sortFunctionBasic,
+  sortFn_datetime as sortFunctionDatetime,
+  sortFn_text as sortFunctionText,
+  sortFn_textCaseSensitive as sortFunctionTextCaseSensitive,
   tableFeatures,
 } from '@tanstack/react-table';
 
@@ -16,12 +16,12 @@ export const reactScienceTableFeatures = tableFeatures({
   rowSortingFeature,
   sortedRowModel: createSortedRowModel(),
   sortFns: {
-    alphanumeric: sortFnAlphanumeric,
-    alphanumericCaseSensitive: sortFnAlphanumericCaseSensitive,
-    basic: sortFnBasic,
-    datetime: sortFnDatetime,
-    text: sortFnText,
-    textCaseSensitive: sortFnTextCaseSensitive,
+    alphanumeric: sortFunctionAlphanumeric,
+    alphanumericCaseSensitive: sortFunctionAlphanumericCaseSensitive,
+    basic: sortFunctionBasic,
+    datetime: sortFunctionDatetime,
+    text: sortFunctionText,
+    textCaseSensitive: sortFunctionTextCaseSensitive,
   },
 });