Move new changes to v6

cypress/e2e/DataView.spec.cy.ts

@@ -1,17 +1,19 @@
 describe('Test the Data view docs page', () => {
-
+  
   it('displays a layout with a table and paginates', () => {
     const ouiaId = 'LayoutExample';
+    cy.viewport(1400, 2800)
 
-    cy.visit('http://localhost:8006/extensions/data-view/layout');
+    cy.visit('http://localhost:8006/extensions/data-view/overview');
 
+    cy.get(`[data-ouia-component-id="${ouiaId}-th-0"]`).scrollIntoView().contains('Repository');
     cy.get(`[data-ouia-component-id="${ouiaId}Header-pagination"]`).should('exist');
     cy.get(`[data-ouia-component-id="${ouiaId}Header-bulk-select"]`).should('exist');
 
     cy.get(`[data-ouia-component-id="${ouiaId}Footer-pagination"]`).should('exist');
     cy.get(`[data-ouia-component-id="${ouiaId}Footer-bulk-select"]`).should('not.exist');
 
-    cy.get(`[data-ouia-component-id="${ouiaId}-th-0"]`).contains('Repositories');
+    cy.get(`[data-ouia-component-id="${ouiaId}-th-0"]`).contains('Repository');
     cy.get(`[data-ouia-component-id="${ouiaId}-th-4"]`).contains('Last commit');
 
     cy.get(`[data-ouia-component-id="${ouiaId}-td-0-0"]`).contains('Repository one');
@@ -27,33 +29,27 @@ describe('Test the Data view docs page', () => {
     cy.get(`[data-ouia-component-id="${ouiaId}-td-0-4"]`).contains('Timestamp one');
 
     // test bulk select
-    cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('not.be.checked')});
+    cy.get(`[data-ouia-component-id="LayoutExample"] input[type="checkbox"]`).each(($checkbox) => {cy.wrap($checkbox).should('not.be.checked')});
 
     // page checkbox select
     cy.get(`[data-ouia-component-id="BulkSelect-checkbox"`).first().click();
-    cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
+    cy.get(`[data-ouia-component-id="LayoutExample"] input[type="checkbox"]`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
     cy.contains('5 selected').should('exist');
 
-    // select none
-    cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
-    cy.get(`[data-ouia-component-id="BulkSelect-select-none"`).first().click();
-    cy.contains('5 selected').should('not.exist');
-
-    // select all
-    cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
-    cy.get(`[data-ouia-component-id="BulkSelect-select-all"`).first().click();
-    cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
-    cy.contains('6 selected').should('exist');
-
     // page checkbox deselect
     cy.get(`[data-ouia-component-id="BulkSelect-checkbox"`).first().click();
-    cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('not.be.checked')});
-    cy.contains('1 selected').should('exist');
+    cy.get('[data-ouia-component-id="LayoutExample"] input[type="checkbox"]')
+      .each(($checkbox) => {
+        cy.wrap($checkbox).should('not.be.checked');
+      });
 
     // select page
     cy.get(`[data-ouia-component-id="BulkSelect-toggle"`).first().click({ force: true });
     cy.get(`[data-ouia-component-id="BulkSelect-select-page"`).first().click();
-    cy.get(`input[type="checkbox"`).each(($checkbox) => {cy.wrap($checkbox).should('be.checked')});
-    cy.contains('6 selected').should('exist');
+    cy.get('[data-ouia-component-id="LayoutExample"] input[type="checkbox"]')
+      .each(($checkbox) => {
+        cy.wrap($checkbox).should('be.checked');
+      });
+    cy.contains('5 selected').should('exist');
   })
 });

cypress/e2e/DataViewEvents.spec.cy.ts

@@ -3,7 +3,7 @@ describe('Test the Data view docs page', () => {
   it('displays a table and opens detail', () => {
     const ouiaId = 'ContextExample';
 
-    cy.visit('http://localhost:8006/extensions/data-view/events-context');
+    cy.visit('http://localhost:8006/extensions/data-view/overview');
 
     cy.get(`[data-ouia-component-id="${ouiaId}-th-0"]`).contains('Repositories');
     cy.get(`[data-ouia-component-id="${ouiaId}-th-4"]`).contains('Last commit');

cypress/e2e/Components.spec.cy.ts → cypress/e2e/TreeTable.spec.cy.ts

@@ -3,7 +3,7 @@ describe('Test the Data view docs with tree table', () => {
   it('displays a a components page with tree table', () => {
     const ouiaId = 'TreeTableExample';
 
-    cy.visit('http://localhost:8006/extensions/data-view/components');
+    cy.visit('http://localhost:8006/extensions/data-view/table');
 
     cy.get(`[data-ouia-component-id="${ouiaId}-th-0"]`).scrollIntoView().contains('Repositories');
     cy.get(`[data-ouia-component-id="${ouiaId}-th-1"]`).contains('Branches');

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

@@ -0,0 +1,63 @@
+---
+section: extensions
+subsection: Data view
+id: Overview
+title: Data view overview
+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 { 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';
+import { BulkSelect, BulkSelectValue, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
+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 { useDataViewEventsContext, DataViewEventsContext, DataViewEventsProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';
+import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
+import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
+import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
+
+**Note:** Data view lives in its own package [`@patternfly/react-data-view`](https://www.npmjs.com/package/@patternfly/react-data-view)
+
+If you notice a bug, or if you have a suggestion for improving the data view extension or its documentation, please file an issue in the [react-data-view](https://github.com/patternfly/react-data-view/issues) repository. Before doing so, please make sure there is not already a pre-existing issue.
+
+---
+
+The **data view** extension enables you to display datasets in organized layouts, with data representations and interactive toolbars for actions like selection and pagination.
+
+### Layout
+
+A data view should contain a header, the data representation, and a footer. These parts are organized in a [stack layout](/layouts/stack).
+
+The data view toolbars and sub-components that display the data (like a card view or table) are always passed as `children` to the `<DataView>` component.
+
+```js file="./AbstractLayoutExample.tsx"
+
+```
+
+### Modularity
+
+The extension's modular architecture lets you efficiently create consistent data views, either by using predefined sub-components and hooks, or by defining your own. You can choose the tools that suit your needs and easily replace any part with a custom implementation.
+
+The `<DataViewToolbar>` component extends the [PatternFly toolbar](/components/toolbar) to support the most common needs. For more details, refer to the [data view toolbar](/extensions/data-view/toolbar) examples. You can also use a custom toolbar component if needed for your use case.
+
+Data can be presented using the predefined `<DataViewTable>` component, which is an abstraction above the [PatternFly table](/components/table). For more details, refer to the [data view table](/extensions/data-view/table) examples. If you have more specific data display needs, you can pass a custom implementation as a `<DataView>` child. In the near future, we are also planning to introduce a predefined card view component.
+
+```js file="./PredefinedLayoutFullExample.tsx"
+
+```
+
+## Events context
+
+The `<DataViewEventsContext>` component is an advanced feature that enables external listening of data view events. In order to share data view context with your other UI components, both your components and your data view should be wrapped with the `<DataViewEventsProvider>`. This is demonstrated in the following example.
+
+### Row click subscription example
+This example uses the `<DataViewEventsProvider>` to display details about a selected row in a [drawer component](/components/drawer).
+
+
+```js file="./EventsExample.tsx"
+
+```