@patternfly/react-data-view 6.2.0 → 6.3.0

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'> {
@@ -19,5 +19,5 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
     /** 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,19 +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, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children } = _a, props = __rest(_a, ["className", "ouiaId", "bulkSelect", "actions", "toggleGroup", "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)),
-            toggleGroup && (React.createElement(ToolbarItem, null, toggleGroup)),
-            pagination && (React.createElement(ToolbarItem, { variant: ToolbarItemVariant.pagination, "data-ouia-component-id": `${ouiaId}-pagination` }, pagination)),
-            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/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.2.0",
+  "version": "6.3.0",
   "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.20",
     "@patternfly/patternfly": "^6.0.0",
     "@patternfly/react-code-editor": "^6.0.0",
     "@patternfly/patternfly-a11y": "^5.1.0",
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.5",
+    "@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.30.0",
-    "react-router-dom": "^6.30.0",
+    "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 (

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { useMemo } from 'react';
+import { FunctionComponent, useMemo } from 'react';
 import { useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { ThProps } from '@patternfly/react-table';
@@ -41,7 +41,7 @@ const sortData = (data: Repository[], sortBy: string | undefined, direction: 'as
 
 const ouiaId = 'TableExample';
 
-export const MyTable: React.FunctionComponent = () => {
+export const MyTable: FunctionComponent = () => {
   const [ searchParams, setSearchParams ] = useSearchParams();
   const { sortBy, direction, onSort } = useDataViewSort({ searchParams, setSearchParams });
   const sortByIndex = useMemo(() => COLUMNS.findIndex(item => item.key === sortBy), [ sortBy ]);
@@ -79,7 +79,7 @@ export const MyTable: React.FunctionComponent = () => {
   );
 };
 
-export const BasicExample: React.FunctionComponent = () => (
+export const BasicExample: FunctionComponent = () => (
   <BrowserRouter>
     <MyTable/>
   </BrowserRouter>

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

@@ -15,7 +15,7 @@ sortValue: 3
 propComponents: ['DataViewTableBasic', 'DataViewTableTree', 'DataViewTrTree', 'DataViewTrObject']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md
 ---
-import { useMemo } from 'react';
+import { FunctionComponent, useMemo } from 'react';
 import { BrowserRouter, useSearchParams } from 'react-router-dom';
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
 import { CubesIcon, FolderIcon, FolderOpenIcon, LeafIcon, ExclamationCircleIcon } from '@patternfly/react-icons';

package/patternfly-docs/pages/index.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { Title, PageSection } from '@patternfly/react-core';
 

package/release.config.js

@@ -4,7 +4,15 @@ module.exports = {
     preset: 'angular'
   },
   plugins: [
-    '@semantic-release/commit-analyzer',
+    [
+      '@semantic-release/commit-analyzer',
+      {
+        preset: 'angular',
+        parserOpts: {
+          noteKeywords: [ 'BREAKING-CHANGE' ]
+        }
+      }
+    ],
     '@semantic-release/release-notes-generator',
     '@semantic-release/github',
     '@semantic-release/npm'

package/src/DataView/DataView.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import DataView from './DataView';
 
@@ -11,11 +10,14 @@ const layoutItemStyling = {
 
 describe('DataView component', () => {
   test('should render correctly', () => {
-    expect(render(
-      <DataView>
-        <div style={layoutItemStyling}>Header</div>
-        <div style={layoutItemStyling}>Data representation</div>
-        <div style={layoutItemStyling}>Footer</div>
-      </DataView>)).toMatchSnapshot();
+    expect(
+      render(
+        <DataView>
+          <div style={layoutItemStyling}>Header</div>
+          <div style={layoutItemStyling}>Data representation</div>
+          <div style={layoutItemStyling}>Footer</div>
+        </DataView>
+      )
+    ).toMatchSnapshot();
   });
-});
+});

package/src/DataView/DataView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC, Children } from 'react';
 import { Stack, StackItem, StackProps } from '@patternfly/react-core';
 import { DataViewSelection, InternalContextProvider } from '../InternalContext';
 
@@ -24,11 +24,11 @@ export interface DataViewProps extends StackProps {
 
 export type DataViewImpementationProps = Omit<DataViewProps, 'onSelect' | 'isItemSelected' | 'isItemSelectDisabled'>;
 
-const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
+const DataViewImplementation: FC<DataViewImpementationProps> = ({
   children, ouiaId = 'DataView', ...props
 }: DataViewImpementationProps) => (
   <Stack data-ouia-component-id={`${ouiaId}-stack`} {...props}>
-    {React.Children.map(children, (child, index) => (
+    {Children.map(children, (child, index) => (
       <StackItem data-ouia-component-id={`${ouiaId}-stack-item-${index}`}>
         {child}
       </StackItem>
@@ -36,7 +36,7 @@ const DataViewImplementation: React.FC<DataViewImpementationProps> = ({
   </Stack>
 )
 
-export const DataView: React.FC<DataViewProps> = ({ children, selection, activeState, ...props }: DataViewProps) => (
+export const DataView: FC<DataViewProps> = ({ children, selection, activeState, ...props }: DataViewProps) => (
   <InternalContextProvider selection={selection} activeState={activeState} >
     <DataViewImplementation {...props}>{children}</DataViewImplementation>
   </InternalContextProvider>

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
 import DataViewToolbar from '../DataViewToolbar';