@vectara/vectara-ui 20.2.0 → 20.3.0

package/lib/components/app/appLayout.scss

@@ -20,5 +20,4 @@
   flex-direction: column;
   align-items: center;
   overflow-y: auto;
-  scrollbar-gutter: stable;
 }

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

@@ -17,6 +17,7 @@ type Props<T> = {
     pagination?: Pagination | Pager;
     selection?: Selection<T>;
     search?: Search;
+    activeRowId?: string;
     customControls?: React.ReactNode;
     onSort?: OnSort;
     onReload?: () => void;
@@ -41,5 +42,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, collapsedContent, defaultSortColumn, defaultSortDirection, ...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, activeRowId, customControls, onSort, onReload, content, className, fluid, isDisabled, bodyStyle, isHeaderSticky, isResponsive, collapsedContent, defaultSortColumn, defaultSortDirection, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/table/Table.js

@@ -45,7 +45,7 @@ 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, collapsedContent, defaultSortColumn, defaultSortDirection } = _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", "defaultSortColumn", "defaultSortDirection"]);
+    var { isLoading, idField, rowDecorator, columns, rows, actions, actionsTestIdProvider, reloadTestId, pagination, selection, search, activeRowId, customControls, onSort, onReload, content, className, fluid, isDisabled = false, bodyStyle, isHeaderSticky, isResponsive = true, collapsedContent, defaultSortColumn, defaultSortDirection } = _a, rest = __rest(_a, ["isLoading", "idField", "rowDecorator", "columns", "rows", "actions", "actionsTestIdProvider", "reloadTestId", "pagination", "selection", "search", "activeRowId", "customControls", "onSort", "onReload", "content", "className", "fluid", "isDisabled", "bodyStyle", "isHeaderSticky", "isResponsive", "collapsedContent", "defaultSortColumn", "defaultSortDirection"]);
     const [rowBeingActedUpon, setRowBeingActedUpon] = useState(undefined);
     const [sortColumn, setSortColumn] = useState(defaultSortColumn !== null && defaultSortColumn !== void 0 ? defaultSortColumn : null);
     const [sortDirection, setSortDirection] = useState(defaultSortDirection !== null && defaultSortDirection !== void 0 ? defaultSortDirection : "none");
@@ -108,7 +108,8 @@ export const VuiTable = (_a) => {
                 "vuiTableRow-isBeingActedUpon": rowBeingActedUpon === row,
                 "vuiTableRow--hasActions": Boolean(actions) || hasExpandableRows,
                 "vuiTableRow--isSelectable": Boolean(onSelectRow),
-                "vuiTableRow--expanded": isExpanded
+                "vuiTableRow--expanded": isExpanded,
+                "vuiTableRow-isActive": activeRowId === rowId
             });
             const toggleExpand = () => {
                 setExpandedRowIds((prev) => {

package/lib/components/table/_index.scss

@@ -35,7 +35,6 @@ $tableResponsiveBreakpointSmall: 500px;
 
     &.vuiTableRow-isBeingActedUpon,
     &:not(.vuiTableRow--inert):hover {
-      background-color: rgba(var(--vui-color-light-shade-rgb), 0.25);
       box-shadow: $shadowSmallEnd;
       border-bottom-color: transparent;
     }
@@ -60,6 +59,10 @@ $tableResponsiveBreakpointSmall: 500px;
     }
   }
 
+  & > tbody > .vuiTableRow-isActive {
+    background-color: var(--vui-color-primary-background);
+  }
+
   & > thead > tr > th {
     font-size: $fontSizeStandard;
     font-weight: $fontWeightBold;

package/lib/styles/index.css

@@ -403,7 +403,6 @@ fieldset {
   flex-direction: column;
   align-items: center;
   overflow-y: auto;
-  scrollbar-gutter: stable;
 }
 
 .vuiAppSideNav {
@@ -5836,7 +5835,6 @@ h2.react-datepicker__current-month {
   border-bottom: 1px solid var(--vui-color-border-light);
 }
 .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;
 }
@@ -5856,6 +5854,9 @@ h2.react-datepicker__current-month {
   align-items: center;
   justify-content: flex-start;
 }
+.vuiTable > tbody > .vuiTableRow-isActive {
+  background-color: var(--vui-color-primary-background);
+}
 .vuiTable > thead > tr > th {
   font-size: 14px;
   font-weight: 600;

package/package.json

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

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

@@ -41,8 +41,9 @@ export const Table = () => {
   const [searchValue, setSearchValue] = useState<string>("");
   const [selectedRows, setSelectedRows] = useState<Person[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
-  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortColumn, setSortColumn] = useState<string>();
   const [sortDirection, setSortDirection] = useState<"asc" | "desc" | "none">("asc");
+  const [activeRowId, setActiveRowId] = useState<string>();
 
   const fetchPeople = () => {
     setIsLoading(true);
@@ -66,7 +67,7 @@ export const Table = () => {
 
   const handleSort = (column: string, direction: "asc" | "desc" | "none") => {
     if (direction === "none") {
-      setSortColumn(null);
+      setSortColumn(undefined);
       setSortDirection("none");
     } else {
       setSortColumn(column);
@@ -138,7 +139,7 @@ export const Table = () => {
       render: (person: Person) => (
         <div>
           <div>
-            <VuiLink onClick={() => console.log("Clicked", person.name)}>{person.name}</VuiLink>
+            <VuiLink onClick={() => setActiveRowId(person.id)}>{person.name}</VuiLink>
           </div>
 
           {areNicknamesVisible && (
@@ -419,6 +420,7 @@ export const Table = () => {
         reloadTestId="reloadButton"
         pagination={pagination}
         selection={selection}
+        activeRowId={activeRowId}
         onSort={handleSort}
         onReload={onReload}
         search={search}