@vectara/vectara-ui 15.4.0 → 15.4.1

package/lib/components/table/_index.scss

@@ -7,6 +7,11 @@ $tableResponsiveBreakpointSmall: 500px;
   position: relative;
 }
 
+// Enable nesting tables inside other tables as expandable content.
+.vuiTableRowExpandedContent__cell > .vuiTableWrapper {
+  container-type: normal;
+}
+
 .vuiTableBlock {
   background-color: rgba(var(--vui-color-empty-shade-rgb), 0.4);
   height: 100%;
@@ -84,28 +89,30 @@ $tableResponsiveBreakpointSmall: 500px;
     display: flex;
   }
 
+  // Direct descendent selectors enable non-responsive tables to
+  // be nested inside of responsive tables.
   .vuiTable--responsive {
-    thead {
+    & > thead {
       display: none;
     }
 
-    .vuiTableRow--isSelectable {
+    & > tbody > .vuiTableRow--isSelectable {
       padding-left: $sizeXxl;
     }
 
-    .vuiTableRow--hasActions {
+    & > tbody > .vuiTableRow--hasActions {
       padding-right: $sizeXxl;
     }
 
     // This enables truncated VuiText children to actually be truncated.
-    .vuiTableCell--truncate {
+    & > tbody > tr > .vuiTableCell--truncate {
       min-width: 0;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
 
-    tbody tr:not(.vuiTableRowExpandedContent) {
+    & > tbody > tr:not(.vuiTableRowExpandedContent) {
       position: relative;
       column-gap: $sizeM;
       row-gap: $sizeM;
@@ -123,27 +130,27 @@ $tableResponsiveBreakpointSmall: 500px;
         border-radius: $sizeXs $sizeXs 0 0;
       }
 
-      td {
+      & > td {
         padding: 0;
       }
 
-      .vuiTableCellWrapper {
+      & > td > .vuiTableCellWrapper {
         display: flex;
         flex-direction: column;
         gap: $sizeXxs;
-      }
 
-      .vuiTableCell__label {
-        display: block;
+        & > .vuiTableCell__label {
+          display: block;
+        }
       }
 
-      .vuiTableRowSelect {
+      & > .vuiTableRowSelect {
         position: absolute;
         top: $sizeM;
         left: $sizeXs;
       }
 
-      .vuiTableRowActions {
+      & > .vuiTableRowActions {
         position: absolute;
         top: $sizeXs * 1.25;
         right: $sizeXs;
@@ -157,13 +164,13 @@ $tableResponsiveBreakpointSmall: 500px;
     }
 
     &.vuiTable--noActions {
-      tbody tr:not(.vuiTableRowExpandedContent) {
+      & > tbody tr:not(.vuiTableRowExpandedContent) {
         padding-right: $sizeM;
       }
     }
 
     // Expanded content in responsive mode
-    tbody tr.vuiTableRowExpandedContent {
+    & > tbody > tr.vuiTableRowExpandedContent {
       display: block;
       margin-bottom: $sizeS;
       padding: $sizeL;
@@ -179,7 +186,7 @@ $tableResponsiveBreakpointSmall: 500px;
 
 @container (width < #{$tableResponsiveBreakpointSmall}) {
   .vuiTable--responsive {
-    tbody tr:not(.vuiTableRowExpandedContent) {
+    & > tbody > tr:not(.vuiTableRowExpandedContent) {
       grid-template-columns: 1fr;
     }
   }

package/lib/styles/index.css

@@ -5099,6 +5099,10 @@ h2.react-datepicker__current-month {
   position: relative;
 }
 
+.vuiTableRowExpandedContent__cell > .vuiTableWrapper {
+  container-type: normal;
+}
+
 .vuiTableBlock {
   background-color: rgba(var(--vui-color-empty-shade-rgb), 0.4);
   height: 100%;
@@ -5166,22 +5170,22 @@ h2.react-datepicker__current-month {
   .vuiTableHeader__responsiveSelectAllCheckbox {
     display: flex;
   }
-  .vuiTable--responsive thead {
+  .vuiTable--responsive > thead {
     display: none;
   }
-  .vuiTable--responsive .vuiTableRow--isSelectable {
+  .vuiTable--responsive > tbody > .vuiTableRow--isSelectable {
     padding-left: 40px;
   }
-  .vuiTable--responsive .vuiTableRow--hasActions {
+  .vuiTable--responsive > tbody > .vuiTableRow--hasActions {
     padding-right: 40px;
   }
-  .vuiTable--responsive .vuiTableCell--truncate {
+  .vuiTable--responsive > tbody > tr > .vuiTableCell--truncate {
     min-width: 0;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) {
     position: relative;
     column-gap: 16px;
     row-gap: 16px;
@@ -5194,27 +5198,27 @@ 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:not(.vuiTableRowExpandedContent).vuiTableRow--expanded {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent).vuiTableRow--expanded {
     margin-bottom: 0;
     border-radius: 8px 8px 0 0;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) td {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) > td {
     padding: 0;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableCellWrapper {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) > td > .vuiTableCellWrapper {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableCell__label {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) > td > .vuiTableCellWrapper > .vuiTableCell__label {
     display: block;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableRowSelect {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) > .vuiTableRowSelect {
     position: absolute;
     top: 16px;
     left: 8px;
   }
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) .vuiTableRowActions {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) > .vuiTableRowActions {
     position: absolute;
     top: 10px;
     right: 8px;
@@ -5222,22 +5226,22 @@ h2.react-datepicker__current-month {
   .vuiTable--responsive.vuiTable--notSelectable tbody tr:not(.vuiTableRowExpandedContent) {
     padding-left: 16px;
   }
-  .vuiTable--responsive.vuiTable--noActions tbody tr:not(.vuiTableRowExpandedContent) {
+  .vuiTable--responsive.vuiTable--noActions > tbody tr:not(.vuiTableRowExpandedContent) {
     padding-right: 16px;
   }
-  .vuiTable--responsive tbody tr.vuiTableRowExpandedContent {
+  .vuiTable--responsive > tbody > tr.vuiTableRowExpandedContent {
     display: block;
     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 {
+  .vuiTable--responsive > tbody > tr.vuiTableRowExpandedContent .vuiTableRowExpandedContent__cell {
     padding: 0;
   }
 }
 @container (width < 500px) {
-  .vuiTable--responsive tbody tr:not(.vuiTableRowExpandedContent) {
+  .vuiTable--responsive > tbody > tr:not(.vuiTableRowExpandedContent) {
     grid-template-columns: 1fr;
   }
 }

package/package.json

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

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

@@ -32,7 +32,7 @@ export const Table = () => {
   const [isAlignTop, setIsAlignTop] = useState(false);
   const [isHeaderSticky, setIsHeaderSticky] = useState(false);
   const [isResponsive, setIsResponsive] = useState(true);
-  const [hasExpandableRows, setHasExpandableRows] = useState(false);
+  const [hasExpandableRows, setHasExpandableRows] = useState(true);
 
   // Table state
   const [isLoading, setIsLoading] = useState(true);
@@ -431,16 +431,42 @@ export const Table = () => {
         collapsedContent={
           hasExpandableRows
             ? (person: Person) => (
-                <VuiText size="s">
-                  <p>
-                    <strong>Roles:</strong> {person.role.length > 0 ? person.role.join(", ") : "None assigned"}
-                  </p>
-                  <p>
-                    <VuiTextColor color="subdued">
-                      This expanded area can contain any content such as additional details about {person.name}.
-                    </VuiTextColor>
-                  </p>
-                </VuiText>
+                <VuiTable
+                  isResponsive={false}
+                  idField="color"
+                  rows={[
+                    {
+                      color: "red",
+                      item: "apple"
+                    },
+                    {
+                      color: "orange",
+                      item: "orange"
+                    },
+                    {
+                      color: "yellow",
+                      item: "banana"
+                    }
+                  ]}
+                  columns={[
+                    {
+                      name: "color",
+                      header: {
+                        render: () => {
+                          return "Color";
+                        }
+                      }
+                    },
+                    {
+                      name: "item",
+                      header: {
+                        render: () => {
+                          return "Item";
+                        }
+                      }
+                    }
+                  ]}
+                />
               )
             : undefined
         }