@patternfly/react-data-view 5.5.0 → 5.6.0

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -12,24 +12,45 @@ import { DataViewTableHead } from '../DataViewTableHead';
 import { DataViewTh, DataViewTrTree, isDataViewTdObject } from '../DataViewTable';
 import { DataViewState } from '../DataView/DataView';
 
-const getDescendants = (node: DataViewTrTree): DataViewTrTree[] => (!node.children || !node.children.length) ? [ node ] : node.children.flatMap(getDescendants);
-
-const isNodeChecked = (node: DataViewTrTree, isSelected: (node: DataViewTrTree) => boolean) => {
-  let allSelected = true;
-  let someSelected = false;
-
-  for (const descendant of getDescendants(node)) {
-    const selected = !!isSelected?.(descendant);
-
-    someSelected ||= selected;
-    allSelected &&= selected;
-
-    if (!allSelected && someSelected) { return null }
-  }
-
-  return allSelected;
+const getNodesAffectedBySelection = (
+  allRows: DataViewTrTree[],
+  node: DataViewTrTree,
+  isChecking: boolean,
+  isSelected?: (item: DataViewTrTree) => boolean
+): DataViewTrTree[] => {
+
+  const getDescendants = (node: DataViewTrTree): DataViewTrTree[] =>
+    node.children ? node.children.flatMap(getDescendants).concat(node) : [ node ];
+
+  const findParent = (child: DataViewTrTree, rows: DataViewTrTree[]): DataViewTrTree | undefined =>
+    rows.find(row => row.children?.some(c => c === child)) ?? 
+    rows.flatMap(row => row.children ?? []).map(c => findParent(child, [ c ])).find(p => p);
+
+  const getAncestors = (node: DataViewTrTree): DataViewTrTree[] => {
+    const ancestors: DataViewTrTree[] = [];
+    let parent = findParent(node, allRows);
+    while (parent) {
+      ancestors.push(parent);
+      parent = findParent(parent, allRows);
+    }
+    return ancestors;
+  };
+
+  const affectedNodes = new Set([ node, ...getDescendants(node) ]);
+
+  getAncestors(node).forEach(ancestor => {
+    const allChildrenSelected = ancestor.children?.every(child => isSelected?.(child) || affectedNodes.has(child));
+    const anyChildAffected = ancestor.children?.some(child => affectedNodes.has(child) || child.id === node.id);
+
+    if (isChecking ? !isSelected?.(ancestor) && allChildrenSelected : isSelected?.(ancestor) && anyChildAffected) {
+      affectedNodes.add(ancestor);
+    }
+  });
+
+  return Array.from(affectedNodes);
 };
 
+
 /** extends TableProps */
 export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'rows'> {
   /** Columns definition */
@@ -83,7 +104,7 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
       }
       const isExpanded = expandedNodeIds.includes(node.id);
       const isDetailsExpanded = expandedDetailsNodeNames.includes(node.id);
-      const isChecked = isSelected && isNodeChecked(node, isSelected);
+      const isChecked = isSelected?.(node);
       let icon = leafIcon;
       if (node.children) {
         icon = isExpanded ? expandedIcon : collapsedIcon;
@@ -100,7 +121,7 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
             const otherDetailsExpandedNodeIds = prevDetailsExpanded.filter(id => id !== node.id);
             return isDetailsExpanded ? otherDetailsExpandedNodeIds : [ ...otherDetailsExpandedNodeIds, node.id ];
           }),
-        onCheckChange: (isSelectDisabled?.(node) || !onSelect) ? undefined : (_event, isChecking) => onSelect?.(isChecking, getDescendants(node)),
+        onCheckChange: (isSelectDisabled?.(node) || !onSelect) ? undefined : (_event, isChecking) => onSelect?.(isChecking, getNodesAffectedBySelection(rows, node, isChecking, isSelected)),
         rowIndex,
         props: {
           isExpanded,

package/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -31,6 +31,7 @@ export const DataViewTextFilter: React.FC<DataViewTextFilterProps> = ({
   ...props
 }: DataViewTextFilterProps) => (
   <ToolbarFilter
+    key={ouiaId}
     data-ouia-component-id={ouiaId}
     chips={value.length > 0 ? [ { key: title, node: value } ] : []}
     deleteChip={() => onChange?.(undefined, '')}

package/src/Hooks/filters.ts

@@ -16,15 +16,19 @@ export const useDataViewFilters = <T extends object>({
 }: UseDataViewFiltersProps<T>) => {
   const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [ searchParams, setSearchParams ]);
 
-  const getInitialFilters = useCallback((): T => isUrlSyncEnabled ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
-    const urlValue = searchParams?.get(key);
-    loadedFilters[key as keyof T] = urlValue
-      ? (urlValue as T[keyof T] | T[keyof T])
-      : initialFilters[key as keyof T];
-    return loadedFilters;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, { ...initialFilters }) : initialFilters, [ isUrlSyncEnabled, JSON.stringify(initialFilters), searchParams?.toString() ]);
+  const getInitialFilters = useCallback((): T => isUrlSyncEnabled
+    ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
+      const urlValue = searchParams?.get(key);
+      const isArrayFilter = Array.isArray(initialFilters[key]);
 
+      // eslint-disable-next-line no-nested-ternary
+      loadedFilters[key] = urlValue
+        ? (isArrayFilter && !Array.isArray(urlValue) ? [ urlValue ] : urlValue)
+        : initialFilters[key];
+
+      return loadedFilters;
+    }, { ...initialFilters })
+    : initialFilters, [ isUrlSyncEnabled, initialFilters, searchParams ]);
   const [ filters, setFilters ] = useState<T>(getInitialFilters());
 
   const updateSearchParams = useCallback(
@@ -32,11 +36,8 @@ export const useDataViewFilters = <T extends object>({
       if (isUrlSyncEnabled) {
         const params = new URLSearchParams(searchParams);
         Object.entries(newFilters).forEach(([ key, value ]) => {
-          if (value) {
-            params.set(key, Array.isArray(value) ? value.join(',') : value);
-          } else {
-            params.delete(key);
-          }
+          params.delete(key);
+          (Array.isArray(value) ? value : [ value ]).forEach((val) => value && params.append(key, val));
         });
         setSearchParams?.(params);
       }

package/src/index.ts

@@ -25,5 +25,8 @@ export * from './DataViewTable';
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';
 
+export { default as DataViewCheckboxFilter } from './DataViewCheckboxFilter';
+export * from './DataViewCheckboxFilter';
+
 export { default as DataView } from './DataView';
 export * from './DataView';