@patternfly/react-data-view 6.4.0 → 6.5.0-prerelease.2

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

@@ -4,7 +4,7 @@ exports[`DataViewTable component should render correctly 1`] = `
 <div>
   <table
     aria-label="Repositories table"
-    class="pf-v6-c-table pf-m-grid-md"
+    class="pf-v6-c-table pf-m-grid-md pf-m-animate-expand"
     data-ouia-component-id="TableExample"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
@@ -67,7 +67,7 @@ exports[`DataViewTable component should render correctly 1`] = `
       role="rowgroup"
     >
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-0"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -109,7 +109,7 @@ exports[`DataViewTable component should render correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-1"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -151,7 +151,7 @@ exports[`DataViewTable component should render correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-2"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -193,7 +193,7 @@ exports[`DataViewTable component should render correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-3"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -235,7 +235,7 @@ exports[`DataViewTable component should render correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-4"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -277,7 +277,7 @@ exports[`DataViewTable component should render correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-5"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -335,7 +335,7 @@ exports[`DataViewTable component should render with a loading state 1`] = `
     >
       <table
         aria-label="Repositories table"
-        class="pf-v6-c-table pf-m-grid-md"
+        class="pf-v6-c-table pf-m-grid-md pf-m-animate-expand"
         data-ouia-component-id="TableExample"
         data-ouia-component-type="PF6/Table"
         data-ouia-safe="true"
@@ -412,7 +412,7 @@ exports[`DataViewTable component should render with an empty state 1`] = `
     >
       <table
         aria-label="Repositories table"
-        class="pf-v6-c-table pf-m-grid-md"
+        class="pf-v6-c-table pf-m-grid-md pf-m-animate-expand"
         data-ouia-component-id="TableExample"
         data-ouia-component-type="PF6/Table"
         data-ouia-safe="true"
@@ -489,7 +489,7 @@ exports[`DataViewTable component should render with an error state 1`] = `
     >
       <table
         aria-label="Repositories table"
-        class="pf-v6-c-table pf-m-grid-md"
+        class="pf-v6-c-table pf-m-grid-md pf-m-animate-expand"
         data-ouia-component-id="TableExample"
         data-ouia-component-type="PF6/Table"
         data-ouia-safe="true"

package/src/DataViewTextFilter/DataViewTextFilter.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';
 
@@ -20,4 +21,142 @@ describe('DataViewTextFilter component', () => {
     />);
     expect(container).toMatchSnapshot();
   });
+
+  it('should use chipTitle for the filter chip category when provided', () => {
+    render(<DataViewToolbar
+      filters={
+        <DataViewTextFilter {...defaultProps} chipTitle="Short name" />
+      }
+    />);
+    expect(screen.getByText('Short name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Filter by Test Filter')).toBeInTheDocument();
+  });
+
+  it('should focus the search input when "/" key is pressed and filter is visible', () => {
+    render(<DataViewToolbar
+      filters={ 
+        <DataViewTextFilter {...defaultProps} showToolbarItem={true} />
+      }
+    />);
+    
+    const input = document.getElementById('test-filter') as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    
+    // Simulate pressing "/" key by creating and dispatching a KeyboardEvent
+    const keyEvent = new KeyboardEvent('keydown', {
+      key: '/',
+      code: 'Slash',
+      bubbles: true,
+      cancelable: true,
+    });
+    window.dispatchEvent(keyEvent);
+    
+    // Check that the input has focus
+    expect(document.activeElement).toBe(input);
+  });
+
+  it('should not focus the search input when "/" key is pressed if filter is not visible', () => {
+    render(<DataViewToolbar
+      filters={ 
+        <DataViewTextFilter {...defaultProps} showToolbarItem={false} />
+      }
+    />);
+    
+    const input = document.getElementById('test-filter') as HTMLInputElement;
+    
+    // Simulate pressing "/" key
+    const keyEvent = new KeyboardEvent('keydown', {
+      key: '/',
+      code: 'Slash',
+      bubbles: true,
+      cancelable: true,
+    });
+    window.dispatchEvent(keyEvent);
+
+    if (input) {
+      expect(document.activeElement).not.toBe(input);
+    }
+  });
+
+  it('should not focus the search input when "/" key is pressed while typing in another input', () => {
+    const { container } = render(
+      <div>
+        <input data-testid="other-input" />
+        <DataViewToolbar
+          filters={ 
+            <DataViewTextFilter {...defaultProps} showToolbarItem={true} />
+          }
+        />
+      </div>
+    );
+    
+    const otherInput = container.querySelector('[data-testid="other-input"]') as HTMLInputElement;
+    
+    // Focus the other input first
+    otherInput.focus();
+    expect(document.activeElement).toBe(otherInput);
+    
+    // Simulate pressing "/" key while focused on the other input
+    // The event target should be the input element
+    const keyEvent = new KeyboardEvent('keydown', {
+      key: '/',
+      code: 'Slash',
+      bubbles: true,
+      cancelable: true,
+    });
+    Object.defineProperty(keyEvent, 'target', {
+      value: otherInput,
+      enumerable: true,
+    });
+    window.dispatchEvent(keyEvent);
+    
+    // The search input should not be focused since we're already in an input field
+    expect(document.activeElement).toBe(otherInput);
+  });
+
+  it('should not focus the search input when enableShortcut is false', () => {
+    render(<DataViewToolbar
+      filters={ 
+        <DataViewTextFilter {...defaultProps} showToolbarItem={true} enableShortcut={false} />
+      }
+    />);
+    
+    const input = document.getElementById('test-filter') as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    
+    // Simulate pressing "/" key
+    const keyEvent = new KeyboardEvent('keydown', {
+      key: '/',
+      code: 'Slash',
+      bubbles: true,
+      cancelable: true,
+    });
+    window.dispatchEvent(keyEvent);
+    
+    // The input should not be focused since the shortcut is disabled
+    expect(document.activeElement).not.toBe(input);
+  });
+
+  it('should focus the search input when enableShortcut is true (default)', () => {
+    render(<DataViewToolbar
+      filters={ 
+        <DataViewTextFilter {...defaultProps} showToolbarItem={true} />
+      }
+    />);
+    
+    const input = document.getElementById('test-filter') as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    
+    // Simulate pressing "/" key
+    const keyEvent = new KeyboardEvent('keydown', {
+      key: '/',
+      code: 'Slash',
+      bubbles: true,
+      cancelable: true,
+    });
+    window.dispatchEvent(keyEvent);
+    
+    // The input should be focused since the shortcut is enabled by default
+    expect(document.activeElement).toBe(input);
+  });
 });

