feat: support custom scroll container

Author: Raubzeug

src/ReactUnipika/ReactUnipika.tsx

@@ -26,6 +26,8 @@ export interface ReactUnipikaProps {
     initiallyCollapsed?: boolean;
     caseInsensitiveSearch?: boolean;
     renderError?: (error: unknown) => React.ReactNode;
+    scrollContainerRef?: React.RefObject<Element | null>;
+    withScrollElement?: boolean;
 }
 
 const defaultUnipikaSettings = {
@@ -53,6 +55,8 @@ export function ReactUnipika({
     initiallyCollapsed,
     caseInsensitiveSearch,
     renderError,
+    scrollContainerRef,
+    withScrollElement,
 }: ReactUnipikaProps) {
     const {convertedValue, error} = React.useMemo(() => {
         try {
@@ -117,6 +121,8 @@ export function ReactUnipika({
                     showContainerSize={showContainerSize}
                     initiallyCollapsed={initiallyCollapsed}
                     caseInsensitiveSearch={caseInsensitiveSearch}
+                    scrollContainerRef={scrollContainerRef}
+                    withScrollElement={withScrollElement}
                 />
             ) : (
                 <pre

src/ReactUnipika/__snapshots__/ReactUnipika.visual.test.tsx-snapshots/ReactUnipika-with-scroll-container-dark-chromium-1-chromium-linux.png

@@ -79,3 +79,21 @@ export const WithError: StoryObj<ReactUnipikaProps> = {
         },
     },
 };
+
+function WithScrollContainerComponent() {
+    const scrollContainerRef = React.useRef<HTMLDivElement>(null);
+    return (
+        <div
+            style={{height: 300, overflow: 'auto', border: '1px solid var(--g-color-line-generic)'}}
+            ref={scrollContainerRef}
+        >
+            <ReactUnipika value={data} scrollContainerRef={scrollContainerRef} withScrollElement />
+        </div>
+    );
+}
+
+export const WithScrollContainer: StoryObj<ReactUnipikaProps> = {
+    render() {
+        return <WithScrollContainerComponent />;
+    },
+};

src/ReactUnipika/__snapshots__/ReactUnipika.visual.test.tsx-snapshots/ReactUnipika-with-scroll-container-dark-webkit-1-webkit-linux.png

@@ -177,3 +177,9 @@ test('ReactUnipika: with error', async ({mount, expectScreenshot, page}) => {
 
     await expectScreenshot({component: page});
 });
+
+test('ReactUnipika:with scroll container', async ({mount, expectScreenshot, page}) => {
+    await mount(<Stories.WithScrollContainer />, {width: 1280});
+
+    await expectScreenshot({component: page});
+});

src/ReactUnipika/__snapshots__/ReactUnipika.visual.test.tsx-snapshots/ReactUnipika-with-scroll-container-light-chromium-1-chromium-linux.png

@@ -42,6 +42,8 @@ interface Props {
     showContainerSize?: boolean;
     initiallyCollapsed?: boolean;
     caseInsensitiveSearch?: boolean;
+    scrollContainerRef?: React.RefObject<Element | null>;
+    withScrollElement?: boolean;
 }
 
 interface State {
@@ -208,7 +210,8 @@ export class StructuredYson extends React.PureComponent<Props, State> {
             settings,
             filter,
         } = this.state;
-        const {collapseIconType, showContainerSize} = this.props;
+        const {collapseIconType, showContainerSize, scrollContainerRef, withScrollElement} =
+            this.props;
 
         return (
             <Table
@@ -220,6 +223,8 @@ export class StructuredYson extends React.PureComponent<Props, State> {
                 onToggleCollapse={this.onTogglePathCollapse}
                 onShowFullText={this.onShowFullText}
                 scrollToRef={this.tableRef}
+                scrollContainerRef={scrollContainerRef}
+                withScrollElement={withScrollElement}
                 collapseIconType={collapseIconType}
                 showContainerSize={showContainerSize}
             />

src/ReactUnipika/__snapshots__/ReactUnipika.visual.test.tsx-snapshots/ReactUnipika-with-scroll-container-light-webkit-1-webkit-linux.png

@@ -1,5 +1,10 @@
 import React from 'react';
-import {Table as GravityTable, useTable, useWindowRowVirtualizer} from '@gravity-ui/table';
+import {
+    Table as GravityTable,
+    useRowVirtualizer,
+    useTable,
+    useWindowRowVirtualizer,
+} from '@gravity-ui/table';
 import type {ColumnDef, Row} from '@gravity-ui/table/tanstack';
 import {UnipikaFlattenTreeItem, SearchInfo} from '../utils/flattenUnipika';
 import {CollapseIconType, UnipikaSettings} from '../StructuredYson/types';
@@ -19,6 +24,8 @@ export interface TableProps {
     onToggleCollapse: (path: string) => void;
     onShowFullText: (index: number) => void;
     scrollToRef: React.RefObject<null | {scrollToIndex(index: number): void}>;
+    scrollContainerRef?: React.RefObject<Element | null>;
+    withScrollElement?: boolean;
     collapseIconType?: CollapseIconType;
     showContainerSize?: boolean;
 }
@@ -32,6 +39,8 @@ export const Table: React.FC<TableProps> = ({
     onToggleCollapse,
     onShowFullText,
     scrollToRef,
+    scrollContainerRef,
+    withScrollElement,
     collapseIconType,
     showContainerSize,
 }) => {
@@ -62,32 +71,40 @@ export const Table: React.FC<TableProps> = ({
         data,
     });
 
-    const bodyRef = React.useRef<HTMLTableSectionElement>(null);
-
-    const rowVirtulization = useWindowRowVirtualizer({
-        count: table.getRowModel().rows.length,
-        estimateSize: () => 20,
-        overscan: 5,
-        scrollMargin: bodyRef.current?.offsetTop ?? 0,
-    });
+    const {rowVirtualizer, windowRowVirtualizer, bodyRef} = useRowVirtualization(
+        table.getRowModel().rows.length,
+        scrollContainerRef,
+    );
 
     React.useEffect(() => {
+        const activeVirtualizer = withScrollElement ? rowVirtualizer : windowRowVirtualizer;
         scrollToRef.current = {
             scrollToIndex: (index: number) =>
-                rowVirtulization.scrollToIndex(index, {align: 'center'}),
+                activeVirtualizer.scrollToIndex(index, {align: 'center'}),
         };
-    }, [scrollToRef, rowVirtulization]);
+    }, [scrollToRef, withScrollElement, rowVirtualizer, windowRowVirtualizer]);
 
     return (
         <div className={block()}>
-            <GravityTable
-                table={table}
-                rowVirtualizer={rowVirtulization}
-                rowClassName={rowClassName}
-                cellClassName={block('cell')}
-                headerCellClassName={block('header-cell')}
-                bodyRef={bodyRef}
-            />
+            {withScrollElement ? (
+                <GravityTable
+                    table={table}
+                    rowVirtualizer={rowVirtualizer}
+                    rowClassName={rowClassName}
+                    cellClassName={block('cell')}
+                    headerCellClassName={block('header-cell')}
+                    bodyRef={bodyRef}
+                />
+            ) : (
+                <GravityTable
+                    table={table}
+                    rowVirtualizer={windowRowVirtualizer}
+                    rowClassName={rowClassName}
+                    cellClassName={block('cell')}
+                    headerCellClassName={block('header-cell')}
+                    bodyRef={bodyRef}
+                />
+            )}
         </div>
     );
 };
@@ -97,3 +114,22 @@ function rowClassName(row?: Row<UnipikaFlattenTreeItem>) {
     const k = key?.$decoded_value ?? '';
     return block('row', {key: asModifier(k)});
 }
+
+function useRowVirtualization(count: number, scrollContainerRef?: React.RefObject<Element | null>) {
+    const bodyRef = React.useRef<HTMLTableSectionElement>(null);
+    const windowRowVirtualizer = useWindowRowVirtualizer({
+        count,
+        estimateSize: () => 20,
+        overscan: 5,
+        scrollMargin: bodyRef?.current?.offsetTop ?? 0,
+    });
+
+    const rowVirtualizer = useRowVirtualizer({
+        count,
+        estimateSize: () => 20,
+        overscan: 5,
+        getScrollElement: () => scrollContainerRef?.current || null,
+    });
+
+    return {rowVirtualizer, windowRowVirtualizer, bodyRef};
+}