@vectara/vectara-ui 17.1.0 → 17.3.0

package/lib/components/kvTable/KvTable.d.ts

@@ -6,6 +6,7 @@ type Props = {
     label?: string;
     padding?: KvTablePadding;
     align?: KvTableAlign;
+    "data-testid"?: string;
 };
-export declare const VuiKvTable: ({ items, keyHeader, valueHeader, label, padding, align }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiKvTable: ({ items, keyHeader, valueHeader, label, padding, align, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/kvTable/KvTable.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 function normalizeItems(items) {
@@ -18,9 +29,10 @@ const alignToClassMap = {
     middle: "vuiKvTable--alignMiddle",
     bottom: "vuiKvTable--alignBottom"
 };
-export const VuiKvTable = ({ items, keyHeader, valueHeader, label, padding = "xs", align = "middle" }) => {
+export const VuiKvTable = (_a) => {
+    var { items, keyHeader, valueHeader, label, padding = "xs", align = "middle" } = _a, rest = __rest(_a, ["items", "keyHeader", "valueHeader", "label", "padding", "align"]);
     const hasHeader = keyHeader !== undefined || valueHeader !== undefined;
     const classes = classNames("vuiKvTable", paddingToClassMap[padding], alignToClassMap[align]);
     const normalizedItems = normalizeItems(items);
-    return (_jsxs("table", Object.assign({ className: classes, "aria-label": label }, { children: [hasHeader && (_jsx("thead", { children: _jsxs("tr", { children: [keyHeader !== undefined && _jsx("th", { children: keyHeader }), valueHeader !== undefined && _jsx("th", { children: valueHeader })] }) })), _jsx("tbody", { children: normalizedItems.map((item, i) => (_jsxs("tr", { children: [_jsx("th", Object.assign({ scope: "row", className: "vuiKvTableCell--key" }, { children: item.key })), _jsx("td", Object.assign({ className: "vuiKvTableCell--value" }, { children: item.value }))] }, i))) })] })));
+    return (_jsxs("dl", Object.assign({ className: classes, "aria-label": label }, rest, { children: [hasHeader && (_jsxs("div", Object.assign({ className: "vuiKvTableRow vuiKvTableRow--header" }, { children: [_jsx("dt", Object.assign({ className: "vuiKvTableCell--key" }, { children: keyHeader })), _jsx("dd", Object.assign({ className: "vuiKvTableCell--value" }, { children: valueHeader }))] }))), normalizedItems.map((item, i) => (_jsxs("div", Object.assign({ className: "vuiKvTableRow" }, { children: [_jsx("dt", Object.assign({ className: "vuiKvTableCell--key" }, { children: item.key })), _jsx("dd", Object.assign({ className: "vuiKvTableCell--value" }, { children: item.value }))] }), i)))] })));
 };

package/lib/components/kvTable/_index.scss

@@ -1,85 +1,82 @@
 .vuiKvTable {
+  display: table;
   width: 100%;
   table-layout: auto;
   border: 1px solid var(--vui-color-border-light);
+  border-collapse: collapse;
+}
 
-  thead {
-    background-color: var(--vui-color-light-shade);
-    border-bottom: 1px solid var(--vui-color-border-light);
-  }
-
-  thead th {
-    font-size: $fontSizeSmall;
-    font-weight: $fontWeightBold;
-    padding: $sizeXs $sizeS;
-    text-align: left;
-  }
-
-  tbody tr {
-    border-bottom: 1px solid var(--vui-color-border-light);
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
+.vuiKvTableRow {
+  display: table-row;
+}
 
-  td {
-    font-size: $fontSizeStandard;
-  }
+.vuiKvTableRow--header {
+  background-color: var(--vui-color-light-shade);
 }
 
 // Key cell: row header, subdued color, natural (non-wrapping) width.
 .vuiKvTableCell--key {
+  display: table-cell;
   color: var(--vui-color-subdued-shade);
   white-space: nowrap;
   font-weight: $fontWeightNormal;
   font-size: $fontSizeStandard;
   text-align: left;
+  border-bottom: 1px solid var(--vui-color-border-light);
 }
 
 // Value cell: consumes all remaining width in auto-layout table.
 .vuiKvTableCell--value {
+  display: table-cell;
   width: 100%;
+  font-size: $fontSizeStandard;
+  border-bottom: 1px solid var(--vui-color-border-light);
 }
 
-.vuiKvTable--paddingXxs {
-  td,
-  .vuiKvTableCell--key {
-    padding: $sizeXxs $sizeS;
-  }
+.vuiKvTableRow:last-child .vuiKvTableCell--key,
+.vuiKvTableRow:last-child .vuiKvTableCell--value {
+  border-bottom: none;
 }
 
-.vuiKvTable--paddingXs {
-  td,
-  .vuiKvTableCell--key {
-    padding: $sizeXs $sizeS;
-  }
+.vuiKvTable--paddingXxs .vuiKvTableCell--key,
+.vuiKvTable--paddingXxs .vuiKvTableCell--value {
+  padding: $sizeXxs $sizeS;
 }
 
-.vuiKvTable--paddingS {
-  td,
-  .vuiKvTableCell--key {
-    padding: $sizeS $sizeS;
-  }
+.vuiKvTable--paddingXs .vuiKvTableCell--key,
+.vuiKvTable--paddingXs .vuiKvTableCell--value {
+  padding: $sizeXs $sizeS;
 }
 
-.vuiKvTable--alignTop {
-  td,
-  .vuiKvTableCell--key {
-    vertical-align: top;
-  }
+.vuiKvTable--paddingS .vuiKvTableCell--key,
+.vuiKvTable--paddingS .vuiKvTableCell--value {
+  padding: $sizeS $sizeS;
 }
 
-.vuiKvTable--alignMiddle {
-  td,
-  .vuiKvTableCell--key {
-    vertical-align: middle;
-  }
+.vuiKvTable--alignTop .vuiKvTableCell--key,
+.vuiKvTable--alignTop .vuiKvTableCell--value {
+  vertical-align: top;
 }
 
-.vuiKvTable--alignBottom {
-  td,
-  .vuiKvTableCell--key {
-    vertical-align: bottom;
-  }
+.vuiKvTable--alignMiddle .vuiKvTableCell--key,
+.vuiKvTable--alignMiddle .vuiKvTableCell--value {
+  vertical-align: middle;
+}
+
+.vuiKvTable--alignBottom .vuiKvTableCell--key,
+.vuiKvTable--alignBottom .vuiKvTableCell--value {
+  vertical-align: bottom;
+}
+
+// Header row overrides: match the original thead th appearance regardless of
+// the table's padding variant.
+.vuiKvTableRow--header .vuiKvTableCell--key,
+.vuiKvTableRow--header .vuiKvTableCell--value {
+  color: inherit;
+  font-size: $fontSizeSmall;
+  font-weight: $fontWeightBold;
+  padding: $sizeXs $sizeS;
+  text-align: left;
+  vertical-align: middle;
+  white-space: normal;
 }

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/lib/components/table/_index.scss

@@ -26,11 +26,11 @@ $tableResponsiveBreakpointSmall: 500px;
   width: 100%;
   table-layout: fixed;
 
-  thead {
+  & > thead {
     border-bottom: 1px solid var(--vui-color-border-medium);
   }
 
-  tbody tr {
+  & > tbody > tr {
     border-bottom: 1px solid var(--vui-color-border-light);
 
     &.vuiTableRow-isBeingActedUpon,
@@ -60,13 +60,13 @@ $tableResponsiveBreakpointSmall: 500px;
     }
   }
 
-  th {
+  & > thead > tr > th {
     font-size: $fontSizeStandard;
     font-weight: $fontWeightBold;
     padding: $sizeXxs;
   }
 
-  td {
+  & > tbody > tr > td {
     font-size: $fontSizeStandard;
     padding: $sizeXxs;
     vertical-align: middle;
@@ -193,19 +193,19 @@ $tableResponsiveBreakpointSmall: 500px;
 }
 
 .vuiTable--verticalAlignTop {
-  tbody td {
+  & > tbody > tr > td {
     vertical-align: top;
   }
 }
 
 .vuiTable--verticalAlignMiddle {
-  tbody td {
+  & > tbody > tr > td {
     vertical-align: middle;
   }
 }
 
 .vuiTable--verticalAlignBottom {
-  tbody td {
+  & > tbody > tr > td {
     vertical-align: bottom;
   }
 }
@@ -310,5 +310,5 @@ $tableResponsiveBreakpointSmall: 500px;
 }
 
 .vuiTable .vuiTableRowExpandedContent__cell {
-  padding: $sizeL $sizeXl;
+  padding: $sizeS $sizeM;
 }

package/lib/styles/index.css

@@ -3932,72 +3932,84 @@ h2.react-datepicker__current-month {
 }
 
 .vuiKvTable {
+  display: table;
   width: 100%;
   table-layout: auto;
   border: 1px solid var(--vui-color-border-light);
+  border-collapse: collapse;
 }
-.vuiKvTable thead {
-  background-color: var(--vui-color-light-shade);
-  border-bottom: 1px solid var(--vui-color-border-light);
-}
-.vuiKvTable thead th {
-  font-size: 12px;
-  font-weight: 600;
-  padding: 8px 12px;
-  text-align: left;
-}
-.vuiKvTable tbody tr {
-  border-bottom: 1px solid var(--vui-color-border-light);
-}
-.vuiKvTable tbody tr:last-child {
-  border-bottom: none;
+
+.vuiKvTableRow {
+  display: table-row;
 }
-.vuiKvTable td {
-  font-size: 14px;
+
+.vuiKvTableRow--header {
+  background-color: var(--vui-color-light-shade);
 }
 
 .vuiKvTableCell--key {
+  display: table-cell;
   color: var(--vui-color-subdued-shade);
   white-space: nowrap;
   font-weight: 400;
   font-size: 14px;
   text-align: left;
+  border-bottom: 1px solid var(--vui-color-border-light);
 }
 
 .vuiKvTableCell--value {
+  display: table-cell;
   width: 100%;
+  font-size: 14px;
+  border-bottom: 1px solid var(--vui-color-border-light);
 }
 
-.vuiKvTable--paddingXxs td,
-.vuiKvTable--paddingXxs .vuiKvTableCell--key {
+.vuiKvTableRow:last-child .vuiKvTableCell--key,
+.vuiKvTableRow:last-child .vuiKvTableCell--value {
+  border-bottom: none;
+}
+
+.vuiKvTable--paddingXxs .vuiKvTableCell--key,
+.vuiKvTable--paddingXxs .vuiKvTableCell--value {
   padding: 4px 12px;
 }
 
-.vuiKvTable--paddingXs td,
-.vuiKvTable--paddingXs .vuiKvTableCell--key {
+.vuiKvTable--paddingXs .vuiKvTableCell--key,
+.vuiKvTable--paddingXs .vuiKvTableCell--value {
   padding: 8px 12px;
 }
 
-.vuiKvTable--paddingS td,
-.vuiKvTable--paddingS .vuiKvTableCell--key {
+.vuiKvTable--paddingS .vuiKvTableCell--key,
+.vuiKvTable--paddingS .vuiKvTableCell--value {
   padding: 12px 12px;
 }
 
-.vuiKvTable--alignTop td,
-.vuiKvTable--alignTop .vuiKvTableCell--key {
+.vuiKvTable--alignTop .vuiKvTableCell--key,
+.vuiKvTable--alignTop .vuiKvTableCell--value {
   vertical-align: top;
 }
 
-.vuiKvTable--alignMiddle td,
-.vuiKvTable--alignMiddle .vuiKvTableCell--key {
+.vuiKvTable--alignMiddle .vuiKvTableCell--key,
+.vuiKvTable--alignMiddle .vuiKvTableCell--value {
   vertical-align: middle;
 }
 
-.vuiKvTable--alignBottom td,
-.vuiKvTable--alignBottom .vuiKvTableCell--key {
+.vuiKvTable--alignBottom .vuiKvTableCell--key,
+.vuiKvTable--alignBottom .vuiKvTableCell--value {
   vertical-align: bottom;
 }
 
+.vuiKvTableRow--header .vuiKvTableCell--key,
+.vuiKvTableRow--header .vuiKvTableCell--value {
+  color: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 8px 12px;
+  text-align: left;
+  vertical-align: middle;
+  white-space: normal;
+}
+
 .vuiLink {
   color: var(--vui-color-primary-shade) !important;
   text-decoration: none;
@@ -5457,39 +5469,39 @@ h2.react-datepicker__current-month {
   width: 100%;
   table-layout: fixed;
 }
-.vuiTable thead {
+.vuiTable > thead {
   border-bottom: 1px solid var(--vui-color-border-medium);
 }
-.vuiTable tbody tr {
+.vuiTable > tbody > tr {
   border-bottom: 1px solid var(--vui-color-border-light);
 }
-.vuiTable tbody tr.vuiTableRow-isBeingActedUpon, .vuiTable tbody tr:not(.vuiTableRow--inert):hover {
+.vuiTable > tbody > tr.vuiTableRow-isBeingActedUpon, .vuiTable > tbody > tr:not(.vuiTableRow--inert):hover {
   background-color: rgba(var(--vui-color-light-shade-rgb), 0.25);
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
   border-bottom-color: transparent;
 }
-.vuiTable tbody tr:last-child {
+.vuiTable > tbody > tr:last-child {
   border-bottom: 1px solid var(--vui-color-border-medium);
 }
-.vuiTable tbody tr .vuiTableCell__label {
+.vuiTable > tbody > tr .vuiTableCell__label {
   display: none;
   max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.vuiTable tbody tr .vuiTableCell {
+.vuiTable > tbody > tr .vuiTableCell {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
 }
-.vuiTable th {
+.vuiTable > thead > tr > th {
   font-size: 14px;
   font-weight: 600;
   padding: 4px;
 }
-.vuiTable td {
+.vuiTable > tbody > tr > td {
   font-size: 14px;
   padding: 4px;
   vertical-align: middle;
@@ -5585,15 +5597,15 @@ h2.react-datepicker__current-month {
     grid-template-columns: 1fr;
   }
 }
-.vuiTable--verticalAlignTop tbody td {
+.vuiTable--verticalAlignTop > tbody > tr > td {
   vertical-align: top;
 }
 
-.vuiTable--verticalAlignMiddle tbody td {
+.vuiTable--verticalAlignMiddle > tbody > tr > td {
   vertical-align: middle;
 }
 
-.vuiTable--verticalAlignBottom tbody td {
+.vuiTable--verticalAlignBottom > tbody > tr > td {
   vertical-align: bottom;
 }
 
@@ -5692,7 +5704,7 @@ h2.react-datepicker__current-month {
 }
 
 .vuiTable .vuiTableRowExpandedContent__cell {
-  padding: 24px 32px;
+  padding: 12px 16px;
 }
 
 .vuiTabs--open {

package/package.json

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

package/src/docs/pages/kvTable/Simple.tsx

@@ -3,6 +3,7 @@ import { VuiKvTable } from "../../../lib";
 export const Simple = () => {
   return (
     <VuiKvTable
+      data-testid="simpleKvTable"
       label="Span details"
       items={{
         span_id: "b7ad6b7169203331",

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>
+            )
           }
         ]
       }
@@ -432,7 +442,7 @@ export const Table = () => {
         isResponsive={isResponsive}
         collapsedContent={
           hasExpandableRows
-            ? (person: Person) => (
+            ? () => (
                 <VuiTable
                   isResponsive={false}
                   idField="color"