fix(table): use DrawerHeader with close button in preview drawer

Use DrawerHeader and DrawerClose in table preview drawer header
instead of custom HStack layout. Extract shared SecurityPreviewContent
component with showTitle flag to avoid content duplication.

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

Author: pigarevaoks

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

@@ -28,6 +28,8 @@ import {
   METHOD_COLORS,
   multiplySecurityEvents,
   renderSecurityPreview,
+  renderSecurityPreviewHeader,
+  renderSecurityPreviewWithTitle,
   type SecurityEvent,
   type SecurityHeaderEntry,
   securityColumnHelper,
@@ -612,6 +614,7 @@ export const MasterCellWithActions: StoryFn<typeof meta> = () => {
       columnSizing={columnSizing}
       onColumnSizingChange={setColumnSizing}
       previewTrigger='button'
+      renderPreviewHeader={renderSecurityPreviewHeader}
       renderPreviewContent={renderSecurityPreview}
     />
   );
@@ -655,7 +658,7 @@ export const MasterCellWithPreviewDrawer: StoryFn<typeof meta> = () => {
       getRowId={row => row.id}
       sorting={sorting}
       onSortingChange={setSorting}
-      renderPreviewContent={renderSecurityPreview}
+      renderPreviewContent={renderSecurityPreviewWithTitle}
     />
   );
 };

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

@@ -80,6 +80,7 @@ export const TableProvider = <T,>(props: TableProviderProps<T>) => {
     overscan = TABLE_VIRTUALIZATION_OVERSCAN,
     onEndReached,
     onEndReachedThreshold,
+    renderPreviewHeader,
     renderPreviewContent,
     previewTrigger = 'master',
     previewRowId: previewRowIdProp,
@@ -331,6 +332,7 @@ export const TableProvider = <T,>(props: TableProviderProps<T>) => {
       onEndReachedThreshold,
       previewRowId,
       setPreviewRowId,
+      renderPreviewHeader: renderPreviewHeader as ((row: Row<T>) => ReactNode) | undefined,
       renderPreviewContent: renderPreviewContent as ((row: Row<T>) => ReactNode) | undefined,
       previewTrigger,
     }),
@@ -359,6 +361,7 @@ export const TableProvider = <T,>(props: TableProviderProps<T>) => {
       onEndReached,
       onEndReachedThreshold,
       previewRowId,
+      renderPreviewHeader,
       renderPreviewContent,
       previewTrigger,
     ],

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

@@ -56,6 +56,7 @@ export interface TableContextValue<T> {
   // Preview drawer
   previewRowId: string | null;
   setPreviewRowId: (id: string | null) => void;
+  renderPreviewHeader?: (row: Row<T>) => ReactNode;
   renderPreviewContent?: (row: Row<T>) => ReactNode;
   previewTrigger: 'master' | 'button';
 }

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

@@ -4,14 +4,28 @@ import { Drawer, DrawerBody, DrawerContent, DrawerHeader } from '../Drawer';
 import { useTableContext } from './TableContext';
 
 export const TablePreviewDrawer: FC = () => {
-  const { table, previewRowId, setPreviewRowId, renderPreviewContent } = useTableContext();
+  const {
+    table,
+    previewRowId,
+    setPreviewRowId,
+    renderPreviewHeader,
+    renderPreviewContent,
+    previewTrigger,
+  } = useTableContext();
 
   const row = previewRowId ? table.getRowModel().rowsById[previewRowId] : undefined;
+  const header =
+    row && renderPreviewHeader && previewTrigger === 'button'
+      ? renderPreviewHeader(row)
+      : undefined;
   const preview = row && renderPreviewContent ? renderPreviewContent(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;
+  const displayHeader = header ?? lastHeaderRef.current;
   const displayPreview = preview ?? lastPreviewRef.current;
 
   if (!renderPreviewContent) return null;
@@ -28,9 +42,11 @@ export const TablePreviewDrawer: FC = () => {
       width={960}
     >
       <DrawerContent>
-        <DrawerHeader>
-          <span />
-        </DrawerHeader>
+        {displayHeader ?? (
+          <DrawerHeader>
+            <span />
+          </DrawerHeader>
+        )}
         <DrawerBody>{displayPreview}</DrawerBody>
       </DrawerContent>
     </Drawer>

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

@@ -4,6 +4,7 @@ import { abbreviateNumber } from '../../utils/abbreviateNumber';
 import { Badge } from '../Badge';
 import { InlineCodeSnippet } from '../CodeSnippet';
 import type { CountryCode } from '../Country';
+import { DrawerHeader } from '../Drawer';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -611,12 +612,29 @@ export const createLargeGroupedData = (
 // Large flat data — for a Virtualized story
 // ---------------------------------------------------------------------------
 
-/** Shared preview drawer content for security events */
-export const renderSecurityPreview = (row: { original: SecurityEvent }) => (
-  <VStack gap={16}>
+/** Shared preview drawer header for security events */
+export const renderSecurityPreviewHeader = (row: { original: SecurityEvent }) => (
+  <DrawerHeader>
     <Text size='lg' weight='medium'>
       {row.original.objectName}
     </Text>
+  </DrawerHeader>
+);
+
+/** Preview drawer content for security events */
+const SecurityPreviewContent = ({
+  row,
+  showTitle,
+}: {
+  row: { original: SecurityEvent };
+  showTitle?: boolean;
+}) => (
+  <VStack gap={16}>
+    {showTitle && (
+      <Text size='lg' weight='medium'>
+        {row.original.objectName}
+      </Text>
+    )}
     <HStack gap={8}>
       <Badge
         variant='dotted'
@@ -645,6 +663,18 @@ export const renderSecurityPreview = (row: { original: SecurityEvent }) => (
   </VStack>
 );
 
+SecurityPreviewContent.displayName = 'SecurityPreviewContent';
+
+/** Preview content for use with header (objectName shown in header) */
+export const renderSecurityPreview = (row: { original: SecurityEvent }) => (
+  <SecurityPreviewContent row={row} />
+);
+
+/** Preview content for use without header (includes objectName) */
+export const renderSecurityPreviewWithTitle = (row: { original: SecurityEvent }) => (
+  <SecurityPreviewContent row={row} showTitle />
+);
+
 /** Duplicate securityEvents N times with unique IDs */
 export const multiplySecurityEvents = (times = 4): SecurityEvent[] =>
   Array.from({ length: times }, (_, batch) =>

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

@@ -216,6 +216,8 @@ export interface TableProps<T> extends TestableProps {
   onEndReachedThreshold?: number;
 
   // --- Preview drawer ---
+  /** Render preview drawer header for a row. Rendered inside DrawerHeader. */
+  renderPreviewHeader?: (row: TableRow<T>) => ReactNode;
   /** Render preview drawer content for a row. */
   renderPreviewContent?: (row: TableRow<T>) => ReactNode;
   /** How the preview drawer is triggered: