@patternfly/react-data-view 6.1.0 → 6.3.0-prerelease.3

package/dist/esm/DataViewTableTree/DataViewTableTree.js

@@ -9,7 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
 import { Table, Tbody, Td, TreeRowWrapper, } from '@patternfly/react-table';
 import { useInternalContext } from '../InternalContext';
 import { DataViewTableHead } from '../DataViewTableHead';
@@ -44,8 +45,8 @@ export const DataViewTableTree = (_a) => {
     var { columns, rows, headStates, bodyStates, leafIcon = null, expandedIcon = null, collapsedIcon = null, ouiaId = 'DataViewTableTree' } = _a, props = __rest(_a, ["columns", "rows", "headStates", "bodyStates", "leafIcon", "expandedIcon", "collapsedIcon", "ouiaId"]);
     const { selection, activeState } = useInternalContext();
     const { onSelect, isSelected, isSelectDisabled } = selection !== null && selection !== void 0 ? selection : {};
-    const [expandedNodeIds, setExpandedNodeIds] = React.useState([]);
-    const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = React.useState([]);
+    const [expandedNodeIds, setExpandedNodeIds] = useState([]);
+    const [expandedDetailsNodeNames, setExpandedDetailsNodeIds] = useState([]);
     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 nodes = useMemo(() => {
@@ -88,11 +89,11 @@ export const DataViewTableTree = (_a) => {
                 ? renderRows(node.children, level + 1, 1, rowIndex + 1, !isExpanded || isHidden)
                 : [];
             return [
-                React.createElement(TreeRowWrapper, { key: node.id, row: { props: treeRow.props }, ouiaId: `${ouiaId}-tr-${rowIndex}` }, node.row.map((cell, colIndex) => {
-                    var _a;
-                    const cellIsObject = isDataViewTdObject(cell);
-                    return (React.createElement(Td, Object.assign({ key: colIndex, treeRow: colIndex === 0 ? treeRow : undefined }, (cellIsObject && ((_a = cell === null || cell === void 0 ? void 0 : cell.props) !== null && _a !== void 0 ? _a : {})), { "data-ouia-component-id": `${ouiaId}-td-${rowIndex}-${colIndex}` }), cellIsObject ? cell.cell : cell));
-                })),
+                _jsx(TreeRowWrapper, { row: { props: treeRow.props }, ouiaId: `${ouiaId}-tr-${rowIndex}`, children: node.row.map((cell, colIndex) => {
+                        var _a;
+                        const cellIsObject = isDataViewTdObject(cell);
+                        return (_jsx(Td, Object.assign({ treeRow: colIndex === 0 ? treeRow : undefined }, (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));
+                    }) }, node.id),
                 ...childRows,
                 ...renderRows(remainingNodes, level, posinset + 1, rowIndex + 1 + childRows.length, isHidden),
             ];
@@ -110,8 +111,6 @@ export const DataViewTableTree = (_a) => {
         isSelectDisabled,
         ouiaId
     ]);
-    return (React.createElement(Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props),
-        activeHeadState || React.createElement(DataViewTableHead, { isTreeTable: true, columns: columns, ouiaId: ouiaId }),
-        activeBodyState || React.createElement(Tbody, null, nodes)));
+    return (_jsxs(Table, Object.assign({ isTreeTable: true, "aria-label": "Data table", ouiaId: ouiaId }, props, { children: [activeHeadState || _jsx(DataViewTableHead, { isTreeTable: true, columns: columns, ouiaId: ouiaId }), activeBodyState || _jsx(Tbody, { children: nodes })] })));
 };
 export default DataViewTableTree;

package/dist/esm/DataViewTableTree/DataViewTableTree.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
 import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
 import { DataView } from '../DataView';
@@ -63,23 +63,19 @@ describe('DataViewTableTree component', () => {
         isSelectDisabled: jest.fn(),
     };
     test('should render the tree table correctly', () => {
-        const { container } = render(React.createElement(DataView, { selection: mockSelection },
-            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows, leafIcon: React.createElement(LeafIcon, null), expandedIcon: React.createElement(FolderOpenIcon, { "aria-hidden": true }), collapsedIcon: React.createElement(FolderIcon, { "aria-hidden": true }) })));
+        const { container } = render(_jsx(DataView, { selection: mockSelection, children: _jsx(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, rows: rows, leafIcon: _jsx(LeafIcon, {}), expandedIcon: _jsx(FolderOpenIcon, { "aria-hidden": true }), collapsedIcon: _jsx(FolderIcon, { "aria-hidden": true }) }) }));
         expect(container).toMatchSnapshot();
     });
     test('should render tree table with an empty state', () => {
-        const { container } = render(React.createElement(DataView, { activeState: "empty" },
-            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { empty: "No data found" }, rows: [] })));
+        const { container } = render(_jsx(DataView, { activeState: "empty", children: _jsx(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { empty: "No data found" }, rows: [] }) }));
         expect(container).toMatchSnapshot();
     });
     test('should render tree table with an error state', () => {
-        const { container } = render(React.createElement(DataView, { activeState: "error" },
-            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { error: "Some error" }, rows: [] })));
+        const { container } = render(_jsx(DataView, { activeState: "error", children: _jsx(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { error: "Some error" }, rows: [] }) }));
         expect(container).toMatchSnapshot();
     });
     test('should render tree table with a loading state', () => {
-        const { container } = render(React.createElement(DataView, { activeState: "loading" },
-            React.createElement(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] })));
+        const { container } = render(_jsx(DataView, { activeState: "loading", children: _jsx(DataViewTable, { isTreeTable: true, "aria-label": 'Repositories table', ouiaId: ouiaId, columns: columns, bodyStates: { loading: "Data is loading" }, rows: [] }) }));
         expect(container).toMatchSnapshot();
     });
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { SearchInputProps, ToolbarFilterProps } from '@patternfly/react-core';
 /** extends SearchInputProps */
 export interface DataViewTextFilterProps extends SearchInputProps {
@@ -17,5 +17,5 @@ export interface DataViewTextFilterProps extends SearchInputProps {
     /** Custom OUIA ID */
     ouiaId?: string;
 }
-export declare const DataViewTextFilter: React.FC<DataViewTextFilterProps>;
+export declare const DataViewTextFilter: FC<DataViewTextFilterProps>;
 export default DataViewTextFilter;

package/dist/esm/DataViewTextFilter/DataViewTextFilter.js

@@ -9,11 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 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 (React.createElement(ToolbarFilter, { key: ouiaId, "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 },
-        React.createElement(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))));
+    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.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
 import DataViewTextFilter from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';
@@ -11,7 +11,7 @@ describe('DataViewTextFilter component', () => {
         onChange: mockOnChange,
     };
     it('should render correctly', () => {
-        const { container } = render(React.createElement(DataViewToolbar, { filters: React.createElement(DataViewTextFilter, Object.assign({}, defaultProps)) }));
+        const { container } = render(_jsx(DataViewToolbar, { filters: _jsx(DataViewTextFilter, Object.assign({}, defaultProps)) }));
         expect(container).toMatchSnapshot();
     });
 });

package/dist/esm/DataViewToolbar/DataViewToolbar.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { ToolbarProps } from '@patternfly/react-core';
 /** extends ToolbarProps */
 export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProps>, 'ref'> {
@@ -12,10 +12,12 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
     pagination?: React.ReactNode;
     /** React node to display actions */
     actions?: React.ReactNode;
+    /** React node to display toggle group */
+    toggleGroup?: React.ReactNode;
     /** React node to display filters */
     filters?: React.ReactNode;
     /** React node to display custom filter labels */
     customLabelGroupContent?: React.ReactNode;
 }
-export declare const DataViewToolbar: React.FC<DataViewToolbarProps>;
+export declare const DataViewToolbar: FC<DataViewToolbarProps>;
 export default DataViewToolbar;

package/dist/esm/DataViewToolbar/DataViewToolbar.js

@@ -9,18 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useRef } from 'react';
+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';
 export const DataViewToolbar = (_a) => {
-    var { className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "pagination", "filters", "customLabelGroupContent", "clearAllFilters", "children"]);
-    const defaultClearFilters = useRef(React.createElement(ToolbarItem, null,
-        React.createElement(Button, { ouiaId: `${ouiaId}-clear-all-filters`, variant: "link", onClick: clearAllFilters, isInline: true }, "Clear filters")));
-    return (React.createElement(Toolbar, Object.assign({ ouiaId: ouiaId, className: className, customLabelGroupContent: customLabelGroupContent !== null && customLabelGroupContent !== void 0 ? customLabelGroupContent : defaultClearFilters.current }, props),
-        React.createElement(ToolbarContent, null,
-            bulkSelect && (React.createElement(ToolbarItem, { "data-ouia-component-id": `${ouiaId}-bulk-select` }, bulkSelect)),
-            filters && (React.createElement(ToolbarItem, null, filters)),
-            actions && (React.createElement(ToolbarItem, null, actions)),
-            pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
-            children)));
+    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 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] }) })));
 };
 export default DataViewToolbar;

