@wallarm-org/design-system 0.16.5 → 0.16.6-rc-fix-AS-582-table-experience.1

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

@@ -9,7 +9,7 @@ import { Td } from "../primitives/index.js";
 import { useTableContext } from "../TableContext/index.js";
 import { TableMasterCellActions } from "../TableMasterCellActions.js";
 const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow })=>{
-    const { allLeafColumns } = useTableContext();
+    const { allLeafColumns, masterColumnId } = useTableContext();
     const testId = useTestId('body-cell');
     const column = cell.column;
     const isPinned = column.getIsPinned();
@@ -19,7 +19,7 @@ const TableBodyCell = ({ cell, colSpan, className, disablePinnedShadow })=>{
     const { canDnd, setNodeRef, dndStyle } = useColumnDnd(column);
     const pinningStyles = getPinningStyles(column);
     const lastLeft = isLastPinnedLeft(column, allLeafColumns, column.id);
-    const isCut = meta?.resizeType === 'cut';
+    const isCut = column.id === masterColumnId || meta?.resizeType === 'cut';
     const content = flexRender(cell.column.columnDef.cell, cell.getContext());
     const hasActions = !!meta?.renderActions;
     const [actionsWidth, setActionsWidth] = useState(0);

package/dist/components/Table/TableHead.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { THead, Tr } from "./primitives/index.js";
 import { useTableContext } from "./TableContext/index.js";
@@ -8,7 +9,7 @@ const TableHead = ()=>{
     const testId = useTestId('head');
     const hasTextDescription = table.getAllLeafColumns().some((col)=>col.columnDef.meta?.description?.type === 'text');
     return /*#__PURE__*/ jsx(THead, {
-        className: "sticky top-0 z-30 h-32",
+        className: cn('sticky top-0 z-30', hasTextDescription ? 'h-48' : 'h-32'),
         "data-testid": testId,
         children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsx(Tr, {
                 children: headerGroup.headers.map((header)=>/*#__PURE__*/ jsx(TableHeadCell, {

package/dist/components/Table/TableMasterCellActions.js

@@ -17,7 +17,7 @@ const TableMasterCellActions = ({ children, onWidthChange })=>{
     ]);
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: cn('absolute top-0 right-0 h-full', 'flex items-start pt-6 pr-6 pl-4 gap-2'),
+        className: cn('absolute top-0 right-0 h-full bg-bg-surface-2', 'before:absolute before:inset-0 before:pointer-events-none before:transition-colors', 'group-hover/row:before:bg-states-primary-hover', 'group-data-[selected]/row:before:bg-states-primary-active', 'group-data-[selected]/row:group-hover/row:before:bg-states-primary-hover', 'flex items-start pt-6 pr-6 pl-4 gap-2'),
         children: children
     });
 };

package/dist/components/Table/TableSettingsMenu/TableSettingsMenu.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { isEqual } from "lodash-es";
@@ -15,25 +15,14 @@ import { TABLE_EXPAND_COLUMN_ID, TABLE_SELECT_COLUMN_ID } from "../lib/index.js"
 import { useTableContext } from "../TableContext/index.js";
 import { TableSettingsMenuItem } from "./TableSettingsMenuItem.js";
 const DEFAULT_HEADER_HEIGHT = 34;
+const HEADER_HEIGHT_WITH_DESCRIPTION = 50;
 const TableSettingsMenu = ()=>{
     const testId = useTestId('settings-menu');
     const ctx = useTableContext();
-    const { table, visibilityEnabled, columnDndEnabled, defaultColumnVisibility, defaultColumnOrder, alwaysPinnedLeft, masterColumnId, theadRef } = ctx;
+    const { table, visibilityEnabled, columnDndEnabled, defaultColumnVisibility, defaultColumnOrder, alwaysPinnedLeft, masterColumnId } = ctx;
+    const hasTextDescription = table.getAllLeafColumns().some((col)=>col.columnDef.meta?.description?.type === 'text');
     const [search, setSearch] = useState('');
     const [menuOpen, setMenuOpen] = useState(false);
-    const [theadHeight, setTheadHeight] = useState(void 0);
-    useEffect(()=>{
-        const el = theadRef.current;
-        if (!el) return;
-        const ro = new ResizeObserver((entries)=>{
-            const entry = entries[0];
-            if (entry) setTheadHeight(entry.contentRect.height);
-        });
-        ro.observe(el);
-        return ()=>ro.disconnect();
-    }, [
-        theadRef
-    ]);
     const allColumns = table.getAllLeafColumns().filter((col)=>col.id !== TABLE_SELECT_COLUMN_ID && col.id !== TABLE_EXPAND_COLUMN_ID);
     const filteredColumns = useMemo(()=>{
         if (!search) return allColumns;
@@ -88,7 +77,7 @@ const TableSettingsMenu = ()=>{
         "data-testid": testId,
         className: cn('absolute top-0 right-0 z-30', 'flex items-start', 'bg-bg-light-primary border rounded-tr-12 border-border-primary-light', 'pl-6 pr-4 py-4', 'rounded-tr-12'),
         style: {
-            height: theadHeight ? `${theadHeight + 1}px` : DEFAULT_HEADER_HEIGHT
+            height: hasTextDescription ? HEADER_HEIGHT_WITH_DESCRIPTION : DEFAULT_HEADER_HEIGHT
         },
         children: /*#__PURE__*/ jsxs(Tooltip, {
             disabled: menuOpen,

package/dist/components/Table/mocks.js

@@ -236,9 +236,10 @@ const securityColumns = [
                     /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ jsx(Link, {
-                            size: "md",
+                            size: "sm",
                             type: "table",
-                            weight: "medium",
+                            weight: "regular",
+                            href: "#",
                             children: row.original.objectName
                         })
                     }),
@@ -283,7 +284,8 @@ const securityColumns = [
         size: 220,
         enableSorting: true,
         meta: {
-            sortType: 'text'
+            sortType: 'text',
+            resizeType: 'cut'
         },
         cell: ({ getValue })=>/*#__PURE__*/ jsx(InlineCodeSnippet, {
                 code: getValue(),
@@ -296,7 +298,8 @@ const securityColumns = [
         size: 130,
         enableSorting: true,
         meta: {
-            sortType: 'text'
+            sortType: 'text',
+            resizeType: 'cut'
         },
         cell: ({ getValue })=>{
             const status = getValue();
@@ -314,7 +317,8 @@ const securityColumns = [
         size: 160,
         enableSorting: true,
         meta: {
-            sortType: 'date'
+            sortType: 'date',
+            resizeType: 'cut'
         },
         cell: ({ getValue })=>/*#__PURE__*/ jsx(FormatDateTime, {
                 value: getValue(),
@@ -341,7 +345,8 @@ const securityColumns = [
         size: 120,
         enableSorting: true,
         meta: {
-            sortType: 'date'
+            sortType: 'date',
+            resizeType: 'cut'
         },
         cell: ({ getValue })=>/*#__PURE__*/ jsx(Text, {
                 size: "sm",

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.4",
-  "generatedAt": "2026-03-31T08:23:36.742Z",
+  "version": "0.16.5",
+  "generatedAt": "2026-03-31T14:32:34.371Z",
   "components": [
     {
       "name": "Alert",
@@ -24111,11 +24111,11 @@
         },
         {
           "name": "ColumnResizingWithPinning",
-          "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n\n  return (\n    <Table\n      className='max-w-800'\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    />\n  );\n}"
+          "code": "() => {\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n\n  return (\n    <Table\n      className='max-w-920'\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    />\n  );\n}"
         },
         {
           "name": "ColumnPinning",
-          "code": "() => {\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n\n  return (\n    <Table\n      className='max-w-800'\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    />\n  );\n}"
+          "code": "() => {\n  const [columnPinning, setColumnPinning] = useState<TableColumnPinningState>({\n    left: ['objectName'],\n  });\n\n  return (\n    <Table\n      className='max-w-920'\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      columnPinning={columnPinning}\n      onColumnPinningChange={setColumnPinning}\n    />\n  );\n}"
         },
         {
           "name": "ColumnDragAndDrop",
@@ -24167,7 +24167,7 @@
         },
         {
           "name": "MasterCellWithActions",
-          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\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                renderActions: (row: { original: SecurityEvent }) => (\n                  <>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <Button\n                          variant='ghost'\n                          color='neutral'\n                          size='small'\n                          onClick={() => alert(`Preview: ${row.original.objectName}`)}\n                          aria-label='Preview'\n                        >\n                          <PanelRight />\n                        </Button>\n                      </TooltipTrigger>\n                      <TooltipContent>Preview</TooltipContent>\n                    </Tooltip>\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            }\n          : col,\n      ),\n    [],\n  );\n\n  return (\n    <Table\n      className='max-w-800'\n      data={securityEvents}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    />\n  );\n}"
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\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                renderActions: (row: { original: SecurityEvent }) => (\n                  <>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <Button\n                          variant='ghost'\n                          color='neutral'\n                          size='small'\n                          onClick={() => alert(`Preview: ${row.original.objectName}`)}\n                          aria-label='Preview'\n                        >\n                          <PanelRight />\n                        </Button>\n                      </TooltipTrigger>\n                      <TooltipContent>Preview</TooltipContent>\n                    </Tooltip>\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            }\n          : col,\n      ),\n    [],\n  );\n\n  return (\n    <Table\n      className='max-w-920'\n      data={securityEvents}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      columnSizing={columnSizing}\n      onColumnSizingChange={setColumnSizing}\n    />\n  );\n}"
         },
         {
           "name": "FullFeatured",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.16.5",
+  "version": "0.16.6-rc-fix-AS-582-table-experience.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",