@patternfly/react-data-view 6.1.0-prerelease.1 → 6.2.0

package/src/DataViewTableTree/index.ts

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

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';

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -1,34 +1,67 @@
-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 node to display actions */
+  actions?: React.ReactNode;
+  /** React node to display toggle group */
+  toggleGroup?: 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, pagination, children, ...props }: DataViewToolbarProps) => (
-  <Toolbar ouiaId={ouiaId} className={className} {...props}>
-    <ToolbarContent>
-      {bulkSelect && (
-        <ToolbarItem data-ouia-component-id={`${ouiaId}-bulk-select`}>
-          {bulkSelect}
-        </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, toggleGroup, 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>
+        )}
+        {filters && (
+          <ToolbarItem>
+            {filters}
+          </ToolbarItem>
+        )}
+        {actions && (
+          <ToolbarItem>
+            {actions}
+          </ToolbarItem>
+        )}
+        {toggleGroup && (
+          <ToolbarItem>
+            {toggleGroup}
+          </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

@@ -117,7 +117,7 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                       type="button"
                     >
                       <span
-                        class="pf-v6-c-button__icon pf-m-start"
+                        class="pf-v6-c-button__icon"
                       >
                         <svg
                           aria-hidden="true"
@@ -150,7 +150,7 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                       type="button"
                     >
                       <span
-                        class="pf-v6-c-button__icon pf-m-start"
+                        class="pf-v6-c-button__icon"
                       >
                         <svg
                           aria-hidden="true"
@@ -201,7 +201,7 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                       type="button"
                     >
                       <span
-                        class="pf-v6-c-button__icon pf-m-start"
+                        class="pf-v6-c-button__icon"
                       >
                         <svg
                           aria-hidden="true"
@@ -233,7 +233,7 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                       type="button"
                     >
                       <span
-                        class="pf-v6-c-button__icon pf-m-start"
+                        class="pf-v6-c-button__icon"
                       >
                         <svg
                           aria-hidden="true"
@@ -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>
@@ -380,7 +402,7 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                     type="button"
                   >
                     <span
-                      class="pf-v6-c-button__icon pf-m-start"
+                      class="pf-v6-c-button__icon"
                     >
                       <svg
                         aria-hidden="true"
@@ -413,7 +435,7 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                     type="button"
                   >
                     <span
-                      class="pf-v6-c-button__icon pf-m-start"
+                      class="pf-v6-c-button__icon"
                     >
                       <svg
                         aria-hidden="true"
@@ -464,7 +486,7 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                     type="button"
                   >
                     <span
-                      class="pf-v6-c-button__icon pf-m-start"
+                      class="pf-v6-c-button__icon"
                     >
                       <svg
                         aria-hidden="true"
@@ -496,7 +518,7 @@ exports[`DataViewToolbar component should render correctly 1`] = `
                     type="button"
                   >
                     <span
-                      class="pf-v6-c-button__icon pf-m-start"
+                      class="pf-v6-c-button__icon"
                     >
                       <svg
                         aria-hidden="true"
@@ -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,89 @@
+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 sync with URL search params with non array value', () => {
+    const searchParams = new URLSearchParams();
+    searchParams.set('test', 'foo');
+    const setSearchParams = jest.fn();
+    const props: UseDataViewFiltersProps<{ test: string }> = {
+      initialFilters: { test: '' },
+      searchParams,
+      setSearchParams,
+    };
+    const { result } = renderHook(() => useDataViewFilters(props));
+    expect(result.current.filters).toEqual({ test: 'foo' });
+  })  
+  it('should sync with URL search params with array value', () => {
+
+    const searchParams = new URLSearchParams();
+    searchParams.append('test', 'foo');
+    searchParams.append('test', 'bar');
+    const setSearchParams = jest.fn();
+    const props: UseDataViewFiltersProps<{ test: string[] }> = {
+      initialFilters: { test: [] },
+      searchParams,
+      setSearchParams,
+    };
+    const { result } = renderHook(() => useDataViewFilters(props));
+    expect(result.current.filters).toEqual({ test: [ 'foo', 'bar' ] });
+  })  
+
+  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: [] });
+  });
+});