@patternfly/react-data-view 6.3.0-prerelease.3 → 6.4.0-prerelease.10

package/src/DataViewTreeFilter/DataViewTreeFilter.tsx

@@ -0,0 +1,361 @@
+import { Dropdown, MenuToggle, MenuToggleElement, ToolbarFilter, ToolbarFilterProps, TreeView, TreeViewDataItem } from '@patternfly/react-core'
+import React, { FC, useState, useRef, useEffect } from 'react'
+import { createUseStyles } from 'react-jss'
+
+/** This style is needed so the tree filter dropdown looks like the basic filter dropdow */
+const useStyles = createUseStyles({
+  dataViewTreeFilterTreeView: {
+    '& .pf-v6-c-tree-view__node::after': {
+      borderRadius: 0,
+      borderRightStyle: 'none',
+      borderLeftStyle: 'none'
+    },
+    '& .pf-v6-c-tree-view__content': {
+      borderRadius: 0
+    }
+  }
+})
+
+// Generic helper to collect items from tree based on predicate
+const collectTreeItems = (
+  items: TreeViewDataItem[],
+  predicate: (item: TreeViewDataItem) => boolean,
+  leafOnly = false
+): TreeViewDataItem[] => {
+  const collected: TreeViewDataItem[] = [];
+
+  const collect = (item: TreeViewDataItem) => {
+    const isLeaf = !item.children || item.children.length === 0;
+
+    if (predicate(item) && (!leafOnly || isLeaf)) {
+      collected.push(item);
+    }
+
+    item.children?.forEach(child => collect(child));
+  };
+
+  items.forEach(item => collect(item));
+  return collected;
+};
+
+// Helper function to get all checked items (not just leaf nodes)
+const getAllCheckedItems = (items: TreeViewDataItem[]): TreeViewDataItem[] =>
+  collectTreeItems(items, item => item.checkProps?.checked === true, false);
+
+// Get all checked leaf items (returns array of names)
+const getAllCheckedLeafItems = (items: TreeViewDataItem[]): string[] =>
+  collectTreeItems(
+    items,
+    item => item.checkProps?.checked === true,
+    true
+  ).map(item => String(item.name));
+
+// Helper function to expand all nodes in the tree
+const expandAllNodes = (items: TreeViewDataItem[]): TreeViewDataItem[] =>
+  items.map(item => ({
+    ...item,
+    defaultExpanded: true,
+    children: item.children ? expandAllNodes(item.children) : undefined
+  }));
+
+// Helper function to set pre-selected items
+const setPreSelectedItems = (items: TreeViewDataItem[], selectedIds: string[]): TreeViewDataItem[] =>
+  items.map(item => {
+    const isSelected = selectedIds.includes(String(item.id));
+    const hasSelectedChildren = item.children?.some(child => selectedIds.includes(String(child.id))) ?? false;
+
+    return {
+      ...item,
+      checkProps: item.checkProps ? {
+        ...item.checkProps,
+        checked: isSelected || hasSelectedChildren
+      } : undefined,
+      children: item.children ? setPreSelectedItems(item.children, selectedIds) : undefined
+    };
+  });
+
+// Helper function to uncheck all items recursively
+const uncheckRecursive = (items: TreeViewDataItem[]): TreeViewDataItem[] =>
+  items.map(item => ({
+    ...item,
+    checkProps: item.checkProps ? { ...item.checkProps, checked: false } : undefined,
+    children: item.children ? uncheckRecursive(item.children) : undefined
+  }));
+
+export interface DataViewTreeFilterProps {
+  /** Unique key for the filter attribute */
+  filterId: string;
+  /** Array of current filter values */
+  value?: string[];
+  /** Filter title displayed in the toolbar */
+  title: string;
+  /** Callback for when the selection changes */
+  onChange?: (event?: React.MouseEvent, values?: string[]) => void;
+  /** Controls visibility of the filter in the toolbar */
+  showToolbarItem?: ToolbarFilterProps['showToolbarItem'];
+  /** Custom OUIA ID */
+  ouiaId?: string;
+  /** Hierarchical data items for the tree structure */
+  items?: TreeViewDataItem[];
+  /** When true, expands all tree nodes by default */
+  defaultExpanded?: boolean;
+  /** Callback for when tree items are selected/deselected, provides all currently selected nodes */
+  onSelect?: (selectedItems: TreeViewDataItem[]) => void;
+  /** Array of pre-selected item id's to be checked on initial render */
+  defaultSelected?: string[];
+}
+
+export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
+  filterId,
+  title,
+  value = [],
+  onChange,
+  showToolbarItem,
+  ouiaId = 'DataViewTreeFilter',
+  items,
+  defaultExpanded = false,
+  onSelect,
+  defaultSelected = []
+}: DataViewTreeFilterProps) => {
+  const classes = useStyles();
+  const [isOpen, setIsOpen] = useState(false);
+  const [treeData, setTreeData] = useState<TreeViewDataItem[]>(items || []);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const isInitialMount = useRef(true);
+  const hasCalledInitialOnChange = useRef(false);
+
+  // Initialize tree data with defaultExpanded and defaultSelected (only on first mount)
+  useEffect(() => {
+    if (!items) {
+      return;
+    }
+
+    let initializedData = [...items];
+
+    // Apply default expansion
+    if (defaultExpanded) {
+      initializedData = expandAllNodes(initializedData);
+    }
+
+    // Apply pre-selected items only on initial mount
+    if (isInitialMount.current && defaultSelected.length > 0) {
+      initializedData = setPreSelectedItems(initializedData, defaultSelected);
+    }
+
+    setTreeData(initializedData);
+
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    }
+  }, [items, defaultExpanded]);
+
+  // Call onChange and onSelect after tree data is initialized with default selections
+  useEffect(() => {
+    if (!hasCalledInitialOnChange.current && defaultSelected.length > 0 && treeData.length > 0) {
+      const selectedValues = getAllCheckedLeafItems(treeData);
+
+      // Only call if there are actually selected values
+      if (selectedValues.length > 0) {
+        // Calculate both values synchronously before calling callbacks
+        const selectedItems = getAllCheckedItems(treeData);
+
+        // useEffect already runs after render, so this is safe
+        if (onChange) {
+          onChange(undefined, selectedValues);
+        }
+
+        if (onSelect) {
+          onSelect(selectedItems);
+        }
+
+        hasCalledInitialOnChange.current = true;
+      }
+    }
+  }, [treeData, onChange, onSelect, defaultSelected.length]);
+
+
+  // Sync tree checkboxes when value prop changes (when clearAllFilters is called)
+  useEffect(() => {
+    if (value.length === 0) {
+      setTreeData(currentTreeData => {
+        if (currentTreeData.length === 0) {
+          return currentTreeData;
+        }
+
+        const currentCheckedItems = getAllCheckedLeafItems(currentTreeData);
+
+        // Only update if there are checked items that need to be unchecked
+        if (currentCheckedItems.length > 0) {
+          return uncheckRecursive(currentTreeData);
+        }
+
+        return currentTreeData;
+      });
+    }
+  }, [value]);
+
+  // Check if all children are checked (recursive)
+  const areAllChildrenChecked = (item: TreeViewDataItem): boolean => {
+    if (!item.children?.length) {
+      return item.checkProps?.checked === true;
+    }
+    return item.children.every(child => areAllChildrenChecked(child));
+  };
+
+  // Check if some children are checked (recursive)
+  const areSomeChildrenChecked = (item: TreeViewDataItem): boolean => {
+    if (!item.children?.length) {
+      return item.checkProps?.checked === true;
+    }
+    return item.children.some(child => areSomeChildrenChecked(child));
+  };
+
+  // Find tree item by name
+  const findItemByName = (items: TreeViewDataItem[], name: string): TreeViewDataItem | null => {
+    for (const item of items) {
+      if (item.name === name) {
+        return item;
+      }
+      if (item.children) {
+        const found = findItemByName(item.children, name);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null;
+  };
+
+  // Find parent item by child ID
+  const findParentById = (items: TreeViewDataItem[], childId: string): TreeViewDataItem | null => {
+    for (const item of items) {
+      if (item.children?.some(child => child.id === childId)) {
+        return item;
+      }
+      if (item.children) {
+        const found = findParentById(item.children, childId);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null;
+  };
+
+  // Update parent checkbox states based on children (recursive)
+  const onCheckParentHandle = (childId: string): void => {
+    const parent = findParentById(treeData, childId);
+    if (!parent) {
+      return;
+    }
+
+    if (parent.checkProps) {
+      const allChildrenChecked = areAllChildrenChecked(parent);
+      const someChildrenChecked = areSomeChildrenChecked(parent);
+
+      if (allChildrenChecked) {
+        parent.checkProps.checked = true;
+      } else if (someChildrenChecked) {
+        parent.checkProps.checked = null;
+      } else {
+        parent.checkProps.checked = false;
+      }
+    }
+
+    if (parent.id) {
+      onCheckParentHandle(parent.id);
+    }
+  };
+
+  // Check/uncheck item and all its children (recursive)
+  const onCheckHandle = (treeViewItem: TreeViewDataItem, checked: boolean): void => {
+    if (treeViewItem.checkProps) {
+      treeViewItem.checkProps.checked = checked;
+    }
+
+    treeViewItem.children?.forEach(child => onCheckHandle(child, checked));
+  };
+
+  // Handle checkbox change event
+  const onCheck = (event: React.ChangeEvent, treeViewItem: TreeViewDataItem) => {
+    const checked = (event.target as HTMLInputElement).checked;
+
+    onCheckHandle(treeViewItem, checked);
+
+    if (treeViewItem.id) {
+      onCheckParentHandle(treeViewItem.id);
+    }
+
+    setTreeData(prev => [...prev]);
+
+    const selectedValues = getAllCheckedLeafItems(treeData);
+    onChange?.(event as any, selectedValues);
+
+    if (onSelect) {
+      const selectedItems = getAllCheckedItems(treeData);
+      onSelect(selectedItems);
+    }
+  };
+
+  // Clear a specific filter by name (when label chip is removed)
+  const onFilterSelectorClear = (itemName: string) => {
+    const treeViewItem = findItemByName(treeData, itemName);
+    if (!treeViewItem) {
+      return;
+    }
+
+    onCheckHandle(treeViewItem, false);
+    if (treeViewItem.id) {
+      onCheckParentHandle(treeViewItem.id);
+    }
+  };
+
+  // Uncheck all items in the tree
+  const uncheckAllItems = () => {
+    const updatedTreeData = uncheckRecursive(treeData);
+    setTreeData(updatedTreeData);
+    onChange?.(undefined, []);
+  };
+
+  const dropdown = (
+    <Dropdown
+      ref={menuRef}
+      isOpen={isOpen}
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isExpanded={isOpen}>
+          {title}
+        </MenuToggle>
+      )}
+      ouiaId={ouiaId}
+      shouldFocusToggleOnSelect
+    >
+      <TreeView
+        hasAnimations
+        data={treeData}
+        onCheck={onCheck}
+        hasCheckboxes
+        className={classes.dataViewTreeFilterTreeView}
+      />
+    </Dropdown>
+  );
+
+  return (
+    <ToolbarFilter
+      key={filterId}
+      data-ouia-component-id={ouiaId}
+      labels={value.map(item => ({ key: item, node: item }))}
+      deleteLabel={(_, label) => {
+        const labelKey = typeof label === 'string' ? label : label.key;
+        onChange?.(undefined, value.filter(item => item !== labelKey));
+        onFilterSelectorClear(labelKey);
+      }}
+      deleteLabelGroup={uncheckAllItems}
+      categoryName={title}
+      showToolbarItem={showToolbarItem}>
+      {dropdown}
+    </ToolbarFilter>
+  )
+}
+
+export default DataViewTreeFilter;

package/src/DataViewTreeFilter/__snapshots__/DataViewTreeFilter.test.tsx.snap

@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewTreeFilter component should render correctly 1`] = `
+<div>
+  <div
+    class="pf-v6-c-toolbar"
+    data-ouia-component-id="DataViewToolbar"
+    data-ouia-component-type="PF6/Toolbar"
+    data-ouia-safe="true"
+    id="pf-random-id-0"
+  >
+    <div
+      class="pf-v6-c-toolbar__content"
+    >
+      <div
+        class="pf-v6-c-toolbar__content-section"
+      >
+        <div
+          class="pf-v6-c-toolbar__item"
+        >
+          <div
+            class="pf-v6-c-toolbar__item"
+            data-ouia-component-id="DataViewTreeFilter"
+          >
+            <button
+              aria-expanded="false"
+              class="pf-v6-c-menu-toggle"
+              data-ouia-component-id="OUIA-Generated-MenuToggle-2"
+              data-ouia-component-type="PF6/MenuToggle"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <span
+                class="pf-v6-c-menu-toggle__text"
+              >
+                Test Tree Filter
+              </span>
+              <span
+                class="pf-v6-c-menu-toggle__controls"
+              >
+                <span
+                  class="pf-v6-c-menu-toggle__toggle-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 320 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-toolbar__content"
+    >
+      <div
+        class="pf-v6-c-toolbar__group"
+      >
+        <div
+          class="pf-v6-c-toolbar__item pf-m-label-group pf-m-label-group"
+        >
+          <div
+            class="pf-v6-c-label-group pf-m-category"
+          >
+            <div
+              class="pf-v6-c-label-group__main"
+            >
+              <span
+                aria-hidden="true"
+                class="pf-v6-c-label-group__label"
+                id="pf-random-id-1"
+              >
+                Test Tree Filter
+              </span>
+              <ul
+                aria-labelledby="pf-random-id-1"
+                class="pf-v6-c-label-group__list"
+                role="list"
+              >
+                <li
+                  class="pf-v6-c-label-group__list-item"
+                >
+                  <span
+                    class="pf-v6-c-label pf-m-filled"
+                  >
+                    <span
+                      class="pf-v6-c-label__content"
+                    >
+                      <span
+                        class="pf-v6-c-label__text"
+                      >
+                        Linux
+                      </span>
+                    </span>
+                    <span
+                      class="pf-v6-c-label__actions"
+                    >
+                      <button
+                        aria-label="Close Linux"
+                        class="pf-v6-c-button pf-m-plain pf-m-no-padding"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                        data-ouia-component-type="PF6/Button"
+                        data-ouia-safe="true"
+                        type="button"
+                      >
+                        <span
+                          class="pf-v6-c-button__icon"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="pf-v6-svg"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            viewBox="0 0 352 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </span>
+                  </span>
+                </li>
+              </ul>
+            </div>
+            <div
+              class="pf-v6-c-label-group__close"
+            >
+              <button
+                aria-label="Close label group"
+                aria-labelledby="remove_group_pf-random-id-1 pf-random-id-1"
+                class="pf-v6-c-button pf-m-plain pf-m-small"
+                data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                data-ouia-component-type="PF6/Button"
+                data-ouia-safe="true"
+                id="remove_group_pf-random-id-1"
+                type="button"
+              >
+                <span
+                  class="pf-v6-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 352 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-toolbar__group pf-m-action-group-inline"
+      >
+        <div
+          class="pf-v6-c-toolbar__item"
+        >
+          <button
+            class="pf-v6-c-button pf-m-link pf-m-inline"
+            data-ouia-component-id="DataViewToolbar-clear-all-filters"
+            data-ouia-component-type="PF6/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Clear filters
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/DataViewTreeFilter/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';

package/src/Hooks/selection.test.tsx

@@ -9,6 +9,7 @@ describe('useDataViewSelection', () => {
       selected: [],
       onSelect: expect.any(Function),
       isSelected: expect.any(Function),
+      setSelected: expect.any(Function),
     })
   });
 
