@patternfly/react-data-view 6.4.0-prerelease.12 → 6.4.0-prerelease.14

package/dist/cjs/DataViewTextFilter/DataViewTextFilter.d.ts

@@ -16,6 +16,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/cjs/DataViewTextFilter/DataViewTextFilter.js

@@ -13,9 +13,37 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataViewTextFilter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 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"]);
+    var { filterId, title, 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", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId", "enableShortcut"]);
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_core_1.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: (0, jsx_runtime_1.jsx)(react_core_1.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));
 };
 exports.DataViewTextFilter = DataViewTextFilter;

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

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

package/dist/cjs/DataViewTextFilter/DataViewTextFilter.test.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
 const DataViewTextFilter_1 = __importDefault(require("./DataViewTextFilter"));
 const DataViewToolbar_1 = __importDefault(require("../DataViewToolbar"));
 describe('DataViewTextFilter component', () => {
@@ -19,4 +20,86 @@ describe('DataViewTextFilter component', () => {
         const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
+    it('should focus the search input when "/" key is pressed and filter is visible', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, 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', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, 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 } = (0, react_1.render)((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { "data-testid": "other-input" }), (0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, 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', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, 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)', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DataViewToolbar_1.default, { filters: (0, jsx_runtime_1.jsx)(DataViewTextFilter_1.default, 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/cjs/DataViewToolbar/DataViewToolbar.js

@@ -15,10 +15,22 @@ exports.DataViewToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
+const react_jss_1 = require("react-jss");
+const useStyles = (0, react_jss_1.createUseStyles)({
+    dataViewToolbarPagination: {
+        flexBasis: '100%',
+        width: '100%'
+    },
+    dataViewToolbarPaginationWrapper: {
+        flexBasis: '100%',
+        width: '100%'
+    }
+});
 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 = (0, react_1.useRef)((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { ouiaId: `${ouiaId}-clear-all-filters`, variant: "link", onClick: clearAllFilters, isInline: true, children: "Clear filters" }) }));
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [bulkSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select`, children: bulkSelect })), filters && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: filters })), actions && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: actions })), toggleGroup && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: toggleGroup })), pagination && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination`, children: pagination })), children] }) })));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props, { children: (0, jsx_runtime_1.jsxs)(react_core_1.ToolbarContent, { children: [bulkSelect && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select`, children: bulkSelect })), filters && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: filters })), actions && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: actions })), toggleGroup && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { children: toggleGroup })), pagination && ((0, jsx_runtime_1.jsx)(react_core_1.ToolbarItem, { variant: react_core_1.ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination`, className: classes.dataViewToolbarPagination, children: (0, jsx_runtime_1.jsx)("div", { className: classes.dataViewToolbarPaginationWrapper, children: pagination }) })), children] }) })));
 };
 exports.DataViewToolbar = DataViewToolbar;
 exports.default = exports.DataViewToolbar;

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

