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

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -1,41 +1,60 @@
-import React, { PropsWithChildren } from 'react';
-import { Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
+import React, { PropsWithChildren, useRef } from 'react';
+import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant, ToolbarProps } from '@patternfly/react-core';
 
-export interface DataViewToolbarProps extends PropsWithChildren {
+/** extends ToolbarProps */
+export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProps>, 'ref'> {
   /** Toolbar className */
   className?: string;
   /** Custom OUIA ID */
   ouiaId?: string;
-  /** React component to display bulk select */
+  /** React node to display bulk select */
   bulkSelect?: React.ReactNode;
-  /** React component to display pagination */
+  /** React node to display pagination */
   pagination?: React.ReactNode;
-  /** React component to display actions */
+  /** React node to display actions */
   actions?: React.ReactNode;
+  /** React node to display filters */
+  filters?: React.ReactNode;
+  /** React node to display custom filter labels */
+  customLabelGroupContent?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, children, ...props }: DataViewToolbarProps) => (
-  <Toolbar ouiaId={ouiaId} className={className} {...props}>
-    <ToolbarContent>
-      {bulkSelect && (
-        <ToolbarItem data-ouia-component-id={`${ouiaId}-bulk-select`}>
-          {bulkSelect}
-        </ToolbarItem>
-      )}
-      {actions && (
-        <ToolbarItem>
-          {actions}
-        </ToolbarItem>
-      )}
-      {pagination && (
-        <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
-          {pagination}
-        </ToolbarItem>
-      )}
-      {children}
-    </ToolbarContent>
-  </Toolbar>
-)
+export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
+  const defaultClearFilters = useRef(
+    <ToolbarItem>
+      <Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>
+        Clear filters
+      </Button>
+    </ToolbarItem>
+  );
+  return (
+    <Toolbar ouiaId={ouiaId} className={className} customLabelGroupContent={customLabelGroupContent ?? defaultClearFilters.current} {...props}>
+      <ToolbarContent>
+        {bulkSelect && (
+          <ToolbarItem data-ouia-component-id={`${ouiaId}-bulk-select`}>
+            {bulkSelect}
+          </ToolbarItem>
+        )}
+        {actions && (
+          <ToolbarItem>
+            {actions}
+          </ToolbarItem>
+        )}
+        {filters && (
+          <ToolbarItem>
+            {filters}
+          </ToolbarItem>
+        )}
+        {pagination && (
+          <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
+            {pagination}
+          </ToolbarItem>
+        )}
+        {children}
+      </ToolbarContent>
+    </Toolbar>
+  )
+};
 
 export default DataViewToolbar;
 

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

@@ -263,6 +263,28 @@ exports[`DataViewToolbar component should render correctly 1`] = `
           <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>
@@ -526,6 +548,28 @@ exports[`DataViewToolbar component should render correctly 1`] = `
         <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/Hooks/filters.test.tsx

@@ -0,0 +1,62 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewFilters, UseDataViewFiltersProps } from './filters';
+
+describe('useDataViewFilters', () => {
+  const initialFilters = { search: 'test', tags: [ 'tag1', 'tag2' ] };
+
+  it('should initialize with provided initial filters', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    expect(result.current.filters).toEqual(initialFilters);
+  });
+
+  it('should initialize with empty filters if no initialFilters provided', () => {
+    const { result } = renderHook(() => useDataViewFilters({}));
+    expect(result.current.filters).toEqual({});
+  });
+
+  it('should set filters correctly', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    const newFilters = { search: 'new search' };
+    act(() => result.current.onSetFilters(newFilters));
+
+    expect(result.current.filters).toEqual({ ...initialFilters, ...newFilters });
+  });
+
+  it('should delete specific filters without removing keys', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    const filtersToDelete = { search: 'test' };
+    act(() => result.current.onDeleteFilters(filtersToDelete));
+
+    expect(result.current.filters).toEqual({ search: '', tags: [ 'tag1', 'tag2' ] });
+  });
+
+  it('should clear all filters', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    act(() => result.current.clearAllFilters());
+
+    expect(result.current.filters).toEqual({ search: '', tags: [] });
+  });
+
+  it('should sync with URL search params if isUrlSyncEnabled', () => {
+    const searchParams = new URLSearchParams();
+    const setSearchParams = jest.fn();
+    const props: UseDataViewFiltersProps<typeof initialFilters> = {
+      initialFilters,
+      searchParams,
+      setSearchParams,
+    };
+
+    const { result } = renderHook(() => useDataViewFilters(props));
+    act(() => result.current.onSetFilters({ search: 'new search' }));
+
+    expect(setSearchParams).toHaveBeenCalled();
+  });
+
+  it('should reset filters to default values when clearAllFilters is called', () => {
+    const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
+    act(() => result.current.clearAllFilters());
+
+    expect(result.current.filters).toEqual({ search: '', tags: [] });
+  });
+});