@@ -19,6 +20,7 @@ describe('useDataViewSelection', () => {
       selected: initialSelected,
       onSelect: expect.any(Function),
       isSelected: expect.any(Function),
+      setSelected: expect.any(Function),
     })
   });
 
@@ -49,4 +51,66 @@ describe('useDataViewSelection', () => {
     expect(result.current.isSelected({ id: 1, name: 'test1' })).toBe(true);
     expect(result.current.isSelected({ id: 3, name: 'test2' })).toBe(false);
   });
-});
+
+  it('should have setSelected function in return object', () => {
+    const { result } = renderHook(() => useDataViewSelection({ matchOption: (a, b) => a.id === b.id }))
+    expect(result.current).toEqual({ 
+      selected: [],
+      onSelect: expect.any(Function),
+      isSelected: expect.any(Function),
+      setSelected: expect.any(Function),
+    })
+  });
+
+  it('should set selected items directly using setSelected - objects', async () => {
+    const initialSelected = [ { id: 1, name: 'test1' } ];
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }))
+    
+    const newSelected = [ { id: 2, name: 'test2' }, { id: 3, name: 'test3' } ];
+    
+    await act(async () => {
+      result.current.setSelected(newSelected);
+    });
+    
+    expect(result.current.selected).toEqual(newSelected);
+  });
+
+  it('should set selected items directly using setSelected - strings', async () => {
+    const initialSelected = [ 'test1', 'test2' ];
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a === b }))
+    
+    const newSelected = [ 'test3', 'test4', 'test5' ];
+    
+    await act(async () => {
+      result.current.setSelected(newSelected);
+    });
+    
+    expect(result.current.selected).toEqual(newSelected);
+  });
+
+  it('should clear all selections using setSelected with empty array', async () => {
+    const initialSelected = [ { id: 1, name: 'test1' }, { id: 2, name: 'test2' } ];
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }))
+    
+    await act(async () => {
+      result.current.setSelected([]);
+    });
+    
+    expect(result.current.selected).toEqual([]);
+  });
+
+  it('should update isSelected correctly after using setSelected', async () => {
+    const initialSelected = [ { id: 1, name: 'test1' } ];
+    const { result } = renderHook(() => useDataViewSelection({ initialSelected, matchOption: (a, b) => a.id === b.id }))
+    
+    const newSelected = [ { id: 2, name: 'test2' }, { id: 3, name: 'test3' } ];
+    
+    await act(async () => {
+      result.current.setSelected(newSelected);
+    });
+    
+    expect(result.current.isSelected({ id: 1, name: 'test1' })).toBe(false);
+    expect(result.current.isSelected({ id: 2, name: 'test2' })).toBe(true);
+    expect(result.current.isSelected({ id: 3, name: 'test3' })).toBe(true);
+  });
+});

