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

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

@@ -4,7 +4,7 @@ exports[`DataViewTable component should render a basic table 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 a basic table 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 a basic table 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 a basic table 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 a basic table 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 a basic table 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 a basic table 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"

package/src/DataViewTableBasic/DataViewTableBasic.test.tsx

@@ -1,8 +1,10 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { DataView } from '../DataView';
-import { DataViewTableBasic } from './DataViewTableBasic';
+import { DataViewTableBasic, ExpandableContent } from './DataViewTableBasic';
 
 interface Repository {
+  id: number;
   name: string;
   branches: string | null;
   prs: string | null;
@@ -11,20 +13,28 @@ interface Repository {
 }
 
 const repositories: Repository[] = [
-  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
-  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
-  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
-  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
-  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
-  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+  { id: 1, name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { id: 2, name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { id: 3, name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { id: 4, name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { id: 5, name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { id: 6, name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
 ];
 
-const rows = repositories.map(repo => ({
-  row: Object.values(repo),
-}));
+const rows = repositories.map(({ id, name, branches, prs, workspaces, lastCommit }) => [
+  { id, cell: name },
+  branches,
+  prs,
+  workspaces,
+  lastCommit
+]);
 
 const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
 
+const expandableContents: ExpandableContent[] = [
+  { rowId: 1, columnId: 1, content: <div>Branch details for Repository one</div> },
+];
+
 const ouiaId = 'TableExample';
 
 describe('DataViewTable component', () => {
@@ -57,8 +67,40 @@ describe('DataViewTable component', () => {
     const { container } = render(
       <DataView activeState="loading">
         <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} bodyStates={{ loading: "Data is loading" }} rows={[]} />
-      </DataView> 
+      </DataView>
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('when isExpandable cell should be clickable and expandable', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <DataViewTableBasic
+        aria-label='Repositories table'
+        ouiaId={ouiaId}
+        columns={columns}
+        rows={rows}
+        isExpandable={true}
+        expandedRows={expandableContents}
+      />
+    );
+
+    // Initially, expandable content is rendered but should be hidden (not visible)
+    const initialBranchContent = screen.getByText('Branch details for Repository one');
+    expect(initialBranchContent.closest('tr')?.classList.contains('pf-m-expanded')).toBeFalsy();
+
+    // Find the first expandable button by ID
+    const branchExpandButton = document.getElementById('expandable-0-0-1');
+    expect(branchExpandButton).toBeTruthy();
+    // Verify the button is in the cell with "Branch one" text
+    expect(branchExpandButton?.closest('td')?.textContent).toContain('Branch one');
+
+    // Click the expand button for Branches column
+    await user.click(branchExpandButton!);
+
+    // After clicking, the expandable content should be visible
+    const branchContent = screen.getByText('Branch details for Repository one');
+    expect(branchContent.closest('tr')?.classList.contains('pf-m-expanded')).toBeTruthy();
+  });
 });

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -1,5 +1,8 @@
-import { FC, useMemo } from 'react';
+import { FC, useMemo, useState, useRef } from 'react';
 import {
+  ExpandableRowContent,
+  InnerScrollContainer,
+  OuterScrollContainer,
   Table,
   TableProps,
   Tbody,
@@ -11,12 +14,20 @@ import { DataViewTableHead } from '../DataViewTableHead';
 import { DataViewTh, DataViewTr, isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
 import { DataViewState } from '../DataView/DataView';
 
+export interface ExpandableContent {
+  rowId: number;
+  columnId: number;
+  content: React.ReactNode;
+}
+
 /** extends TableProps */
 export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | 'rows'> {
   /** Columns definition */
   columns: DataViewTh[];
   /** Current page rows */
   rows: DataViewTr[];
+  /** Expanded rows content */
+  expandedRows?: ExpandableContent[];
   /** Table head states to be displayed when active */
   headStates?: Partial<Record<DataViewState | string, React.ReactNode>>
   /** Table body states to be displayed when active */
@@ -25,15 +36,22 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   ouiaId?: string;
   /** @hide Indicates if the table is resizable */
   hasResizableColumns?: boolean;
+  /** Toggles expandable */
+  isExpandable?: boolean;
+  /** Toggles sticky columns and header */
+  isSticky?: boolean;
 }
 
 export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
   columns,
   rows,
+  expandedRows,
   ouiaId = 'DataViewTableBasic',
   headStates,
   bodyStates,
   hasResizableColumns,
+  isExpandable = false,
+  isSticky = false,
   ...props
 }: DataViewTableBasicProps) => {
   const { selection, activeState, isSelectable } = useInternalContext();
@@ -42,10 +60,30 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
   const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
   const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
 
+  const [expandedRowsState, setExpandedRowsState] = useState<Record<number, boolean>>({})
+  const [expandedColumnIndex, setExpandedColumnIndex] = useState<Record<number, number>>({})
+
+  const tableRef = useRef<HTMLTableElement>(null);
+
+  const needsSeparateTbody = isExpandable;
+
   const renderedRows = useMemo(() => rows.map((row, rowIndex) => {
     const rowIsObject = isDataViewTrObject(row);
-    return (
-      <Tr key={rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)}>
+    const isRowExpanded = expandedRowsState[rowIndex] || false;
+    const expandedColIndex = expandedColumnIndex[rowIndex];
+
+    // Get the first cell to extract the row ID
+    const rowData = rowIsObject ? row.row : row;
+    const firstCell = rowData[0];
+    const rowId = isDataViewTdObject(firstCell) ? (firstCell as { id?: number }).id : undefined;
+
+    // Find all expandable contents for this row
+    const rowExpandableContents = isExpandable ? expandedRows?.filter(
+      (content) => content.rowId === rowId
+    ) : [];
+
+    const rowContent = (
+      <Tr key={needsSeparateTbody ? undefined : rowIndex} ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)} isContentExpanded={isRowExpanded} isControlRow>
         {isSelectable && (
           <Td
             key={`select-${rowIndex}`}
@@ -61,10 +99,29 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
         )}
         {(rowIsObject ? row.row : row).map((cell, colIndex) => {
           const cellIsObject = isDataViewTdObject(cell);
+          const cellExpandableContent = isExpandable ? expandedRows?.find(
+            (content) => content.rowId === rowId && content.columnId === colIndex
+          ) : undefined;
           return (
             <Td
               key={colIndex}
               {...(cellIsObject && (cell?.props ?? {}))}
+              {...(cellExpandableContent != null && {
+                compoundExpand: {
+                  isExpanded: isRowExpanded && expandedColIndex === colIndex,
+                  expandId: `expandable-${rowIndex}`,
+                  onToggle: () => {
+                    setExpandedRowsState(prev => {
+                      const isSameColumn = expandedColIndex === colIndex;
+                      const wasExpanded = prev[rowIndex];
+                      return { ...prev, [rowIndex]: isSameColumn ? !wasExpanded : true };
+                    });
+                    setExpandedColumnIndex(prev => ({ ...prev, [rowIndex]: colIndex }));
+                  },
+                  rowIndex,
+                  columnIndex: colIndex
+                }
+              })}
               data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}
             >
               {cellIsObject ? cell.cell : cell}
@@ -73,14 +130,48 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
         })}
       </Tr>
     );
-  }), [ rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId ]);
 
-  return (
-    <Table aria-label="Data table" ouiaId={ouiaId} {...props}>
-      { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} hasResizableColumns={hasResizableColumns} /> }
-      { activeBodyState || <Tbody>{renderedRows}</Tbody> }
-    </Table>
-  );
+    if (needsSeparateTbody) {
+      return (
+        <Tbody key={rowIndex} isExpanded={isRowExpanded}>
+          {rowContent}
+          {rowExpandableContents?.map((expandableContent) => (
+            <Tr key={`expand-${rowIndex}-${expandableContent.columnId}`} isExpanded={isRowExpanded && expandedColIndex === expandableContent.columnId}>
+              <Td colSpan={rowData.length + (isSelectable ? 1 : 0)} data-expanded-column-index={expandableContent.columnId}>
+                <ExpandableRowContent>
+                  {expandableContent.content}
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      );
+    } else {
+      return rowContent;
+    }
+  }), [ rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId, expandedRowsState, expandedColumnIndex, expandedRows, isExpandable, needsSeparateTbody ]);
+
+  const bodyContent = activeBodyState || (needsSeparateTbody ? renderedRows : <Tbody>{renderedRows}</Tbody>);
+
+  if (isSticky) {
+    return (
+      <OuterScrollContainer>
+        <InnerScrollContainer>
+          <Table ref={tableRef} aria-label="Data table" ouiaId={ouiaId} isExpandable={isExpandable} hasAnimations {...props} isStickyHeader >
+            { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} hasResizableColumns={hasResizableColumns} /> }
+            { bodyContent }
+          </Table>
+        </InnerScrollContainer>
+      </OuterScrollContainer>
+    );
+  } else {
+    return (
+      <Table ref={tableRef} aria-label="Data table" ouiaId={ouiaId} isExpandable={isExpandable} hasAnimations {...props}>
+        { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} hasResizableColumns={hasResizableColumns} /> }
+        { bodyContent }
+      </Table>
+    );
+  }
 };
 
 export default DataViewTableBasic;

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