react-science 16.0.0 → 16.1.0

package/src/components/table/table_utils.ts

@@ -18,7 +18,7 @@ export function createTableColumnHelper<TData extends RowData>() {
   return createColumnHelper<TData>();
 }
 
-export interface TableRowTrProps {
+export interface TableRowTrRenderProps {
   className: string;
   style: CSSProperties;
   children: ReactNode;
@@ -27,7 +27,7 @@ export interface TableRowTrProps {
 }
 
 export type TableRowTrRenderer<TData extends RowData> = (
-  trProps: TableRowTrProps,
+  trProps: TableRowTrRenderProps,
   row: Row<TData>,
 ) => ReactNode;
 
@@ -38,10 +38,26 @@ export type TableRowPreviewRenderer<TData extends RowData> = (
   row: Row<TData>,
 ) => ReactNode;
 
+interface FlashRowOptions {
+  /**
+   * Whether to flash the row when scrolling into view.
+   * The option is only supported when there is no scroll animation, i.e. `behavior` is not `smooth`.
+   */
+  flashRow?: boolean;
+}
+
+export type TableScrollIntoViewOptions = ScrollIntoViewOptions &
+  FlashRowOptions;
+export type TableVirtualScrollIntoViewOptions = ScrollToOptions &
+  FlashRowOptions;
+
 export interface VirtualScroller {
-  scrollIntoView: (id: string, options?: ScrollToOptions) => void;
+  scrollIntoView: (
+    id: string,
+    options?: TableVirtualScrollIntoViewOptions,
+  ) => void;
 }
 
 export interface Scroller {
-  scrollIntoView: (id: string, options?: ScrollIntoViewOptions) => void;
+  scrollIntoView: (id: string, options?: TableScrollIntoViewOptions) => void;
 }

package/src/components/table/use_table_scroll.ts

@@ -1,26 +1,46 @@
 import type { RowData, Table } from '@tanstack/react-table';
-import type {
-  ScrollToOptions,
-  ScrollToOptions as VirtualScrollToOptions,
-  Virtualizer,
-} from '@tanstack/react-virtual';
-import { useImperativeHandle, useRef } from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
+import type { RefObject } from 'react';
+import { useImperativeHandle } from 'react';
 
+import { useFlashedRowContext } from './flash_row/flashed_row_context.js';
 import type { TableProps } from './table_root.js';
+import type { TableVirtualScrollIntoViewOptions } from './table_utils.js';
 
-export function useTableScroll<TData extends RowData>(
-  tableProps: TableProps<TData>,
-  table: Table<TData>,
-  virtualizer: Virtualizer<HTMLDivElement, Element>,
-) {
-  const tableRef = useRef<HTMLTableElement>(null);
-  const { scrollToRowRef, virtualizeRows } = tableProps;
+export function useTableScroll<TData extends RowData>(options: {
+  /**
+   * The user provided ref to attach the scroll callbacks to.
+   */
+  scrollToRowRef: TableProps<TData>['scrollToRowRef'];
+  /**
+   * Whether the table rows are virtualized.
+   */
+  virtualizeRows: TableProps<TData>['virtualizeRows'];
+  /**
+   * A ref to the effective scroll container.
+   */
+  scrollRef: RefObject<Element>;
+  /*
+  Tanstack table instance.
+   */
+  table: Table<TData>;
+  /**
+   * Tanstack virtualizer instance.
+   */
+  virtualizer: Virtualizer<HTMLDivElement, Element>;
+}) {
+  const [, setFlashedRow] = useFlashedRowContext();
+  const { scrollToRowRef, virtualizeRows, scrollRef, table, virtualizer } =
+    options;
 
   // @ts-expect-error We cannot call the hook conditionally to satisfy the type checker
   useImperativeHandle(scrollToRowRef, () => {
     if (virtualizeRows) {
       return {
-        scrollIntoView(id: string, options?: VirtualScrollToOptions) {
+        scrollIntoView(
+          id: string,
+          options?: TableVirtualScrollIntoViewOptions,
+        ) {
           const sortedRows = table.getRowModel().rows; // Get sorted rows
           const rowIndex = sortedRows.findIndex((row) => row.id === id); // Find the index of the row by ID
           if (rowIndex === -1) {
@@ -29,14 +49,21 @@ export function useTableScroll<TData extends RowData>(
             console.warn(
               `Could not scroll to row with ID ${id}, the row does not exist`,
             );
+          } else {
+            virtualizer.scrollToIndex(rowIndex, options);
+            if (options?.flashRow && options.behavior !== 'smooth') {
+              setFlashedRow(sortedRows[rowIndex].id);
+            }
           }
-          virtualizer.scrollToIndex(rowIndex, options);
         },
       };
     } else {
       return {
-        scrollIntoView(id: string, options?: ScrollToOptions) {
-          const element = tableRef.current?.querySelector(
+        scrollIntoView(
+          id: string,
+          options?: TableVirtualScrollIntoViewOptions,
+        ) {
+          const element = scrollRef.current?.querySelector(
             `tr[data-row-id="${id}"]`,
           );
           if (!element) {
@@ -46,10 +73,11 @@ export function useTableScroll<TData extends RowData>(
             );
           }
           element?.scrollIntoView(options);
+          if (options?.flashRow && options.behavior !== 'smooth') {
+            setFlashedRow(id);
+          }
         },
       };
     }
-  }, [virtualizeRows, table, virtualizer]);
-
-  return tableRef;
+  }, [virtualizeRows, scrollRef, table, virtualizer, setFlashedRow]);
 }

package/lib/components/table/reorder_rows/dropped_item_context.d.ts

@@ -1,3 +0,0 @@
-export declare const droppedItemContext: import("react").Context<[string | undefined, import("react").Dispatch<import("react").SetStateAction<string | undefined>>] | null>;
-export declare function useDroppedItemContext(): [string | undefined, import("react").Dispatch<import("react").SetStateAction<string | undefined>>];
-//# sourceMappingURL=dropped_item_context.d.ts.map

package/lib/components/table/reorder_rows/dropped_item_context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropped_item_context.d.ts","sourceRoot":"","sources":["../../../../src/components/table/reorder_rows/dropped_item_context.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,kBAAkB,oIAE9B,CAAC;AAEF,wBAAgB,qBAAqB,uGAUpC"}

package/lib/components/table/reorder_rows/dropped_item_context.js

@@ -1,10 +0,0 @@
-import { createContext, useContext } from 'react';
-export const droppedItemContext = createContext(null);
-export function useDroppedItemContext() {
-    const context = useContext(droppedItemContext);
-    if (!context) {
-        throw new Error('useDroppedItemId must be used within a DroppedItemProvider');
-    }
-    return context;
-}
-//# sourceMappingURL=dropped_item_context.js.map

package/lib/components/table/reorder_rows/dropped_item_context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropped_item_context.js","sourceRoot":"","sources":["../../../../src/components/table/reorder_rows/dropped_item_context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAOlD,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAC7C,IAAI,CACL,CAAC;AAEF,MAAM,UAAU,qBAAqB;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAE/C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,4DAA4D,CAC7D,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/lib/components/table/reorder_rows/dropped_item_provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropped_item_provider.d.ts","sourceRoot":"","sources":["../../../../src/components/table/reorder_rows/dropped_item_provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAOjE"}

package/lib/components/table/reorder_rows/dropped_item_provider.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { droppedItemContext } from './dropped_item_context.js';
-export function DroppedItemProvider(props) {
-    const value = useState();
-    return (_jsx(droppedItemContext.Provider, { value: value, children: props.children }));
-}
-//# sourceMappingURL=dropped_item_provider.js.map

package/lib/components/table/reorder_rows/dropped_item_provider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropped_item_provider.js","sourceRoot":"","sources":["../../../../src/components/table/reorder_rows/dropped_item_provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,UAAU,mBAAmB,CAAC,KAA8B;IAChE,MAAM,KAAK,GAAG,QAAQ,EAAU,CAAC;IACjC,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACtC,KAAK,CAAC,QAAQ,GACa,CAC/B,CAAC;AACJ,CAAC"}

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

@@ -1,23 +0,0 @@
-import type { useState } from 'react';
-import { createContext, useContext } from 'react';
-
-/**
- * ID of the dropped item
- */
-type DroppedItemContextValue = ReturnType<typeof useState<string>>;
-
-export const droppedItemContext = createContext<DroppedItemContextValue | null>(
-  null,
-);
-
-export function useDroppedItemContext() {
-  const context = useContext(droppedItemContext);
-
-  if (!context) {
-    throw new Error(
-      'useDroppedItemId must be used within a DroppedItemProvider',
-    );
-  }
-
-  return context;
-}

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

@@ -1,13 +0,0 @@
-import { useState } from 'react';
-import type { ReactNode } from 'react';
-
-import { droppedItemContext } from './dropped_item_context.js';
-
-export function DroppedItemProvider(props: { children: ReactNode }) {
-  const value = useState<string>();
-  return (
-    <droppedItemContext.Provider value={value}>
-      {props.children}
-    </droppedItemContext.Provider>
-  );
-}