@wallarm-org/design-system 2.4.0 → 2.5.0

package/dist/components/Table/lib/useRowDnd.js

@@ -3,43 +3,48 @@ import { useSortable } from "@dnd-kit/sortable";
 import { useTableContext } from "../TableContext/useTableContext.js";
 import { isGroupRow } from "./isGroupRow.js";
 import { useTableValue } from "./tableReactivity.js";
-const useRowDnd = (row)=>{
-    const $ = c(16);
-    const { rowDndEnabled, showEmptyGroups } = useTableContext();
+const useRowCanDrag = (row)=>{
+    const $ = c(4);
+    const { rowDndEnabled, showEmptyGroups, getRowCanDrag } = useTableContext();
     let t0;
-    if ($[0] !== row || $[1] !== showEmptyGroups) {
-        t0 = ()=>isGroupRow(row, showEmptyGroups);
-        $[0] = row;
-        $[1] = showEmptyGroups;
-        $[2] = t0;
-    } else t0 = $[2];
-    const isGroup = useTableValue(t0);
-    const canDnd = rowDndEnabled && !isGroup;
-    const t1 = !canDnd;
-    let t2;
-    if ($[3] !== row.id || $[4] !== t1) {
-        t2 = {
+    if ($[0] !== getRowCanDrag || $[1] !== row || $[2] !== showEmptyGroups) {
+        t0 = ()=>!isGroupRow(row, showEmptyGroups) && (getRowCanDrag?.(row) ?? true);
+        $[0] = getRowCanDrag;
+        $[1] = row;
+        $[2] = showEmptyGroups;
+        $[3] = t0;
+    } else t0 = $[3];
+    const canDrag = useTableValue(t0);
+    return rowDndEnabled && canDrag;
+};
+const useRowDnd = (row)=>{
+    const $ = c(13);
+    const canDnd = useRowCanDrag(row);
+    const t0 = !canDnd;
+    let t1;
+    if ($[0] !== row.id || $[1] !== t0) {
+        t1 = {
             id: row.id,
-            disabled: t1
+            disabled: t0
         };
-        $[3] = row.id;
-        $[4] = t1;
+        $[0] = row.id;
+        $[1] = t0;
+        $[2] = t1;
+    } else t1 = $[2];
+    const { attributes, listeners, setNodeRef, isDragging } = useSortable(t1);
+    let t2;
+    if ($[3] !== canDnd || $[4] !== isDragging) {
+        t2 = canDnd && isDragging ? {
+            opacity: 0.4
+        } : {};
+        $[3] = canDnd;
+        $[4] = isDragging;
         $[5] = t2;
     } else t2 = $[5];
-    const { attributes, listeners, setNodeRef, isDragging } = useSortable(t2);
+    const style = t2;
     let t3;
-    if ($[6] !== canDnd || $[7] !== isDragging) {
-        t3 = canDnd && isDragging ? {
-            opacity: 0.4
-        } : {};
-        $[6] = canDnd;
-        $[7] = isDragging;
-        $[8] = t3;
-    } else t3 = $[8];
-    const style = t3;
-    let t4;
-    if ($[9] !== attributes || $[10] !== canDnd || $[11] !== isDragging || $[12] !== listeners || $[13] !== setNodeRef || $[14] !== style) {
-        t4 = {
+    if ($[6] !== attributes || $[7] !== canDnd || $[8] !== isDragging || $[9] !== listeners || $[10] !== setNodeRef || $[11] !== style) {
+        t3 = {
             canDnd,
             isDragging,
             setNodeRef,
@@ -47,14 +52,14 @@ const useRowDnd = (row)=>{
             attributes,
             listeners
         };
-        $[9] = attributes;
-        $[10] = canDnd;
-        $[11] = isDragging;
-        $[12] = listeners;
-        $[13] = setNodeRef;
-        $[14] = style;
-        $[15] = t4;
-    } else t4 = $[15];
-    return t4;
+        $[6] = attributes;
+        $[7] = canDnd;
+        $[8] = isDragging;
+        $[9] = listeners;
+        $[10] = setNodeRef;
+        $[11] = style;
+        $[12] = t3;
+    } else t3 = $[12];
+    return t3;
 };
-export { useRowDnd };
+export { useRowCanDrag, useRowDnd };

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

@@ -220,7 +220,27 @@ export interface TableProps<T> extends TestableProps {
     onColumnOrderChange?: TableOnChangeFn<string[]>;
     grouping?: TableGroupingState;
     onGroupingChange?: TableOnChangeFn<TableGroupingState>;
+    /**
+     * Group row content for `getSubRows` grouping. Passing it switches the table
+     * to sub-row grouping mode: the auto-injected expand column is dropped, so
+     * the content is responsible for its own expand/collapse toggle
+     * (`row.getToggleExpandedHandler()`).
+     *
+     * Rendered only with `groupRowSpan: 'full'`. With the default `'master'` the
+     * group row shows its master (first data) column cell, as before.
+     */
     renderGroupRow?: (row: TableRow<T>) => ReactNode;
+    /**
+     * How a group row lays out its content.
+     *
+     * - `'master'` (default): the master column's cell, then empty filler cells —
+     *   the content is confined to the master column width.
+     * - `'full'`: `renderGroupRow(row)` in a single cell spanning every data
+     *   column (system cells — selection, drag handle — keep their own cells).
+     *   Use for a group header with a title on the left and actions pinned to the
+     *   right edge of the table. Requires `renderGroupRow`.
+     */
+    groupRowSpan?: 'master' | 'full';
     /** Sub-row accessor for hierarchical/tree data (used with renderGroupRow) */
     getSubRows?: (row: T) => T[] | undefined;
     /**
@@ -287,6 +307,25 @@ export interface TableProps<T> extends TestableProps {
      * among the rows of its own group.
      */
     onRowReorder?: (event: TableRowReorderEvent) => void;
+    /**
+     * Per-row drag control for `onRowReorder`. A row for which it returns
+     * `false` shows no grip, cannot be dragged and is not a drop target — the
+     * other rows of its group move around it. Group rows never move regardless.
+     *
+     * Default: every non-group row can be dragged.
+     */
+    getRowCanDrag?: (row: TableRow<T>) => boolean;
+    /**
+     * Renders a non-group row as a single cell spanning every data column — a
+     * banner or notice row among regular rows. Return `undefined` to render the
+     * row normally, with a cell per column. System cells (selection, drag
+     * handle) keep their own cells. Pair with `getRowCanDrag` to keep such a row
+     * in place in a reorderable table.
+     *
+     * Called on every render of the row: return elements, do not call hooks in
+     * the callback itself (components it returns may).
+     */
+    renderFullWidthRow?: (row: TableRow<T>) => ReactNode | undefined;
     /** Callback fired when the master cell is clicked. Receives the row ID. */
     onMasterCellClick?: (rowId: string) => void;
     /** ID of the currently active (highlighted) row, or null. Controls row highlighting via data-preview-active attribute. */

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.3.3",
-  "generatedAt": "2026-10-13T07:49:15.152Z",
+  "version": "2.4.0",
+  "generatedAt": "2026-10-13T09:13:52.244Z",
   "components": [
     {
       "name": "Accordion",
@@ -20392,6 +20392,11 @@
           "name": "LongDocument",
           "code": "() => <LongDocumentDemo />",
           "description": "2 000 read-only lines clamped by `maxLines` — the top of the envelope the colour painter is\nbuilt for, where `readOnly` still lets the text be selected, searched and copied."
+        },
+        {
+          "name": "FullscreenInsideDrawer",
+          "code": "() => {\n  const [value, setValue] = useState(jsonCode);\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant='outline' color='neutral'>\n          Open Drawer\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Rule</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <CodeEditorRoot value={value} onChange={setValue} language='json'>\n            <CodeSnippetHeader>\n              <CodeSnippetTitle>rule.json</CodeSnippetTitle>\n              <CodeSnippetActions>\n                <CodeSnippetFullscreenButton />\n                <CodeSnippetCopyButton />\n              </CodeSnippetActions>\n            </CodeSnippetHeader>\n            <CodeEditorContent lineNumbers aria-label='Rule JSON' />\n          </CodeEditorRoot>\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "Fullscreen opened from a modal `Drawer` stacks above it: the editor and its buttons take\npointer and keyboard input, and Escape leaves fullscreen while the drawer stays open."
         }
       ]
     },
@@ -24930,6 +24935,11 @@
           "name": "WithFoldingAndShowMore",
           "code": "() => (\n  <CodeSnippetAdapterProvider adapter={loadShikiAdapter}>\n    <CodeSnippetRoot\n      code={foldableResponseCode}\n      language='http'\n      startingLineNumber={100}\n      maxLines={6}\n      folds={getHttpFolds(foldableResponseCode, { startingLineNumber: 100 })}\n    >\n      <CodeSnippetContent>\n        <CodeSnippetLineNumbers />\n        <CodeSnippetCode />\n      </CodeSnippetContent>\n    </CodeSnippetRoot>\n  </CodeSnippetAdapterProvider>\n)",
           "description": "Folds, `maxLines` and `startingLineNumber` together — fold line numbers are absolute, so\n`getHttpFolds` has to be given the same offset the gutter uses."
+        },
+        {
+          "name": "FullscreenInsideDrawer",
+          "code": "() => (\n  <Drawer>\n    <DrawerTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader>\n        <DrawerTitle>Request</DrawerTitle>\n      </DrawerHeader>\n      <DrawerBody>\n        <CodeSnippetRoot code={jsonCode} language='json'>\n          <CodeSnippetHeader>\n            <CodeSnippetTitle>package.json</CodeSnippetTitle>\n            <CodeSnippetActions>\n              <CodeSnippetFullscreenButton />\n              <CodeSnippetCopyButton />\n            </CodeSnippetActions>\n          </CodeSnippetHeader>\n          <CodeSnippetContent>\n            <CodeSnippetCode />\n          </CodeSnippetContent>\n        </CodeSnippetRoot>\n      </DrawerBody>\n    </DrawerContent>\n  </Drawer>\n)",
+          "description": "Fullscreen opened from a modal `Drawer` stacks above it as a nested layer: its buttons stay\nclickable, and Escape or a backdrop click leaves fullscreen while the drawer stays open."
         }
       ]
     },
@@ -101518,7 +101528,14 @@
         {
           "name": "renderGroupRow",
           "type": "((row: TableRow<T>) => ReactNode) | undefined",
-          "required": false
+          "required": false,
+          "description": "Group row content for `getSubRows` grouping. Passing it switches the table\nto sub-row grouping mode: the auto-injected expand column is dropped, so\nthe content is responsible for its own expand/collapse toggle\n(`row.getToggleExpandedHandler()`).\n\nRendered only with `groupRowSpan: 'full'`. With the default `'master'` the\ngroup row shows its master (first data) column cell, as before."
+        },
+        {
+          "name": "groupRowSpan",
+          "type": "\"master\" | \"full\" | undefined",
+          "required": false,
+          "description": "How a group row lays out its content.\n\n- `'master'` (default): the master column's cell, then empty filler cells —\n  the content is confined to the master column width.\n- `'full'`: `renderGroupRow(row)` in a single cell spanning every data\n  column (system cells — selection, drag handle — keep their own cells).\n  Use for a group header with a title on the left and actions pinned to the\n  right edge of the table. Requires `renderGroupRow`."
         },
         {
           "name": "getSubRows",
@@ -101591,6 +101608,18 @@
           "required": false,
           "description": "Row id to anchor the initial scroll position to. The table scrolls this row\ninto view on mount and arms the edge detectors only after that initial\nscroll settles. Use for deep-linking into the middle of a dataset."
         },
+        {
+          "name": "getRowCanDrag",
+          "type": "((row: TableRow<T>) => boolean) | undefined",
+          "required": false,
+          "description": "Per-row drag control for `onRowReorder`. A row for which it returns\n`false` shows no grip, cannot be dragged and is not a drop target — the\nother rows of its group move around it. Group rows never move regardless.\n\nDefault: every non-group row can be dragged."
+        },
+        {
+          "name": "renderFullWidthRow",
+          "type": "((row: TableRow<T>) => ReactNode) | undefined",
+          "required": false,
+          "description": "Renders a non-group row as a single cell spanning every data column — a\nbanner or notice row among regular rows. Return `undefined` to render the\nrow normally, with a cell per column. System cells (selection, drag\nhandle) keep their own cells. Pair with `getRowCanDrag` to keep such a row\nin place in a reorderable table.\n\nCalled on every render of the row: return elements, do not call hooks in\nthe callback itself (components it returns may)."
+        },
         {
           "name": "activeRowId",
           "type": "string | null | undefined",
@@ -107794,6 +107823,11 @@
           "code": "() => {\n  const [data, setData] = useState<SecurityHeaderEntry[]>(() => [\n    ...groupedHeaderData,\n    { ...groupedHeaderData[0]!, id: 'group-empty', objectName: 'Nothing here yet', children: [] },\n  ]);\n  const [expanded, setExpanded] = useState<TableExpandedState>(true);\n\n  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {\n    setData(prev =>\n      prev.map(group => {\n        const children = group.children ?? [];\n        const oldIndex = children.findIndex(row => row.id === event.activeRowId);\n        const newIndex = children.findIndex(row => row.id === event.overRowId);\n        if (oldIndex === -1 || newIndex === -1) return group;\n        return { ...group, children: arrayMove(children, oldIndex, newIndex) };\n      }),\n    );\n  }, []);\n\n  return (\n    <Table<SecurityHeaderEntry>\n      data={data}\n      columns={headerColumns}\n      getRowId={row => row.id}\n      getSubRows={row => row.children}\n      showEmptyGroups\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      onRowReorder={handleRowReorder}\n      data-testid='row-reorder-groups-table'\n    />\n  );\n}",
           "description": "With `getSubRows` grouping, a row moves only among the rows of its own group; group rows stay\nput. `showEmptyGroups` keeps a group whose `getSubRows` returns `[]` on screen as a group row."
         },
+        {
+          "name": "GroupedWithFullWidthRows",
+          "code": "() => {\n  const [data, setData] = useState<SecurityHeaderEntry[]>(() => [\n    {\n      ...groupedHeaderData[0]!,\n      children: [\n        { ...groupedHeaderData[0]!, id: `${BANNER_ROW_PREFIX}csp`, children: undefined },\n        ...(groupedHeaderData[0]!.children ?? []),\n      ],\n    },\n    ...groupedHeaderData.slice(1, 3),\n    { ...groupedHeaderData[0]!, id: 'group-empty', objectName: 'Nothing here yet', children: [] },\n  ]);\n  const [expanded, setExpanded] = useState<TableExpandedState>(true);\n\n  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {\n    setData(prev =>\n      prev.map(group => {\n        const children = group.children ?? [];\n        const oldIndex = children.findIndex(row => row.id === event.activeRowId);\n        const newIndex = children.findIndex(row => row.id === event.overRowId);\n        if (oldIndex === -1 || newIndex === -1) return group;\n        return { ...group, children: arrayMove(children, oldIndex, newIndex) };\n      }),\n    );\n  }, []);\n\n  return (\n    <Table<SecurityHeaderEntry>\n      data={data}\n      columns={headerColumns}\n      getRowId={row => row.id}\n      getSubRows={row => row.children}\n      showEmptyGroups\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      onRowReorder={handleRowReorder}\n      groupRowSpan='full'\n      renderGroupRow={row => {\n        const isExpanded = row.getIsExpanded();\n        return (\n          <HStack gap={8} align='center'>\n            <Button\n              variant='ghost'\n              color='neutral'\n              size='small'\n              aria-expanded={isExpanded}\n              aria-label={isExpanded ? 'Collapse group' : 'Expand group'}\n              onClick={row.getToggleExpandedHandler()}\n            >\n              {isExpanded ? <ChevronDown /> : <ChevronRight />}\n            </Button>\n            <Text weight='medium'>{row.original.objectName}</Text>\n            <Badge color='gray' type='secondary' size='medium'>\n              {row.subRows.filter(r => !r.id.startsWith(BANNER_ROW_PREFIX)).length}\n            </Badge>\n            <HStack gap={4} className='ml-auto'>\n              <Button variant='ghost' color='neutral' size='small'>\n                <Plus />\n                Add header\n              </Button>\n              <Button variant='ghost' color='neutral' size='small' aria-label='More actions'>\n                <Ellipsis />\n              </Button>\n            </HStack>\n          </HStack>\n        );\n      }}\n      renderFullWidthRow={row =>\n        row.id.startsWith(BANNER_ROW_PREFIX) ? (\n          <HStack gap={8} align='center'>\n            <Shield size='sm' />\n            <Text size='sm' weight='medium'>\n              Wallarm baseline headers\n            </Text>\n            <Text size='sm' color='secondary'>\n              · applied first · built-in, always on\n            </Text>\n            <Button variant='ghost' color='neutral' size='small' className='ml-auto'>\n              Manage baseline →\n            </Button>\n          </HStack>\n        ) : undefined\n      }\n      getRowCanDrag={row => !row.id.startsWith(BANNER_ROW_PREFIX) && !LOCKED_ROW_IDS.has(row.id)}\n      data-testid='grouped-full-width-table'\n    />\n  );\n}",
+          "description": "`groupRowSpan: 'full'` draws `renderGroupRow` across every data column — title on the left,\nactions on the right edge; the content owns the collapse toggle. `renderFullWidthRow` turns a\nregular row into a single spanning banner, and `getRowCanDrag` keeps the banner and the locked\nfirst header in place while the other rows of the group reorder around them."
+        },
         {
           "name": "RowReorderingWithSelection",
           "code": "() => {\n  const [data, setData] = useState(() => securityEvents.slice(0, 6));\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n\n  const handleRowReorder = useCallback((event: TableRowReorderEvent) => {\n    setData(prev => {\n      const oldIndex = prev.findIndex(row => row.id === event.activeRowId);\n      const newIndex = prev.findIndex(row => row.id === event.overRowId);\n      if (oldIndex === -1 || newIndex === -1) return prev;\n      return arrayMove(prev, oldIndex, newIndex);\n    });\n  }, []);\n\n  return (\n    <Table\n      data={data}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      onRowReorder={handleRowReorder}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    />\n  );\n}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",
@@ -167,7 +167,9 @@
     "@tanstack/react-table": "9.2.4",
     "@tanstack/react-virtual": "3.14.13",
     "@zag-js/cascade-select": "1.43.3",
+    "@zag-js/dismissable": "1.43.3",
     "@zag-js/file-utils": "1.43.3",
+    "@zag-js/focus-trap": "1.43.3",
     "@zag-js/react": "1.43.3",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",