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

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/content/extensions/data-view/examples/Toolbar/AllSelectedExample.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Pagination, ToggleGroup, ToggleGroupItem, Tooltip } from '@patternfly/react-core';
+import { useDataViewPagination, useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { BulkSelect, BulkSelectValue } from '@patternfly/react-component-groups';
+
+const TOGGLE_ALL = 'all';
+const TOGGLE_SELECTED = 'selected';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+];
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+};
+
+const repositories: Repository[] = [
+  { name: 'Repository one', branches: 'Branch one', prs: 'Pull request one', workspaces: 'Workspace one', lastCommit: 'Timestamp one' },
+  { name: 'Repository two', branches: 'Branch two', prs: 'Pull request two', workspaces: 'Workspace two', lastCommit: 'Timestamp two' },
+  { name: 'Repository three', branches: 'Branch three', prs: 'Pull request three', workspaces: 'Workspace three', lastCommit: 'Timestamp three' },
+  { name: 'Repository four', branches: 'Branch four', prs: 'Pull request four', workspaces: 'Workspace four', lastCommit: 'Timestamp four' },
+  { name: 'Repository five', branches: 'Branch five', prs: 'Pull request five', workspaces: 'Workspace five', lastCommit: 'Timestamp five' },
+  { name: 'Repository six', branches: 'Branch six', prs: 'Pull request six', workspaces: 'Workspace six', lastCommit: 'Timestamp six' }
+];
+
+const rows = repositories.map(item => Object.values(item));
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'LayoutExample';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
+  const [ selectedToggle, setSelectedToggle ] = useState(TOGGLE_ALL);
+  const { selected, onSelect } = selection;
+  const { page, perPage, onSetPage } = pagination;
+
+  const pageRows = useMemo(() => (selectedToggle === TOGGLE_SELECTED ? selected : rows).slice((page - 1) * perPage, ((page - 1) * perPage) + perPage), [ page, perPage, selectedToggle, selected ]);
+
+  const handleBulkSelect = (value: BulkSelectValue) => {
+    value === BulkSelectValue.none && onSelect(false);
+    value === BulkSelectValue.all && onSelect(true, rows);
+  };
+    
+  const handleItemClick = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent, _isSelected: boolean) => {
+    const id = event.currentTarget.id;
+    
+    if (id === TOGGLE_SELECTED && selected.length === 0) {
+      return;
+    }
+  
+    if (selectedToggle !== id) {
+      setSelectedToggle(id);
+      onSetPage(undefined, 1);
+    }
+  };
+
+  useEffect(() => {
+    if (selected.length === 0) {
+      setSelectedToggle(TOGGLE_ALL);
+    }
+  }, [ selected ]);
+
+  return (
+    <DataView selection={selection}>
+      <DataViewToolbar 
+        ouiaId='DataViewHeader'
+        bulkSelect={
+          <BulkSelect
+            canSelectAll
+            isDataPaginated={false}
+            totalCount={repositories.length}
+            selectedCount={selected.length}
+            onSelect={handleBulkSelect}
+          />
+        } 
+        toggleGroup={
+          <ToggleGroup aria-label="Toggle group to switch between all / selected table rows">
+            <ToggleGroupItem
+              text="All"
+              buttonId={TOGGLE_ALL}
+              isSelected={selectedToggle === TOGGLE_ALL}
+              onChange={handleItemClick}
+            />
+            <ToggleGroupItem
+              id="selected-row-switch"
+              text="Selected"
+              buttonId={TOGGLE_SELECTED}
+              isSelected={selectedToggle === TOGGLE_SELECTED}
+              onChange={handleItemClick}
+              aria-disabled={selected.length === 0}
+            />
+          </ToggleGroup>
+        }
+        pagination={<Pagination perPageOptions={perPageOptions} itemCount={repositories.length} {...pagination} />} 
+      />
+      
+      {selected.length === 0 && (<Tooltip
+        id="selected-row-switch-tooltip"
+        content="Select at least one row to enable this filter"
+        triggerRef={() => document.getElementById('selected-row-switch') as HTMLButtonElement}
+      />)}
+  
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={pageRows} />
+    </DataView>
+  );
+};

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

@@ -15,8 +15,9 @@ sortValue: 2
 propComponents: ['DataViewToolbar', 'DataViewFilters', 'DataViewTextFilter', 'DataViewCheckboxFilter']
 sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md
 ---
