react-science 15.0.0 → 16.1.0

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

@@ -10,20 +10,21 @@ import {
   attachClosestEdge,
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { Colors } from '@blueprintjs/core';
 import type { Row, RowData } from '@tanstack/react-table';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { assert } from '../../utils/index.js';
+import { useFlashRowEffect } from '../flash_row/use_flash_row_effect.js';
+import { PreviewTable } from '../preview_table.js';
+import { useIsPreviewTable } from '../preview_table_context.js';
 import type {
   TableRowPreviewRenderer,
-  TableRowTrProps,
+  TableRowTrRenderProps,
 } from '../table_utils.js';
 
 import type { DraggableRowContext } from './draggable_row_context.js';
 import { draggableRowContext } from './draggable_row_context.js';
-import { useDroppedItemContext } from './dropped_item_context.js';
 import type { DraggableItemState } from './item_data.js';
 import { getItemData, isItemData } from './item_data.js';
 import { useItemOrder } from './item_order_context.js';
@@ -32,7 +33,7 @@ export interface TableDraggableRowTrProps<TData extends RowData> {
   /**
    * Props to be spread on the `tr` element.
    */
-  trProps: TableRowTrProps;
+  trProps: TableRowTrRenderProps;
   /**
    * Row data.
    */
@@ -40,21 +41,29 @@ export interface TableDraggableRowTrProps<TData extends RowData> {
   /**
    * Preview of the row being dragged.
    */
-  renderRowPreview: TableRowPreviewRenderer<TData>;
+  renderRowPreview?: TableRowPreviewRenderer<TData>;
 }
 
 export function TableDraggableRowTr<TData extends RowData>(
   props: TableDraggableRowTrProps<TData>,
 ) {
-  const { trProps, row, renderRowPreview } = props;
+  const {
+    trProps,
+    row,
+    renderRowPreview = (row) => <PreviewTable row={row} />,
+  } = props;
   const { instanceId } = useItemOrder();
-  const innerRef = useRef<HTMLTableRowElement>(null);
+  const isPreview = useIsPreviewTable();
+  const tableRowRef = useRef<HTMLTableRowElement>(null);
   const [state, setState] = useState<DraggableItemState>(idleState);
-  const [droppedItemId, setDroppedItemId] = useDroppedItemContext();
 
   const dragHandleRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
-    const trElement = innerRef.current;
+    if (isPreview) {
+      // No drag and drop in preview
+      return;
+    }
+    const trElement = tableRowRef.current;
     assert(trElement, 'tr ref is null');
     assert(dragHandleRef.current, 'dragHandleRef is null');
 
@@ -125,14 +134,9 @@ export function TableDraggableRowTr<TData extends RowData>(
         },
       }),
     );
-  }, [row, instanceId]);
+  }, [row, instanceId, isPreview]);
 
