@patternfly/react-data-view 6.0.0-prerelease.1 → 6.1.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,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 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, 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, 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>
+        )}
+        {pagination && (
+          <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
+            {pagination}
+          </ToolbarItem>
+        )}
+        {children}
+      </ToolbarContent>
+    </Toolbar>
+  )
+};
 
 export default DataViewToolbar;