@patternfly/react-data-view 5.4.0 → 5.5.0

package/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -0,0 +1,53 @@
+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
+    data-ouia-component-id={ouiaId}
+    chips={value.length > 0 ? [ { key: title, node: value } ] : []}
+    deleteChip={() => 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,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewTextFilter component should render correctly 1`] = `
+<div>
+  <div
+    class="pf-v5-c-toolbar"
+    data-ouia-component-id="DataViewToolbar"
+    data-ouia-component-type="PF5/Toolbar"
+    data-ouia-safe="true"
+    id="pf-random-id-0"
+  >
+    <div
+      class="pf-v5-c-toolbar__content"
+    >
+      <div
+        class="pf-v5-c-toolbar__content-section"
+      >
+        <div
+          class="pf-v5-c-toolbar__item pf-m-search-filter"
+        >
+          <div
+            class="pf-v5-c-toolbar__item"
+            data-ouia-component-id="DataViewTextFilter"
+          >
+            <div
+              class="pf-v5-c-text-input-group"
+              data-ouia-component-id="DataViewTextFilter-input"
+            >
+              <div
+                class="pf-v5-c-text-input-group__main pf-m-icon"
+              >
+                <span
+                  class="pf-v5-c-text-input-group__text"
+                >
+                  <span
+                    class="pf-v5-c-text-input-group__icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v5-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-v5-c-text-input-group__text-input"
+                    id="test-filter"
+                    placeholder="Filter by Test Filter"
+                    type="text"
+                    value="initial value"
+                  />
+                </span>
+              </div>
+              <div
+                class="pf-v5-c-text-input-group__utilities"
+              >
+                <button
+                  aria-disabled="false"
+                  aria-label="Reset"
+                  class="pf-v5-c-button pf-m-plain"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                  data-ouia-component-type="PF5/Button"
+                  data-ouia-safe="true"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-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>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-v5-c-toolbar__content pf-m-chip-container"
+    >
+      <div
+        class="pf-v5-c-toolbar__group"
+      >
+        <div
+          class="pf-v5-c-toolbar__item pf-m-chip-group"
+        >
+          <div
+            aria-labelledby="pf-random-id-1"
+            class="pf-v5-c-chip-group pf-m-category"
+            data-ouia-component-type="PF5/ChipGroup"
+            data-ouia-safe="true"
+            role="group"
+          >
+            <div
+              class="pf-v5-c-chip-group__main"
+            >
+              <span
+                class="pf-v5-c-chip-group__label"
+                id="pf-random-id-1"
+              >
+                Test Filter
+              </span>
+              <ul
+                aria-labelledby="pf-random-id-1"
+                class="pf-v5-c-chip-group__list"
+                role="list"
+              >
+                <li
+                  class="pf-v5-c-chip-group__list-item"
+                >
+                  <div
+                    class="pf-v5-c-chip"
+                    data-ouia-component-id="OUIA-Generated-Chip-1"
+                    data-ouia-component-type="PF5/Chip"
+                    data-ouia-safe="true"
+                  >
+                    <span
+                      class="pf-v5-c-chip__content"
+                    >
+                      <span
+                        class="pf-v5-c-chip__text"
+                        id="pf-random-id-2"
+                      >
+                        initial value
+                      </span>
+                    </span>
+                    <span
+                      class="pf-v5-c-chip__actions"
+                    >
+                      <button
+                        aria-disabled="false"
+                        aria-label="close"
+                        aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
+                        class="pf-v5-c-button pf-m-plain"
+                        data-ouia-component-id="close"
+                        data-ouia-component-type="PF5/Button"
+                        data-ouia-safe="true"
+                        id="remove_pf-random-id-2"
+                        type="button"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v5-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>
+                      </button>
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v5-c-toolbar__item"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-link pf-m-inline"
+          data-ouia-component-id="DataViewToolbar-clear-all-filters"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          Clear filters
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/DataViewTextFilter/index.ts

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

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 chips */
+  customChipGroupContent?: 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 variant={ToolbarItemVariant['overflow-menu']}>
-          {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, customChipGroupContent, 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} customChipGroupContent={customChipGroupContent ?? defaultClearFilters.current} {...props}>
+      <ToolbarContent>
+        {bulkSelect && (
+          <ToolbarItem data-ouia-component-id={`${ouiaId}-bulk-select`}>
+            {bulkSelect}
+          </ToolbarItem>
+        )}
+        {actions && (
+          <ToolbarItem variant={ToolbarItemVariant['overflow-menu']}>
+            {actions}
+          </ToolbarItem>
+        )}
+        {filters && (
+          <ToolbarItem variant={ToolbarItemVariant['search-filter']}>
+            {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

@@ -243,6 +243,20 @@ exports[`DataViewToolbar component should render correctly 1`] = `
           <div
             class="pf-v5-c-toolbar__group"
           />
+          <div
+            class="pf-v5-c-toolbar__item"
+          >
+            <button
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link pf-m-inline"
+              data-ouia-component-id="DataViewToolbar-clear-all-filters"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              Clear filters
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -486,6 +500,20 @@ exports[`DataViewToolbar component should render correctly 1`] = `
         <div
           class="pf-v5-c-toolbar__group"
         />
+        <div
+          class="pf-v5-c-toolbar__item"
+        >
+          <button
+            aria-disabled="false"
+            class="pf-v5-c-button pf-m-link pf-m-inline"
+            data-ouia-component-id="DataViewToolbar-clear-all-filters"
+            data-ouia-component-type="PF5/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            Clear filters
+          </button>
+        </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,96 @@
+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);
+    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 [ filters, setFilters ] = useState<T>(getInitialFilters());
+
+  const updateSearchParams = useCallback(
+    (newFilters: T) => {
+      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);
+          }
+        });
+        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,3 @@
 export * from './pagination';
 export * from './selection';
+export * from './filters';

package/src/Hooks/pagination.ts

@@ -20,6 +20,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/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';