RG-2586 Indeterminate Checkbox for Data List

src/data-list/data-list.tsx

@@ -17,6 +17,8 @@ import Loader from '../loader/loader';
 
 import {SelectionItem} from '../table/selection';
 
+import Selection from './selection';
+
 import Item, {FormattedItem, moreLessButtonStates} from './item';
 
 import styles from './data-list.css';
@@ -130,9 +132,10 @@ class DataList<T extends SelectionItem> extends PureComponent<DataListProps<T>>
                 onExpand={item.onExpand}
                 showFocus={selection.isFocused(model)}
                 onFocus={this.onItemFocus}
-                selection={selection}
+                selection={selection as Selection<T>}
                 selectable={item.selectable}
                 selected={selection.isSelected(model)}
+                partialSelected={(selection as Selection<T>).isPartialSelected(model)}
                 onSelect={this.onItemSelect}
                 showMoreLessButton={showMoreLessButton}
                 onItemMoreLess={this.props.onItemMoreLess}

src/data-list/item.tsx

@@ -8,7 +8,9 @@ import LoaderInline from '../loader-inline/loader-inline';
 
 import Button from '../button/button';
 
-import Selection, {SelectionItem} from '../table/selection';
+import {SelectionItem} from '../table/selection';
+
+import Selection from './selection';
 
 import Title from './title';
 
@@ -52,6 +54,7 @@ export interface ItemProps<T extends SelectionItem> extends BaseFormattedItem<T>
   showFocus?: boolean | undefined;
   selection: Selection<T>;
   selected?: boolean | undefined;
+  partialSelected?: boolean | undefined;
 }
 
 export default class Item<T extends SelectionItem> extends PureComponent<ItemProps<T>> {
@@ -106,6 +109,7 @@ export default class Item<T extends SelectionItem> extends PureComponent<ItemPro
         selection={selection}
         selectable={item.selectable}
         selected={selection.isSelected(model)}
+        partialSelected={selection.isPartialSelected(model)}
         onSelect={onSelect}
       />
     );
@@ -121,6 +125,7 @@ export default class Item<T extends SelectionItem> extends PureComponent<ItemPro
       showFocus,
       selectable,
       selected,
+      partialSelected,
       collapsible,
       collapsed,
       onCollapse,
@@ -187,6 +192,7 @@ export default class Item<T extends SelectionItem> extends PureComponent<ItemPro
           showFocus={showFocus}
           selectable={selectable}
           selected={selected}
+          partialSelected={partialSelected}
           collapserExpander={collapserExpander}
           onFocus={this.onFocus}
           onSelect={this.onSelect}

src/data-list/selection.ts

@@ -1,6 +1,21 @@
-import TableSelection, {CloneWithConfig, SelectionItem} from '../table/selection';
+import TableSelection, {CloneWithConfig, SelectionItem, TableSelectionConfig} from '../table/selection';
+
+interface DataListSelectionConfig<T extends SelectionItem> extends TableSelectionConfig<T> {
+  partialSelected?: Set<T> | undefined;
+}
+
+interface DataListCloneWithConfig<T> extends CloneWithConfig<T> {
+  partialSelected?: Set<T> | undefined;
+}
 
 export default class Selection<T extends SelectionItem> extends TableSelection<T> {
+  protected _partialSelected: Set<T>;
+
+  constructor({partialSelected = new Set(), ...props}: DataListSelectionConfig<T>) {
+    super(props);
+    this._partialSelected = partialSelected;
+  }
+
   protected _buildData(data: T[]) {
     return new Set(this._getDescendants(data));
   }
@@ -10,7 +25,7 @@ export default class Selection<T extends SelectionItem> extends TableSelection<T
 
     [...data].forEach(item => {
       if (_selected.has(item)) {
-        this._selectDescendants(item, _selected);
+        this._selectDescendants(item, _selected, this._partialSelected);
       }
     });
 
@@ -39,28 +54,52 @@ export default class Selection<T extends SelectionItem> extends TableSelection<T
     return result;
   }
 
