auto-select child elements in table when parent selected

Author: JarrodMFlesch

packages/ui/src/elements/TreeView/NestedSectionsTable/index.scss

@@ -158,7 +158,10 @@
   }
 
   // When a selected section is followed by another selected section
-  &__section--selected + &__section--selected &__cell {
+  &__section--selected + &__section--selected &__cell,
+  &__section--selected + &__section--selected-descendant &__cell,
+  &__section--selected-descendant + &__section--selected &__cell,
+  &__section--selected-descendant + &__section--selected-descendant &__cell {
     border-top: none;
 
     &:first-child {
@@ -192,6 +195,30 @@
     }
   }
 
+  &__section--selected:has(+ &__section--selected-descendant),
+  &__section--selected-descendant:has(+ &__section--selected),
+  &__section--selected-descendant:has(+ &__section--selected-descendant) {
+    .nested-sections-table__cell {
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        height: 1px;
+        right: 0;
+        background-color: var(--cell-inner-border-color);
+        z-index: 1;
+      }
+
+      &:first-child {
+        border-bottom-left-radius: 0;
+      }
+      &:nth-last-child(2) {
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
   &__section {
     position: relative;
     display: table-row-group;
@@ -225,6 +252,16 @@
     --cell-inner-border-color: var(--theme-success-200);
   }
 
+  &__section--selected-descendant {
+    --cell-bg-color: color-mix(in srgb, var(--theme-success-50) 40%, transparent);
+    --cell-border-color: var(--theme-success-500);
+    --cell-inner-border-color: var(--theme-success-200);
+  }
+
+  &__section--selected-descendant.nested-sections-table__section--odd {
+    --cell-bg-color: color-mix(in srgb, var(--theme-success-50) 40%, transparent);
+  }
+
   &__section--selected.nested-sections-table__section--dragging {
     opacity: 0.4;
   }

packages/ui/src/elements/TreeView/NestedSectionsTable/index.tsx

@@ -274,6 +274,7 @@ export const DivTableSection: React.FC<DivTableSectionProps> = ({
                 isOdd && `${baseClass}__section--odd`,
                 targetParentID === rowItem.rowID && `${baseClass}__section--target`,
                 isRowSelected && `${baseClass}__section--selected`,
+                hasSelectedAncestor && `${baseClass}__section--selected-descendant`,
               ]
                 .filter(Boolean)
                 .join(' ')}
@@ -295,12 +296,15 @@ export const DivTableSection: React.FC<DivTableSectionProps> = ({
                 >
                   <div className={`${baseClass}__row-actions`}>
                     <CheckboxInput
-                      checked={selectedRowIDs.includes(rowItem.rowID)}
+                      checked={selectedRowIDs.includes(rowItem.rowID) || hasSelectedAncestor}
                       onToggle={
                         ((event: React.MouseEvent<HTMLElement>) => {
-                          onRowClick({ event, from: 'checkbox', row: rowItem })
+                          if (!hasSelectedAncestor) {
+                            onRowClick({ event, from: 'checkbox', row: rowItem })
+                          }
                         }) as unknown as (event: React.ChangeEvent) => void
                       }
+                      readOnly={hasSelectedAncestor}
                     />
                     <DraggableWithClick
                       disabled={