refactor(table): group internal preview context into single object

Replace flat previewRowId, setPreviewRowId, renderPreviewHeader,
renderPreviewContent, previewTrigger, previewTooltipText fields
in TableContextValue with a single preview object.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: pigarevaoks

packages/design-system/src/components/Table/TableContext/TableProvider.tsx

@@ -333,12 +333,14 @@ export const TableProvider = <T,>(props: TableProviderProps<T>) => {
       containerRef,
       onEndReached,
       onEndReachedThreshold,
-      previewRowId,
-      setPreviewRowId,
-      renderPreviewHeader: renderPreviewHeader as ((row: Row<T>) => ReactNode) | undefined,
-      renderPreviewContent: renderPreviewContent as ((row: Row<T>) => ReactNode) | undefined,
-      previewTrigger,
-      previewTooltipText,
+      preview: {
+        rowId: previewRowId,
+        setRowId: setPreviewRowId,
+        renderHeader: renderPreviewHeader as ((row: Row<T>) => ReactNode) | undefined,
+        renderContent: renderPreviewContent as ((row: Row<T>) => ReactNode) | undefined,
+        trigger: previewTrigger,
+        tooltipText: previewTooltipText,
+      },
     }),
     [
       table,
@@ -365,6 +367,7 @@ export const TableProvider = <T,>(props: TableProviderProps<T>) => {
       onEndReached,
       onEndReachedThreshold,
       previewRowId,
+      setPreviewRowId,
       renderPreviewHeader,
       renderPreviewContent,
       previewTrigger,

packages/design-system/src/components/Table/TableContext/types.ts

@@ -54,12 +54,14 @@ export interface TableContextValue<T> {
   onEndReachedThreshold?: number;
 
   // Preview drawer
-  previewRowId: string | null;
-  setPreviewRowId: (id: string | null) => void;
-  renderPreviewHeader?: (row: Row<T>) => ReactNode;
-  renderPreviewContent?: (row: Row<T>) => ReactNode;
-  previewTrigger: 'master' | 'button';
-  previewTooltipText: string;
+  preview: {
+    rowId: string | null;
+    setRowId: (id: string | null) => void;
+    renderHeader?: (row: Row<T>) => ReactNode;
+    renderContent?: (row: Row<T>) => ReactNode;
+    trigger: 'master' | 'button';
+    tooltipText: string;
+  };
 }
 
 export interface TableProviderProps<T> extends Omit<TableProps<T>, 'children' | 'aria-label'> {

packages/design-system/src/components/Table/TablePreviewDrawer.tsx

@@ -4,28 +4,27 @@ import { Drawer, DrawerBody, DrawerContent, DrawerHeader } from '../Drawer';
 import { useTableContext } from './TableContext';
 
 export const TablePreviewDrawer: FC = () => {
-  const { table, previewRowId, setPreviewRowId, renderPreviewHeader, renderPreviewContent } =
-    useTableContext();
+  const { table, preview: previewCtx } = useTableContext();
 
-  const row = previewRowId ? table.getRowModel().rowsById[previewRowId] : undefined;
-  const header = row && renderPreviewHeader ? renderPreviewHeader(row) : undefined;
-  const preview = row && renderPreviewContent ? renderPreviewContent(row) : undefined;
+  const row = previewCtx.rowId ? table.getRowModel().rowsById[previewCtx.rowId] : undefined;
+  const header = row && previewCtx.renderHeader ? previewCtx.renderHeader(row) : undefined;
+  const content = row && previewCtx.renderContent ? previewCtx.renderContent(row) : undefined;
 
   // Keep the last valid preview so drawer content doesn't flash empty during close animation
   const lastHeaderRef = useRef<ReactNode>(null);
   const lastPreviewRef = useRef<ReactNode>(null);
   if (header) lastHeaderRef.current = header;
-  if (preview) lastPreviewRef.current = preview;
+  if (content) lastPreviewRef.current = content;
   const displayHeader = header ?? lastHeaderRef.current;
-  const displayPreview = preview ?? lastPreviewRef.current;
+  const displayContent = content ?? lastPreviewRef.current;
 
-  if (!renderPreviewContent) return null;
+  if (!previewCtx.renderContent) return null;
 
   return (
     <Drawer
       open={!!row}
       onOpenChange={open => {
-        if (!open) setPreviewRowId(null);
+        if (!open) previewCtx.setRowId(null);
       }}
       modal={false}
       overlay={false}
@@ -38,7 +37,7 @@ export const TablePreviewDrawer: FC = () => {
             <span />
           </DrawerHeader>
         )}
-        <DrawerBody>{displayPreview}</DrawerBody>
+        <DrawerBody>{displayContent}</DrawerBody>
       </DrawerContent>
     </Drawer>
   );

packages/design-system/src/components/Table/TableRow.tsx

@@ -17,11 +17,11 @@ interface TableRowProps<T> {
 }
 
 const TableRowInner = <T,>({ row, ref, 'data-index': dataIndex }: TableRowProps<T>) => {
-  const { expandingEnabled, previewRowId } = useTableContext<T>();
+  const { expandingEnabled, preview } = useTableContext<T>();
   const testId = useTestId('row');
   const isGroupParent = row.subRows.length > 0;
   const isSelected = isGroupParent ? row.getIsAllSubRowsSelected() : row.getIsSelected();
-  const isPreviewActive = previewRowId === row.id;
+  const isPreviewActive = preview.rowId === row.id;
 
   if (isGroupParent) {
     const cells = row.getVisibleCells();

packages/design-system/src/components/Table/hooks/usePreviewCell.ts

@@ -6,24 +6,17 @@ import { useTableContext } from '../TableContext';
  * Returns flags and a click handler based on `previewTrigger` mode.
  */
 export const usePreviewCell = <T>(columnId: string, rowId: string) => {
-  const {
-    masterColumnId,
-    previewRowId,
-    setPreviewRowId,
-    renderPreviewContent,
-    previewTrigger,
-    previewTooltipText,
-  } = useTableContext<T>();
+  const { masterColumnId, preview } = useTableContext<T>();
 
   const isMasterColumn = columnId === masterColumnId;
-  const hasPreview = isMasterColumn && !!renderPreviewContent;
-  const isMasterTrigger = hasPreview && previewTrigger === 'master';
-  const isButtonTrigger = hasPreview && previewTrigger === 'button';
-  const isActive = previewRowId === rowId;
+  const hasPreview = isMasterColumn && !!preview.renderContent;
+  const isMasterTrigger = hasPreview && preview.trigger === 'master';
+  const isButtonTrigger = hasPreview && preview.trigger === 'button';
+  const isActive = preview.rowId === rowId;
 
   const togglePreview = useCallback(() => {
-    setPreviewRowId(isActive ? null : rowId);
-  }, [setPreviewRowId, isActive, rowId]);
+    preview.setRowId(isActive ? null : rowId);
+  }, [preview.setRowId, isActive, rowId]);
 
   return {
     /** Preview opens by clicking the master cell */
@@ -35,6 +28,6 @@ export const usePreviewCell = <T>(columnId: string, rowId: string) => {
     /** Toggle preview for this row (open/close) */
     togglePreview,
     /** Tooltip text for master cell hover */
-    tooltipText: hasPreview ? previewTooltipText : undefined,
+    tooltipText: hasPreview ? preview.tooltipText : undefined,
   };
 };