@wallarm-org/design-system 1.22.0 → 1.22.1

package/dist/components/SettingsHeader/SettingsHeaderBreadcrumbs.js

@@ -8,7 +8,7 @@ const SettingsHeaderBreadcrumbs = ({ ref, children, className, ...props })=>{
         ref: ref,
         "data-testid": testId,
         "data-slot": "settings-header-breadcrumbs",
-        className: cn(className),
+        className: cn('ml-[-4px]', className),
         children: children
     });
 };

package/dist/components/SettingsHeader/SettingsHeaderHeading.js

@@ -8,7 +8,7 @@ const SettingsHeaderHeading = ({ ref, children, className, ...props })=>{
         ref: ref,
         "data-testid": testId,
         "data-slot": "settings-header-heading",
-        className: cn('flex items-start justify-between gap-16 w-full', className),
+        className: cn('flex items-center justify-between gap-16 w-full', className),
         children: children
     });
 };

package/dist/components/Switch/SwitchControl.js

@@ -21,7 +21,7 @@ const SwitchControl = ()=>{
                 className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 text-white pointer-events-none z-0"
             }),
             /*#__PURE__*/ jsx(Switch.Thumb, {
-                className: cn('w-16 h-12', 'bg-icon-primary-alt rounded-4 shadow-sm transition-all relative z-10', 'translate-x-4', 'data-[state=checked]:translate-x-14')
+                className: cn('w-16 h-12', 'bg-icon-primary-alt rounded-4 shadow-sm transition-all relative z-[9]', 'translate-x-4', 'data-[state=checked]:translate-x-14')
             })
         ]
     });

package/dist/components/Table/StickyGroupParent.js

