@vectara/vectara-ui 17.1.0 → 17.2.0

package/lib/components/table/TableBulkActions.js

@@ -21,7 +21,7 @@ export const VuiTableBulkActions = ({ selectedRows, actions }) => {
     const [isOpen, setIsOpen] = useState(false);
     let content;
     if (actions.length === 1) {
-        content = (_jsx(VuiButtonSecondary, Object.assign({ color: (_a = actions[0].color) !== null && _a !== void 0 ? _a : "neutral", size: "m", "data-testid": actions[0].testId, onClick: () => actions[0].onClick && actions[0].onClick(selectedRows) }, { children: `${actions[0].label} (${selectedRows.length})` })));
+        content = (_jsx(VuiButtonSecondary, Object.assign({ color: (_a = actions[0].color) !== null && _a !== void 0 ? _a : "neutral", size: "m", "data-testid": actions[0].testId, onClick: () => actions[0].onClick && actions[0].onClick(selectedRows), icon: actions[0].icon }, { children: `${actions[0].label} (${selectedRows.length})` })));
     }
     else {
         content = (_jsx(VuiPopover, Object.assign({ isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsxs(VuiButtonSecondary, Object.assign({ color: "primary", size: "m", "data-testid": "bulkActionsMenuButton", icon: _jsx(VuiIcon, { children: _jsx(BiCaretDown, {}) }) }, { children: [selectedRows.length, " selected"] })) }, { children: _jsx(VuiOptionsList, { onSelectOption: () => {

package/lib/components/table/TableRowActions.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { ButtonColor } from "../button/types";
 import { Row } from "./types";
 export type Action<T> = {
@@ -7,6 +8,7 @@ export type Action<T> = {
     href?: (row: T) => string | undefined;
     testId?: string;
     color?: ButtonColor;
+    icon?: ReactElement | null;
 };
 export type Props<T> = {
     row: any;

package/lib/components/table/TableRowActions.js

@@ -9,9 +9,9 @@ export const VuiTableRowActions = ({ row, actions, onToggle, testId }) => {
     const [isOpen, setIsOpen] = useState(false);
     // Filter out disabled actions.
     const actionOptions = actions.reduce((acc, action) => {
-        const { label, isDisabled, onClick, href, testId, color } = action;
+        const { label, isDisabled, onClick, href, testId, color, icon } = action;
         if (!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row))) {
-            acc.push({ label, onClick, href: href === null || href === void 0 ? void 0 : href(row), value: row, testId, color });
+            acc.push({ label, onClick, href: href === null || href === void 0 ? void 0 : href(row), value: row, testId, color, icon });
         }
         return acc;
     }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "17.1.0",
+  "version": "17.2.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/table/Table.tsx

@@ -14,7 +14,7 @@ import {
 } from "../../../lib";
 import { VuiTable } from "../../../lib/components/table/Table";
 import { createFakePeople, Person } from "./createFakePeople";
-import { BiError } from "react-icons/bi";
+import { BiError, BiTrash } from "react-icons/bi";
 
 const ROWS_PER_PAGE = 20;
 const people: Person[] = createFakePeople(152);
@@ -238,7 +238,12 @@ export const Table = () => {
         console.log("Delete", person);
       },
       testId: "deleteAction",
-      color: "danger" as const
+      color: "danger" as const,
+      icon: (
+        <VuiIcon color="danger">
+          <BiTrash />
+        </VuiIcon>
+      )
     }
   ];
 
@@ -295,7 +300,12 @@ export const Table = () => {
             onClick: (people: Person[]) => {
               console.log("Delete", people);
             },
-            color: "danger" as const
+            color: "danger" as const,
+            icon: (
+              <VuiIcon color="danger">
+                <BiTrash />
+              </VuiIcon>
+            )
           }
         ]
       }