package/dist/esm/DataViewToolbar/DataViewToolbar.test.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
 import DataViewToolbar from './DataViewToolbar';
 import { Pagination } from '@patternfly/react-core';
 describe('DataViewToolbar component', () => {
     test('should render correctly', () => {
-        expect(render(React.createElement(DataViewToolbar, { pagination: React.createElement(Pagination, { page: 1, perPage: 10 }) }))).toMatchSnapshot();
+        expect(render(_jsx(DataViewToolbar, { pagination: _jsx(Pagination, { page: 1, perPage: 10 }) }))).toMatchSnapshot();
     });
 });

package/dist/esm/Hooks/filters.js

@@ -4,8 +4,8 @@ export const useDataViewFilters = ({ initialFilters = {}, searchParams, setSearc
     const isUrlSyncEnabled = useMemo(() => searchParams && !!setSearchParams, [searchParams, setSearchParams]);
     const getInitialFilters = useCallback(() => isUrlSyncEnabled
         ? Object.keys(initialFilters).reduce((loadedFilters, key) => {
-            const urlValue = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
             const isArrayFilter = Array.isArray(initialFilters[key]);
+            const urlValue = isArrayFilter ? searchParams === null || searchParams === void 0 ? void 0 : searchParams.getAll(key) : searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(key);
             // eslint-disable-next-line no-nested-ternary
             loadedFilters[key] = urlValue
                 ? (isArrayFilter && !Array.isArray(urlValue) ? [urlValue] : urlValue)

package/dist/esm/Hooks/filters.test.js

@@ -40,6 +40,31 @@ describe('useDataViewFilters', () => {
         act(() => result.current.onSetFilters({ search: 'new search' }));
         expect(setSearchParams).toHaveBeenCalled();
     });
+    it('should sync with URL search params with non array value', () => {
+        const searchParams = new URLSearchParams();
+        searchParams.set('test', 'foo');
+        const setSearchParams = jest.fn();
+        const props = {
+            initialFilters: { test: '' },
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = renderHook(() => useDataViewFilters(props));
+        expect(result.current.filters).toEqual({ test: 'foo' });
+    });
+    it('should sync with URL search params with array value', () => {
+        const searchParams = new URLSearchParams();
+        searchParams.append('test', 'foo');
+        searchParams.append('test', 'bar');
+        const setSearchParams = jest.fn();
+        const props = {
+            initialFilters: { test: [] },
+            searchParams,
+            setSearchParams,
+        };
+        const { result } = renderHook(() => useDataViewFilters(props));
+        expect(result.current.filters).toEqual({ test: ['foo', 'bar'] });
+    });
     it('should reset filters to default values when clearAllFilters is called', () => {
         const { result } = renderHook(() => useDataViewFilters({ initialFilters }));
         act(() => result.current.clearAllFilters());

package/dist/esm/InternalContext/InternalContext.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { DataViewState } from '../DataView';
 export interface DataViewSelection {
     /** Called when the selection of items changes */
@@ -19,8 +19,8 @@ export interface InternalContextValue extends InternalContextProps {
     /** Flag indicating if data view is selectable (auto-calculated) */
     isSelectable: boolean;
 }
-export declare const InternalContext: React.Context<InternalContextValue>;
+export declare const InternalContext: import("react").Context<InternalContextValue>;
 export type InternalProviderProps = PropsWithChildren<InternalContextProps>;
-export declare const InternalContextProvider: React.FC<InternalProviderProps>;
+export declare const InternalContextProvider: FC<InternalProviderProps>;
 export declare const useInternalContext: () => InternalContextValue;
 export default InternalContext;

package/dist/esm/InternalContext/InternalContext.js

@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
 export const InternalContext = createContext({
     selection: undefined,
     activeState: undefined,
@@ -6,7 +7,7 @@ export const InternalContext = createContext({
 });
 export const InternalContextProvider = ({ children, selection, activeState }) => {
     const isSelectable = useMemo(() => Boolean((selection === null || selection === void 0 ? void 0 : selection.onSelect) && (selection === null || selection === void 0 ? void 0 : selection.isSelected)), [selection === null || selection === void 0 ? void 0 : selection.onSelect, selection === null || selection === void 0 ? void 0 : selection.isSelected]);
-    return (React.createElement(InternalContext.Provider, { value: { selection, activeState, isSelectable } }, children));
+    return (_jsx(InternalContext.Provider, { value: { selection, activeState, isSelectable }, children: children }));
 };
 export const useInternalContext = () => useContext(InternalContext);
 export default InternalContext;

package/dist/esm/InternalContext/InternalContext.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { useInternalContext } from './InternalContext';
@@ -12,12 +12,9 @@ describe('InternalContext', () => {
     test('should provide context value and allow consuming it', () => {
         const TestComponent = () => {
             const { selection } = useInternalContext();
-            return (React.createElement("div", null,
-                React.createElement("button", { onClick: () => selection === null || selection === void 0 ? void 0 : selection.onSelect(true, ['item1']) }, "Select item"),
-                React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Selected' : 'Not selected')));
+            return (_jsxs("div", { children: [_jsx("button", { onClick: () => selection === null || selection === void 0 ? void 0 : selection.onSelect(true, ['item1']), children: "Select item" }), _jsx("span", { children: (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Selected' : 'Not selected' })] }));
         };
-        const { getByText } = render(React.createElement(DataView, { selection: mockSelection },
-            React.createElement(TestComponent, null)));
+        const { getByText } = render(_jsx(DataView, { selection: mockSelection, children: _jsx(TestComponent, {}) }));
         fireEvent.click(getByText('Select item'));
         expect(mockSelection.onSelect).toHaveBeenCalledWith(true, ['item1']);
     });
@@ -25,12 +22,9 @@ describe('InternalContext', () => {
         const mockSelectionState = Object.assign(Object.assign({}, mockSelection), { isSelected: jest.fn((item) => item === 'item1') });
         const TestComponent = () => {
             const { selection } = useInternalContext();
-            return (React.createElement("div", null,
-                React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Item 1 is selected' : 'Item 1 is not selected'),
-                React.createElement("span", null, (selection === null || selection === void 0 ? void 0 : selection.isSelected('item2')) ? 'Item 2 is selected' : 'Item 2 is not selected')));
+            return (_jsxs("div", { children: [_jsx("span", { children: (selection === null || selection === void 0 ? void 0 : selection.isSelected('item1')) ? 'Item 1 is selected' : 'Item 1 is not selected' }), _jsx("span", { children: (selection === null || selection === void 0 ? void 0 : selection.isSelected('item2')) ? 'Item 2 is selected' : 'Item 2 is not selected' })] }));
         };
-        const { getByText } = render(React.createElement(DataView, { selection: mockSelectionState },
-            React.createElement(TestComponent, null)));
+        const { getByText } = render(_jsx(DataView, { selection: mockSelectionState, children: _jsx(TestComponent, {}) }));
         expect(getByText('Item 1 is selected')).toBeInTheDocument();
         expect(getByText('Item 2 is not selected')).toBeInTheDocument();
     });
@@ -39,12 +33,9 @@ describe('InternalContext', () => {
         const TestComponent = () => {
             var _a, _b;
             const { selection } = useInternalContext();
-            return (React.createElement("div", null,
-                React.createElement("span", null, ((_a = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _a === void 0 ? void 0 : _a.call(selection, 'item3')) ? 'Item 3 is disabled' : 'Item 3 is enabled'),
-                React.createElement("span", null, ((_b = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _b === void 0 ? void 0 : _b.call(selection, 'item1')) ? 'Item 1 is disabled' : 'Item 1 is enabled')));
+            return (_jsxs("div", { children: [_jsx("span", { children: ((_a = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _a === void 0 ? void 0 : _a.call(selection, 'item3')) ? 'Item 3 is disabled' : 'Item 3 is enabled' }), _jsx("span", { children: ((_b = selection === null || selection === void 0 ? void 0 : selection.isSelectDisabled) === null || _b === void 0 ? void 0 : _b.call(selection, 'item1')) ? 'Item 1 is disabled' : 'Item 1 is enabled' })] }));
         };
-        const { getByText } = render(React.createElement(DataView, { selection: mockSelectionWithDisabled },
-            React.createElement(TestComponent, null)));
+        const { getByText } = render(_jsx(DataView, { selection: mockSelectionWithDisabled, children: _jsx(TestComponent, {}) }));
         expect(getByText('Item 3 is disabled')).toBeInTheDocument();
         expect(getByText('Item 1 is enabled')).toBeInTheDocument();
     });

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/dataview/dataview.test.tsx","../src/dataview/dataview.tsx","../src/dataview/index.ts","../src/dataviewcheckboxfilter/dataviewcheckboxfilter.test.tsx","../src/dataviewcheckboxfilter/dataviewcheckboxfilter.tsx","../src/dataviewcheckboxfilter/index.ts","../src/datavieweventscontext/datavieweventscontext.test.tsx","../src/datavieweventscontext/datavieweventscontext.tsx","../src/datavieweventscontext/index.ts","../src/dataviewfilters/dataviewfilters.test.tsx","../src/dataviewfilters/dataviewfilters.tsx","../src/dataviewfilters/index.tsx","../src/dataviewtable/dataviewtable.test.tsx","../src/dataviewtable/dataviewtable.tsx","../src/dataviewtable/index.ts","../src/dataviewtablebasic/dataviewtablebasic.test.tsx","../src/dataviewtablebasic/dataviewtablebasic.tsx","../src/dataviewtablebasic/index.ts","../src/dataviewtablehead/dataviewtablehead.test.tsx","../src/dataviewtablehead/dataviewtablehead.tsx","../src/dataviewtablehead/index.ts","../src/dataviewtabletree/dataviewtabletree.test.tsx","../src/dataviewtabletree/dataviewtabletree.tsx","../src/dataviewtabletree/index.ts","../src/dataviewtextfilter/dataviewtextfilter.test.tsx","../src/dataviewtextfilter/dataviewtextfilter.tsx","../src/dataviewtextfilter/index.ts","../src/dataviewtoolbar/dataviewtoolbar.test.tsx","../src/dataviewtoolbar/dataviewtoolbar.tsx","../src/dataviewtoolbar/index.ts","../src/hooks/filters.test.tsx","../src/hooks/filters.ts","../src/hooks/index.ts","../src/hooks/pagination.test.tsx","../src/hooks/pagination.ts","../src/hooks/selection.test.tsx","../src/hooks/selection.ts","../src/hooks/sort.test.tsx","../src/hooks/sort.ts","../src/internalcontext/internalcontext.test.tsx","../src/internalcontext/internalcontext.tsx","../src/internalcontext/index.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/DataView/DataView.test.tsx","../src/DataView/DataView.tsx","../src/DataView/index.ts","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx","../src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx","../src/DataViewCheckboxFilter/index.ts","../src/DataViewEventsContext/DataViewEventsContext.test.tsx","../src/DataViewEventsContext/DataViewEventsContext.tsx","../src/DataViewEventsContext/index.ts","../src/DataViewFilters/DataViewFilters.test.tsx","../src/DataViewFilters/DataViewFilters.tsx","../src/DataViewFilters/index.tsx","../src/DataViewTable/DataViewTable.test.tsx","../src/DataViewTable/DataViewTable.tsx","../src/DataViewTable/index.ts","../src/DataViewTableBasic/DataViewTableBasic.test.tsx","../src/DataViewTableBasic/DataViewTableBasic.tsx","../src/DataViewTableBasic/index.ts","../src/DataViewTableHead/DataViewTableHead.test.tsx","../src/DataViewTableHead/DataViewTableHead.tsx","../src/DataViewTableHead/index.ts","../src/DataViewTableTree/DataViewTableTree.test.tsx","../src/DataViewTableTree/DataViewTableTree.tsx","../src/DataViewTableTree/index.ts","../src/DataViewTextFilter/DataViewTextFilter.test.tsx","../src/DataViewTextFilter/DataViewTextFilter.tsx","../src/DataViewTextFilter/index.ts","../src/DataViewToolbar/DataViewToolbar.test.tsx","../src/DataViewToolbar/DataViewToolbar.tsx","../src/DataViewToolbar/index.ts","../src/Hooks/filters.test.tsx","../src/Hooks/filters.ts","../src/Hooks/index.ts","../src/Hooks/pagination.test.tsx","../src/Hooks/pagination.ts","../src/Hooks/selection.test.tsx","../src/Hooks/selection.ts","../src/Hooks/sort.test.tsx","../src/Hooks/sort.ts","../src/InternalContext/InternalContext.test.tsx","../src/InternalContext/InternalContext.tsx","../src/InternalContext/index.ts"],"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.1.0",
+  "version": "6.3.0-prerelease.3",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -39,22 +39,22 @@
     "react-jss": "^10.10.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.5.0",
+    "@patternfly/documentation-framework": "^6.5.20",
     "@patternfly/patternfly": "^6.0.0",
     "@patternfly/react-code-editor": "^6.0.0",
-    "@patternfly/patternfly-a11y": "^5.0.0",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@patternfly/patternfly-a11y": "^5.1.0",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
     "@types/react-router-dom": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^6.28.1",
-    "react-router-dom": "^6.28.1",
+    "react-router": "^6.30.1",
+    "react-router-dom": "^6.30.1",
     "rimraf": "^6.0.1",
-    "typescript": "^5.4.5"
+    "typescript": "^5.8.3"
   }
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import DataView from '@patternfly/react-data-view/dist/dynamic/DataView';
 
 const layoutItemStyling = {
@@ -8,10 +8,10 @@ const layoutItemStyling = {
   border: 'var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default)'
 };
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <DataView>
     <div style={layoutItemStyling}>Header</div>
     <div style={layoutItemStyling}>Data representation</div>
     <div style={layoutItemStyling}>Footer</div>
   </DataView>
-)
+);

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

@@ -7,7 +7,7 @@ propComponents: ['DataView']
 sortValue: 1
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md
 --- 
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { FunctionComponent, useState, useEffect, useRef, useMemo } from 'react';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 import { useDataViewPagination, useDataViewSelection, useDataViewFilters, useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { FunctionComponent, useEffect, useState, useRef, useMemo } from 'react';
 import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Content } from '@patternfly/react-core';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
@@ -32,7 +32,7 @@ interface RepositoryDetailProps {
   setSelectedRepo: React.Dispatch<React.SetStateAction<Repository | undefined>>;
 }
 
-const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
+const RepositoryDetail: FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
   const context = useDataViewEventsContext();
 
   useEffect(() => {
@@ -84,7 +84,7 @@ const rowActions = [
   }
 ];
 
-const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
+const RepositoriesTable: FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
   const selection = useDataViewSelection({ matchOption: (a, b) => a.row[0] === b.row[0] });
   const { trigger } = useDataViewEventsContext();
   const rows = useMemo(() => {
@@ -110,7 +110,7 @@ const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ se
   );
 };
 
-export const BasicExample: React.FunctionComponent = () => {
+export const BasicExample: FunctionComponent = () => {
   const [ selectedRepo, setSelectedRepo ] = useState<Repository>();
   const drawerRef = useRef<HTMLDivElement>(null);
 

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { FunctionComponent, useEffect, useState, useRef, useMemo } from 'react';
 import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Content, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions, Button,  } from '@patternfly/react-core';
 import { ActionsColumn, Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
 import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
@@ -94,7 +94,7 @@ interface RepositoryDetailProps {
   setSelectedRepo: React.Dispatch<React.SetStateAction<Repository | undefined>>;
 }
 
-const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
+const RepositoryDetail: FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
   const context = useDataViewEventsContext();
 
   useEffect(() => {
@@ -146,13 +146,13 @@ const rowActions = [
   }
 ];
 
-const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
+const RepositoriesTable: FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
   const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({ initialFilters: { name: '', branch: '', workspace: [] } });
   
   const pagination = useDataViewPagination({ perPage: 5 });
   const { page, perPage } = pagination;
 
-  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
+  const selection = useDataViewSelection({ matchOption: (a, b) => a.row[0] === b.row[0] });
   const { selected, onSelect, isSelected } = selection;
   
   const { trigger } = useDataViewEventsContext();
@@ -255,7 +255,7 @@ const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ se
   );
 };
 
-export const BasicExample: React.FunctionComponent = () => {
+export const BasicExample: FunctionComponent = () => {
   const [ selectedRepo, setSelectedRepo ] = useState<Repository>();
   const drawerRef = useRef<HTMLDivElement>(null);
 

package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableEmptyExample.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { CubesIcon } from '@patternfly/react-icons';
-import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter,  } from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
 import { Tbody, Td, Tr } from '@patternfly/react-table';
 
 interface Repository {
@@ -27,7 +27,7 @@ const empty = (
   <Tbody>
     <Tr key="loading" ouiaId={`${ouiaId}-tr-loading`}>
       <Td colSpan={columns.length}>
-        <EmptyState  headingLevel="h4" icon={CubesIcon} titleText="No data found">
+        <EmptyState headingLevel="h4" icon={CubesIcon} titleText="No data found">
           <EmptyStateBody>There are no matching data to be displayed.</EmptyStateBody>
           <EmptyStateFooter>
             <EmptyStateActions>
@@ -44,10 +44,10 @@ const empty = (
   </Tbody>
 );
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <DataView activeState={DataViewState.empty}>
-    <DataViewTable 
-      aria-label='Repositories table' 
+    <DataViewTable
+      aria-label="Repositories table"
       ouiaId={ouiaId}
       columns={columns}
       rows={rows}

package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableErrorExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { ErrorState } from '@patternfly/react-component-groups';
@@ -32,7 +32,7 @@ const error = (
   </Tbody>
 );
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <DataView activeState={DataViewState.error}>
     <DataViewTable 
       aria-label='Repositories table' 

package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { Button } from '@patternfly/react-core';
@@ -62,6 +62,6 @@ const columns: DataViewTh[] = [
 
 const ouiaId = 'TableExample';
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
 );

package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableLoadingExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { DataView, DataViewState } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { SkeletonTableBody, SkeletonTableHead } from '@patternfly/react-component-groups';
@@ -10,13 +10,13 @@ const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Wo
 
 const ouiaId = 'TableExample';
 
-const headLoading = <SkeletonTableHead columns={columns} />
+const headLoading = <SkeletonTableHead columns={columns} />;
 const bodyLoading = <SkeletonTableBody rowsCount={5} columnsCount={columns.length} />;
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <DataView activeState={DataViewState.loading}>
     <DataViewTable
-      aria-label='Repositories table' 
+      aria-label="Repositories table"
       ouiaId={ouiaId}
       columns={columns}
       rows={rows}

package/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableTreeExample.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { DataViewTable, DataViewTh, DataViewTrTree } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
@@ -52,7 +52,7 @@ const columns: DataViewTh[] = [ 'Repositories', 'Branches', 'Pull requests', 'Wo
 
 const ouiaId = 'TreeTableExample';
 
-export const BasicExample: React.FunctionComponent = () => {
+export const BasicExample: FunctionComponent = () => {
   const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
 
   return (