@patternfly/react-data-view 7.0.0-prerelease.3 → 7.0.0-prerelease.4

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

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewFilters 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__group pf-m-toggle-group pf-m-show-on-xl"
+            data-ouia-component-id="DataViewFilters"
+          >
+            <div
+              class="pf-v6-c-toolbar__toggle"
+            >
+              <button
+                aria-disabled="false"
+                aria-haspopup="false"
+                aria-label="Show Filters"
+                class="pf-v6-c-button pf-m-plain"
+                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 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              class="pf-v6-c-toolbar__group pf-m-filter-group"
+            >
+              <div>
+                <button
+                  aria-expanded="false"
+                  class="pf-v6-c-menu-toggle"
+                  data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+                  data-ouia-component-type="PF6/MenuToggle"
+                  data-ouia-safe="true"
+                  type="button"
+                >
+                  <span
+                    class="pf-v6-c-menu-toggle__icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v6-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 512 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="pf-v6-c-menu-toggle__text"
+                  >
+                    One
+                  </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
+                class="pf-v6-c-toolbar__item"
+                data-ouia-component-id="DataViewTextFilter"
+              >
+                <div
+                  class="pf-v6-c-text-input-group"
+                  data-ouia-component-id="DataViewTextFilter-input"
+                >
+                  <div
+                    class="pf-v6-c-text-input-group__main pf-m-icon"
+                  >
+                    <span
+                      class="pf-v6-c-text-input-group__text"
+                    >
+                      <span
+                        class="pf-v6-c-text-input-group__icon"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v6-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 512 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                          />
+                        </svg>
+                      </span>
+                      <input
+                        aria-label="One filter"
+                        class="pf-v6-c-text-input-group__text-input"
+                        id="one"
+                        placeholder="Filter by One"
+                        type="text"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-toolbar__content pf-m-hidden"
+      hidden=""
+    >
+      <div
+        class="pf-v6-c-toolbar__group"
+      />
+      <div
+        class="pf-v6-c-toolbar__group pf-m-action-group-inline"
+      >
+        <div
+          class="pf-v6-c-toolbar__item"
+        >
+          <button
+            aria-disabled="false"
+            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/DataViewFilters/index.tsx

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

package/src/DataViewTable/DataViewTable.tsx

@@ -8,18 +8,38 @@ import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree'
 import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
 
 // Table head typings
-export type DataViewTh = ReactNode | { cell: ReactNode; props?: ThProps };
+export type DataViewTh = ReactNode | {
+  /** Table head cell node */
+  cell: ReactNode;
+  /** Props passed to Th */
+  props?: ThProps
+};
 export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' in value;
 
 // Basic table typings
-export interface DataViewTrObject { row: DataViewTd[], id?: string, props?: TrProps }
-export type DataViewTd = ReactNode | { cell: ReactNode; props?: TdProps };
+export interface DataViewTrObject {
+  /** Array of rows */
+  row: DataViewTd[],
+  /** Unique identifier of a row */
+  id?: string,
+  /** Props passed to Tr */
+  props?: TrProps
+}
+
+export type DataViewTd = ReactNode | {
+  /** Table body cell node */
+  cell: ReactNode;
+  /** Props passed to Td */
+  props?: TdProps
+};
+
 export type DataViewTr = DataViewTd[] | DataViewTrObject;
 
 export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } => value != null && typeof value === 'object' && 'cell' in value;
 export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[], id?: string } => value != null && typeof value === 'object' && 'row' in value;
 
 // Tree table typings