@@ -16,6 +16,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,37 @@ 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"]);
+    var { filterId, title, 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", "value", "onChange", "onClear", "showToolbarItem", "trimValue", "ouiaId", "enableShortcut"]);
+    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: 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));
 };
 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import DataViewTextFilter from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';
 describe('DataViewTextFilter component', () => {
@@ -14,4 +15,86 @@ describe('DataViewTextFilter component', () => {
         const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
+    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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.4.0-prerelease.12",
+  "version": "6.4.0-prerelease.14",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx

@@ -244,7 +244,8 @@ const RepositoriesTable: FunctionComponent<RepositoriesTableProps> = ({ selected
         ouiaId='LayoutExampleFooter'
         pagination={
           <Pagination 
-            isCompact  
+            isCompact
+            variant="bottom"
             perPageOptions={perPageOptions} 
             itemCount={repositories.length} 
             {...pagination} 

package/patternfly-docs/content/extensions/data-view/examples/Toolbar/FiltersExample.tsx

@@ -89,7 +89,8 @@ const MyTable: React.FunctionComponent = () => {
         ouiaId='LayoutExampleFooter'
         pagination={
           <Pagination 
-            isCompact  
+            isCompact
+            variant="bottom"
             perPageOptions={perPageOptions} 
             itemCount={filteredData.length} 
             {...pagination} 

package/patternfly-docs/content/extensions/data-view/examples/Toolbar/PaginationExample.tsx

@@ -44,7 +44,7 @@ const MyTable: React.FunctionComponent = () => {
     <DataView>
       <DataViewToolbar ouiaId='DataViewHeader' pagination={<Pagination perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
       <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
-      <DataViewToolbar ouiaId='DataViewFooter' pagination={<Pagination isCompact perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
+      <DataViewToolbar ouiaId='DataViewFooter' pagination={<Pagination isCompact variant="bottom" perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} />
     </DataView>
   );
 };

package/patternfly-docs/content/extensions/data-view/examples/Toolbar/TreeFilterExample.tsx

@@ -234,7 +234,7 @@ const MyTable: React.FunctionComponent = () => {
       <DataViewToolbar
         ouiaId="TreeFilterExampleFooter"
         pagination={
-          <Pagination isCompact perPageOptions={perPageOptions} itemCount={filteredData.length} {...pagination} />
+          <Pagination isCompact variant="bottom" perPageOptions={perPageOptions} itemCount={filteredData.length} {...pagination} />
         }
       />
     </DataView>

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/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}

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

@@ -19,8 +19,295 @@ exports[`DataViewToolbar component should render correctly 1`] = `
             class="pf-v6-c-toolbar__content-section"
           >
             <div
-              class="pf-v6-c-toolbar__item pf-m-pagination"
+              class="pf-v6-c-toolbar__item pf-m-pagination dataViewToolbarPagination-0-2-1"
               data-ouia-component-id="DataViewToolbar-pagination"
+            >
+              <div
+                class="dataViewToolbarPaginationWrapper-0-2-2"
+              >
+                <div
+                  class="pf-v6-c-pagination"
+                  data-ouia-component-id="OUIA-Generated-Pagination-top-1"
+                  data-ouia-component-type="PF6/Pagination"
+                  data-ouia-safe="true"
+                  id="options-menu-top-pagination"
+                  style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+                >
+                  <div
+                    class="pf-v6-c-pagination__total-items"
+                  >
+                    <b>
+                      1
+                       - 
+                      10
+                    </b>
+                     
+                    of
+                     
+                    <b>
+                      0
+                    </b>
+                     
+                  </div>
+                  <div
+                    class="pf-v6-c-pagination__page-menu"
+                  >
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
+                      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+                      data-ouia-component-type="PF6/MenuToggle"
+                      data-ouia-safe="true"
+                      id="options-menu-top-toggle"
+                      type="button"
+                    >
+                      <span
+                        class="pf-v6-c-menu-toggle__text"
+                      >
+                        <b>
+                          1
+                           - 
+                          10
+                        </b>
+                         
+                        of
+                         
+                        <b>
+                          0
+                        </b>
+                         
+                      </span>
+                      <span
+                        class="pf-v6-c-menu-toggle__controls"
+                      >
+                        <span
+                          class="pf-v6-c-menu-toggle__toggle-icon"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="pf-v6-svg"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <nav
+                    aria-label="Pagination"
+                    class="pf-v6-c-pagination__nav"
+                  >
+                    <div
+                      class="pf-v6-c-pagination__nav-control pf-m-first"
+                    >
+                      <button
+                        aria-label="Go to first page"
+                        class="pf-v6-c-button pf-m-plain"
+                        data-action="first"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                        data-ouia-component-type="PF6/Button"
+                        data-ouia-safe="true"
+                        disabled=""
+                        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 448 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      class="pf-v6-c-pagination__nav-control"
+                    >
+                      <button
+                        aria-label="Go to previous page"
+                        class="pf-v6-c-button pf-m-plain"
+                        data-action="previous"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                        data-ouia-component-type="PF6/Button"
+                        data-ouia-safe="true"
+                        disabled=""
+                        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 256 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      class="pf-v6-c-pagination__nav-page-select"
+                    >
+                      <span
+                        class="pf-v6-c-form-control"
+                      >
+                        <input
+                          aria-invalid="false"
+                          aria-label="Current page"
+                          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                          data-ouia-component-type="PF6/TextInput"
+                          data-ouia-safe="true"
+                          max="2"
+                          min="1"
+                          type="number"
+                          value="1"
+                        />
+                      </span>
+                    </div>
+                    <div
+                      class="pf-v6-c-pagination__nav-control"
+                    >
+                      <button
+                        aria-label="Go to next page"
+                        class="pf-v6-c-button pf-m-plain"
+                        data-action="next"
+                        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 256 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      class="pf-v6-c-pagination__nav-control pf-m-last"
+                    >
+                      <button
+                        aria-label="Go to last page"
+                        class="pf-v6-c-button pf-m-plain"
+                        data-action="last"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                        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 448 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </nav>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="pf-v6-c-toolbar__content pf-m-hidden"
+          hidden=""
+        >
+          <div
+            class="pf-v6-c-toolbar__group"
+          />
+          <div
+            class="pf-v6-c-toolbar__group pf-m-action-group-inline"
+          >
+            <div
+              class="pf-v6-c-toolbar__item"
+            >
+              <button
+                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>
+  </body>,
+  "container": <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 pf-m-pagination dataViewToolbarPagination-0-2-1"
+            data-ouia-component-id="DataViewToolbar-pagination"
+          >
+            <div
+              class="dataViewToolbarPaginationWrapper-0-2-2"
             >
               <div
                 class="pf-v6-c-pagination"
@@ -252,285 +539,6 @@ exports[`DataViewToolbar component should render correctly 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="pf-v6-c-toolbar__content pf-m-hidden"
-          hidden=""
-        >
-          <div
-            class="pf-v6-c-toolbar__group"
-          />
-          <div
-            class="pf-v6-c-toolbar__group pf-m-action-group-inline"
-          >
-            <div
-              class="pf-v6-c-toolbar__item"
-            >
-              <button
-                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>
-  </body>,
-  "container": <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 pf-m-pagination"
-            data-ouia-component-id="DataViewToolbar-pagination"
-          >
-            <div
-              class="pf-v6-c-pagination"
-              data-ouia-component-id="OUIA-Generated-Pagination-top-1"
-              data-ouia-component-type="PF6/Pagination"
-              data-ouia-safe="true"
-              id="options-menu-top-pagination"
-              style="--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
-            >
-              <div
-                class="pf-v6-c-pagination__total-items"
-              >
-                <b>
-                  1
-                   - 
-                  10
-                </b>
-                 
-                of
-                 
-                <b>
-                  0
-                </b>
-                 
-              </div>
-              <div
-                class="pf-v6-c-pagination__page-menu"
-              >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-                  data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
-                  data-ouia-component-type="PF6/MenuToggle"
-                  data-ouia-safe="true"
-                  id="options-menu-top-toggle"
-                  type="button"
-                >
-                  <span
-                    class="pf-v6-c-menu-toggle__text"
-                  >
-                    <b>
-                      1
-                       - 
-                      10
-                    </b>
-                     
-                    of
-                     
-                    <b>
-                      0
-                    </b>
-                     
-                  </span>
-                  <span
-                    class="pf-v6-c-menu-toggle__controls"
-                  >
-                    <span
-                      class="pf-v6-c-menu-toggle__toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="pf-v6-svg"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        viewBox="0 0 320 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                </button>
-              </div>
-              <nav
-                aria-label="Pagination"
-                class="pf-v6-c-pagination__nav"
-              >
-                <div
-                  class="pf-v6-c-pagination__nav-control pf-m-first"
-                >
-                  <button
-                    aria-label="Go to first page"
-                    class="pf-v6-c-button pf-m-plain"
-                    data-action="first"
-                    data-ouia-component-id="OUIA-Generated-Button-plain-1"
-                    data-ouia-component-type="PF6/Button"
-                    data-ouia-safe="true"
-                    disabled=""
-                    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 448 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-                <div
-                  class="pf-v6-c-pagination__nav-control"
-                >
-                  <button
-                    aria-label="Go to previous page"
-                    class="pf-v6-c-button pf-m-plain"
-                    data-action="previous"
-                    data-ouia-component-id="OUIA-Generated-Button-plain-2"
-                    data-ouia-component-type="PF6/Button"
-                    data-ouia-safe="true"
-                    disabled=""
-                    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 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-                <div
-                  class="pf-v6-c-pagination__nav-page-select"
-                >
-                  <span
-                    class="pf-v6-c-form-control"
-                  >
-                    <input
-                      aria-invalid="false"
-                      aria-label="Current page"
-                      data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-                      data-ouia-component-type="PF6/TextInput"
-                      data-ouia-safe="true"
-                      max="2"
-                      min="1"
-                      type="number"
-                      value="1"
-                    />
-                  </span>
-                </div>
-                <div
-                  class="pf-v6-c-pagination__nav-control"
-                >
-                  <button
-                    aria-label="Go to next page"
-                    class="pf-v6-c-button pf-m-plain"
-                    data-action="next"
-                    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 256 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-                <div
-                  class="pf-v6-c-pagination__nav-control pf-m-last"
-                >
-                  <button
-                    aria-label="Go to last page"
-                    class="pf-v6-c-button pf-m-plain"
-                    data-action="last"
-                    data-ouia-component-id="OUIA-Generated-Button-plain-4"
-                    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 448 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-              </nav>
-            </div>
-          </div>
-        </div>
       </div>
       <div
         class="pf-v6-c-toolbar__content pf-m-hidden"