@vectara/vectara-ui 14.3.1 → 15.0.0

package/lib/components/card/SimpleCard.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from "react";
+import { ReactNode, MouseEvent } from "react";
 type Props = {
     className?: string;
     fullHeight?: boolean;
@@ -6,6 +6,8 @@ type Props = {
     onClick?: (e: MouseEvent) => void;
     padding?: "xxs" | "xs" | "s" | "m" | "l";
     children?: React.ReactNode;
+    error?: string | ReactNode;
+    warning?: string | ReactNode;
 };
-export declare const VuiSimpleCard: ({ href, className, fullHeight, padding, children, onClick, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiSimpleCard: ({ href, className, fullHeight, padding, children, onClick, error, warning, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/card/SimpleCard.js

@@ -9,23 +9,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import { useVuiContext } from "../context/Context";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiStatus } from "../status/Status";
 export const VuiSimpleCard = (_a) => {
-    var { href, className, fullHeight, padding = "s", children, onClick } = _a, rest = __rest(_a, ["href", "className", "fullHeight", "padding", "children", "onClick"]);
+    var { href, className, fullHeight, padding = "s", children, onClick, error, warning } = _a, rest = __rest(_a, ["href", "className", "fullHeight", "padding", "children", "onClick", "error", "warning"]);
     const { createLink } = useVuiContext();
     const classes = classNames("vuiSimpleCard", `vuiSimpleCard--${padding}`, {
         "vuiSimpleCard--interactive": href || onClick,
-        "vuiSimpleCard--fullHeight": fullHeight
+        "vuiSimpleCard--fullHeight": fullHeight,
+        "vuiSimpleCard--danger": error,
+        "vuiSimpleCard--warning": warning
     }, className);
+    const content = (_jsxs(_Fragment, { children: [children, error && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), typeof error === "string" ? _jsx(VuiStatus, { status: "error", label: error }) : error] })), warning && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), typeof warning === "string" ? _jsx(VuiStatus, { status: "warning", label: warning }) : warning] }))] }));
     if (href) {
         return createLink(Object.assign({ className: classes, href,
-            onClick,
-            children }, rest));
+            onClick, children: content }, rest));
     }
     if (onClick) {
-        return (_jsx("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: children })));
+        return (_jsx("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: content })));
     }
-    return (_jsx("div", Object.assign({ className: classes, onClick: onClick }, rest, { children: children })));
+    return (_jsx("div", Object.assign({ className: classes, onClick: onClick }, rest, { children: content })));
 };

package/lib/components/card/_index.scss

@@ -188,6 +188,22 @@
   }
 }
 
+.vuiSimpleCard--danger {
+  border-color: var(--vui-color-danger-shade);
+
+  &.vuiSimpleCard--interactive:hover {
+    border-color: var(--vui-color-danger-shade);
+  }
+}
+
+.vuiSimpleCard--warning {
+  border-color: var(--vui-color-warning-shade);
+
+  &.vuiSimpleCard--interactive:hover {
+    border-color: var(--vui-color-warning-shade);
+  }
+}
+
 .vuiSimpleCard--fullHeight {
   height: 100%;
 }

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

@@ -8,7 +8,7 @@ import { Column, OnSort, Row } from "./types";
 type Props<T> = {
     isLoading?: boolean;
     idField: keyof T | ((row: T) => string);
-    rowDecorator?: (row: T) => Record<string, string>;
+    rowDecorator?: (row: T) => React.HTMLAttributes<HTMLTableRowElement>;
     columns: Column<T>[];
     rows: T[];
     actions?: TableRowActionsProps<T>["actions"];
@@ -27,6 +27,7 @@ type Props<T> = {
     bodyStyle?: BodyStyle;
     isHeaderSticky?: boolean;
     isResponsive?: boolean;
+    collapsedContent?: (row: T) => React.ReactNode;
 };
 type BodyStyle = {
     verticalAlign?: "top" | "middle" | "bottom";
@@ -38,5 +39,5 @@ type Selection<T> = {
     selectedRows?: T[];
 };
 type Search = TextInputProps;
-export declare const VuiTable: <T extends Row>({ isLoading, idField, rowDecorator, columns, rows, actions, actionsTestIdProvider, reloadTestId, pagination, selection, search, customControls, onSort, onReload, content, className, fluid, isDisabled, bodyStyle, isHeaderSticky, isResponsive, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTable: <T extends Row>({ isLoading, idField, rowDecorator, columns, rows, actions, actionsTestIdProvider, reloadTestId, pagination, selection, search, customControls, onSort, onReload, content, className, fluid, isDisabled, bodyStyle, isHeaderSticky, isResponsive, collapsedContent, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/table/Table.js

@@ -10,8 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import React, { useState } from "react";
 import classNames from "classnames";
+import { BiChevronDown, BiChevronRight } from "react-icons/bi";
 import { VuiCheckbox, VuiTextInput } from "../form";
 import { VuiSpacer } from "../spacer/Spacer";
 import { VuiTableRowActions } from "./TableRowActions";
@@ -26,6 +27,8 @@ import { VuiTableBulkActions } from "./TableBulkActions";
 import { VuiSpinner } from "../spinner/Spinner";
 import { VuiTableContent } from "./TableContent";
 import { VuiButtonSecondary } from "../button/ButtonSecondary";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiIcon } from "../icon/Icon";
 const verticalAlignToClass = {
     top: "vuiTable--verticalAlignTop",
     middle: "vuiTable--verticalAlignMiddle",
@@ -41,10 +44,11 @@ const extractId = (row, idField) => {
 // https://github.com/typescript-eslint/typescript-eslint/issues/4062
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 export const VuiTable = (_a) => {
-    var { isLoading, idField, rowDecorator, columns, rows, actions, actionsTestIdProvider, reloadTestId, pagination, selection, search, customControls, onSort, onReload, content, className, fluid, isDisabled = false, bodyStyle, isHeaderSticky, isResponsive = true } = _a, rest = __rest(_a, ["isLoading", "idField", "rowDecorator", "columns", "rows", "actions", "actionsTestIdProvider", "reloadTestId", "pagination", "selection", "search", "customControls", "onSort", "onReload", "content", "className", "fluid", "isDisabled", "bodyStyle", "isHeaderSticky", "isResponsive"]);
+    var { isLoading, idField, rowDecorator, columns, rows, actions, actionsTestIdProvider, reloadTestId, pagination, selection, search, customControls, onSort, onReload, content, className, fluid, isDisabled = false, bodyStyle, isHeaderSticky, isResponsive = true, collapsedContent } = _a, rest = __rest(_a, ["isLoading", "idField", "rowDecorator", "columns", "rows", "actions", "actionsTestIdProvider", "reloadTestId", "pagination", "selection", "search", "customControls", "onSort", "onReload", "content", "className", "fluid", "isDisabled", "bodyStyle", "isHeaderSticky", "isResponsive", "collapsedContent"]);
     const [rowBeingActedUpon, setRowBeingActedUpon] = useState(undefined);
     const [sortColumn, setSortColumn] = useState(null);
     const [sortDirection, setSortDirection] = useState("none");
+    const [expandedRowIds, setExpandedRowIds] = useState(new Set());
     const { bulkActions, isRowSelectable, onSelectRow, selectedRows } = selection || {};
     const { value: searchValue } = search || {};
     const handleSort = (columnName, direction) => {
@@ -74,7 +78,8 @@ export const VuiTable = (_a) => {
     }, {})) || {};
     const hasSearch = search !== undefined;
     const hasBulkActions = bulkActions !== undefined;
-    const columnCount = columns.length + (onSelectRow ? 1 : 0) + (actions ? 1 : 0);
+    const hasExpandableRows = collapsedContent !== undefined;
+    const columnCount = columns.length + (onSelectRow ? 1 : 0) + (actions || hasExpandableRows ? 1 : 0);
     const classes = classNames("vuiTable", (bodyStyle === null || bodyStyle === void 0 ? void 0 : bodyStyle.verticalAlign) && verticalAlignToClass[bodyStyle.verticalAlign], {
         "vuiTable--fluid": fluid,
         "vuiTable--responsive": isResponsive,
@@ -97,33 +102,48 @@ export const VuiTable = (_a) => {
             const rowId = extractId(row, idField);
             const rowAttributes = (_a = rowDecorator === null || rowDecorator === void 0 ? void 0 : rowDecorator(row)) !== null && _a !== void 0 ? _a : {};
             const { className: rowClassNameAttribute } = rowAttributes, restRowAttributes = __rest(rowAttributes, ["className"]);
+            const isExpanded = expandedRowIds.has(rowId);
             const rowClassName = classNames(rowClassNameAttribute, {
                 "vuiTableRow-isBeingActedUpon": rowBeingActedUpon === row,
-                "vuiTableRow--hasActions": Boolean(actions),
-                "vuiTableRow--isSelectable": Boolean(onSelectRow)
+                "vuiTableRow--hasActions": Boolean(actions) || hasExpandableRows,
+                "vuiTableRow--isSelectable": Boolean(onSelectRow),
+                "vuiTableRow--expanded": isExpanded
             });
-            return (_jsxs("tr", Object.assign({ className: rowClassName }, restRowAttributes, { children: [onSelectRow && (_jsx("td", Object.assign({ className: "vuiTableRowSelect" }, { children: _jsx(VuiTableCell, { children: _jsx(VuiCheckbox, { disabled: isRowSelectable ? !isRowSelectable(row) : undefined, checked: (_b = selectedIds[rowId]) !== null && _b !== void 0 ? _b : false, onChange: () => {
-                                    if (selectedIds[rowId]) {
-                                        delete selectedIds[rowId];
-                                    }
-                                    else {
-                                        selectedIds[rowId] = true;
-                                    }
-                                    const selectedRowIds = Object.keys(selectedIds);
-                                    // Map selected row IDs to selected rows.
-                                    const selectedRows = selectedRowIds.map((id) => rows.find((row) => row.id === id));
-                                    onSelectRow(selectedRows);
-                                } }) }) }))), columns.map((column) => {
-                        const { name, render, className, testId } = column;
-                        return (_jsx("td", Object.assign({ className: className, "data-testid": typeof testId === "function" ? testId(row) : testId }, { children: _jsx(VuiTableCell, Object.assign({ column: column }, { children: render ? render(row, rowIndex) : row[column.name] })) }), name));
-                    }), actions && (_jsx("td", Object.assign({ className: "vuiTableRowActions" }, { children: _jsx(VuiTableRowActions, { row: row, actions: actions, onToggle: (isSelected) => {
-                                if (isSelected) {
-                                    setRowBeingActedUpon(row);
-                                }
-                                else {
-                                    setRowBeingActedUpon(undefined);
-                                }
-                            }, testId: (_c = actionsTestIdProvider === null || actionsTestIdProvider === void 0 ? void 0 : actionsTestIdProvider(row)) !== null && _c !== void 0 ? _c : undefined }) })))] }), rowId));
+            const toggleExpand = () => {
+                setExpandedRowIds((prev) => {
+                    const next = new Set(prev);
+                    if (next.has(rowId)) {
+                        next.delete(rowId);
+                    }
+                    else {
+                        next.add(rowId);
+                    }
+                    return next;
+                });
+            };
+            return (_jsxs(React.Fragment, { children: [_jsxs("tr", Object.assign({ className: rowClassName }, restRowAttributes, { children: [onSelectRow && (_jsx("td", Object.assign({ className: "vuiTableRowSelect" }, { children: _jsx(VuiTableCell, { children: _jsx(VuiCheckbox, { disabled: isRowSelectable ? !isRowSelectable(row) : undefined, checked: (_b = selectedIds[rowId]) !== null && _b !== void 0 ? _b : false, onChange: () => {
+                                            if (selectedIds[rowId]) {
+                                                delete selectedIds[rowId];
+                                            }
+                                            else {
+                                                selectedIds[rowId] = true;
+                                            }
+                                            const selectedRowIds = Object.keys(selectedIds);
+                                            const selectedRows = selectedRowIds
+                                                .map((id) => rows.find((row) => extractId(row, idField) === id))
+                                                .filter((row) => row !== undefined);
+                                            onSelectRow(selectedRows);
+                                        } }) }) }))), columns.map((column) => {
+                                const { name, render, className, testId } = column;
+                                return (_jsx("td", Object.assign({ className: className, "data-testid": typeof testId === "function" ? testId(row) : testId }, { children: _jsx(VuiTableCell, Object.assign({ column: column }, { children: render ? render(row, rowIndex) : row[column.name] })) }), name));
+                            }), (actions || hasExpandableRows) && (_jsx("td", Object.assign({ className: "vuiTableRowActions" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "end", spacing: "s" }, { children: [actions && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiTableRowActions, { row: row, actions: actions, onToggle: (isSelected) => {
+                                                    if (isSelected) {
+                                                        setRowBeingActedUpon(row);
+                                                    }
+                                                    else {
+                                                        setRowBeingActedUpon(undefined);
+                                                    }
+                                                }, testId: (_c = actionsTestIdProvider === null || actionsTestIdProvider === void 0 ? void 0 : actionsTestIdProvider(row)) !== null && _c !== void 0 ? _c : undefined }) }))), hasExpandableRows && (_jsx(VuiFlexItem, Object.assign({ grow: false, className: "vuiTableRowExpandToggle" }, { children: _jsx(VuiIconButton, { icon: _jsx(VuiIcon, { children: isExpanded ? _jsx(BiChevronDown, {}) : _jsx(BiChevronRight, {}) }), color: "neutral", "aria-label": isExpanded ? "Collapse row" : "Expand row", onClick: toggleExpand }) })))] })) })))] })), hasExpandableRows && isExpanded && (_jsx("tr", Object.assign({ className: "vuiTableRowExpandedContent vuiTableRow--inert" }, { children: _jsx("td", Object.assign({ className: "vuiTableRowExpandedContent__cell", colSpan: columnCount }, { children: collapsedContent(row) })) })))] }, rowId));
         });
     }
     const selectAllCheckboxProps = {
@@ -158,5 +178,5 @@ export const VuiTable = (_a) => {
                                     const { name, width } = column;
                                     const styles = width ? { width } : undefined;
                                     return (_jsx("th", Object.assign({ style: styles }, { children: _jsx(VuiTableHeaderCell, { column: column, onSort: handleSort, sortDirection: sortColumn === name ? sortDirection : "none" }) }), name));
-                                }), actions && _jsx("th", { className: "vuiTableHeaderActions" })] }) }), _jsx("tbody", { children: tableContent })] })), !pagination ? undefined : isComplexPagination(pagination) ? (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiPagination, Object.assign({ isDisabled: !isInteractive }, pagination))] })) : (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiTablePager, Object.assign({ isDisabled: !isInteractive }, pagination))] }))] })));
+                                }), (actions || hasExpandableRows) && _jsx("th", { className: "vuiTableHeaderActions" })] }) }), _jsx("tbody", { children: tableContent })] })), !pagination ? undefined : isComplexPagination(pagination) ? (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiPagination, Object.assign({ isDisabled: !isInteractive }, pagination))] })) : (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiTablePager, Object.assign({ isDisabled: !isInteractive }, pagination))] }))] })));
 };