-  useEffect(() => {
-    if (droppedItemId === row.id && innerRef.current) {
-      triggerPostFlash(innerRef.current);
-      setDroppedItemId(undefined);
-    }
-  }, [droppedItemId, row.id, setDroppedItemId]);
+  useFlashRowEffect(row.id, tableRowRef);
 
   const value = useMemo<DraggableRowContext>(() => {
     return {
@@ -144,7 +148,7 @@ export function TableDraggableRowTr<TData extends RowData>(
   return (
     <>
       <draggableRowContext.Provider value={value}>
-        <tr {...trProps} ref={innerRef} />
+        <tr {...trProps} ref={tableRowRef} />
       </draggableRowContext.Provider>
       {state.type === 'preview' &&
         createPortal(renderRowPreview(row), state.container)}
@@ -154,13 +158,3 @@ export function TableDraggableRowTr<TData extends RowData>(
 
 const idleState: DraggableItemState = { type: 'idle' };
 const draggingState: DraggableItemState = { type: 'dragging' };
-
-function triggerPostFlash(element: HTMLElement) {
-  element.animate(
-    [{ backgroundColor: Colors.BLUE5, opacity: 0.5 }, { opacity: 0.5 }],
-    {
-      duration: 250,
-      iterations: 1,
-    },
-  );
-}

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

@@ -1,18 +1,39 @@
+import type { ButtonProps } from '@blueprintjs/core';
 import { Button } from '@blueprintjs/core';
 
+import { useIsPreviewTable } from '../preview_table_context.js';
+
 import { useTableDraggableRowContext } from './draggable_row_context.js';
 import { TableDropIndicator } from './drop_indicator.js';
 
-export function TableDragRowHandler() {
+export type TableDragRowHandlerProps = ButtonProps;
+
+export function TableDragRowHandler(props: TableDragRowHandlerProps) {
+  const isInPreview = useIsPreviewTable();
+  if (isInPreview) {
+    // Do not render the drag handler in the preview table.
+    return null;
+  }
+  return <InternalTableDragRowHandler {...props} />;
+}
+
+function InternalTableDragRowHandler(props: TableDragRowHandlerProps) {
+  const {
+    icon = 'drag-handle-vertical',
+    variant = 'minimal',
+    style,
+    ...otherProps
+  } = props;
   const { dragHandleRef, state } = useTableDraggableRowContext();
   return (
     <>
       <Button
-        icon="drag-handle-horizontal"
         type="button"
+        icon={icon}
         ref={dragHandleRef}
-        variant="minimal"
-        style={{ cursor: 'grab' }}
+        variant={variant}
+        {...otherProps}
+        style={{ cursor: 'grab', ...style }}
       />
       {state?.type === 'is-over' && state.closestEdge && (
         <TableDropIndicator edge={state.closestEdge} />

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

@@ -7,8 +7,8 @@ import type { RefObject } from 'react';
 import { useEffect } from 'react';
 
 import { assert } from '../../utils/index.js';
+import { useFlashedRowContext } from '../flash_row/flashed_row_context.js';
 
-import { useDroppedItemContext } from './dropped_item_context.js';
 import { isItemData } from './item_data.js';
 import { useItemOrder } from './item_order_context.js';
 
@@ -23,7 +23,7 @@ export function useDropMonitor(
   enabled: boolean,
 ) {
   const { reorderItem, items } = useItemOrder();
-  const [, setDroppedItem] = useDroppedItemContext();
+  const [, setFlashedRow] = useFlashedRowContext();
   useEffect(() => {
     const scrollContainer = scrollElementRef.current;
     assert(scrollContainer, 'Missing scroll container ref');
@@ -61,7 +61,7 @@ export function useDropMonitor(
               indexOfTarget,
               closestEdgeOfTarget,
             });
-            setDroppedItem(sourceData.id);
+            setFlashedRow(sourceData.id);
           },
         }),
         autoScrollForElements({
@@ -70,5 +70,5 @@ export function useDropMonitor(
         }),
       );
     }
-  }, [items, reorderItem, scrollElementRef, setDroppedItem, enabled]);
+  }, [items, reorderItem, scrollElementRef, setFlashedRow, enabled]);
 }

package/src/components/table/table_body.tsx

@@ -1,4 +1,3 @@
-import { Tag } from '@blueprintjs/core';
 import type { Row, RowData } from '@tanstack/react-table';
 import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import { notUndefined } from '@tanstack/react-virtual';
@@ -6,12 +5,13 @@ import type { ReactNode } from 'react';
 import { Fragment } from 'react';
 
 import { TableDraggableRowTr } from './reorder_rows/index.js';
+import { TableRowTr } from './table_row.js';
 import { TableRowCell } from './table_row_cell.js';
 import type {
   GetTdProps,
   TableRowPreviewRenderer,
-  TableRowTrProps,
   TableRowTrRenderer,
+  TableRowTrRenderProps,
 } from './table_utils.js';
 
 interface TableBodyProps<TData extends RowData> {
@@ -111,7 +111,7 @@ function getTrRenderProps<TData extends RowData>(
   row: Row<TData>,
   getTdProps: GetTdProps<TData> | undefined,
   virtualItem?: RenderRowVirtualItem,
-): TableRowTrProps {
+): TableRowTrRenderProps {
   const index = virtualItem ? virtualItem.index : row.index;
 
   return {
@@ -142,8 +142,8 @@ function getDefaultRenderRowTr(
   }
 }
 
-const defaultRenderRowTr: TableRowTrRenderer<unknown> = (trProps) => (
-  <tr {...trProps} />
+const defaultRenderRowTr: TableRowTrRenderer<unknown> = (trProps, row) => (
+  <TableRowTr trProps={{ ...trProps }} row={row} />
 );
 
 function getDefaultRenderDraggableRowTr(
@@ -153,9 +153,7 @@ function getDefaultRenderDraggableRowTr(
     <TableDraggableRowTr
       trProps={trProps}
       row={row}
-      renderRowPreview={
-        renderRowPreview ?? ((row) => <Tag>Row {row.index + 1}</Tag>)
-      }
+      renderRowPreview={renderRowPreview}
     />
   );
 }

package/src/components/table/table_root.tsx

@@ -1,21 +1,29 @@
 import { HTMLTable } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import type { Header, RowData, TableOptions } from '@tanstack/react-table';
+import type {
+  Header,
+  RowData,
+  Table as TanstackTable,
+  TableOptions,
+} from '@tanstack/react-table';
 import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import type { ReactNode, RefObject, TableHTMLAttributes } from 'react';
-import { useEffect, useRef } from 'react';
+import type { RefObject, TableHTMLAttributes } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import { match } from 'ts-pattern';
 
-import { DroppedItemProvider } from './reorder_rows/dropped_item_provider.js';
+import { FlashedRowProvider } from './flash_row/flashed_row_provider.js';
+import type { PreviewTablePropsContextValue } from './preview_table_context.js';
+import { PreviewTablePropsContextProvider } from './preview_table_context.js';
 import { ItemOrderProvider } from './reorder_rows/item_order_provider.js';
-import { useDropMonitor } from './reorder_rows/use_drop_monitor.js';
 import { TableBody } from './table_body.js';
 import { TableHeader } from './table_header.js';
 import type { HeaderCellRenderer } from './table_header_cell.js';
+import { ScrollContainer } from './table_scroll_container.js';
 import type {
   GetTdProps,
   Scroller,
@@ -25,33 +33,40 @@ import type {
   VirtualScroller,
 } from './table_utils.js';
 import { useTableColumns } from './use_table_columns.js';
-import { useTableScroll } from './use_table_scroll.js';
+
+const nonForwardedProps = new Set<keyof TableProps<unknown>>([
+  'striped',
+  'stickyHeader',
+  'noHeader',
+]) as Set<string>;
 
 const CustomHTMLTable = styled(HTMLTable, {
-  shouldForwardProp: (prop) => prop !== 'striped' && prop !== 'stickyHeader',
-})<{ stickyHeader: boolean }>`
+  shouldForwardProp: (prop) => !nonForwardedProps.has(prop),
+})<{ stickyHeader: boolean; noHeader: boolean }>`
   /* When using a sticky header, ensure that the borders are located below the last header instead of above the first row. */
-  ${(props) => {
-    if (!props.stickyHeader) return '';
-
-    return `
+  ${(props) =>
+    match(props)
+      .with({ stickyHeader: false, noHeader: false }, () => '')
+      .otherwise(
+        (props) => `
       thead tr:last-child {
         box-shadow: inset 0 -1px #11141826;
       }
     
       tbody tr:first-of-type td {
-        box-shadow: ${
-          props.bordered
-            ? 'inset 1px 0 0 0 #11141826 !important'
-            : 'none !important'
-        };
+        box-shadow: ${match(props)
+          .with(
+            { bordered: true },
+            () => 'inset 1px 0 0 0 #11141826 !important',
+          )
+          .otherwise(() => 'none !important')};
       }
     
       tbody tr:first-of-type td:first-of-type {
         box-shadow: none !important;
       }
-    `;
-  }}
+    `,
+      )}
 
   /* Blueprint's HTMLTable \`striped\` prop's implementation is based on nth-child odd / even */
   /* We cannot use that with virtualization, so we override its implementation here. */
@@ -88,6 +103,10 @@ interface TableBaseProps<TData extends RowData> {
    * Alternate between gray and white background for each row.
    */
   striped?: boolean;
+  /**
+   * Do not render the table header.
+   */
+  noHeader?: boolean;
   /**
    * Enable header rows which stick to the top of the table.
    */
@@ -134,7 +153,7 @@ interface TableBaseProps<TData extends RowData> {
    * A ref which will be set with a callback to scroll to a row in the
    * table, specified by the row's ID.
    */
-  scrollToRowRef?: RefObject<VirtualScroller | ScrollToOptions | undefined>;
+  scrollToRowRef?: RefObject<VirtualScroller | Scroller | undefined>;
 
   /**
    * An accessor which should return a unique identifier for the row.
@@ -199,6 +218,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
     compact = false,
     interactive = false,
     striped = false,
+    noHeader = false,
     stickyHeader = false,
 
     reactTable,
@@ -212,9 +232,11 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
     getRowId,
     onRowOrderChanged,
     renderRowPreview,
+
+    scrollToRowRef,
   } = props;
   const isReorderingEnabled = !!onRowOrderChanged;
-  const scrollElementRef = useRef<HTMLDivElement>(null);
+  const virtualScrollElementRef = useRef<HTMLDivElement>(null);
   const columnDefs = useTableColumns(columns);
   const table = useReactTable<TData>({
     ...reactTable,
@@ -228,13 +250,13 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
   const tanstackVirtualizer = useVirtualizer({
     enabled: virtualizeRows,
     count: data.length,
-    getScrollElement: () => scrollElementRef.current,
+    getScrollElement: () => virtualScrollElementRef.current,
     estimateSize:
       (props.virtualizeRows && props.estimatedRowHeight) || (() => 0),
     overscan: 5,
   });
 
-  const tableRef = useTableScroll(props, table, tanstackVirtualizer);
+  const tableRef = useRef<HTMLTableElement>(null);
 
   // Make the table component compatible with styled components libraries.
   let finalClassName: string | undefined;
@@ -251,113 +273,80 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
     props as TableProps<unknown>,
     tableHeaders as Array<Header<unknown, unknown>>,
   );
+
+  const tablePreviewProps = useMemo<PreviewTablePropsContextValue<TData>>(
+    () => ({
+      className,
+      getTdProps,
+      renderRowTr,
+      columns,
+      compact,
+    }),
+    [className, getTdProps, renderRowTr, columns, compact],
+  );
   return (
-    <DroppedItemProvider>
-      <ItemOrderProvider
-        items={table.getRowModel().rows}
-        onOrderChanged={(items) => {
-          onRowOrderChanged?.(items.map((item) => item.original));
-        }}
+    <FlashedRowProvider>
+      <PreviewTablePropsContextProvider
+        value={tablePreviewProps as PreviewTablePropsContextValue<unknown>}
       >
-        <Container
-          virtualizeRows={virtualizeRows}
-          scrollRef={
-            virtualizeRows
-              ? scrollElementRef
-              : props.scrollableElementRef || tableRef
-          }
-          isReorderingEnabled={isReorderingEnabled}
+        <ItemOrderProvider
+          items={table.getRowModel().rows}
+          onOrderChanged={(items) => {
+            onRowOrderChanged?.(items.map((item) => item.original));
+          }}
         >
-          <CustomHTMLTable
-            ref={tableRef}
-            bordered={bordered}
-            compact={compact}
-            interactive={interactive}
-            striped={striped}
-            stickyHeader={stickyHeader}
-            {...tableProps}
-            className={finalClassName}
+          <ScrollContainer
+            virtualizeRows={virtualizeRows}
+            virtualizer={tanstackVirtualizer}
+            table={table as TanstackTable<unknown>}
+            scrollRef={
+              virtualizeRows
+                ? // When virtualized, ScrollContainer will render a scrollable element associated to this ref.
+                  virtualScrollElementRef
+                : // When not virtualized, ScrollContainer does not render a container, only its children,
+                  // And the scrollable element is provided by the user or by default, the <table> element.
+                  props.scrollableElementRef || tableRef
+            }
+            scrollToRowRef={scrollToRowRef}
+            isReorderingEnabled={isReorderingEnabled}
           >
-            <TableHeader
-              sticky={stickyHeader}
-              headers={tableHeaders}
-              renderHeaderCell={renderHeaderCell}
-            />
-            <TableBody
-              rows={table.getRowModel().rows}
-              renderRowTr={renderRowTr}
-              getTdProps={getTdProps}
-              virtualizer={tanstackVirtualizer}
-              virtualizeRows={virtualizeRows}
-              renderRowPreview={renderRowPreview}
-              isReorderingEnabled={isReorderingEnabled}
-            />
-          </CustomHTMLTable>
-        </Container>
-      </ItemOrderProvider>
-    </DroppedItemProvider>
-  );
-}
-
-const ScrollRefDiv = styled.div`
-  height: 100%;
-  overflow: auto;
-`;
-
-interface ContainerProps {
-  virtualizeRows?: boolean;
-  children: ReactNode;
-  scrollRef: RefObject<Element>;
-  isReorderingEnabled: boolean;
-}
-
-function Container(props: ContainerProps) {
-  const { virtualizeRows, scrollRef, isReorderingEnabled, children } = props;
-  if (virtualizeRows) {
-    return (
-      <ContainerVirtual
-        scrollElementRef={scrollRef}
-        enabled={isReorderingEnabled}
-      >
-        {children}
-      </ContainerVirtual>
-    );
-  }
-  return (
-    <ContainerTable scrollElementRef={scrollRef} enabled={isReorderingEnabled}>
-      {children}
-    </ContainerTable>
+            <CustomHTMLTable
+              // Props which are not forwarded to the HTMLTable component
+              striped={striped}
+              noHeader={noHeader}
+              stickyHeader={stickyHeader}
+              // Props which are forwarded to the HTMLTable component
+              ref={tableRef}
+              bordered={bordered}
+              compact={compact}
+              interactive={interactive}
+              {...tableProps}
+              className={finalClassName}
+            >
+              {!noHeader && (
+                <TableHeader
+                  sticky={stickyHeader}
+                  headers={tableHeaders}
+                  renderHeaderCell={renderHeaderCell}
+                />
+              )}
+              <TableBody
+                rows={table.getRowModel().rows}
+                renderRowTr={renderRowTr}
+                getTdProps={getTdProps}
+                virtualizer={tanstackVirtualizer}
+                virtualizeRows={virtualizeRows}
+                renderRowPreview={renderRowPreview}
+                isReorderingEnabled={isReorderingEnabled}
+              />
+            </CustomHTMLTable>
+          </ScrollContainer>
+        </ItemOrderProvider>
+      </PreviewTablePropsContextProvider>
+    </FlashedRowProvider>
   );
 }
 
-interface ContainerWithReorderingProps {
-  scrollElementRef: RefObject<Element>;
-  enabled: boolean;
-  children: ReactNode;
-}
-
-function ContainerVirtual(props: ContainerWithReorderingProps) {
-  const { scrollElementRef, enabled, children } = props;
-  useDropMonitor(scrollElementRef, enabled);
-
-  return (
-    <ScrollRefDiv ref={scrollElementRef as RefObject<HTMLDivElement>}>
-      {children}
-    </ScrollRefDiv>
-  );
-}
-
-interface ContainerTableProps {
-  scrollElementRef: RefObject<Element>;
-  enabled: boolean;
-  children: ReactNode;
-}
-function ContainerTable(props: ContainerTableProps) {
-  const { scrollElementRef, enabled, children } = props;
-  useDropMonitor(scrollElementRef, enabled);
-  return <>{children}</>;
-}
-
 function useCheckProps(
   props: TableProps<unknown>,
   headers: Array<Header<unknown, unknown>>,

package/src/components/table/table_row.tsx

@@ -0,0 +1,17 @@
+import type { Row } from '@tanstack/react-table';
+import type { JSX } from 'react';
+import { useRef } from 'react';
+
+import { useFlashRowEffect } from './flash_row/use_flash_row_effect.js';
+
+export interface TableRowTrProps {
+  row: Row<unknown>;
+  trProps: JSX.IntrinsicElements['tr'];
+}
+
+export function TableRowTr(props: TableRowTrProps) {
+  const { row, trProps } = props;
+  const tableRowRef = useRef<HTMLTableRowElement>(null);
+  useFlashRowEffect(row.id, tableRowRef);
+  return <tr ref={tableRowRef} {...trProps} />;
+}

package/src/components/table/table_scroll_container.tsx

@@ -0,0 +1,103 @@
+import styled from '@emotion/styled';
+import type { Virtualizer } from '@tanstack/react-virtual';
+import type { Table as TanstackTable } from '@tanstack/table-core';
+import type { ReactNode, RefObject } from 'react';
+
+import { useDropMonitor } from './reorder_rows/use_drop_monitor.js';
+import type { TableProps } from './table_root.js';
+import { useTableScroll } from './use_table_scroll.js';
+
+const ScrollRefDiv = styled.div`
+  height: 100%;
+  overflow: auto;
+`;
+
+interface ScrollContainerProps {
+  /**
+   * Whether the table rows are virtualized.
+   */
+  virtualizeRows?: boolean;
+  /**
+   * The tanstack virtualizer.
+   */
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
+  /**
+   * The tanstack table.
+   */
+  table: TanstackTable<unknown>;
+  /**
+   * A ref to the effective scroll container.
+   */
+  scrollRef: RefObject<Element>;
+  /**
+   * The user provided ref to attach the scroll callbacks to.
+   * It is set by the ScrollContainer component if the table is virtualized.
+   * It is an external ref when the table is not virtualized.
+   */
+  scrollToRowRef?: TableProps<unknown>['scrollToRowRef'];
+  isReorderingEnabled: boolean;
+  children: ReactNode;
+}
+
+export function ScrollContainer(props: ScrollContainerProps) {
+  const {
+    virtualizeRows,
+    table,
+    virtualizer,
+    scrollRef,
+    scrollToRowRef,
+    isReorderingEnabled,
+    children,
+  } = props;
+  useTableScroll({
+    virtualizeRows,
+    table,
+    virtualizer,
+    scrollRef,
+    scrollToRowRef,
+  });
+  if (virtualizeRows) {
+    return (
+      <ContainerVirtual
+        scrollElementRef={scrollRef}
+        isReorderingEnabled={isReorderingEnabled}
+      >
+        {children}
+      </ContainerVirtual>
+    );
+  }
+  return (
+    <NoContainer scrollElementRef={scrollRef} enabled={isReorderingEnabled}>
+      {children}
+    </NoContainer>
+  );
+}
+
+interface ContainerWithReorderingProps {
+  scrollElementRef: RefObject<Element>;
+  isReorderingEnabled: boolean;
+  children: ReactNode;
+}
+
+function ContainerVirtual(props: ContainerWithReorderingProps) {
+  const { scrollElementRef, isReorderingEnabled, children } = props;
+  useDropMonitor(scrollElementRef, isReorderingEnabled);
+
+  return (
+    <ScrollRefDiv ref={scrollElementRef as RefObject<HTMLDivElement>}>
+      {children}
+    </ScrollRefDiv>
+  );
+}
+
+interface NoContainerProps {
+  scrollElementRef: RefObject<Element>;
+  enabled: boolean;
+  children: ReactNode;
+}
+
+function NoContainer(props: NoContainerProps) {
+  const { scrollElementRef, enabled, children } = props;
+  useDropMonitor(scrollElementRef, enabled);
+  return <>{children}</>;
+}