@wallarm-org/design-system 0.34.1-rc-feature-AS-929-filter-input.1 → 0.34.1

package/dist/components/BulkBar/BulkBarSummary.d.ts

@@ -0,0 +1,17 @@
+import type { FC, Ref } from 'react';
+export interface BulkBarSummaryProps {
+    count: number;
+    isAllSelected: boolean;
+    onSelectAll: () => void;
+    onClear: () => void;
+    /**
+     * When true, prevent the summary from wrapping or being truncated by the
+     * container: truncate the "X selected" text and keep the Select-all link on
+     * a single line. Use when the bar can shrink (e.g. inside a Drawer).
+     * Defaults to `false` — actions then rely on the parent for layout.
+     */
+    nowrap?: boolean;
+    'data-testid'?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const BulkBarSummary: FC<BulkBarSummaryProps>;

package/dist/components/BulkBar/BulkBarSummary.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { Link } from "../Link/index.js";
+import { HStack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const BulkBarSummary = ({ count, isAllSelected, onSelectAll, onClear, nowrap = false, 'data-testid': testId, ref })=>/*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-slot": "bulk-bar-summary",
+        "data-testid": testId,
+        className: cn('flex items-center gap-16 p-8', nowrap && 'flex-nowrap whitespace-nowrap'),
+        children: [
+            /*#__PURE__*/ jsxs(Text, {
+                size: "sm",
+                color: "primary-alt",
+                weight: "medium",
+                truncate: nowrap,
+                children: [
+                    count,
+                    " selected"
+                ]
+            }),
+            /*#__PURE__*/ jsxs(HStack, {
+                gap: 6,
+                children: [
+                    /*#__PURE__*/ jsx(Link, {
+                        type: isAllSelected ? 'muted' : 'alt',
+                        size: "md",
+                        onClick: onSelectAll,
+                        disabled: isAllSelected,
+                        className: cn(nowrap && 'whitespace-nowrap'),
+                        children: "Select all"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        color: "tertiary-alt",
+                        weight: "medium",
+                        children: "\xb7"
+                    }),
+                    /*#__PURE__*/ jsx(Link, {
+                        type: "alt",
+                        size: "md",
+                        onClick: onClear,
+                        children: "Clear"
+                    })
+                ]
+            })
+        ]
+    });
+BulkBarSummary.displayName = 'BulkBarSummary';
+export { BulkBarSummary };

package/dist/components/BulkBar/classes.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Visual surface shared between the page-level Selection bulk bar and the
+ * Table action bar: background, rounded corners, padding, and the
+ * `data-[state=open|closed]` enter/exit animation pair. Consumers compose
+ * this onto whatever element acts as the bar's outer container — a plain
+ * `<div>` (when driven by `Presence`) or a `Popover.Content`.
+ */
+export declare const bulkBarSurfaceClasses: string;

package/dist/components/BulkBar/classes.js

@@ -0,0 +1,3 @@
+import { cn } from "../../utils/cn.js";
+const bulkBarSurfaceClasses = cn('bg-component-toast-bg rounded-16 shadow-lg', 'pl-12 pr-8 py-8', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom data-[state=open]:duration-300', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom data-[state=closed]:duration-150');
+export { bulkBarSurfaceClasses };

package/dist/components/Selection/SelectionBulkBar/SelectionBulkBarSummary.js

