npm - @wallarm-org/design-system - Versions diffs - 0.34.0 → 0.34.1 - Mend

@wallarm-org/design-system 0.34.0 → 0.34.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/FilterInput/hooks/useFilterInputAutocomplete/useChipEditing.d.ts CHANGED Viewed

@@ -27,6 +27,5 @@ export declare const useChipEditing: ({ conditions, chips, fields, containerRef,
     resetSegmentTyping: () => void;
     handleChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
     clearEditing: () => void;
-    cancelSegmentEdit: () => void;
 };
 export {};

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useChipEditing.js CHANGED Viewed

@@ -61,24 +61,12 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         setMenuState,
         upsertCondition
     ]);
-    const resetSegmentState = useCallback(()=>{
+    const clearEditing = useCallback(()=>{
+        setEditingChipId(null);
         setEditingSegment(null);
         setSegmentFilterText('');
         setUserHasTyped(false);
     }, []);
-    const clearEditing = useCallback(()=>{
-        setEditingChipId(null);
-        resetSegmentState();
-    }, [
-        resetSegmentState
-    ]);
-    const cancelSegmentEdit = useCallback(()=>{
-        resetSegmentState();
-        setMenuState('closed');
-    }, [
-        resetSegmentState,
-        setMenuState
-    ]);
     const handleSegmentFilterChange = useCallback((text)=>{
         setSegmentFilterText(text);
         setUserHasTyped(true);
@@ -97,8 +85,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
             setSegmentFilterText: handleSegmentFilterChange,
             resetSegmentTyping,
             handleChipClick,
-            clearEditing,
-            cancelSegmentEdit
+            clearEditing
         }), [
         editingChipId,
         editingSegment,
@@ -107,8 +94,7 @@ const useChipEditing = ({ conditions, chips, fields, containerRef, setMenuOffset
         handleSegmentFilterChange,
         resetSegmentTyping,
         handleChipClick,
-        clearEditing,
-        cancelSegmentEdit
+        clearEditing
     ]);
 };
 export { useChipEditing };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.js CHANGED Viewed

@@ -159,6 +159,14 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         selectedField,
         editing
     ]);
+    const cancelSegmentEdit = useCallback(()=>{
+        setSelectedField(null);
+        setSelectedOperator(null);
+        editing.clearEditing();
+        setMenuState('closed');
+    }, [
+        editing
+    ]);
     return {
         inputText,
         menuState,
@@ -197,7 +205,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         segmentFilterText: editing.segmentFilterText,
         segmentMenuFilterText: editing.segmentMenuFilterText,
         handleSegmentFilterChange,
-        cancelSegmentEdit: editing.cancelSegmentEdit,
+        cancelSegmentEdit,
         handleCustomValueCommit,
         handleCustomAttributeCommit,
         menuRef,

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
-  "version": "0.33.1",
-  "generatedAt": "2026-05-07T12:07:41.515Z",
+  "version": "0.34.0",
+  "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 CHANGED Viewed

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