package/src/Hooks/filters.ts

@@ -0,0 +1,97 @@
+import { useState, useCallback, useEffect, useMemo } from "react";
+
+export interface UseDataViewFiltersProps<T extends object> {
+  /** Initial filters object */
+  initialFilters?: T;
+  /** Current search parameters as a string */
+  searchParams?: URLSearchParams;
+  /** Function to set search parameters */
+  setSearchParams?: (params: URLSearchParams) => void;
+};
+
+export const useDataViewFilters = <T extends object>({
+  initialFilters = {} as T,
+  searchParams,
+  setSearchParams,
+}: 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);
+      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(
+    (newFilters: T) => {
+      if (isUrlSyncEnabled) {
+        const params = new URLSearchParams(searchParams);
+        Object.entries(newFilters).forEach(([ key, value ]) => {
+          params.delete(key);
+          (Array.isArray(value) ? value : [ value ]).forEach((val) => value && params.append(key, val));
+        });
+        setSearchParams?.(params);
+      }
+    },
+    [ isUrlSyncEnabled, searchParams, setSearchParams ]
+  );
+
+  useEffect(() => {
+    isUrlSyncEnabled && setFilters(getInitialFilters())
+  }, []);  // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onSetFilters = useCallback(
+    (newFilters: Partial<T>) => {
+      setFilters(prevFilters => {
+        const updatedFilters = { ...prevFilters, ...newFilters };
+        isUrlSyncEnabled && updateSearchParams(updatedFilters);
+        return updatedFilters;
+      });
+    },
+    [ isUrlSyncEnabled, updateSearchParams ]
+  );
+
+  // helper function to reset filters
+  const resetFilterValues = useCallback((filters: Partial<T>): Partial<T> => Object.entries(filters).reduce((acc, [ key, value ]) => {
+    if (Array.isArray(value)) {
+      acc[key as keyof T] = [] as T[keyof T];
+    } else {
+      acc[key as keyof T] = '' as T[keyof T];
+    }
+    return acc;
+  }, {} as Partial<T>), []);
+  
+  const onDeleteFilters = useCallback(
+    (filtersToDelete: Partial<T>) => {
+      setFilters(prevFilters => {
+        const updatedFilters = { ...prevFilters,...resetFilterValues(filtersToDelete) };
+        isUrlSyncEnabled && updateSearchParams(updatedFilters);
+        return updatedFilters;
+      });
+    },
+    [ isUrlSyncEnabled, updateSearchParams, resetFilterValues ]
+  );
+
+  const clearAllFilters = useCallback(() => {
+    const clearedFilters = resetFilterValues(filters) as T;
+  
+    setFilters(clearedFilters);
+    isUrlSyncEnabled && updateSearchParams(clearedFilters);
+  }, [ filters, isUrlSyncEnabled, updateSearchParams, resetFilterValues ]);
+
+  return {
+    filters,
+    onSetFilters,
+    onDeleteFilters,
+    clearAllFilters,
+  };
+};

package/src/Hooks/index.ts

@@ -1,2 +1,4 @@
 export * from './pagination';
 export * from './selection';
+export * from './filters';
+export * from './sort';

package/src/Hooks/pagination.ts

@@ -15,6 +15,7 @@ export interface UseDataViewPaginationProps {
   perPageParam?: string;
 }
 