@@ -1,53 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../../utils/testId.js";
-import { Link } from "../../Link/index.js";
-import { HStack } from "../../Stack/index.js";
-import { Text } from "../../Text/index.js";
+import { BulkBarSummary } from "../../BulkBar/BulkBarSummary.js";
 import { useSelectionContext } from "../useSelectionContext.js";
 const SelectionBulkBarSummary = ()=>{
     const { isAllSelected, selectedIds, selectAll, clear } = useSelectionContext();
     const testId = useTestId('bulk-bar-summary');
-    const count = selectedIds.size;
-    return /*#__PURE__*/ jsxs("div", {
+    return /*#__PURE__*/ jsx(BulkBarSummary, {
         "data-testid": testId,
-        className: "flex flex-nowrap items-center gap-16 p-8 whitespace-nowrap",
-        children: [
-            /*#__PURE__*/ jsxs(Text, {
-                size: "sm",
-                color: "primary-alt",
-                weight: "medium",
-                truncate: true,
-                children: [
-                    count,
-                    " selected"
-                ]
-            }),
-            /*#__PURE__*/ jsxs(HStack, {
-                gap: 6,
-                children: [
-                    /*#__PURE__*/ jsx(Link, {
-                        type: isAllSelected ? 'muted' : 'alt',
-                        size: "md",
-                        onClick: selectAll,
-                        disabled: isAllSelected,
-                        className: "whitespace-nowrap",
-                        children: "Select all"
-                    }),
-                    /*#__PURE__*/ jsx(Text, {
-                        size: "sm",
-                        color: "tertiary-alt",
-                        weight: "medium",
-                        children: "\xb7"
-                    }),
-                    /*#__PURE__*/ jsx(Link, {
-                        type: "alt",
-                        size: "md",
-                        onClick: clear,
-                        children: "Clear"
-                    })
-                ]
-            })
-        ]
+        count: selectedIds.size,
+        isAllSelected: isAllSelected,
+        onSelectAll: selectAll,
+        onClear: clear,
+        nowrap: true
     });
 };
 SelectionBulkBarSummary.displayName = 'SelectionBulkBarSummary';

package/dist/components/Selection/classes.js

@@ -1,7 +1,8 @@
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
+import { bulkBarSurfaceClasses } from "../BulkBar/classes.js";
 const selectionItemVariants = cva('flex w-full min-w-0 items-start gap-12');
-const selectionBulkBarVariants = cva(cn('z-[200] flex w-fit flex-nowrap items-center gap-16', 'bg-component-toast-bg rounded-16 shadow-lg', 'pl-12 pr-8 py-8', '[&_button]:shrink-0 [&_button]:whitespace-nowrap', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom data-[state=open]:duration-300', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom data-[state=closed]:duration-150'), {
+const selectionBulkBarVariants = cva(cn('z-[200] flex w-fit flex-nowrap items-center gap-16', bulkBarSurfaceClasses, '[&_button]:shrink-0 [&_button]:whitespace-nowrap'), {
     variants: {
         placement: {
             absolute: 'absolute bottom-12 left-1/2 -translate-x-1/2 max-w-[calc(100%-48px)]',

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@ark-ui/react/popover";
 import { Portal } from "@ark-ui/react/portal";
-import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
+import { bulkBarSurfaceClasses } from "../../BulkBar/classes.js";
 import { HStack } from "../../Stack/index.js";
 import { TableActionBarSelection } from "./TableActionBarSelection.js";
 const TableActionBar = ({ children })=>{
@@ -14,7 +14,7 @@ const TableActionBar = ({ children })=>{
             },
             children: /*#__PURE__*/ jsx(Popover.Content, {
                 "data-testid": testId,
-                className: cn('bg-component-toast-bg rounded-16 shadow-lg', 'pl-12 pr-8 py-8', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom data-[state=open]:duration-300', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom data-[state=closed]:duration-150'),
+                className: bulkBarSurfaceClasses,
                 children: /*#__PURE__*/ jsxs(HStack, {
                     gap: 40,
                     align: "center",

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

@@ -1,58 +1,16 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../../utils/testId.js";
-import { Link } from "../../Link/index.js";
-import { HStack } from "../../Stack/index.js";
-import { Text } from "../../Text/index.js";
+import { BulkBarSummary } from "../../BulkBar/BulkBarSummary.js";
 import { useTableContext } from "../TableContext/index.js";
 const TableActionBarSelection = ()=>{
     const { table } = useTableContext();
     const testId = useTestId('action-bar-selection');
-    const count = Object.keys(table.getState().rowSelection).length;
-    const allSelected = table.getIsAllRowsSelected();
-    const handleSelectAll = ()=>{
-        table.toggleAllRowsSelected(true);
-    };
-    const handleClear = ()=>{
-        table.resetRowSelection();
-    };
-    return /*#__PURE__*/ jsxs("div", {
+    return /*#__PURE__*/ jsx(BulkBarSummary, {
         "data-testid": testId,
-        className: "flex items-center gap-16 p-8",
-        children: [
-            /*#__PURE__*/ jsxs(Text, {
-                size: "sm",
-                color: "primary-alt",
-                weight: "medium",
-                children: [
-                    count,
-                    " selected"
-                ]
-            }),
-            /*#__PURE__*/ jsxs(HStack, {
-                gap: 6,
-                children: [
-                    /*#__PURE__*/ jsx(Link, {
-                        type: allSelected ? 'muted' : 'alt',
-                        size: "md",
-                        onClick: handleSelectAll,
-                        disabled: allSelected,
-                        children: "Select all"
-                    }),
-                    /*#__PURE__*/ jsx(Text, {
-                        size: "sm",
-                        color: "tertiary-alt",
-                        weight: "medium",
-                        children: "\xb7"
-                    }),
-                    /*#__PURE__*/ jsx(Link, {
-                        type: "alt",
-                        size: "md",
-                        onClick: handleClear,
-                        children: "Clear"
-                    })
-                ]
-            })
-        ]
+        count: Object.keys(table.getState().rowSelection).length,
+        isAllSelected: table.getIsAllRowsSelected(),
+        onSelectAll: ()=>table.toggleAllRowsSelected(true),
+        onClear: ()=>table.resetRowSelection()
     });
 };
 TableActionBarSelection.displayName = 'TableActionBarSelection';

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "0.34.0",
-  "generatedAt": "2026-05-11T15:39:31.502Z",
+  "generatedAt": "2026-05-12T08:10:24.915Z",
   "components": [
     {
       "name": "Alert",
@@ -6044,6 +6044,14 @@
         }
       ]
     },
+    {
+      "name": "BulkBar",
+      "importPath": "@wallarm-org/design-system/BulkBar",
+      "props": [],
+      "variants": [],
+      "subComponents": [],
+      "examples": []
+    },
     {
       "name": "Button",
       "importPath": "@wallarm-org/design-system/Button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.34.1-rc-feature-AS-929-filter-input.1",
+  "version": "0.34.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",