@@ -104,7 +104,7 @@ const StickyGroupParent = ({ tableWidth, headerHeight })=>{
                                         disablePinnedShadow: true
                                     }),
                                     dataCells.slice(1).map((cell)=>/*#__PURE__*/ jsx(Td, {
-                                            className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active'),
+                                            className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', 'group-data-[preview-active]/row:overlay-states-primary-hover group-has-[[data-state=open]]/row:overlay-states-primary-hover'),
                                             style: {
                                                 width: cell.column.getSize()
                                             },

package/dist/components/Table/TableMasterCellActions.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 const TableMasterCellActions = ({ children })=>/*#__PURE__*/ jsx("div", {
-        className: cn('shrink-0 pl-4 pr-4 flex items-center gap-2', 'opacity-0 pointer-events-none', 'group-hover/row:opacity-100 group-hover/row:pointer-events-auto', 'group-data-[selected]/row:opacity-100 group-data-[selected]/row:pointer-events-auto', 'group-data-[preview-active]/row:opacity-100 group-data-[preview-active]/row:pointer-events-auto'),
+        "data-master-cell-action": "",
+        className: cn('shrink-0 pl-4 pr-4 flex items-center gap-2', 'opacity-0 pointer-events-none', 'group-hover/row:opacity-100 group-hover/row:pointer-events-auto', 'group-data-[selected]/row:opacity-100 group-data-[selected]/row:pointer-events-auto', 'group-data-[preview-active]/row:opacity-100 group-data-[preview-active]/row:pointer-events-auto', 'has-[[data-state=open]]:opacity-100 has-[[data-state=open]]:pointer-events-auto', '[&_[data-state=open]]:overlay [&_[data-state=open]]:overlay-states-primary-hover'),
         children: children
     });
 TableMasterCellActions.displayName = 'TableMasterCellActions';

package/dist/components/Table/TableRow.js

@@ -71,7 +71,7 @@ const TableRowInner = ({ row, ref, 'data-index': dataIndex })=>{
                             lastRow: isLastRow
                         }),
                         dataCells.slice(1).map((cell)=>/*#__PURE__*/ jsx(Td, {
-                                className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', isLastRow && 'border-b-0'),
+                                className: cn('border-b border-border-primary-light bg-bg-surface-2 overlay', 'group-hover/row:overlay-states-primary-hover group-data-[selected]/row:overlay-states-primary-active', 'group-data-[preview-active]/row:overlay-states-primary-hover group-has-[[data-state=open]]/row:overlay-states-primary-hover', isLastRow && 'border-b-0'),
                                 style: {
                                     width: cell.column.getSize()
                                 },

package/dist/components/Table/classes.js

@@ -38,7 +38,7 @@ const tableHeadCellVariants = cva(cn(tableCellBase, 'pl-16 pr-4 py-4 text-xs fon
         dragging: false
     }
 });
-const tableBodyCellVariants = cva(cn(tableCellBase, 'px-16 py-8 text-sm text-text-primary', 'bg-bg-surface-2', 'align-top', 'group-hover/row:overlay-states-primary-hover', 'group-data-[selected]/row:overlay-states-primary-active', 'group-data-[selected]/row:group-hover/row:overlay-states-primary-hover', 'group-data-[preview-active]/row:overlay-states-primary-active', 'group-data-[preview-active]/row:group-hover/row:overlay-states-primary-hover', '[&:has([data-state=open][data-part=context-trigger])]:ring-2', '[&:has([data-state=open][data-part=context-trigger])]:ring-inset', '[&:has([data-state=open][data-part=context-trigger])]:ring-border-strong-brand', '[&:has([data-part=context-trigger])]:p-0', '[&_[data-part=context-trigger]]:w-full', '[&_[data-part=context-trigger]]:px-16 [&_[data-part=context-trigger]]:py-8', '[&_[data-part=context-trigger]]:text-left [&_[data-part=context-trigger]]:outline-none'), {
+const tableBodyCellVariants = cva(cn(tableCellBase, 'px-16 py-8 text-sm text-text-primary', 'bg-bg-surface-2', 'align-top', 'group-hover/row:overlay-states-primary-hover', 'group-data-[selected]/row:overlay-states-primary-active', 'group-data-[selected]/row:group-hover/row:overlay-states-primary-hover', 'group-data-[preview-active]/row:overlay-states-primary-hover', 'group-has-[[data-state=open]]/row:overlay-states-primary-hover', '[&:has([data-state=open][data-part=context-trigger])]:ring-2', '[&:has([data-state=open][data-part=context-trigger])]:ring-inset', '[&:has([data-state=open][data-part=context-trigger])]:ring-border-strong-brand', '[&:has([data-part=context-trigger])]:p-0', '[&_[data-part=context-trigger]]:w-full', '[&_[data-part=context-trigger]]:px-16 [&_[data-part=context-trigger]]:py-8', '[&_[data-part=context-trigger]]:text-left [&_[data-part=context-trigger]]:outline-none'), {
     variants: {
         pinned: {
             true: 'sticky z-10',

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

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import type { RowData } from '@tanstack/react-table';
 /**
  * Encapsulates master cell click logic for a body cell.
@@ -7,7 +8,7 @@ export declare const useMasterCell: <T extends RowData>(columnId: string, rowId:
     /** Master cell click is enabled */
     isMasterTrigger: boolean;
     /** Fire master cell click for this row */
-    handleClick: () => void;
+    handleClick: (e: MouseEvent) => void;
     /** Tooltip text for master cell hover */
     tooltipText: string | undefined;
 };

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

@@ -4,7 +4,8 @@ const useMasterCell = (columnId, rowId)=>{
     const { masterColumnId, onMasterCellClick } = useTableContext();
     const isMasterColumn = columnId === masterColumnId;
     const hasMasterClick = isMasterColumn && !!onMasterCellClick;
-    const handleClick = useCallback(()=>{
+    const handleClick = useCallback((e)=>{
+        if (e.target.closest('[data-master-cell-action]')) return;
         onMasterCellClick?.(rowId);
     }, [
         onMasterCellClick,

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

@@ -17,6 +17,7 @@ export interface SecurityEvent {
     lastSeen: string;
     endpointMethod: HttpMethodName;
     endpointPath: string;
+    state: boolean;
 }
 export interface SecurityHeaderEntry {
     id: string;

package/dist/components/Table/mocks.js

@@ -12,6 +12,7 @@ import { Ip, IpAddress, IpCountry, IpProvider, sourceLabels } from "../Ip/index.
 import { Link } from "../Link/index.js";
 import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
 import { HStack, VStack } from "../Stack/index.js";
+import { Switch, SwitchControl } from "../Switch/index.js";
 import { Text } from "../Text/index.js";
 import { createTableColumnHelper } from "./lib/index.js";
 const securityEvents = [
@@ -36,7 +37,8 @@ const securityEvents = [
         cweId: 'CWE-287',
         lastSeen: '5 days ago',
         endpointMethod: 'POST',
-        endpointPath: '/api/v1/payments'
+        endpointPath: '/api/v1/payments',
+        state: true
     },
     {
         id: '2',
@@ -59,7 +61,8 @@ const securityEvents = [
         cweId: 'CWE-416',
         lastSeen: '6 days ago',
         endpointMethod: 'PUT',
-        endpointPath: '/api/v1/users/profile'
+        endpointPath: '/api/v1/users/profile',
+        state: false
     },
     {
         id: '3',
@@ -82,7 +85,8 @@ const securityEvents = [
         cweId: 'CWE-89',
         lastSeen: '7 days ago',
         endpointMethod: 'GET',
-        endpointPath: '/api/v1/users/:id'
+        endpointPath: '/api/v1/users/:id',
+        state: true
     },
     {
         id: '4',
@@ -105,7 +109,8 @@ const securityEvents = [
         cweId: 'CWE-22',
         lastSeen: '1 week ago',
         endpointMethod: 'GET',
-        endpointPath: '/api/v1/errors/debug'
+        endpointPath: '/api/v1/errors/debug',
+        state: true
     },
     {
         id: '5',
@@ -128,7 +133,8 @@ const securityEvents = [
         cweId: 'CWE-200',
         lastSeen: '4 days ago',
         endpointMethod: 'POST',
-        endpointPath: '/api/v1/auth/login'
+        endpointPath: '/api/v1/auth/login',
+        state: false
     },
     {
         id: '6',
@@ -151,7 +157,8 @@ const securityEvents = [
         cweId: 'CWE-352',
         lastSeen: '2 days ago',
         endpointMethod: 'POST',
-        endpointPath: '/api/v1/files/upload'
+        endpointPath: '/api/v1/files/upload',
+        state: true
     },
     {
         id: '7',
@@ -174,7 +181,8 @@ const securityEvents = [
         cweId: 'CWE-125',
         lastSeen: '3 days ago',
         endpointMethod: 'GET',
-        endpointPath: '/api/v1/images/proxy'
+        endpointPath: '/api/v1/images/proxy',
+        state: false
     },
     {
         id: '8',
@@ -197,7 +205,8 @@ const securityEvents = [
         cweId: 'CWE-134',
         lastSeen: '4 days ago',
         endpointMethod: 'GET',
-        endpointPath: '/api/v1/auth/redirect'
+        endpointPath: '/api/v1/auth/redirect',
+        state: true
     },
     {
         id: '9',
@@ -220,7 +229,8 @@ const securityEvents = [
         cweId: 'CWE-79',
         lastSeen: '1 day ago',
         endpointMethod: 'DELETE',
-        endpointPath: '/api/v1/users/:id'
+        endpointPath: '/api/v1/users/:id',
+        state: false
     },
     {
         id: '10',
@@ -243,7 +253,8 @@ const securityEvents = [
         cweId: 'CWE-89',
         lastSeen: '3 days ago',
         endpointMethod: 'PATCH',
-        endpointPath: '/api/v1/content'
+        endpointPath: '/api/v1/content',
+        state: true
     }
 ];
 const securityColumnHelper = createTableColumnHelper();
@@ -274,6 +285,14 @@ const securityColumns = [
                 ]
             })
     }),
+    securityColumnHelper.accessor('state', {
+        header: 'State',
+        size: 100,
+        cell: ({ getValue })=>/*#__PURE__*/ jsx(Switch, {
+                checked: getValue(),
+                children: /*#__PURE__*/ jsx(SwitchControl, {})
+            })
+    }),
     securityColumnHelper.accessor('requests', {
         header: 'Requests',
         size: 160,
@@ -671,6 +690,10 @@ const SecurityPreviewContent = ({ row })=>/*#__PURE__*/ jsxs(VStack, {
                         size: "medium",
                         children: row.original.status
                     }),
+                    /*#__PURE__*/ jsx(Switch, {
+                        checked: row.original.state,
+                        children: /*#__PURE__*/ jsx(SwitchControl, {})
+                    }),
                     /*#__PURE__*/ jsx(InlineCodeSnippet, {
                         code: row.original.parameter,
                         size: "sm",

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.21.0",
-  "generatedAt": "2026-09-20T22:39:14.887Z",
+  "version": "1.22.0",
+  "generatedAt": "2026-09-22T02:19:24.344Z",
   "components": [
     {
       "name": "Accordion",
@@ -65577,7 +65577,7 @@
       "examples": [
         {
           "name": "Full",
-          "code": "() => {\n  const [search, setSearch] = useState('');\n\n  return (\n    <SettingsHeader>\n      <SettingsHeaderBreadcrumbs>\n        <Breadcrumbs>\n          <BreadcrumbsItem href='/settings'>Settings</BreadcrumbsItem>\n          <BreadcrumbsItem>Service accounts</BreadcrumbsItem>\n        </Breadcrumbs>\n      </SettingsHeaderBreadcrumbs>\n\n      <SettingsHeaderHeading>\n        <div className='flex flex-col'>\n          <SettingsHeaderTitle>Service accounts</SettingsHeaderTitle>\n          <SettingsHeaderDescription>\n            Identities for automation and API access — they sign in with keys or tokens instead of a\n            password.\n          </SettingsHeaderDescription>\n        </div>\n        <SettingsHeaderActions>\n          <Button variant='primary' color='brand'>\n            Create service account\n          </Button>\n        </SettingsHeaderActions>\n      </SettingsHeaderHeading>\n\n      <SettingsHeaderFilters>\n        <SearchInput\n          value={search}\n          onChange={setSearch}\n          placeholder='Search name'\n          className='w-[320px]'\n        />\n        <SegmentedTabs defaultValue='all'>\n          <SegmentedTabsList>\n            <SegmentedTabsTrigger value='all'>\n              All <NumericBadge>1</NumericBadge>\n            </SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='active'>\n              Active <NumericBadge>1</NumericBadge>\n            </SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='deactivated'>\n              Deactivated <NumericBadge>1</NumericBadge>\n            </SegmentedTabsTrigger>\n          </SegmentedTabsList>\n        </SegmentedTabs>\n      </SettingsHeaderFilters>\n    </SettingsHeader>\n  );\n}",
+          "code": "() => {\n  const [search, setSearch] = useState('');\n\n  return (\n    <SettingsHeader>\n      <SettingsHeaderBreadcrumbs>\n        <Breadcrumbs>\n          <BreadcrumbsItem href='/settings'>Settings</BreadcrumbsItem>\n          <BreadcrumbsItem>Service accounts</BreadcrumbsItem>\n        </Breadcrumbs>\n      </SettingsHeaderBreadcrumbs>\n\n      <SettingsHeaderHeading>\n        <div className='flex flex-col'>\n          <SettingsHeaderTitle>Service accounts</SettingsHeaderTitle>\n          <SettingsHeaderDescription>\n            Identities for automation and API access — they sign in with keys or tokens instead of a\n            password.\n          </SettingsHeaderDescription>\n        </div>\n        <SettingsHeaderActions>\n          <Button size='medium' variant='primary' color='brand'>\n            Create service account\n          </Button>\n        </SettingsHeaderActions>\n      </SettingsHeaderHeading>\n\n      <SettingsHeaderFilters>\n        <SearchInput\n          value={search}\n          onChange={setSearch}\n          placeholder='Search name'\n          className='w-[320px]'\n        />\n        <SegmentedTabs defaultValue='all'>\n          <SegmentedTabsList>\n            <SegmentedTabsTrigger value='all'>\n              All <NumericBadge>1</NumericBadge>\n            </SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='active'>\n              Active <NumericBadge>1</NumericBadge>\n            </SegmentedTabsTrigger>\n            <SegmentedTabsTrigger value='deactivated'>\n              Deactivated <NumericBadge>1</NumericBadge>\n            </SegmentedTabsTrigger>\n          </SegmentedTabsList>\n        </SegmentedTabs>\n      </SettingsHeaderFilters>\n    </SettingsHeader>\n  );\n}",
           "description": "All three rows: breadcrumbs, heading with description and action, and a filter bar with search and segmented tabs."
         },
         {
@@ -65587,7 +65587,7 @@
         },
         {
           "name": "WithBreadcrumbsAndActions",
-          "code": "() => (\n  <SettingsHeader>\n    <SettingsHeaderBreadcrumbs>\n      <Breadcrumbs>\n        <BreadcrumbsItem href='/settings'>Settings</BreadcrumbsItem>\n        <BreadcrumbsItem>Integrations</BreadcrumbsItem>\n      </Breadcrumbs>\n    </SettingsHeaderBreadcrumbs>\n\n    <SettingsHeaderHeading>\n      <div className='flex flex-col'>\n        <SettingsHeaderTitle>Integrations</SettingsHeaderTitle>\n        <SettingsHeaderDescription>\n          Connect third-party services to your workspace.\n        </SettingsHeaderDescription>\n      </div>\n      <SettingsHeaderActions>\n        <Button variant='secondary' color='neutral'>\n          Export\n        </Button>\n        <Button variant='primary' color='brand'>\n          Add integration\n        </Button>\n      </SettingsHeaderActions>\n    </SettingsHeaderHeading>\n  </SettingsHeader>\n)",
+          "code": "() => (\n  <SettingsHeader>\n    <SettingsHeaderBreadcrumbs>\n      <Breadcrumbs>\n        <BreadcrumbsItem href='/settings'>Settings</BreadcrumbsItem>\n        <BreadcrumbsItem>Integrations</BreadcrumbsItem>\n      </Breadcrumbs>\n    </SettingsHeaderBreadcrumbs>\n\n    <SettingsHeaderHeading>\n      <div className='flex flex-col'>\n        <SettingsHeaderTitle>Integrations</SettingsHeaderTitle>\n        <SettingsHeaderDescription>\n          Connect third-party services to your workspace.\n        </SettingsHeaderDescription>\n      </div>\n      <SettingsHeaderActions>\n        <Button size='medium' variant='primary' color='brand'>\n          Add integration\n        </Button>\n      </SettingsHeaderActions>\n    </SettingsHeaderHeading>\n  </SettingsHeader>\n)",
           "description": "Breadcrumbs, heading with multiple action buttons, no filter bar."
         },
         {
@@ -88889,6 +88889,11 @@
           "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const [activeRowId, setActiveRowId] = useState<string | null>(null);\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  const handleMasterCellClick = useCallback((rowId: string) => {\n    setActiveRowId(prev => (prev === rowId ? null : rowId));\n  }, []);\n\n  const activeRow = useMemo(() => data.find(d => d.id === activeRowId), [data, activeRowId]);\n\n  return (\n    <>\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        onMasterCellClick={handleMasterCellClick}\n        activeRowId={activeRowId}\n      />\n      <Drawer\n        open={!!activeRow}\n        onOpenChange={open => {\n          if (!open) setActiveRowId(null);\n        }}\n        modal={false}\n        overlay={false}\n        closeOnOutsideClick={false}\n        width={960}\n      >\n        <DrawerContent>\n          {activeRow ? (\n            renderSecurityPreviewHeader({ original: activeRow })\n          ) : (\n            <DrawerHeader>\n              <span />\n            </DrawerHeader>\n          )}\n          <DrawerBody>\n            {activeRow && renderSecurityPreviewContent({ original: activeRow })}\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n    </>\n  );\n}",
           "description": "`onMasterCellClick` with `activeRowId`: the master cell opens a `Drawer` and the row it\nbelongs to stays marked while the panel is open."
         },
+        {
+          "name": "MasterCellWithActionsAndDrawer",
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const [activeRowId, setActiveRowId] = useState<string | null>(null);\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              cell: ({ row }: { row: { original: SecurityEvent } }) => (\n                <Text size='xs'>{row.original.objectName}</Text>\n              ),\n              meta: {\n                ...col.meta,\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 onSelect={() => onShowOnly(row.original.objectName)}>\n                        <DropdownMenuItemIcon>\n                          <Filter />\n                        </DropdownMenuItemIcon>\n                        <DropdownMenuItemText>Show only</DropdownMenuItemText>\n                      </DropdownMenuItem>\n                      <DropdownMenuItem onSelect={() => onExclude(row.original.objectName)}>\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  const handleMasterCellClick = useCallback((rowId: string) => {\n    setActiveRowId(prev => (prev === rowId ? null : rowId));\n  }, []);\n\n  const activeRow = useMemo(() => data.find(d => d.id === activeRowId), [data, activeRowId]);\n\n  return (\n    <>\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        onMasterCellClick={handleMasterCellClick}\n        activeRowId={activeRowId}\n      />\n      <Drawer\n        open={!!activeRow}\n        onOpenChange={open => {\n          if (!open) setActiveRowId(null);\n        }}\n        modal={false}\n        overlay={false}\n        closeOnOutsideClick={false}\n        width={960}\n      >\n        <DrawerContent>\n          {activeRow ? (\n            renderSecurityPreviewHeader({ original: activeRow })\n          ) : (\n            <DrawerHeader>\n              <span />\n            </DrawerHeader>\n          )}\n          <DrawerBody>\n            {activeRow && renderSecurityPreviewContent({ original: activeRow })}\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n    </>\n  );\n}",
+          "description": "Master cell with both an action menu and a drawer:\nclicking the cell body opens the drawer, clicking the action button opens the menu\nwithout triggering the drawer."
+        },
         {
           "name": "FullFeatured",
           "code": "() => {\n  const data = useMemo(() => createLargeGroupedData(12, 50), []);\n\n  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n  const [columnOrder, setColumnOrder] = useState<string[]>([]);\n  const [columnVisibility, setColumnVisibility] = useState<TableVisibilityState>({});\n  const [expanded, setExpanded] = useState<TableExpandedState>({\n    'group-0': true,\n    'group-1': true,\n  });\n\n  return (\n    <Table<SecurityHeaderEntry>\n      className='h-500'\n      data={data}\n      columns={fullFeaturedColumns}\n      getRowId={row => row.id}\n      getSubRows={row => row.children}\n      // Grouping\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      // Sorting\n      sorting={sorting}\n      onSortingChange={setSorting}\n      // Row selection\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n      // Column resizing\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n      // Column pinning\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n      // Column DnD ordering\n      columnOrder={columnOrder}\n      onColumnOrderChange={setColumnOrder}\n      // Column visibility + settings\n      columnVisibility={columnVisibility}\n      onColumnVisibilityChange={setColumnVisibility}\n      defaultColumnVisibility={{}}\n      defaultColumnOrder={headerColumnIds}\n      // Virtual scrolling\n      virtualized='container'\n    >\n      <TableActionBar>\n        <Button variant='ghost' color='neutral-alt' onClick={onDuplicate}>\n          <Copy /> Duplicate\n        </Button>\n        <Button color='brand' onClick={onDelete}>\n          <Trash2 /> Delete\n        </Button>\n      </TableActionBar>\n    </Table>\n  );\n}",

package/package.json

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