@wallarm-org/design-system 0.19.0 → 0.19.1

package/dist/components/Drawer/DrawerHeader.js

@@ -8,7 +8,7 @@ const DrawerHeader = ({ children, ref })=>{
         ref: ref,
         "data-testid": testId,
         "data-slot": "drawer-header",
-        className: cn('relative shrink-0 w-full', 'bg-bg-surface-2', 'flex items-center justify-between gap-12', 'pt-16 pb-12 pl-24 pr-16', 'rounded-t-12', 'outline-none'),
+        className: cn('relative shrink-0 w-full', 'bg-bg-surface-2', 'flex items-start justify-between gap-12', 'pt-16 pb-12 pl-24 pr-16', 'rounded-t-12', 'outline-none'),
         children: [
             children,
             /*#__PURE__*/ jsx(DrawerClose, {})

package/dist/components/Table/TableBody/TableBodyCell.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { flexRender } from "@tanstack/react-table";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
 import { usePreviewCell } from "../hooks/index.js";
 import { TABLE_EXPAND_COLUMN_ID, getAlignClass, getExpandBorderClass, getPinningStyles, isLastPinnedLeft, useColumnDnd } from "../lib/index.js";
 import { Td } from "../primitives/index.js";
@@ -19,18 +20,32 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow })=>{
     const { canDnd, setNodeRef, dndStyle } = useColumnDnd(column);
     const pinningStyles = getPinningStyles(column);
     const lastLeft = isLastPinnedLeft(column, allLeafColumns, column.id);
-    const { isMasterTrigger, isButtonTrigger, isActive, togglePreview } = usePreviewCell(column.id, cell.row.id);
+    const { isMasterTrigger, isButtonTrigger, isActive, togglePreview, tooltipText } = usePreviewCell(column.id, cell.row.id);
     const isCut = column.id === masterColumnId || meta?.resizeType === 'cut';
     const content = flexRender(cell.column.columnDef.cell, cell.getContext());
     const hasActions = isButtonTrigger || !!meta?.renderPreviewAction || !!meta?.renderMenuAction;
     const renderContent = ()=>{
+        const wrappedContent = tooltipText ? /*#__PURE__*/ jsxs(Tooltip, {
+            children: [
+                /*#__PURE__*/ jsx(TooltipTrigger, {
+                    asChild: true,
+                    children: /*#__PURE__*/ jsx("span", {
+                        className: "min-w-0 [&>*]:block [&>*]:truncate",
+                        children: content
+                    })
+                }),
+                /*#__PURE__*/ jsx(TooltipContent, {
+                    children: tooltipText
+                })
+            ]
+        }) : /*#__PURE__*/ jsx("span", {
+            className: "min-w-0 [&>*]:block [&>*]:truncate",
+            children: content
+        });
         if (isCut && hasActions) return /*#__PURE__*/ jsxs("div", {
             className: "flex items-center justify-between gap-2",
             children: [
-                /*#__PURE__*/ jsx("span", {
-                    className: "min-w-0 [&>*]:block [&>*]:truncate",
-                    children: content
-                }),
+                wrappedContent,
                 /*#__PURE__*/ jsxs(TableMasterCellActions, {
                     children: [
                         isButtonTrigger && /*#__PURE__*/ jsx(TablePreviewToggle, {
@@ -48,13 +63,13 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow })=>{
             style: {
                 minWidth: column.columnDef.size
             },
-            children: content
+            children: tooltipText ? wrappedContent : content
         });
-        return content;
+        return tooltipText ? wrappedContent : content;
     };
     return /*#__PURE__*/ jsx(Td, {
         "data-testid": testId,
-        className: cn(getAlignClass(meta), getExpandBorderClass(isExpandColumn, cell.row.depth), isCut && 'pr-0', isMasterTrigger && 'cursor-pointer', meta?.cellClassName, className),
+        className: cn(getAlignClass(meta), getExpandBorderClass(isExpandColumn, cell.row.depth), isCut && 'pr-0', (isMasterTrigger || tooltipText) && 'cursor-pointer', meta?.cellClassName, className),
         pinned: 'left' === isPinned,
         lastPinnedLeft: disablePinnedShadow ? false : lastLeft,
         expanded: isExpandedToggle,

package/dist/components/Table/TableContext/TableProvider.js

@@ -8,7 +8,13 @@ import { useTableState } from "../hooks/index.js";
 import { TABLE_EXPAND_COLUMN_ID, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SKELETON_ROWS, TABLE_VIRTUALIZATION_OVERSCAN, createExpandColumn, createSelectionColumn } from "../lib/index.js";
 import { TableContext } from "./TableContext.js";
 const TableProvider = (props)=>{
-    const { data, columns, isLoading = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, rowSelection: rowSelectionProp, onRowSelectionChange, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, renderPreviewContent, previewTrigger = 'master', previewRowId: previewRowIdProp, onPreviewRowChange } = props;
+    const { data, columns, isLoading = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, rowSelection: rowSelectionProp, onRowSelectionChange, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, preview } = props;
+    const renderPreviewHeader = preview?.renderHeader;
+    const renderPreviewContent = preview?.renderContent;
+    const previewTrigger = preview?.trigger ?? 'master';
+    const previewTooltipText = preview?.tooltipText ?? 'Open preview';
+    const previewRowIdProp = preview?.rowId;
+    const onPreviewRowChange = preview?.onRowChange;
     const sortingEnabled = !!onSortingChange;
     const selectionEnabled = !!onRowSelectionChange;
     const resizingEnabled = !!onColumnSizingChange;
@@ -220,10 +226,14 @@ const TableProvider = (props)=>{
             containerRef,
             onEndReached,
             onEndReachedThreshold,
-            previewRowId,
-            setPreviewRowId,
-            renderPreviewContent: renderPreviewContent,
-            previewTrigger
+            preview: {
+                rowId: previewRowId,
+                setRowId: setPreviewRowId,
+                renderHeader: renderPreviewHeader,
+                renderContent: renderPreviewContent,
+                trigger: previewTrigger,
+                tooltipText: previewTooltipText
+            }
         }), [
         table,
         isLoading,
@@ -249,8 +259,11 @@ const TableProvider = (props)=>{
         onEndReached,
         onEndReachedThreshold,
         previewRowId,
+        setPreviewRowId,
+        renderPreviewHeader,
         renderPreviewContent,
-        previewTrigger
+        previewTrigger,
+        previewTooltipText
     ]);
     useEffect(()=>{
         if (!selectionEnabled) return;

package/dist/components/Table/TableContext/types.d.ts

@@ -28,10 +28,14 @@ export interface TableContextValue<T> {
     containerRef: RefObject<HTMLDivElement | null>;
     onEndReached?: () => void;
     onEndReachedThreshold?: number;
-    previewRowId: string | null;
-    setPreviewRowId: (id: string | null) => void;
-    renderPreviewContent?: (row: Row<T>) => ReactNode;
-    previewTrigger: 'master' | 'button';
+    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'> {
     children: ReactNode;

package/dist/components/Table/TablePreviewDrawer.js

@@ -3,17 +3,21 @@ import { useRef } from "react";
 import { Drawer, DrawerBody, DrawerContent, DrawerHeader } from "../Drawer/index.js";
 import { useTableContext } from "./TableContext/index.js";
 const TablePreviewDrawer = ()=>{
-    const { table, previewRowId, setPreviewRowId, renderPreviewContent } = useTableContext();
-    const row = previewRowId ? table.getRowModel().rowsById[previewRowId] : void 0;
-    const preview = row && renderPreviewContent ? renderPreviewContent(row) : void 0;
-    const lastPreviewRef = useRef(null);
-    if (preview) lastPreviewRef.current = preview;
-    const displayPreview = preview ?? lastPreviewRef.current;
-    if (!renderPreviewContent) return null;
+    const { table, preview: previewCtx } = useTableContext();
+    const row = previewCtx.rowId ? table.getRowModel().rowsById[previewCtx.rowId] : void 0;
+    const header = row && previewCtx.renderHeader ? previewCtx.renderHeader(row) : void 0;
+    const content = row && previewCtx.renderContent ? previewCtx.renderContent(row) : void 0;
+    const lastHeaderRef = useRef(null);
+    const lastContentRef = useRef(null);
+    if (header) lastHeaderRef.current = header;
+    if (content) lastContentRef.current = content;
+    const displayHeader = header ?? lastHeaderRef.current;
+    const displayContent = content ?? lastContentRef.current;
+    if (!previewCtx.renderContent) return null;
     return /*#__PURE__*/ jsx(Drawer, {
         open: !!row,
         onOpenChange: (open)=>{
-            if (!open) setPreviewRowId(null);
+            if (!open) previewCtx.setRowId(null);
         },
         modal: false,
         overlay: false,
@@ -21,11 +25,11 @@ const TablePreviewDrawer = ()=>{
         width: 960,
         children: /*#__PURE__*/ jsxs(DrawerContent, {
             children: [
-                /*#__PURE__*/ jsx(DrawerHeader, {
+                displayHeader ?? /*#__PURE__*/ jsx(DrawerHeader, {
                     children: /*#__PURE__*/ jsx("span", {})
                 }),
                 /*#__PURE__*/ jsx(DrawerBody, {
-                    children: displayPreview
+                    children: displayContent
                 })
             ]
         })

package/dist/components/Table/TableRow.js

@@ -12,11 +12,11 @@ const SYSTEM_COLUMN_IDS = new Set([
     TABLE_SELECT_COLUMN_ID
 ]);
 const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
-    const { expandingEnabled, previewRowId } = useTableContext();
+    const { expandingEnabled, preview } = useTableContext();
     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();
         const systemCells = cells.filter((c)=>SYSTEM_COLUMN_IDS.has(c.column.id));

package/dist/components/Table/hooks/usePreviewCell.d.ts

@@ -1,6 +1,6 @@
 /**
  * Encapsulates preview drawer logic for a body cell.
- * Returns flags and a click handler based on `previewTrigger` mode.
+ * Returns flags and a click handler based on `preview.trigger` mode.
  */
 export declare const usePreviewCell: <T>(columnId: string, rowId: string) => {
     /** Preview opens by clicking the master cell */
@@ -11,4 +11,6 @@ export declare const usePreviewCell: <T>(columnId: string, rowId: string) => {
     isActive: boolean;
     /** Toggle preview for this row (open/close) */
     togglePreview: () => void;
+    /** Tooltip text for master cell hover */
+    tooltipText: string | undefined;
 };

package/dist/components/Table/hooks/usePreviewCell.js

@@ -1,16 +1,16 @@
 import { useCallback } from "react";
 import { useTableContext } from "../TableContext/index.js";
 const usePreviewCell = (columnId, rowId)=>{
-    const { masterColumnId, previewRowId, setPreviewRowId, renderPreviewContent, previewTrigger } = useTableContext();
+    const { masterColumnId, preview } = useTableContext();
     const isMasterColumn = columnId === masterColumnId;
-    const hasPreview = isMasterColumn && !!renderPreviewContent;
-    const isMasterTrigger = hasPreview && 'master' === previewTrigger;
-    const isButtonTrigger = hasPreview && 'button' === previewTrigger;
-    const isActive = previewRowId === rowId;
+    const hasPreview = isMasterColumn && !!preview.renderContent;
+    const isMasterTrigger = hasPreview && 'master' === preview.trigger;
+    const isButtonTrigger = hasPreview && 'button' === preview.trigger;
+    const isActive = preview.rowId === rowId;
     const togglePreview = useCallback(()=>{
-        setPreviewRowId(isActive ? null : rowId);
+        preview.setRowId(isActive ? null : rowId);
     }, [
-        setPreviewRowId,
+        preview.setRowId,
         isActive,
         rowId
     ]);
@@ -18,7 +18,8 @@ const usePreviewCell = (columnId, rowId)=>{
         isMasterTrigger,
         isButtonTrigger,
         isActive,
-        togglePreview
+        togglePreview,
+        tooltipText: hasPreview ? preview.tooltipText : void 0
     };
 };
 export { usePreviewCell };

package/dist/components/Table/index.d.ts

@@ -5,4 +5,4 @@ export { TableActionBar } from './TableActionBar';
 export { TableEmptyState } from './TableEmptyState';
 export { TablePreviewToggle, type TablePreviewToggleProps } from './TablePreviewToggle';
 export { TableSettingsMenu } from './TableSettingsMenu';
-export type { TableAccessorColumnDef, TableCellContext, TableColumnBase, TableColumnDef, TableColumnMeta, TableColumnPinningState, TableColumnSizingState, TableDisplayColumnDef, TableExpandedState, TableGroupingState, TableOnChangeFn, TableProps, TableRow, TableRowSelectionState, TableSortingState, TableUpdater, TableVirtualized, TableVisibilityState, } from './types';
+export type { TableAccessorColumnDef, TableCellContext, TableColumnBase, TableColumnDef, TableColumnMeta, TableColumnPinningState, TableColumnSizingState, TableDisplayColumnDef, TableExpandedState, TableGroupingState, TableOnChangeFn, TablePreview, TableProps, TableRow, TableRowSelectionState, TableSortingState, TableUpdater, TableVirtualized, TableVisibilityState, } from './types';

package/dist/components/Table/mocks.d.ts

@@ -40,10 +40,18 @@ export declare const headerColumnHelper: import(".").TableColumnHelper<SecurityH
 export declare const headerColumns: TableColumnDef<SecurityHeaderEntry>[];
 export declare const headerColumnIds: string[];
 export declare const createLargeGroupedData: (groupCount?: number, childrenPerGroup?: number) => SecurityHeaderEntry[];
-/** Shared preview drawer content for security events */
+/** Shared preview drawer header for security events */
+export declare const renderSecurityPreviewHeader: (row: {
+    original: SecurityEvent;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Preview content for use with header (objectName shown in header) */
 export declare const renderSecurityPreview: (row: {
     original: SecurityEvent;
 }) => import("react/jsx-runtime").JSX.Element;
+/** Preview content for use without header (includes objectName) */
+export declare const renderSecurityPreviewWithTitle: (row: {
+    original: SecurityEvent;
+}) => import("react/jsx-runtime").JSX.Element;
 /** Duplicate securityEvents N times with unique IDs */
 export declare const multiplySecurityEvents: (times?: number) => SecurityEvent[];
 export declare const createLargeSecurityEvents: (count?: number) => SecurityEvent[];

package/dist/components/Table/mocks.js

@@ -4,6 +4,7 @@ import { Check, Copy, Filter, FilterX } from "../../icons/index.js";
 import { abbreviateNumber } from "../../utils/abbreviateNumber.js";
 import { Badge } from "../Badge/index.js";
 import { InlineCodeSnippet } from "../CodeSnippet/index.js";
+import { DrawerHeader } from "../Drawer/index.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuSeparator } from "../DropdownMenu/index.js";
 import { FormatDateTime } from "../FormatDateTime/index.js";
 import { Ip, IpAddress, IpCountry, IpProvider, sourceLabels } from "../Ip/index.js";
@@ -630,10 +631,17 @@ const createLargeGroupedData = (groupCount = 12, childrenPerGroup = 50)=>Array.f
                 }))
         };
     });
-const renderSecurityPreview = (row)=>/*#__PURE__*/ jsxs(VStack, {
+const renderSecurityPreviewHeader = (row)=>/*#__PURE__*/ jsx(DrawerHeader, {
+        children: /*#__PURE__*/ jsx(Text, {
+            size: "lg",
+            weight: "medium",
+            children: row.original.objectName
+        })
+    });
+const SecurityPreviewContent = ({ row, showTitle })=>/*#__PURE__*/ jsxs(VStack, {
         gap: 16,
         children: [
-            /*#__PURE__*/ jsx(Text, {
+            showTitle && /*#__PURE__*/ jsx(Text, {
                 size: "lg",
                 weight: "medium",
                 children: row.original.objectName
@@ -696,6 +704,14 @@ const renderSecurityPreview = (row)=>/*#__PURE__*/ jsxs(VStack, {
             })
         ]
     });
+SecurityPreviewContent.displayName = 'SecurityPreviewContent';
+const renderSecurityPreview = (row)=>/*#__PURE__*/ jsx(SecurityPreviewContent, {
+        row: row
+    });
+const renderSecurityPreviewWithTitle = (row)=>/*#__PURE__*/ jsx(SecurityPreviewContent, {
+        row: row,
+        showTitle: true
+    });
 const multiplySecurityEvents = (times = 4)=>Array.from({
         length: times
     }, (_, batch)=>securityEvents.map((row)=>({
@@ -951,4 +967,4 @@ const useInfiniteData = ()=>{
         fetchNextPage
     };
 };
-export { METHOD_COLORS, createLargeGroupedData, createLargeSecurityEvents, fullFeaturedColumns, groupedHeaderData, headerColumnHelper, headerColumnIds, headerColumns, multiplySecurityEvents, renderSecurityPreview, securityColumnHelper, securityColumnIds, securityColumns, securityEvents, useInfiniteData };
+export { METHOD_COLORS, createLargeGroupedData, createLargeSecurityEvents, fullFeaturedColumns, groupedHeaderData, headerColumnHelper, headerColumnIds, headerColumns, multiplySecurityEvents, renderSecurityPreview, renderSecurityPreviewHeader, renderSecurityPreviewWithTitle, securityColumnHelper, securityColumnIds, securityColumns, securityEvents, useInfiniteData };

package/dist/components/Table/types.d.ts

@@ -164,14 +164,23 @@ export interface TableProps<T> extends TestableProps {
     onEndReached?: () => void;
     /** Distance from the bottom (in px) to trigger onEndReached (default: 200) */
     onEndReachedThreshold?: number;
-    /** Render preview drawer content for a row. */
-    renderPreviewContent?: (row: TableRow<T>) => ReactNode;
+    /** Preview drawer configuration */
+    preview?: TablePreview<T>;
+}
+/** Preview drawer configuration */
+export interface TablePreview<T> {
+    /** Render drawer header for a row */
+    renderHeader?: (row: TableRow<T>) => ReactNode;
+    /** Render drawer content for a row */
+    renderContent: (row: TableRow<T>) => ReactNode;
     /** How the preview drawer is triggered:
      *  - `'master'` — clicking the master cell toggles the drawer (default)
      *  - `'button'` — a toggle button appears in master cell actions on hover */
-    previewTrigger?: 'master' | 'button';
+    trigger?: 'master' | 'button';
+    /** Tooltip text on master cell hover (default: 'Open preview') */
+    tooltipText?: string;
     /** Controlled preview row ID. Pass `null` to close. */
-    previewRowId?: string | null;
+    rowId?: string | null;
     /** Callback when preview row changes (open/close/swap). */
-    onPreviewRowChange?: (rowId: string | null) => void;
+    onRowChange?: (rowId: string | null) => void;
 }

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.18.0",
-  "generatedAt": "2026-04-03T10:04:38.346Z",
+  "version": "0.19.0",
+  "generatedAt": "2026-04-03T12:16:12.332Z",
   "components": [
     {
       "name": "Alert",
@@ -24039,22 +24039,10 @@
           "required": false
         },
         {
-          "name": "renderPreviewContent",
-          "type": "((row: TableRow<T>) => ReactNode) | undefined",
-          "required": false,
-          "description": "Render preview drawer content for a row."
-        },
-        {
-          "name": "previewTrigger",
-          "type": "\"master\" | \"button\" | undefined",
-          "required": false,
-          "description": "How the preview drawer is triggered:\n - `'master'` — clicking the master cell toggles the drawer (default)\n - `'button'` — a toggle button appears in master cell actions on hover"
-        },
-        {
-          "name": "previewRowId",
-          "type": "string | null | undefined",
+          "name": "preview",
+          "type": "TablePreview<T> | undefined",
           "required": false,
-          "description": "Controlled preview row ID. Pass `null` to close."
+          "description": "Preview drawer configuration"
         }
       ],
       "variants": [
@@ -24211,11 +24199,11 @@
         },
         {
           "name": "MasterCellWithActions",
-          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  const data = useMemo(() => multiplySecurityEvents(), []);\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () =>\n      securityColumns.map((col, i) =>\n        i === 0\n          ? {\n              ...col,\n              meta: {\n                ...col.meta,\n                size: 400,\n                resizeType: 'resize',\n                renderMenuAction: (row: { original: SecurityEvent }) => (\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant='ghost' color='neutral' size='small' aria-label='More'>\n                        <Ellipsis />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent>\n                      <DropdownMenuItem\n                        onSelect={() => navigator.clipboard.writeText(row.original.objectName)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <Copy />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Copy name</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem\n                        onSelect={() => alert(`Filter: ${row.original.objectName}`)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <Filter />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Show only</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem\n                        onSelect={() => alert(`Exclude: ${row.original.objectName}`)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <FilterX />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Exclude</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                ),\n              },\n            }\n          : col,\n      ),\n    [],\n  );\n\n  return (\n    <Table\n      className='max-w-920'\n      data={data}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n      previewTrigger='button'\n      renderPreviewContent={renderSecurityPreview}\n    />\n  );\n}"
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n  const data = useMemo(() => multiplySecurityEvents(), []);\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () =>\n      securityColumns.map((col, i) =>\n        i === 0\n          ? {\n              ...col,\n              meta: {\n                ...col.meta,\n                size: 400,\n                resizeType: 'resize',\n                renderMenuAction: (row: { original: SecurityEvent }) => (\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant='ghost' color='neutral' size='small' aria-label='More'>\n                        <Ellipsis />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent>\n                      <DropdownMenuItem\n                        onSelect={() => navigator.clipboard.writeText(row.original.objectName)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <Copy />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Copy name</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem\n                        onSelect={() => alert(`Filter: ${row.original.objectName}`)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <Filter />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Show only</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem\n                        onSelect={() => alert(`Exclude: ${row.original.objectName}`)}\n                      >\n                        <DropdownMenuItemIcon>\n                          <FilterX />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Exclude</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                ),\n              },\n            }\n          : col,\n      ),\n    [],\n  );\n\n  return (\n    <Table\n      className='max-w-920'\n      data={data}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n      preview={{\n        trigger: 'button',\n        renderHeader: renderSecurityPreviewHeader,\n        renderContent: renderSecurityPreview,\n      }}\n    />\n  );\n}"
         },
         {
           "name": "MasterCellWithPreviewDrawer",
-          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n\n  const data = useMemo(\n    () =>\n      Array.from({ length: 4 }, (_, batch) =>\n        securityEvents.map(row => ({\n          ...row,\n          id: `${row.id}-${batch}`,\n          objectName: batch === 0 ? row.objectName : `${row.objectName} (${batch + 1})`,\n        })),\n      ).flat(),\n    [],\n  );\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () =>\n      securityColumns.map((col, i) =>\n        i === 0\n          ? {\n              ...col,\n              cell: ({ row }: { row: { original: SecurityEvent } }) => (\n                <Text size='xs'>{row.original.objectName}</Text>\n              ),\n            }\n          : col,\n      ),\n    [],\n  );\n\n  return (\n    <Table\n      className='max-w-920'\n      data={data}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      renderPreviewContent={renderSecurityPreview}\n    />\n  );\n}"
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n\n  const data = useMemo(\n    () =>\n      Array.from({ length: 4 }, (_, batch) =>\n        securityEvents.map(row => ({\n          ...row,\n          id: `${row.id}-${batch}`,\n          objectName: batch === 0 ? row.objectName : `${row.objectName} (${batch + 1})`,\n        })),\n      ).flat(),\n    [],\n  );\n\n  const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n    () =>\n      securityColumns.map((col, i) =>\n        i === 0\n          ? {\n              ...col,\n              cell: ({ row }: { row: { original: SecurityEvent } }) => (\n                <Text size='xs'>{row.original.objectName}</Text>\n              ),\n            }\n          : col,\n      ),\n    [],\n  );\n\n  return (\n    <Table\n      className='max-w-920'\n      data={data}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      preview={{ renderContent: renderSecurityPreviewWithTitle }}\n    />\n  );\n}"
         },
         {
           "name": "FullFeatured",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",