-  private _selectDescendants(item: T, selected: Set<T>) {
-    this._getDescendants(this._getChildren(item)).forEach(it => selected.add(it));
+  private _selectDescendants(item: T, selected: Set<T>, partialSelected: Set<T>) {
+    this._getDescendants(this._getChildren(item)).forEach(it => {
+      selected.add(it);
+      partialSelected.delete(it);
+    });
   }
 
-  private _deselectDescendants(item: T, selected: Set<T>) {
-    this._getDescendants(this._getChildren(item)).forEach(it => selected.delete(it));
+  private _deselectDescendants(item: T, selected: Set<T>, partialSelected: Set<T>) {
+    this._getDescendants(this._getChildren(item)).forEach(it => {
+      selected.delete(it);
+      partialSelected.delete(it);
+    });
   }
 
-  private _selectAncestors(item: T, selected: Set<T>) {
+  private _selectAncestors(item: T, selected: Set<T>, partialSelected: Set<T>) {
     this._getAncestors(item).forEach(ancestor => {
       const groupIsSelected = this._getChildren(ancestor)
         .filter(it => this._isItemSelectable(it))
         .every(it => selected.has(it));
+      const groupIsPartialSelected = this._getChildren(ancestor)
+        .filter(it => this._isItemSelectable(it))
+        .some(it => selected.has(it) || partialSelected.has(it));
 
       if (groupIsSelected) {
         selected.add(ancestor);
+        partialSelected.delete(ancestor);
+      } else if (groupIsPartialSelected) {
+        partialSelected.add(ancestor);
       }
     });
   }
 
-  private _deselectAncestors(item: T, selected: Set<T>) {
-    this._getAncestors(item).forEach(it => selected.delete(it));
+  private _deselectAncestors(item: T, selected: Set<T>, partialSelected: Set<T>) {
+    this._getAncestors(item).forEach(ancestor => {
+      const groupIsPartialSelected = this._getChildren(ancestor)
+        .filter(it => this._isItemSelectable(it))
+        .filter(it => it !== item)
+        .some(it => selected.has(it) || partialSelected.has(it));
+
+      if (groupIsPartialSelected) {
+        partialSelected.add(ancestor);
+      } else {
+        partialSelected.delete(ancestor);
+      }
+      selected.delete(ancestor);
+    });
   }
 
   select(value = this._focused): Selection<T> {
@@ -69,12 +108,18 @@ export default class Selection<T extends SelectionItem> extends TableSelection<T
     }
 
     const selected = new Set(this._selected);
+    const partialSelected = new Set(this._partialSelected);
     selected.add(value);
+    partialSelected.delete(value);
+
+    this._selectDescendants(value, selected, partialSelected);
+    this._selectAncestors(value, selected, partialSelected);
 
-    this._selectDescendants(value, selected);
-    this._selectAncestors(value, selected);
+    return this.cloneWith({selected, partialSelected});
+  }
 
-    return this.cloneWith({selected});
+  isPartialSelected(value: T | null): boolean {
+    return value != null && this._partialSelected.has(value);
   }
 
   focus(value: T | null | undefined) {
@@ -85,8 +130,18 @@ export default class Selection<T extends SelectionItem> extends TableSelection<T
     return super.resetSelection() as Selection<T>;
   }
 
-  cloneWith(config: CloneWithConfig<T>): Selection<T> {
-    return super.cloneWith(config) as Selection<T>;
+  cloneWith({partialSelected = this._partialSelected, ...rest}: DataListCloneWithConfig<T>): Selection<T> {
+    const parentClone = super.cloneWith(rest) as Selection<T>;
+
+    return new (this.constructor as typeof Selection)({
+      data: parentClone._rawData,
+      selected: parentClone._selected,
+      focused: parentClone._focused,
+      getKey: parentClone._getKey,
+      getChildren: parentClone._getChildren,
+      isItemSelectable: parentClone._isItemSelectable,
+      partialSelected,
+    });
   }
 
   deselect(value = this._focused) {
@@ -95,11 +150,13 @@ export default class Selection<T extends SelectionItem> extends TableSelection<T
     }
 
     const selected = new Set(this._selected);
+    const partialSelected = new Set(this._partialSelected);
     selected.delete(value);
+    partialSelected.delete(value);
 
-    this._deselectDescendants(value, selected);
-    this._deselectAncestors(value, selected);
+    this._deselectDescendants(value, selected, partialSelected);
+    this._deselectAncestors(value, selected, partialSelected);
 
-    return this.cloneWith({selected});
+    return this.cloneWith({selected, partialSelected});
   }
 }

src/data-list/title.tsx

@@ -12,6 +12,7 @@ export interface TitleProps extends FocusSensorAddProps<HTMLDivElement> {
   onSelect: (selected: boolean) => void;
   selectable?: boolean | undefined;
   selected?: boolean | undefined;
+  partialSelected?: boolean | undefined;
   showFocus?: boolean | undefined;
   offset?: number | undefined;
   className?: string | null | undefined;
@@ -44,7 +45,8 @@ class Title extends PureComponent<TitleProps> {
   }
 
   render() {
-    const {className, title, offset, showFocus, innerRef, selectable, selected, collapserExpander} = this.props;
+    const {className, title, offset, showFocus, innerRef, selectable, selected, partialSelected, collapserExpander} =
+      this.props;
 
     const classes = classNames(className, {
       [styles.title]: true,
@@ -61,6 +63,7 @@ class Title extends PureComponent<TitleProps> {
                 aria-labelledby={this.id}
                 className={showFocus ? 'ring-checkbox_focus' : ''}
                 checked={selected}
+                indeterminate={partialSelected}
                 onFocus={this.onCheckboxFocus}
                 onChange={this.onCheckboxChange}
                 tabIndex={-1}

src/table/selection.ts

@@ -18,12 +18,12 @@ export interface CloneWithConfig<T> {
 }
 
 export default class Selection<T extends SelectionItem> {
-  private _rawData: readonly T[];
+  protected _rawData: readonly T[];
   protected _getChildren: (item: T) => readonly T[];
   protected _data: Set<T>;
   protected _selected: Set<T>;
   protected _focused: T | null;
-  private _getKey: (item: T) => string | number;
+  protected _getKey: (item: T) => string | number;
   protected _isItemSelectable: (item: T) => boolean | undefined;
   constructor({
     data = [],