-import { useMemo } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { Pagination, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import { useDataViewPagination, useDataViewSelection, useDataViewFilters } from '@patternfly/react-data-view/dist/dynamic/Hooks';
 import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
 import { BulkSelect, BulkSelectValue, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
@@ -140,3 +141,14 @@ This example demonstrates the setup and usage of filters within the data view. I
 ```js file="./FiltersExample.tsx"
 
 ```
+
+
+## All/selected data switch
+All/selected data switch allows users to toggle between displaying the entire table (All) and only the rows they have selected (Selected). If the user deselects the last selected row, the filter automatically switches back to All, displaying all table rows again. Until at least one row is selected, a tooltip with guidance is displayed, and the Selected button does not perform any action. The Selected button is intentionally not disabled for accessibility reasons but instead has `aria-disabled` set.
+
+### All/selected example
+This example demonstrates the setup and usage of All/selected row switch.
+
+```js file="./AllSelectedExample.tsx"
+
+```

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,11 +4,19 @@ 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'
   ],
   tagFormat: 'prerelease-v${version}',
-  dryRun: false
+  dryRun: true
 };

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

package/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC, useState, useRef, useMemo, useEffect, MouseEvent as ReactMouseEvent } from 'react';
 import {
   Badge,
   Menu,
@@ -48,7 +48,7 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
   ouiaId?: string;
 }
 
-export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
+export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
   filterId,
   title,
   value = [],