+/** extends UseDataViewPaginationProps */
 export interface DataViewPaginationProps extends UseDataViewPaginationProps {
   /** Current page number */
     page: number;

package/src/Hooks/selection.ts

@@ -8,8 +8,9 @@ export interface UseDataViewSelectionProps {
   initialSelected?: (any)[];
 }
 
-export const useDataViewSelection = ({ matchOption, initialSelected = [] }: UseDataViewSelectionProps) => {
-  const [ selected, setSelected ] = useState<any[]>(initialSelected);
+export const useDataViewSelection = (props?: UseDataViewSelectionProps) => {
+  const [ selected, setSelected ] = useState<any[]>(props?.initialSelected ?? []);
+  const matchOption = props?.matchOption ? props.matchOption : (option, another) => (option === another);
 
   const onSelect = (isSelecting: boolean, items?: any[] | any) => {
     isSelecting && items ?

package/src/Hooks/sort.test.tsx

@@ -0,0 +1,84 @@
+import '@testing-library/jest-dom';
+import { renderHook, act } from '@testing-library/react';
+import { useDataViewSort, UseDataViewSortProps, DataViewSortConfig, DataViewSortParams } from './sort';
+
+describe('useDataViewSort', () => {
+  const initialSort: DataViewSortConfig = { sortBy: 'name', direction: 'asc' };
+
+  it('should initialize with provided initial sort config', () => {
+    const { result } = renderHook(() => useDataViewSort({ initialSort }));
+    expect(result.current).toEqual(expect.objectContaining(initialSort));
+  });
+
+  it('should initialize with empty sort config if no initialSort is provided', () => {
+    const { result } = renderHook(() => useDataViewSort());
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: undefined, direction: 'asc' }));
+  });
+
+  it('should update sort state when onSort is called', () => {
+    const { result } = renderHook(() => useDataViewSort({ initialSort }));
+    act(() => {
+      result.current.onSort(undefined, 'age', 'desc');
+    });
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: 'age', direction: 'desc' }));
+  });
+
+  it('should sync with URL search params if isUrlSyncEnabled', () => {
+    const searchParams = new URLSearchParams();
+    const setSearchParams = jest.fn();
+    const props: UseDataViewSortProps = {
+      initialSort,
+      searchParams,
+      setSearchParams,
+    };
+
+    const { result } = renderHook(() => useDataViewSort(props));
+
+    expect(setSearchParams).toHaveBeenCalledTimes(1);
+    expect(result.current).toEqual(expect.objectContaining(initialSort));
+  });
+
+  it('should validate direction and fallback to default direction if invalid direction is provided', () => {
+    const searchParams = new URLSearchParams();
+    searchParams.set(DataViewSortParams.SORT_BY, 'name');
+    searchParams.set(DataViewSortParams.DIRECTION, 'invalid-direction');
+    const { result } = renderHook(() => useDataViewSort({ searchParams, defaultDirection: 'desc' }));
+
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: 'name', direction: 'desc' }));
+  });
+
+  it('should update search params when URL sync is enabled and sort changes', () => {
+    const searchParams = new URLSearchParams();
+    const setSearchParams = jest.fn();
+    const props: UseDataViewSortProps = {
+      initialSort,
+      searchParams,
+      setSearchParams,
+    };
+
+    const { result } = renderHook(() => useDataViewSort(props));
+    act(() => {
+      expect(setSearchParams).toHaveBeenCalledTimes(1);
+      result.current.onSort(undefined, 'priority', 'desc');
+    });
+
+    expect(setSearchParams).toHaveBeenCalledTimes(2);
+    expect(result.current).toEqual(expect.objectContaining({ sortBy: 'priority', direction: 'desc' }));
+  });
+
+  it('should prioritize searchParams values', () => {
+    const searchParams = new URLSearchParams();
+    searchParams.set(DataViewSortParams.SORT_BY, 'category');
+    searchParams.set(DataViewSortParams.DIRECTION, 'desc');
+
+    const { result } = renderHook(
+      (props: UseDataViewSortProps) => useDataViewSort(props),
+      { initialProps: { initialSort, searchParams } }
+    );
+
+    expect(result.current).toEqual(expect.objectContaining({
+      sortBy: 'category',
+      direction: 'desc',
+    }));
+  });
+});