package/src/Hooks/selection.ts

@@ -24,9 +24,14 @@ export const useDataViewSelection = (props?: UseDataViewSelectionProps) => {
   
   const isSelected = (item: any): boolean => Boolean(selected.find(selected => matchOption(selected, item)));
 
+  const setSelectedItems = (items: any[]) => {
+    setSelected(items);
+  };
+
   return {
     selected,
     onSelect,
-    isSelected
+    isSelected,
+    setSelected: setSelectedItems
   };
 };

package/src/InternalContext/InternalContext.tsx

@@ -6,6 +6,8 @@ export interface DataViewSelection {
   onSelect: (isSelecting: boolean, items?: any[] | any) => void;  // eslint-disable-line @typescript-eslint/no-explicit-any
   /** Checks if a specific item is currently selected */
   isSelected: (item: any) => boolean;  // eslint-disable-line @typescript-eslint/no-explicit-any
+  /** Directly sets the selected items */
+  setSelected?: (items: any[]) => void;  // eslint-disable-line @typescript-eslint/no-explicit-any
   /** Determines if selection is disabled for a given item */
   isSelectDisabled?: (item: any) => boolean;  // eslint-disable-line @typescript-eslint/no-explicit-any
 }

package/src/index.ts

@@ -4,9 +4,15 @@ export { default as InternalContext } from './InternalContext';
 export * from './InternalContext';
 export * from './Hooks';
 
+export { default as DataViewTreeFilter } from './DataViewTreeFilter';
+export * from './DataViewTreeFilter';
+
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
 
+export { default as DataViewTh } from './DataViewTh';
+export * from './DataViewTh';
+
 export { default as DataViewTextFilter } from './DataViewTextFilter';
 export * from './DataViewTextFilter';
 
@@ -22,6 +28,9 @@ export * from './DataViewTableBasic';
 export { default as DataViewTable } from './DataViewTable';
 export * from './DataViewTable';
 
+export { default as DataViewFilters } from './DataViewFilters';
+export * from './DataViewFilters';
+
 export { default as DataViewEventsContext } from './DataViewEventsContext';
 export * from './DataViewEventsContext';