@vectara/vectara-ui 17.0.1 → 17.2.0

package/lib/components/table/TableBulkActions.js

@@ -17,13 +17,14 @@ import { VuiPopover } from "../popover/Popover";
 import { VuiIcon } from "../icon/Icon";
 import { VuiButtonSecondary } from "../button/ButtonSecondary";
 export const VuiTableBulkActions = ({ selectedRows, actions }) => {
+    var _a;
     const [isOpen, setIsOpen] = useState(false);
     let content;
     if (actions.length === 1) {
-        content = (_jsx(VuiButtonSecondary, Object.assign({ color: "neutral", size: "m", "data-testid": actions[0].testId, onClick: () => actions[0].onClick && actions[0].onClick(selectedRows) }, { children: actions[0].label })));
+        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: "neutral", size: "m", "data-testid": "bulkActionsMenuButton", icon: _jsx(VuiIcon, { children: _jsx(BiCaretDown, {}) }) }, { children: [selectedRows.length, " selected"] })) }, { children: _jsx(VuiOptionsList, { onSelectOption: () => {
+        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: () => {
                     setIsOpen(false);
                 }, options: actions.map((_a) => {
                     var { href } = _a, action = __rest(_a, ["href"]);

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

@@ -1,3 +1,5 @@
+import { ReactElement } from "react";
+import { ButtonColor } from "../button/types";
 import { Row } from "./types";
 export type Action<T> = {
     label: string;
@@ -5,6 +7,8 @@ export type Action<T> = {
     onClick?: (row: T) => void;
     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 } = 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 });
+            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.0.1",
+  "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);
@@ -227,17 +227,23 @@ export const Table = () => {
       },
       testId: "editAction"
     },
+    {
+      label: "Search",
+      href: (person: Person) => `https://www.google.com/search?q=${person.name}`,
+      testId: "searchAction"
+    },
     {
       label: "Delete",
       onClick: (person: Person) => {
         console.log("Delete", person);
       },
-      testId: "deleteAction"
-    },
-    {
-      label: "Search",
-      href: (person: Person) => `https://www.google.com/search?q=${person.name}`,
-      testId: "searchAction"
+      testId: "deleteAction",
+      color: "danger" as const,
+      icon: (
+        <VuiIcon color="danger">
+          <BiTrash />
+        </VuiIcon>
+      )
     }
   ];
 
@@ -293,7 +299,13 @@ export const Table = () => {
             label: "Delete",
             onClick: (people: Person[]) => {
               console.log("Delete", people);
-            }
+            },
+            color: "danger" as const,
+            icon: (
+              <VuiIcon color="danger">
+                <BiTrash />
+              </VuiIcon>
+            )
           }
         ]
       }