package/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import { SearchInput, SearchInputProps, ToolbarFilter, ToolbarFilterProps } from '@patternfly/react-core';
 
 /** extends SearchInputProps */
@@ -9,6 +9,8 @@ export interface DataViewTextFilterProps extends SearchInputProps {
   value?: string;
   /** Filter title displayed in the toolbar */
   title: string;
+  /** Label for the applied filter chip / category; defaults to title */
+  chipTitle?: 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 */
@@ -17,38 +19,77 @@ export interface DataViewTextFilterProps extends SearchInputProps {
   trimValue?: boolean;
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** Enable keyboard shortcut (/) to focus the filter. Defaults to true. */
+  enableShortcut?: boolean;
 }
 
 export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
   filterId,
   title,
+  chipTitle,
   value = '',
   onChange,
   onClear = () => onChange?.(undefined, ''),
   showToolbarItem,
   trimValue = true,
   ouiaId = 'DataViewTextFilter',
+  enableShortcut = true,
   ...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>
-);
+}: DataViewTextFilterProps) => {
+  const categoryName = chipTitle ?? title;
+
+  useEffect(() => {
+    if (!enableShortcut) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Only handle "/" key when not typing in an input, textarea, or contenteditable element
+      if (event.key === '/' && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        const target = event.target as HTMLElement;
+        const isInputElement = target.tagName === 'INPUT' || 
+                               target.tagName === 'TEXTAREA' || 
+                               target.isContentEditable;
+        
+        // Only focus if the filter is visible and we're not already in an input field
+        if (showToolbarItem && !isInputElement) {
+          // Find the input element by its ID (searchInputId prop)
+          const inputElement = document.getElementById(filterId) as HTMLInputElement;
+          if (inputElement) {
+            event.preventDefault();
+            inputElement.focus();
+          }
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [showToolbarItem, filterId, enableShortcut]);
+
+  return (
+    <ToolbarFilter
+      key={ouiaId}
+      data-ouia-component-id={ouiaId}
+      labels={value.length > 0 ? [ { key: categoryName, node: value } ] : []}
+      deleteLabel={() => onChange?.(undefined, '')}
+      categoryName={categoryName}
+      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/DataViewTh/DataViewTh.tsx

@@ -58,13 +58,13 @@ export interface DataViewThResizableProps {
     id: string | number | undefined,
     width: number
   ) => void;
-  /** Width of the column */
+  /** Starting width in pixels of the column */
   width?: number;
-  /** Minimum width of the column */
+  /** Minimum resize width in pixels of the column */
   minWidth?: number;
-  /** Increment for keyboard navigation */
+  /** Increment in pixels for keyboard navigation */
   increment?: number;
-  /** Increment for keyboard navigation while shift is held */
+  /** Increment in pixels for keyboard navigation while shift is held */
   shiftIncrement?: number;
   /** Provides an accessible name for the resizable column via a human readable string. */
   resizeButtonAriaLabel?: string;
@@ -324,14 +324,22 @@ export const DataViewTh: FC<DataViewThProps> = ({
     </Fragment>
   );
 
+  const classNames: string[] = [];
+  if (thProps?.className) {
+    classNames.push(thProps.className);
+  }
+  if (dataViewThClassName) {
+    classNames.push(dataViewThClassName);
+  }
+
   return (
     <Th
+      modifier="truncate"
       {...thProps}
       {...props}
-      style={width > 0 ? { minWidth: width } : undefined}
       ref={thRef}
-      modifier="truncate"
-      className={dataViewThClassName}
+      style={width > 0 ? { ...thProps?.style, minWidth: width } : thProps?.style}
+      className={classNames.length > 0 ? classNames.join(' ') : undefined}
       {...(isResizable && { additionalContent: resizableContent })}
     >
       {content}

package/src/DataViewTh/index.ts

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

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -1,5 +1,6 @@
 import { FC, PropsWithChildren, useRef } from 'react';
 import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant, ToolbarProps } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
 
 /** extends ToolbarProps */
 export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProps>, 'ref'> {
@@ -21,7 +22,19 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
   customLabelGroupContent?: React.ReactNode;
 }
 
+const useStyles = createUseStyles({
+  dataViewToolbarPagination: {
+    flexBasis: '100%',
+    width: '100%'
+  },
+  dataViewToolbarPaginationWrapper: {
+    flexBasis: '100%',
+    width: '100%'
+  }
+});
+
 export const DataViewToolbar: FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
+  const classes = useStyles();
   const defaultClearFilters = useRef(
     <ToolbarItem>
       <Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>
@@ -53,8 +66,10 @@ export const DataViewToolbar: FC<DataViewToolbarProps> = ({ className, ouiaId =
           </ToolbarItem>
         )}
         {pagination && (
-          <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
-            {pagination}
+          <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`} className={classes.dataViewToolbarPagination}>
+            <div className={classes.dataViewToolbarPaginationWrapper}>
+              {pagination}
+            </div>
           </ToolbarItem>
         )}
         {children}