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

package/dist/esm/DataViewCheckboxFilter/DataViewCheckboxFilter.test.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import DataViewCheckboxFilter from './DataViewCheckboxFilter';
 import DataViewToolbar from '../DataViewToolbar';
+import '@testing-library/jest-dom';
 describe('DataViewCheckboxFilter component', () => {
     const defaultProps = {
         filterId: 'test-checkbox-filter',
@@ -10,11 +11,16 @@ describe('DataViewCheckboxFilter component', () => {
         options: [
             { label: 'Workspace one', value: 'workspace-one' },
             { label: 'Workspace two', value: 'workspace-two' },
-            { label: 'Workspace three', value: 'workspace-three' },
-        ],
+            { label: 'Workspace three', value: 'workspace-three' }
+        ]
     };
     it('should render correctly', () => {
         const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewCheckboxFilter, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
+    it('should use chipTitle for the filter chip category when provided', () => {
+        render(_jsx(DataViewToolbar, { filters: _jsx(DataViewCheckboxFilter, Object.assign({}, defaultProps, { chipTitle: "Short name" })) }));
+        expect(screen.getByText('Short name')).toBeInTheDocument();
+        expect(screen.getByText('Test Checkbox Filter')).toBeInTheDocument();
+    });
 });

package/dist/esm/DataViewTable/DataViewTable.d.ts

@@ -1,8 +1,9 @@
 import { FC, ReactNode } from 'react';
 import { TdProps, ThProps, TrProps } from '@patternfly/react-table';
 import { DataViewTableTreeProps } from '../DataViewTableTree';
-import { DataViewTableBasicProps } from '../DataViewTableBasic';
+import { DataViewTableBasicProps, ExpandableContent } from '../DataViewTableBasic';
 import { DataViewThResizableProps } from '../DataViewTh/DataViewTh';
+export type { ExpandableContent };
 export type DataViewTh = ReactNode | {
     /** Table head cell node */
     cell: ReactNode;

package/dist/esm/DataViewTableBasic/DataViewTableBasic.d.ts

@@ -2,12 +2,19 @@ import { FC } from 'react';
 import { TableProps } from '@patternfly/react-table';
 import { DataViewTh, DataViewTr } 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 */
@@ -16,6 +23,10 @@ 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 declare const DataViewTableBasic: FC<DataViewTableBasicProps>;
 export default DataViewTableBasic;

package/dist/esm/DataViewTableBasic/DataViewTableBasic.js

@@ -10,20 +10,32 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Table, Tbody, Td, Tr, } from '@patternfly/react-table';
+import { useMemo, useState, useRef } from 'react';
+import { ExpandableRowContent, InnerScrollContainer, OuterScrollContainer, Table, Tbody, Td, Tr, } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHead } from '../DataViewTableHead';
 import { isDataViewTdObject, isDataViewTrObject } from '../DataViewTable';
 export const DataViewTableBasic = (_a) => {
-    var { columns, rows, ouiaId = 'DataViewTableBasic', headStates, bodyStates, hasResizableColumns } = _a, props = __rest(_a, ["columns", "rows", "ouiaId", "headStates", "bodyStates", "hasResizableColumns"]);
+    var { columns, rows, expandedRows, ouiaId = 'DataViewTableBasic', headStates, bodyStates, hasResizableColumns, isExpandable = false, isSticky = false } = _a, props = __rest(_a, ["columns", "rows", "expandedRows", "ouiaId", "headStates", "bodyStates", "hasResizableColumns", "isExpandable", "isSticky"]);
     const { selection, activeState, isSelectable } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
     const activeHeadState = useMemo(() => activeState ? headStates === null || headStates === void 0 ? void 0 : headStates[activeState] : undefined, [activeState, headStates]);
     const activeBodyState = useMemo(() => activeState ? bodyStates === null || bodyStates === void 0 ? void 0 : bodyStates[activeState] : undefined, [activeState, bodyStates]);
+    const [expandedRowsState, setExpandedRowsState] = useState({});
+    const [expandedColumnIndex, setExpandedColumnIndex] = useState({});
+    const tableRef = useRef(null);
+    const needsSeparateTbody = isExpandable;
     const renderedRows = useMemo(() => rows.map((row, rowIndex) => {
         const rowIsObject = isDataViewTrObject(row);
-        return (_jsxs(Tr, Object.assign({ ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props)), { children: [isSelectable && (_jsx(Td, { select: {
+        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.id : undefined;
+        // Find all expandable contents for this row
+        const rowExpandableContents = isExpandable ? expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.filter((content) => content.rowId === rowId) : [];
+        const rowContent = (_jsxs(Tr, Object.assign({ ouiaId: `${ouiaId}-tr-${rowIndex}` }, (rowIsObject && (row === null || row === void 0 ? void 0 : row.props)), { isContentExpanded: isRowExpanded, isControlRow: true, children: [isSelectable && (_jsx(Td, { select: {
                         rowIndex,
                         onSelect: (_event, isSelecting) => {
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(isSelecting, rowIsObject ? row : [row]);
@@ -33,9 +45,37 @@ export const DataViewTableBasic = (_a) => {
                     } }, `select-${rowIndex}`)), (rowIsObject ? row.row : row).map((cell, colIndex) => {
                     var _a;
                     const cellIsObject = isDataViewTdObject(cell);
-                    return (_jsx(Td, Object.assign({}, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}`, children: cellIsObject ? cell.cell : cell }), colIndex));
-                })] }), rowIndex));
-    }), [rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId]);
-    return (_jsxs(Table, Object.assign({ "aria-label": "Data table", ouiaId: ouiaId }, props, { children: [activeHeadState || _jsx(DataViewTableHead, { columns: columns, ouiaId: ouiaId, hasResizableColumns: hasResizableColumns }), activeBodyState || _jsx(Tbody, { children: renderedRows })] })));
+                    const cellExpandableContent = isExpandable ? expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.find((content) => content.rowId === rowId && content.columnId === colIndex) : undefined;
+                    return (_jsx(Td, Object.assign({}, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), (cellExpandableContent != null && {
+                        compoundExpand: {
+                            isExpanded: isRowExpanded && expandedColIndex === colIndex,
+                            expandId: `expandable-${rowIndex}`,
+                            onToggle: () => {
+                                setExpandedRowsState(prev => {
+                                    const isSameColumn = expandedColIndex === colIndex;
+                                    const wasExpanded = prev[rowIndex];
+                                    return Object.assign(Object.assign({}, prev), { [rowIndex]: isSameColumn ? !wasExpanded : true });
+                                });
+                                setExpandedColumnIndex(prev => (Object.assign(Object.assign({}, prev), { [rowIndex]: colIndex })));
+                            },
+                            rowIndex,
+                            columnIndex: colIndex
+                        }
+                    }), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}`, children: cellIsObject ? cell.cell : cell }), colIndex));
+                })] }), needsSeparateTbody ? undefined : rowIndex));
+        if (needsSeparateTbody) {
+            return (_jsxs(Tbody, { isExpanded: isRowExpanded, children: [rowContent, rowExpandableContents === null || rowExpandableContents === void 0 ? void 0 : rowExpandableContents.map((expandableContent) => (_jsx(Tr, { isExpanded: isRowExpanded && expandedColIndex === expandableContent.columnId, children: _jsx(Td, { colSpan: rowData.length + (isSelectable ? 1 : 0), "data-expanded-column-index": expandableContent.columnId, children: _jsx(ExpandableRowContent, { children: expandableContent.content }) }) }, `expand-${rowIndex}-${expandableContent.columnId}`)))] }, rowIndex));
+        }
+        else {
+            return rowContent;
+        }
+    }), [rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId, expandedRowsState, expandedColumnIndex, expandedRows, isExpandable, needsSeparateTbody]);
+    const bodyContent = activeBodyState || (needsSeparateTbody ? renderedRows : _jsx(Tbody, { children: renderedRows }));
+    if (isSticky) {
+        return (_jsx(OuterScrollContainer, { children: _jsx(InnerScrollContainer, { children: _jsxs(Table, Object.assign({ ref: tableRef, "aria-label": "Data table", ouiaId: ouiaId, isExpandable: isExpandable, hasAnimations: true }, props, { isStickyHeader: true, children: [activeHeadState || _jsx(DataViewTableHead, { columns: columns, ouiaId: ouiaId, hasResizableColumns: hasResizableColumns }), bodyContent] })) }) }));
+    }
+    else {
+        return (_jsxs(Table, Object.assign({ ref: tableRef, "aria-label": "Data table", ouiaId: ouiaId, isExpandable: isExpandable, hasAnimations: true }, props, { children: [activeHeadState || _jsx(DataViewTableHead, { columns: columns, ouiaId: ouiaId, hasResizableColumns: hasResizableColumns }), bodyContent] })));
+    }
 };
 export default DataViewTableBasic;

package/dist/esm/DataViewTableBasic/DataViewTableBasic.test.js

@@ -1,19 +1,36 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-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';
 const repositories = [
-    { 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 = [
+    { rowId: 1, columnId: 1, content: _jsx("div", { children: "Branch details for Repository one" }) },
+];
 const ouiaId = 'TableExample';
 describe('DataViewTable component', () => {
     test('should render correctly', () => {
@@ -32,4 +49,22 @@ describe('DataViewTable component', () => {
         const { container } = render(_jsx(DataView, { activeState: "loading", children: _jsx(DataViewTableBasic, { "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] }) }));
         expect(container).toMatchSnapshot();
     });
+    test('when isExpandable cell should be clickable and expandable', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const user = userEvent.setup();
+        render(_jsx(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((_a = initialBranchContent.closest('tr')) === null || _a === void 0 ? void 0 : _a.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((_b = branchExpandButton === null || branchExpandButton === void 0 ? void 0 : branchExpandButton.closest('td')) === null || _b === void 0 ? void 0 : _b.textContent).toContain('Branch one');
+        // Click the expand button for Branches column
+        yield user.click(branchExpandButton);
+        // After clicking, the expandable content should be visible
+        const branchContent = screen.getByText('Branch details for Repository one');
+        expect((_c = branchContent.closest('tr')) === null || _c === void 0 ? void 0 : _c.classList.contains('pf-m-expanded')).toBeTruthy();
+    }));
 });

package/dist/esm/DataViewTextFilter/DataViewTextFilter.d.ts

@@ -8,6 +8,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 */
@@ -16,6 +18,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 declare const DataViewTextFilter: FC<DataViewTextFilterProps>;
 export default DataViewTextFilter;

package/dist/esm/DataViewTextFilter/DataViewTextFilter.js

@@ -10,9 +10,38 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { SearchInput, ToolbarFilter } from '@patternfly/react-core';
 export const DataViewTextFilter = (_a) => {
-    var { filterId, title, value = '', onChange, onClear = () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), showToolbarItem, trimValue = true, ouiaId = 'DataViewTextFilter' } = _a, props = __rest(_a, ["filterId", "title", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId"]);
-    return (_jsx(ToolbarFilter, { "data-ouia-component-id": ouiaId, labels: value.length > 0 ? [{ key: title, node: value }] : [], deleteLabel: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: title, showToolbarItem: showToolbarItem, children: _jsx(SearchInput, Object.assign({ searchInputId: filterId, value: value, onChange: (e, inputValue) => onChange === null || onChange === void 0 ? void 0 : onChange(e, trimValue ? inputValue.trim() : inputValue), onClear: onClear, placeholder: `Filter by ${title}`, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, "data-ouia-component-id": `${ouiaId}-input` }, props)) }, ouiaId));
+    var { filterId, title, chipTitle, value = '', onChange, onClear = () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), showToolbarItem, trimValue = true, ouiaId = 'DataViewTextFilter', enableShortcut = true } = _a, props = __rest(_a, ["filterId", "title", "chipTitle", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId", "enableShortcut"]);
+    const categoryName = chipTitle !== null && chipTitle !== void 0 ? chipTitle : title;
+    useEffect(() => {
+        if (!enableShortcut) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            // 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;
+                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);
+                    if (inputElement) {
+                        event.preventDefault();
+                        inputElement.focus();
+                    }
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [showToolbarItem, filterId, enableShortcut]);
+    return (_jsx(ToolbarFilter, { "data-ouia-component-id": ouiaId, labels: value.length > 0 ? [{ key: categoryName, node: value }] : [], deleteLabel: () => onChange === null || onChange === void 0 ? void 0 : onChange(undefined, ''), categoryName: categoryName, showToolbarItem: showToolbarItem, children: _jsx(SearchInput, Object.assign({ searchInputId: filterId, value: value, onChange: (e, inputValue) => onChange === null || onChange === void 0 ? void 0 : onChange(e, trimValue ? inputValue.trim() : inputValue), onClear: onClear, placeholder: `Filter by ${title}`, "aria-label": `${title !== null && title !== void 0 ? title : filterId} filter`, "data-ouia-component-id": `${ouiaId}-input` }, props)) }, ouiaId));
 };
 export default DataViewTextFilter;

package/dist/esm/DataViewTextFilter/DataViewTextFilter.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/esm/DataViewTextFilter/DataViewTextFilter.test.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import DataViewTextFilter from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';
 describe('DataViewTextFilter component', () => {
@@ -14,4 +15,91 @@ describe('DataViewTextFilter component', () => {
         const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
+    it('should use chipTitle for the filter chip category when provided', () => {
+        render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, 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(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { showToolbarItem: true })) }));
+        const input = document.getElementById('test-filter');
+        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(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { showToolbarItem: false })) }));
+        const input = document.getElementById('test-filter');
+        // 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(_jsxs("div", { children: [_jsx("input", { "data-testid": "other-input" }), _jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { showToolbarItem: true })) })] }));
+        const otherInput = container.querySelector('[data-testid="other-input"]');
+        // 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(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { showToolbarItem: true, enableShortcut: false })) }));
+        const input = document.getElementById('test-filter');
+        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(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps, { showToolbarItem: true })) }));
+        const input = document.getElementById('test-filter');
+        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/dist/esm/DataViewTh/DataViewTh.d.ts

@@ -5,13 +5,13 @@ export interface DataViewThResizableProps {
     isResizable?: boolean;
     /** Callback after the column is resized. Returns the triggering event, the column id passed in via cell props, and the new width of the column. */
     onResize?: (event: ReactMouseEvent | MouseEvent | ReactKeyboardEvent | KeyboardEvent | TouchEvent, 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;

package/dist/esm/DataViewTh/DataViewTh.js

@@ -210,6 +210,13 @@ export const DataViewTh = (_a) => {
         onResize && onResize(e, thProps === null || thProps === void 0 ? void 0 : thProps.id, newSize);
     };
     const resizableContent = (_jsxs(Fragment, { children: [_jsx("div", { "aria-live": "polite", className: "pf-v6-screen-reader", children: screenReaderText }), _jsx(Button, { ref: resizeButtonRef, variant: "plain", hasNoPadding: true, icon: _jsx(ResizeIcon, {}), onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, "aria-label": resizeButtonAriaLabel, className: classes.dataViewResizableButton })] }));
-    return (_jsx(Th, Object.assign({}, thProps, props, { style: width > 0 ? { minWidth: width } : undefined, ref: thRef, modifier: "truncate", className: dataViewThClassName }, (isResizable && { additionalContent: resizableContent }), { children: content })));
+    const classNames = [];
+    if (thProps === null || thProps === void 0 ? void 0 : thProps.className) {
+        classNames.push(thProps.className);
+    }
+    if (dataViewThClassName) {
+        classNames.push(dataViewThClassName);
+    }
+    return (_jsx(Th, Object.assign({ modifier: "truncate" }, thProps, props, { ref: thRef, style: width > 0 ? Object.assign(Object.assign({}, thProps === null || thProps === void 0 ? void 0 : thProps.style), { minWidth: width }) : thProps === null || thProps === void 0 ? void 0 : thProps.style, className: classNames.length > 0 ? classNames.join(' ') : undefined }, (isResizable && { additionalContent: resizableContent }), { children: content })));
 };
 export default DataViewTh;

package/dist/esm/DataViewTh/index.d.ts

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

package/dist/esm/DataViewTh/index.js

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

package/dist/esm/DataViewToolbar/DataViewToolbar.js

@@ -12,9 +12,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
+const useStyles = createUseStyles({
+    dataViewToolbarPagination: {
+        flexBasis: '100%',
+        width: '100%'
+    },
+    dataViewToolbarPaginationWrapper: {
+        flexBasis: '100%',
+        width: '100%'
+    }
+});
 export const DataViewToolbar = (_a) => {
     var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "toggleGroup", "pagination", "filters", "customLabelGroupContent", "clearAllFilters", "children"]);
+    const classes = useStyles();
     const defaultClearFilters = useRef(_jsx(ToolbarItem, { children: _jsx(Button, { ouiaId: `${ouiaId}-clear-all-filters`, variant: "link", onClick: clearAllFilters, isInline: true, children: "Clear filters" }) }));
-    return (_jsx(Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props, { children: _jsxs(ToolbarContent, { children: [bulkSelect && (_jsx(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select`, children: bulkSelect })), filters && (_jsx(ToolbarItem, { children: filters })), actions && (_jsx(ToolbarItem, { children: actions })), toggleGroup && (_jsx(ToolbarItem, { children: toggleGroup })), pagination && (_jsx(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination`, children: pagination })), children] }) })));
+    return (_jsx(Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props, { children: _jsxs(ToolbarContent, { children: [bulkSelect && (_jsx(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select`, children: bulkSelect })), filters && (_jsx(ToolbarItem, { children: filters })), actions && (_jsx(ToolbarItem, { children: actions })), toggleGroup && (_jsx(ToolbarItem, { children: toggleGroup })), pagination && (_jsx(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination`, className: classes.dataViewToolbarPagination, children: _jsx("div", { className: classes.dataViewToolbarPaginationWrapper, children: pagination }) })), children] }) })));
 };
 export default DataViewToolbar;

package/dist/esm/DataViewTreeFilter/DataViewTreeFilter.d.ts

@@ -0,0 +1,28 @@
+import { ToolbarFilterProps, TreeViewDataItem } from '@patternfly/react-core';
+import React, { FC } from 'react';
+export interface DataViewTreeFilterProps {
+    /** Unique key for the filter attribute */
+    filterId: string;
+    /** Array of current filter values */
+    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 selection changes */
+    onChange?: (event?: React.MouseEvent, values?: string[]) => void;
+    /** Controls visibility of the filter in the toolbar */
+    showToolbarItem?: ToolbarFilterProps['showToolbarItem'];
+    /** Custom OUIA ID */
+    ouiaId?: string;
+    /** Hierarchical data items for the tree structure */
+    items?: TreeViewDataItem[];
+    /** When true, expands all tree nodes by default */
+    defaultExpanded?: boolean;
+    /** Callback for when tree items are selected/deselected, provides all currently selected nodes */
+    onSelect?: (selectedItems: TreeViewDataItem[]) => void;
+    /** Array of pre-selected item id's to be checked on initial render */
+    defaultSelected?: string[];
+}
+export declare const DataViewTreeFilter: FC<DataViewTreeFilterProps>;
+export default DataViewTreeFilter;