package/src/Hooks/sort.ts

@@ -0,0 +1,87 @@
+import { ISortBy } from "@patternfly/react-table";
+import { useState, useEffect, useMemo } from "react";
+
+export enum DataViewSortParams {
+  SORT_BY = 'sortBy',
+  DIRECTION = 'direction'
+};
+
+const validateDirection = (direction: string | null | undefined, defaultDirection: ISortBy['direction']): ISortBy['direction'] => (
+  direction === 'asc' || direction === 'desc' ? direction : defaultDirection
+);
+
+export interface DataViewSortConfig {
+  /** Attribute to sort the entries by */
+  sortBy: string | undefined;
+  /** Sort direction */
+  direction: ISortBy['direction'];
+};
+
+export interface UseDataViewSortProps {
+  /** Initial sort config */
+  initialSort?: DataViewSortConfig;
+  /** Current search parameters as a string */
+  searchParams?: URLSearchParams;
+  /** Function to set search parameters */
+  setSearchParams?: (params: URLSearchParams) => void;
+  /** Default direction */
+  defaultDirection?: ISortBy['direction'];
+  /** Sort by URL param name */
+  sortByParam?: string;
+  /** Direction URL param name */
+  directionParam?: string;
+};
+
+export const useDataViewSort = (props?: UseDataViewSortProps) => {
+  const {
+    initialSort,
+    searchParams,
+    setSearchParams,
+    defaultDirection = 'asc',
+    sortByParam = DataViewSortParams.SORT_BY,
+    directionParam = DataViewSortParams.DIRECTION
+  } = props ?? {};
+
+  const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [ searchParams, setSearchParams ]);
+
+  const [ state, setState ] = useState<DataViewSortConfig>({
+    sortBy: searchParams?.get(sortByParam) ?? initialSort?.sortBy,
+    direction: validateDirection(searchParams?.get(directionParam) as ISortBy['direction'], initialSort?.direction),
+  });
+
+  const updateSearchParams = (sortBy: string, direction: ISortBy['direction']) => {
+    if (isUrlSyncEnabled && sortBy) {
+      const params = new URLSearchParams(searchParams);
+      params.set(sortByParam, `${sortBy}`);
+      params.set(directionParam, `${direction}`);
+      setSearchParams?.(params);
+    }
+  };
+
+  useEffect(() => {
+    state.sortBy && state.direction && updateSearchParams(state.sortBy, state.direction);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const currentSortBy = searchParams?.get(sortByParam) || state.sortBy;
+    const currentDirection = searchParams?.get(directionParam) as ISortBy['direction'] || state.direction;
+    const validDirection = validateDirection(currentDirection, defaultDirection);
+    currentSortBy !== state.sortBy || validDirection !== state.direction && setState({ sortBy: currentSortBy, direction: validDirection });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ searchParams?.toString() ]);
+
+  const onSort = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined,
+    newSortBy: string,
+    newSortDirection: ISortBy['direction']
+  ) => {
+    setState({ sortBy: newSortBy, direction: newSortDirection });
+    updateSearchParams(newSortBy, newSortDirection);
+  };
+
+  return {
+    ...state,
+    onSort
+  };
+};

package/src/InternalContext/InternalContext.tsx

@@ -17,6 +17,7 @@ export interface InternalContextProps {
   activeState?: DataViewState | string;
 }
 
+/** extends InternalContextProps */
 export interface InternalContextValue extends InternalContextProps {
   /** Flag indicating if data view is selectable (auto-calculated) */
   isSelectable: boolean; 

package/src/index.ts

@@ -7,6 +7,9 @@ export * from './Hooks';
 export { default as DataViewToolbar } from './DataViewToolbar';
 export * from './DataViewToolbar';
 
+export { default as DataViewTextFilter } from './DataViewTextFilter';
+export * from './DataViewTextFilter';
+
 export { default as DataViewTableTree } from './DataViewTableTree';
 export * from './DataViewTableTree';
 
@@ -22,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';