+/** extends DataViewTrObject */
 export interface DataViewTrTree extends DataViewTrObject { id: string, children?: DataViewTrTree[] }
 
 export type DataViewTableProps =

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -11,6 +11,7 @@ import { DataViewTableHead } from '../DataViewTableHead';
 import { DataViewTh, DataViewTr, isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
 import { DataViewState } from '../DataView/DataView';
 
+/** extends TableProps */
 export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
   /** Columns definition */
   columns: DataViewTh[];

package/src/DataViewTableHead/DataViewTableHead.tsx

@@ -8,6 +8,7 @@ import {
 import { useInternalContext } from '../InternalContext';
 import { DataViewTh, isDataViewThObject } from '../DataViewTable';
 
+/** extends TheadProps */
 export interface DataViewTableHeadProps extends TheadProps {
   /** Indicates whether table is a tree */
   isTreeTable?: boolean;

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -12,24 +12,46 @@ 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 */
   columns: DataViewTh[];
@@ -82,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;
@@ -99,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.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter';
+import DataViewToolbar from '../DataViewToolbar';
+
+describe('DataViewTextFilter component', () => {
+  const mockOnChange = jest.fn();
+
+  const defaultProps: DataViewTextFilterProps = {
+    filterId: 'test-filter',
+    title: 'Test Filter',
+    value: 'initial value',
+    onChange: mockOnChange,
+  };
+
+  it('should render correctly', () => {
+    const { container } = render(<DataViewToolbar
+      filters={ 
+        <DataViewTextFilter {...defaultProps} />
+      }
+    />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { SearchInput, SearchInputProps, ToolbarFilter, ToolbarFilterProps } from '@patternfly/react-core';
+
+/** extends SearchInputProps */
+export interface DataViewTextFilterProps extends SearchInputProps {
+  /** Unique key for the filter attribute */
+  filterId: string;
+  /** Current filter value */
+  value?: string;
+  /** Filter title displayed in the toolbar */
+  title: string;
+  /** Callback for when the input value changes */
+  onChange?: (event: React.FormEvent<HTMLInputElement> | undefined, value: string) => void;
+  /** Controls visibility of the filter in the toolbar */
+  showToolbarItem?: ToolbarFilterProps['showToolbarItem'];
+  /** Trims input value on change */
+  trimValue?: boolean;
+  /** Custom OUIA ID */
+  ouiaId?: string;
+}
+
+export const DataViewTextFilter: React.FC<DataViewTextFilterProps> = ({
+  filterId,
+  title,
+  value = '',
+  onChange,
+  onClear = () => onChange?.(undefined, ''),
+  showToolbarItem,
+  trimValue = true,
+  ouiaId = 'DataViewTextFilter',
+  ...props
+}: DataViewTextFilterProps) => (
+  <ToolbarFilter
+    key={ouiaId}
+    data-ouia-component-id={ouiaId}
+    labels={value.length > 0 ? [ { key: title, node: value } ] : []}
+    deleteLabel={() => onChange?.(undefined, '')}
+    categoryName={title}
+    showToolbarItem={showToolbarItem}
+  >
+    <SearchInput
+      searchInputId={filterId}
+      value={value}
+      onChange={(e, inputValue) => onChange?.(e, trimValue ? inputValue.trim() : inputValue)}
+      onClear={onClear}
+      placeholder={`Filter by ${title}`}
+      aria-label={`${title ?? filterId} filter`}
+      data-ouia-component-id={`${ouiaId}-input`}
+      {...props}
+    />
+  </ToolbarFilter>
+);
+
+export default DataViewTextFilter;

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

@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewTextFilter 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="DataViewTextFilter"
+          >
+            <div
+              class="pf-v6-c-text-input-group"
+              data-ouia-component-id="DataViewTextFilter-input"
+            >
+              <div
+                class="pf-v6-c-text-input-group__main pf-m-icon"
+              >
+                <span
+                  class="pf-v6-c-text-input-group__text"
+                >
+                  <span
+                    class="pf-v6-c-text-input-group__icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v6-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 512 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                      />
+                    </svg>
+                  </span>
+                  <input
+                    aria-label="Test Filter filter"
+                    class="pf-v6-c-text-input-group__text-input"
+                    id="test-filter"
+                    placeholder="Filter by Test Filter"
+                    type="text"
+                    value="initial value"
+                  />
+                </span>
+              </div>
+              <div
+                class="pf-v6-c-text-input-group__utilities"
+              >
+                <button
+                  aria-disabled="false"
+                  aria-label="Reset"
+                  class="pf-v6-c-button pf-m-plain"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                  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>
+              </div>
+            </div>
+          </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 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"
+                      >
+                        initial value
+                      </span>
+                    </span>
+                    <span
+                      class="pf-v6-c-label__actions"
+                    >
+                      <button
+                        aria-disabled="false"
+                        aria-label="Close initial value"
+                        class="pf-v6-c-button pf-m-plain pf-m-no-padding"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                        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>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-toolbar__group pf-m-action-group-inline"
+      >
+        <div
+          class="pf-v6-c-toolbar__item"
+        >
+          <button
+            aria-disabled="false"
+            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/DataViewTextFilter/index.ts

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