@@ -61,12 +61,12 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
   ouiaId = 'DataViewCheckboxFilter',
   ...props
 }: DataViewCheckboxFilterProps) => {
-  const [ isOpen, setIsOpen ] = React.useState(false);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [ isOpen, setIsOpen ] = useState(false);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  const normalizeOptions = React.useMemo(
+  const normalizeOptions = useMemo(
     () =>
       options.map(option =>
         typeof option === 'string'
@@ -76,7 +76,7 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
     [ options ]
   );
 
-  const handleToggleClick = (event: React.MouseEvent) => {
+  const handleToggleClick = (event: ReactMouseEvent) => {
     event.stopPropagation();
     setTimeout(() => {
       const firstElement = menuRef.current?.querySelector('li > button:not(:disabled)') as HTMLElement;
@@ -85,7 +85,7 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
     setIsOpen(prev => !prev);
   };
 
-  const handleSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+  const handleSelect = (event?: ReactMouseEvent, itemId?: string | number) => {
     const activeItem = String(itemId);
     const isSelected = value.includes(activeItem);
 
@@ -102,7 +102,7 @@ export const DataViewCheckboxFilter: React.FC<DataViewCheckboxFilterProps> = ({
     && setIsOpen(false);
 
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('click', handleClickOutside);
     return () => {
       window.removeEventListener('click', handleClickOutside);

package/src/DataViewEventsContext/DataViewEventsContext.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect } from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { useDataViewEventsContext, DataViewEventsProvider, EventTypes } from './DataViewEventsContext';
 
@@ -19,7 +19,7 @@ describe('DataViewEventsContext', () => {
     const TestComponent = () => {
       const { subscribe, trigger } = useDataViewEventsContext();
 
-      React.useEffect(() => {
+      useEffect(() => {
         const unsubscribe = subscribe(EventTypes.rowClick, callback);
         return () => unsubscribe();
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -46,7 +46,7 @@ describe('DataViewEventsContext', () => {
     const TestComponent = () => {
       const { subscribe, trigger } = useDataViewEventsContext();
 
-      React.useEffect(() => {
+      useEffect(() => {
         const unsubscribe = subscribe(EventTypes.rowClick, callback);
         unsubscribe();
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -75,7 +75,7 @@ describe('DataViewEventsContext', () => {
     const TestComponent = () => {
       const { subscribe, trigger } = useDataViewEventsContext();
 
-      React.useEffect(() => {
+      useEffect(() => {
         const unsubscribe1 = subscribe(EventTypes.rowClick, callback1);
         const unsubscribe2 = subscribe(EventTypes.rowClick, callback2);
         

package/src/DataViewEventsContext/DataViewEventsContext.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   PropsWithChildren,
   createContext,
   useCallback,

package/src/DataViewFilters/DataViewFilters.test.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import DataViewFilters from './DataViewFilters';
 import DataViewToolbar from '../DataViewToolbar';
 import DataViewTextFilter from '../DataViewTextFilter';
@@ -8,14 +7,34 @@ describe('DataViewFilters component', () => {
   const mockOnChange = jest.fn();
 
   it('should render correctly', () => {
-    const { container } = render(<DataViewToolbar
-      filters={
-        <DataViewFilters onChange={mockOnChange} values={{}}>
-          <DataViewTextFilter filterId="one" title="One" />
-          <DataViewTextFilter filterId="two" title="Two" />
-        </DataViewFilters>
-      }
-    />);
+    const { container } = render(
+      <DataViewToolbar
+        filters={
+          <DataViewFilters onChange={mockOnChange} values={{}}>
+            <DataViewTextFilter filterId="one" title="One" />
+            <DataViewTextFilter filterId="two" title="Two" />
+          </DataViewFilters>
+        }
+      />
+    );
     expect(container).toMatchSnapshot();
   });
+
+  it('should call onChange with correct key and value when filter changes', () => {
+    const mockOnChange = jest.fn();
+    const { getByLabelText } = render(
+      <DataViewToolbar
+        filters={
+          <DataViewFilters onChange={mockOnChange} values={{}}>
+            <DataViewTextFilter filterId="one" title="One" />
+            <DataViewTextFilter filterId="two" title="Two" />
+          </DataViewFilters>
+        }
+      />
+    );
+    const input = getByLabelText('One filter');
+    input.focus();
+    fireEvent.input(input, { target: { value: 'abc' } });
+    expect(mockOnChange).toHaveBeenCalledWith('one', { one: 'abc' });
+  });
 });

package/src/DataViewFilters/DataViewFilters.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
+import { Children, isValidElement, cloneElement, useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
 import {
   Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper, ToolbarGroup, ToolbarToggleGroup, ToolbarToggleGroupProps,
 } from '@patternfly/react-core';
@@ -50,14 +50,14 @@ export const DataViewFilters = <T extends object>({
   const attributeContainerRef = useRef<HTMLDivElement>(null);
 
   const childrenHash = useMemo(() => JSON.stringify(
-    React.Children.map(children, (child) =>
-      React.isValidElement(child) ? { type: child.type, key: child.key, props: child.props } : child
+    Children.map(children, (child) =>
+      isValidElement(child) ? { type: child.type, key: child.key, props: child.props } : child
     )
   ), [ children ]);
 
-  const filterItems: DataViewFilterIdentifiers[] = useMemo(() => React.Children.toArray(children)
+  const filterItems: DataViewFilterIdentifiers[] = useMemo(() => Children.toArray(children)
     .map(child =>
-      React.isValidElement(child) ? { filterId: String(child.props.filterId), title: String(child.props.title) } : undefined
+      isValidElement(child) ? { filterId: String((child.props as any).filterId), title: String((child.props as any).title) } : undefined
     ).filter((item): item is DataViewFilterIdentifiers => !!item), [ childrenHash ]);  // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
@@ -122,17 +122,17 @@ export const DataViewFilters = <T extends object>({
             isVisible={isAttributeMenuOpen}
           />
         </div>
-        {React.Children.map(children, (child) =>
-          React.isValidElement(child)
-            ? React.cloneElement(child as ReactElement<{
+        {Children.map(children, (child) =>
+          isValidElement(child)
+            ? cloneElement(child as ReactElement<{
               showToolbarItem: boolean;
               onChange: (_e: unknown, values: unknown) => void;
               value: unknown;
             }>, {
-              showToolbarItem: activeAttributeMenu === child.props.title,
-              onChange: (event, value) => onChange?.(event, { [child.props.filterId]: value } as Partial<T>),
-              value: values?.[child.props.filterId],
-              ...child.props
+              showToolbarItem: activeAttributeMenu === (child.props as any).title,
+              onChange: (event, value) => onChange?.((child.props as any).filterId, { [(child.props as any).filterId]: value } as Partial<T>),
+              value: values?.[(child.props as any).filterId],
+              ...(child.props as any)
             })
             : child
         )}

package/src/DataViewTable/DataViewTable.test.tsx

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

package/src/DataViewTable/DataViewTable.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import {
   TdProps,
   ThProps,
@@ -50,7 +50,7 @@ export type DataViewTableProps =
       isTreeTable?: false;
     } & DataViewTableBasicProps);
 
-export const DataViewTable: React.FC<DataViewTableProps> = (props) => (
+export const DataViewTable: FC<DataViewTableProps> = (props) => (
   props.isTreeTable ? <DataViewTableTree {...props} /> : <DataViewTableBasic {...props} />
 );
 

package/src/DataViewTableBasic/DataViewTableBasic.test.tsx

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

package/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { FC, useMemo } from 'react';
 import {
   Table,
   TableProps,
@@ -25,7 +25,7 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   ouiaId?: string;
 }
 
-export const DataViewTableBasic: React.FC<DataViewTableBasicProps> = ({
+export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
   columns,
   rows,
   ouiaId = 'DataViewTableBasic',

package/src/DataViewTableHead/DataViewTableHead.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { Table } from '@patternfly/react-table';
 import { DataViewTableHead } from './DataViewTableHead';

package/src/DataViewTableHead/DataViewTableHead.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { FC, useMemo } from 'react';
 import {
   Th,
   Thead,
@@ -18,7 +18,7 @@ export interface DataViewTableHeadProps extends TheadProps {
   ouiaId?: string;
 }
 
-export const DataViewTableHead: React.FC<DataViewTableHeadProps> = ({
+export const DataViewTableHead: FC<DataViewTableHeadProps> = ({
   isTreeTable = false,
   columns,
   ouiaId = 'DataViewTableHead',

package/src/DataViewTableTree/DataViewTableTree.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { FolderIcon, FolderOpenIcon, LeafIcon } from '@patternfly/react-icons';
 import { DataView } from '../DataView';

package/src/DataViewTableTree/DataViewTableTree.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { FC, useState, useMemo, ReactNode } from 'react';
 import {
   Table,
   TableProps,
@@ -71,7 +71,7 @@ export interface DataViewTableTreeProps extends Omit<TableProps, 'onSelect' | 'r
   ouiaId?: string;
 }
 
-export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
+export const DataViewTableTree: FC<DataViewTableTreeProps> = ({
   columns,
   rows,
   headStates,
@@ -84,8 +84,8 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
 }: DataViewTableTreeProps) => {
   const { selection, activeState } = useInternalContext();
   const { onSelect, isSelected, isSelectDisabled } = selection ?? {};
-  const [ expandedNodeIds, setExpandedNodeIds ] = React.useState<string[]>([]);
-  const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = React.useState<string[]>([]);
+  const [ expandedNodeIds, setExpandedNodeIds ] = useState<string[]>([]);
+  const [ expandedDetailsNodeNames, setExpandedDetailsNodeIds ] = useState<string[]>([]);
 
   const activeHeadState = useMemo(() => activeState ? headStates?.[activeState] : undefined, [ activeState, headStates ]);
   const activeBodyState = useMemo(() => activeState ? bodyStates?.[activeState] : undefined, [ activeState, bodyStates ]);
@@ -98,7 +98,7 @@ export const DataViewTableTree: React.FC<DataViewTableTreeProps> = ({
       posinset = 1,
       rowIndex = 0,
       isHidden = false
-    ): React.ReactNode[] => {
+    ): ReactNode[] => {
       if (!node) {
         return [];
       }

package/src/DataViewTextFilter/DataViewTextFilter.test.tsx

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

package/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { SearchInput, SearchInputProps, ToolbarFilter, ToolbarFilterProps } from '@patternfly/react-core';
 
 /** extends SearchInputProps */
@@ -19,7 +19,7 @@ export interface DataViewTextFilterProps extends SearchInputProps {
   ouiaId?: string;
 }
 
-export const DataViewTextFilter: React.FC<DataViewTextFilterProps> = ({
+export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
   filterId,
   title,
   value = '',

package/src/DataViewToolbar/DataViewToolbar.test.tsx

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

package/src/DataViewToolbar/DataViewToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useRef } from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
 import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant, ToolbarProps } from '@patternfly/react-core';
 
 /** extends ToolbarProps */
@@ -13,13 +13,15 @@ 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 const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
+export const DataViewToolbar: FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
   const defaultClearFilters = useRef(
     <ToolbarItem>
       <Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>
@@ -45,6 +47,11 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
             {actions}
           </ToolbarItem>
         )}
+        {toggleGroup && (
+          <ToolbarItem>
+            {toggleGroup}
+          </ToolbarItem>
+        )}
         {pagination && (
           <ToolbarItem variant={ToolbarItemVariant.pagination} data-ouia-component-id={`${ouiaId}-pagination`}>
             {pagination}