@wallarm-org/design-system 0.76.1 → 0.76.2

package/dist/components/Table/TableActionBar/TableActionBarAnchor.js

@@ -3,6 +3,7 @@ import { Popover } from "@ark-ui/react/popover";
 import { cva } from "class-variance-authority";
 import { cn } from "../../../utils/cn.js";
 import { useTableContext } from "../TableContext/index.js";
+import { useTableActionBarAnchorRef } from "./TableActionBarAnchorRefContext.js";
 const tableActionBarAnchorVariants = cva(cn('w-full relative outline-none'), {
     variants: {
         virtualized: {
@@ -13,7 +14,9 @@ const tableActionBarAnchorVariants = cva(cn('w-full relative outline-none'), {
 });
 const TableActionBarAnchor = ({ className, 'data-testid': testId, children })=>{
     const { virtualized } = useTableContext();
+    const anchorRef = useTableActionBarAnchorRef();
     return /*#__PURE__*/ jsx(Popover.Anchor, {
+        ref: anchorRef,
         "data-testid": testId,
         className: cn(tableActionBarAnchorVariants({
             virtualized

package/dist/components/Table/TableActionBar/TableActionBarAnchorRefContext.d.ts

@@ -0,0 +1,10 @@
+import { type RefObject } from 'react';
+/**
+ * Shares the DOM node rendered by `TableActionBarAnchor` with
+ * `TableActionBarProvider`, which sits above it in the tree (as a parent of
+ * `children`, not a direct renderer) and needs the anchor's live
+ * `getBoundingClientRect()` to horizontally align the action bar with the
+ * table.
+ */
+export declare const TableActionBarAnchorRefContext: import("react").Context<RefObject<HTMLDivElement | null> | null>;
+export declare const useTableActionBarAnchorRef: () => RefObject<HTMLDivElement | null>;

package/dist/components/Table/TableActionBar/TableActionBarAnchorRefContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+const TableActionBarAnchorRefContext = createContext(null);
+const useTableActionBarAnchorRef = ()=>{
+    const ref = useContext(TableActionBarAnchorRefContext);
+    if (!ref) throw new Error('useTableActionBarAnchorRef must be used within a TableActionBarProvider');
+    return ref;
+};
+export { TableActionBarAnchorRefContext, useTableActionBarAnchorRef };

package/dist/components/Table/TableActionBar/TableActionBarProvider.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import { type FC, type ReactNode } from 'react';
 interface TableActionBarProviderProps {
     children: ReactNode;
 }

package/dist/components/Table/TableActionBar/TableActionBarProvider.js

@@ -1,27 +1,46 @@
 import { jsx } from "react/jsx-runtime";
+import { useMemo, useRef } from "react";
 import { Popover } from "@ark-ui/react/popover";
 import { useTableContext } from "../TableContext/index.js";
-const TABLE_ACTION_BAR_HEIGHT = 52;
+import { TableActionBarAnchorRefContext } from "./TableActionBarAnchorRefContext.js";
 const TABLE_ACTION_BAR_OFFSET = 32;
-const TABLE_ACTION_BAR_POSITIONING = Object.freeze({
-    strategy: 'absolute',
-    placement: 'bottom',
-    gutter: 32,
-    overlap: true,
-    flip: false,
-    offset: {
-        mainAxis: -(TABLE_ACTION_BAR_HEIGHT + TABLE_ACTION_BAR_OFFSET)
-    }
-});
 const TableActionBarProvider = ({ children })=>{
     const { table, selectionEnabled } = useTableContext();
+    const anchorRef = useRef(null);
     const selectedCount = selectionEnabled ? Object.keys(table.getState().rowSelection).length : 0;
-    return /*#__PURE__*/ jsx(Popover.Root, {
-        open: selectedCount > 0,
-        closeOnInteractOutside: false,
-        portalled: false,
-        positioning: TABLE_ACTION_BAR_POSITIONING,
-        children: children
+    const positioning = useMemo(()=>{
+        const anchor = {
+            getBoundingClientRect: ()=>{
+                const rect = anchorRef.current?.getBoundingClientRect();
+                return DOMRect.fromRect({
+                    x: rect?.left ?? 0,
+                    y: window.innerHeight,
+                    width: rect?.width ?? 0,
+                    height: 0
+                });
+            }
+        };
+        return {
+            strategy: 'fixed',
+            placement: 'top',
+            gutter: TABLE_ACTION_BAR_OFFSET,
+            flip: false,
+            getAnchorElement: ()=>anchor
+        };
+    }, []);
+    const handleEscapeKeyDown = ()=>{
+        if (selectionEnabled) table.resetRowSelection();
+    };
+    return /*#__PURE__*/ jsx(TableActionBarAnchorRefContext.Provider, {
+        value: anchorRef,
+        children: /*#__PURE__*/ jsx(Popover.Root, {
+            open: selectedCount > 0,
+            closeOnInteractOutside: false,
+            portalled: false,
+            positioning: positioning,
+            onEscapeKeyDown: handleEscapeKeyDown,
+            children: children
+        })
     });
 };
 export { TableActionBarProvider };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.76.0",
-  "generatedAt": "2026-07-15T13:50:20.820Z",
+  "version": "0.76.1",
+  "generatedAt": "2026-07-16T11:30:32.825Z",
   "components": [
     {
       "name": "Accordion",
@@ -76843,6 +76843,10 @@
           "name": "RowSelection",
           "code": "() => {\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    >\n      <TableActionBar>\n        <Button variant='ghost' color='neutral-alt' onClick={() => alert('Copy clicked')}>\n          <Copy /> Duplicate\n        </Button>\n        <Button color='brand' onClick={() => alert('Delete clicked')}>\n          <Trash2 /> Delete\n        </Button>\n      </TableActionBar>\n    </Table>\n  );\n}"
         },
+        {
+          "name": "RowSelectionWindowScroll",
+          "code": "() => {\n  const largeData = useMemo(() => createLargeSecurityEvents(100), []);\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n\n  return (\n    <>\n      <Table\n        data-testid='row-selection-window-scroll-table'\n        data={largeData}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        virtualized='window'\n        rowSelection={rowSelection}\n        onRowSelectionChange={setRowSelection}\n      >\n        <TableActionBar>\n          <Button variant='ghost' color='neutral-alt' onClick={() => alert('Copy clicked')}>\n            <Copy /> Duplicate\n          </Button>\n          <Button color='brand' onClick={() => alert('Delete clicked')}>\n            <Trash2 /> Delete\n          </Button>\n        </TableActionBar>\n      </Table>\n      {/* Filler so the e2e suite can scroll the table fully out of view while a\n          selection stays active — this story's only content otherwise fills\n          exactly to the table's own height, so max scroll would always leave\n          the table's tail in view. Generous margin over the viewport height\n          (800px in the e2e config) so the anchor is unambiguously out of view\n          at max scroll, not just mostly. */}\n      <div style={{ height: 3000 }} />\n    </>\n  );\n}"
+        },
         {
           "name": "RowGrouping",
           "code": "() => {\n  const [expanded, setExpanded] = useState<TableExpandedState>({ 'group-cto': true });\n  const [sorting, setSorting] = useState<TableSortingState>([{ id: 'lastEdited', desc: true }]);\n  const [rowSelection, setRowSelection] = useState<TableRowSelectionState>({});\n\n  return (\n    <Table<SecurityHeaderEntry>\n      data={groupedHeaderData}\n      columns={headerColumns}\n      getRowId={row => row.id}\n      getSubRows={row => row.children}\n      expanded={expanded}\n      onExpandedChange={setExpanded}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      rowSelection={rowSelection}\n      onRowSelectionChange={setRowSelection}\n    />\n  );\n}"

package/package.json

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