package/lib/components/table/_index.scss

@@ -97,7 +97,7 @@ $tableResponsiveBreakpointSmall: 500px;
       padding-right: $sizeXxl;
     }
 
-    tbody tr {
+    tbody tr:not(.vuiTableRowExpandedContent) {
       position: relative;
       column-gap: $sizeM;
       row-gap: $sizeM;
@@ -110,6 +110,11 @@ $tableResponsiveBreakpointSmall: 500px;
       box-shadow: $shadowLargeStart;
       margin-bottom: $sizeS;
 
+      &.vuiTableRow--expanded {
+        margin-bottom: 0;
+        border-radius: $sizeXs $sizeXs 0 0;
+      }
+
       td {
         padding: 0;
       }
@@ -138,22 +143,36 @@ $tableResponsiveBreakpointSmall: 500px;
     }
 
     &.vuiTable--notSelectable {
-      tbody tr {
+      tbody tr:not(.vuiTableRowExpandedContent) {
         padding-left: $sizeM;
       }
     }
 
     &.vuiTable--noActions {
-      tbody tr {
+      tbody tr:not(.vuiTableRowExpandedContent) {
         padding-right: $sizeM;
       }
     }
+
+    // Expanded content in responsive mode
+    tbody tr.vuiTableRowExpandedContent {
+      display: block;
+      margin-top: -$sizeS - $sizeXxs; // Pull up to connect with parent row
+      margin-bottom: $sizeS;
+      padding: $sizeL;
+      border-radius: 0 0 $sizeXs $sizeXs;
+      box-shadow: $shadowLargeStart;
+
+      .vuiTableRowExpandedContent__cell {
+        padding: 0;
+      }
+    }
   }
 }
 
 @container (width < #{$tableResponsiveBreakpointSmall}) {
   .vuiTable--responsive {
-    tbody tr {
+    tbody tr:not(.vuiTableRowExpandedContent) {
       grid-template-columns: 1fr;
     }
   }
@@ -249,3 +268,30 @@ $tableResponsiveBreakpointSmall: 500px;
 .vuiTableHeaderCell__icon--none {
   opacity: 0.75;
 }
+
+// Expandable rows
+.vuiTableRowExpandToggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vuiTableRow--expanded {
+  border-bottom-color: transparent;
+}
+
+.vuiTableRowExpandedContent {
+  background-color: rgba(var(--vui-color-light-shade-rgb), 0.25);
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--vui-color-border-light);
+  }
+
+  &:last-child {
+    border-bottom: 1px solid var(--vui-color-border-medium);
+  }
+}
+
+.vuiTable .vuiTableRowExpandedContent__cell {
+  padding: $sizeL $sizeXl;
+}

package/lib/components/tabs/Tabs.d.ts

@@ -1,12 +1,12 @@
 import { TabSize } from "./types";
-type Style = "enclosed" | "open";
+type TabStyle = "enclosed" | "open";
 type Props = {
     children: React.ReactNode;
     append?: React.ReactNode;
     className?: string;
     size?: TabSize;
     fullWidth?: boolean;
-    style?: Style;
+    tabStyle?: TabStyle;
 };
-export declare const VuiTabs: ({ children, className, append, size, fullWidth, style }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTabs: ({ children, className, append, size, fullWidth, tabStyle }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/tabs/Tabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-export const VuiTabs = ({ children, className, append, size = "s", fullWidth, style = "open" }) => {
-    const classes = classNames(className, "vuiTabs", `vuiTabs--${size}`, `vuiTabs--${style}`, {
+export const VuiTabs = ({ children, className, append, size = "s", fullWidth, tabStyle = "open" }) => {
+    const classes = classNames(className, "vuiTabs", `vuiTabs--${size}`, `vuiTabs--${tabStyle}`, {
         "vuiTabs--fullWidth": fullWidth
     });
     return (_jsxs("div", Object.assign({ className: classes }, { children: [_jsx("div", Object.assign({ className: "vuiTabs__tabs" }, { children: children })), append && _jsx("div", Object.assign({ className: "vuiTabs__appendedContent" }, { children: append }))] })));

package/lib/styles/index.css

@@ -1289,6 +1289,20 @@ fieldset {
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
 }
 
+.vuiSimpleCard--danger {
+  border-color: var(--vui-color-danger-shade);
+}
+.vuiSimpleCard--danger.vuiSimpleCard--interactive:hover {
+  border-color: var(--vui-color-danger-shade);
+}
+
+.vuiSimpleCard--warning {
+  border-color: var(--vui-color-warning-shade);
+}
+.vuiSimpleCard--warning.vuiSimpleCard--interactive:hover {
+  border-color: var(--vui-color-warning-shade);
+}
+
 .vuiSimpleCard--fullHeight {
   height: 100%;
 }
@@ -5094,7 +5108,7 @@ h2.react-datepicker__current-month {
   .vuiTable--responsive .vuiTableRow--hasActions {
     padding-right: 40px;
   }
-  .vuiTable--responsive tbody tr {
+  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) {
     position: relative;
     column-gap: 16px;
     row-gap: 16px;
@@ -5107,36 +5121,51 @@ h2.react-datepicker__current-month {
     box-shadow: rgba(50, 50, 93, 0.25) 0px 0 0 0, rgba(0, 0, 0, 0.16) 0px 1px 4px;
     margin-bottom: 12px;
   }
-  .vuiTable--responsive tbody tr td {
+  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent).vuiTableRow--expanded {
+    margin-bottom: 0;
+    border-radius: 8px 8px 0 0;
+  }
+  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) td {
     padding: 0;
   }
-  .vuiTable--responsive tbody tr .vuiTableCellWrapper {
+  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableCellWrapper {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
-  .vuiTable--responsive tbody tr .vuiTableCell__label {
+  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableCell__label {
     display: block;
   }
-  .vuiTable--responsive tbody tr .vuiTableRowSelect {
+  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableRowSelect {
     position: absolute;
     top: 16px;
     left: 8px;
   }
-  .vuiTable--responsive tbody tr .vuiTableRowActions {
+  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableRowActions {
     position: absolute;
     top: 10px;
     right: 8px;
   }
-  .vuiTable--responsive.vuiTable--notSelectable tbody tr {
+  .vuiTable--responsive.vuiTable--notSelectable tbody tr:not(.vuiTableRowExpandedContent) {
     padding-left: 16px;
   }
-  .vuiTable--responsive.vuiTable--noActions tbody tr {
+  .vuiTable--responsive.vuiTable--noActions tbody tr:not(.vuiTableRowExpandedContent) {
     padding-right: 16px;
   }
+  .vuiTable--responsive tbody tr.vuiTableRowExpandedContent {
+    display: block;
+    margin-top: -16px;
+    margin-bottom: 12px;
+    padding: 24px;
+    border-radius: 0 0 8px 8px;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 0 0 0, rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  }
+  .vuiTable--responsive tbody tr.vuiTableRowExpandedContent .vuiTableRowExpandedContent__cell {
+    padding: 0;
+  }
 }
 @container (width < 500px) {
-  .vuiTable--responsive tbody tr {
+  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) {
     grid-template-columns: 1fr;
   }
 }
@@ -5222,6 +5251,30 @@ h2.react-datepicker__current-month {
   opacity: 0.75;
 }
 
+.vuiTableRowExpandToggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vuiTableRow--expanded {
+  border-bottom-color: transparent;
+}
+
+.vuiTableRowExpandedContent {
+  background-color: rgba(var(--vui-color-light-shade-rgb), 0.25);
+}
+.vuiTableRowExpandedContent:not(:last-child) {
+  border-bottom: 1px solid var(--vui-color-border-light);
+}
+.vuiTableRowExpandedContent:last-child {
+  border-bottom: 1px solid var(--vui-color-border-medium);
+}
+
+.vuiTable .vuiTableRowExpandedContent__cell {
+  padding: 24px 32px;
+}
+
 .vuiTabs--open {
   display: flex;
   border-bottom: 1px solid var(--vui-color-border-light);

package/package.json

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