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

package/src/DataViewTextFilter/DataViewTextFilter.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';
 
@@ -20,4 +21,132 @@ describe('DataViewTextFilter component', () => {
     />);
     expect(container).toMatchSnapshot();
   });
+
+  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 */
@@ -17,6 +17,8 @@ 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> = ({
@@ -28,27 +30,61 @@ export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
   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) => {
+  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: 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/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/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}