@patternfly/react-data-view 6.3.0 → 6.4.0-prerelease.10

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

@@ -0,0 +1,248 @@
+import React, { useMemo } from 'react';
+import { Pagination } from '@patternfly/react-core';
+import { BrowserRouter, useSearchParams } from 'react-router-dom';
+import { TreeViewDataItem } from '@patternfly/react-core';
+import { useDataViewFilters, useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
+import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
+import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
+import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
+import { DataViewTreeFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTreeFilter';
+
+const perPageOptions = [
+  { title: '5', value: 5 },
+  { title: '10', value: 10 }
+];
+
+interface Repository {
+  name: string;
+  workspace: string;
+  tags: string[];
+  os: string;
+  lastSeen: string;
+}
+
+interface RepositoryFilters {
+  name: string;
+  workspace: string[];
+  os: string[];
+  tags: string[];
+}
+
+const repositories: Repository[] = [
+  { name: 'Server-001', workspace: 'Development Workspace', tags: ['web', 'frontend'], os: 'Ubuntu 22.04', lastSeen: '2 hours ago' },
+  { name: 'Server-002', workspace: 'Development Workspace', tags: ['api', 'backend'], os: 'RHEL 9', lastSeen: '5 hours ago' },
+  { name: 'Server-003', workspace: 'Development Workspace', tags: ['database'], os: 'Windows Server 2022', lastSeen: '1 day ago' },
+  { name: 'Server-004', workspace: 'Production Workspace', tags: ['web', 'frontend'], os: 'Ubuntu 22.04', lastSeen: '30 minutes ago' },
+  { name: 'Server-005', workspace: 'Production Workspace', tags: ['api', 'backend'], os: 'Debian 12', lastSeen: '1 hour ago' },
+  { name: 'Server-006', workspace: 'Production Workspace', tags: ['monitoring'], os: 'macOS Ventura', lastSeen: '3 hours ago' },
+  { name: 'Server-007', workspace: 'Production Workspace', tags: ['cache'], os: 'macOS Sonoma', lastSeen: '2 days ago' },
+  { name: 'Server-008', workspace: 'Testing Workspace', tags: ['test', 'frontend'], os: 'CentOS 8', lastSeen: '6 hours ago' },
+  { name: 'Server-009', workspace: 'Testing Workspace', tags: ['test', 'backend'], os: 'Fedora 38', lastSeen: '4 hours ago' }
+];
+
+
+const osOptions: TreeViewDataItem[] = [
+  {
+    name: 'Linux',
+    id: 'os-linux',
+    checkProps: { 'aria-label': 'linux-check', checked: false },
+    children: [
+      {
+        name: 'Ubuntu 22.04',
+        id: 'os-ubuntu',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'RHEL 9',
+        id: 'os-rhel',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'Debian 12',
+        id: 'os-debian',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'CentOS 8',
+        id: 'os-centos',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'Fedora 38',
+        id: 'os-fedora',
+        checkProps: { checked: false }
+      }
+    ],
+    defaultExpanded: true
+  },
+  {
+    name: 'Windows',
+    id: 'os-windows',
+    checkProps: { 'aria-label': 'windows-check', checked: false },
+    children: [
+      {
+        name: 'Windows Server 2022',
+        id: 'os-windows-2022',
+        checkProps: { checked: false }
+      }
+    ]
+  },
+  {
+    name: 'macOS',
+    id: 'os-macos',
+    checkProps: { 'aria-label': 'macos-check', checked: false },
+    children: [
+      {
+        name: 'macOS Ventura',
+        id: 'os-macos-ventura',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'macOS Sonoma',
+        id: 'os-macos-sonoma',
+        checkProps: { checked: false }
+      }
+    ]
+  }
+];
+
+const tagOptions: TreeViewDataItem[] = [
+  {
+    name: 'Environment',
+    id: 'tags-env',
+    checkProps: { 'aria-label': 'env-check', checked: false },
+    children: [
+      {
+        name: 'web',
+        id: 'tag-web',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'api',
+        id: 'tag-api',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'database',
+        id: 'tag-database',
+        checkProps: { checked: false }
+      }
+    ],
+    defaultExpanded: true
+  },
+  {
+    name: 'Layer',
+    id: 'tags-layer',
+    checkProps: { 'aria-label': 'layer-check', checked: false },
+    children: [
+      {
+        name: 'frontend',
+        id: 'tag-frontend',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'backend',
+        id: 'tag-backend',
+        checkProps: { checked: false }
+      }
+    ]
+  },
+  {
+    name: 'Other',
+    id: 'tags-other',
+    checkProps: { 'aria-label': 'other-check', checked: false },
+    children: [
+      {
+        name: 'monitoring',
+        id: 'tag-monitoring',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'cache',
+        id: 'tag-cache',
+        checkProps: { checked: false }
+      },
+      {
+        name: 'test',
+        id: 'tag-test',
+        checkProps: { checked: false }
+      }
+    ]
+  }
+];
+
+const columns = ['Name', 'Workspace', 'Tags', 'OS', 'Last seen'];
+
+const ouiaId = 'TreeFilterExample';
+
+const MyTable: React.FunctionComponent = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<RepositoryFilters>({
+    initialFilters: { name: '', workspace: [], os: [], tags: [] },
+    searchParams,
+    setSearchParams,
+  });
+  const pagination = useDataViewPagination({ perPage: 5 });
+  const { page, perPage } = pagination;
+
+  const filteredData = useMemo(
+    () =>
+      repositories.filter(
+        (item) =>
+          (!filters.name || item.name?.toLocaleLowerCase().includes(filters.name?.toLocaleLowerCase())) &&
+          (!filters.workspace || filters.workspace.length === 0 || filters.workspace.includes(item.workspace)) &&
+          (!filters.os || filters.os.length === 0 || filters.os.includes(item.os)) &&
+          (!filters.tags || filters.tags.length === 0 || filters.tags.some(tag => item.tags.includes(tag)))
+      ),
+    [filters]
+  );
+
+  const pageRows = useMemo(
+    () =>
+      filteredData
+        .slice((page - 1) * perPage, (page - 1) * perPage + perPage)
+        .map((item) => [item.name, item.workspace, item.tags.join(', '), item.os, item.lastSeen]),
+    [page, perPage, filteredData]
+  );
+
+  return (
+    <DataView>
+      <DataViewToolbar
+        ouiaId="TreeFilterExampleHeader"
+        clearAllFilters={clearAllFilters}
+        pagination={<Pagination perPageOptions={perPageOptions} itemCount={filteredData.length} {...pagination} />}
+        filters={
+          <DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
+            <DataViewTreeFilter
+              filterId="os"
+              title="Operating System"
+              items={osOptions}
+              defaultExpanded={false}
+            />
+            <DataViewTreeFilter
+              filterId="tags"
+              title="Tags"
+              items={tagOptions}
+              defaultExpanded={false}
+              defaultSelected={['tag-web', 'tag-api']}
+            />
+          </DataViewFilters>
+        }
+      />
+      <DataViewTable aria-label="Repositories table" ouiaId={ouiaId} columns={columns} rows={pageRows} />
+      <DataViewToolbar
+        ouiaId="TreeFilterExampleFooter"
+        pagination={
+          <Pagination isCompact perPageOptions={perPageOptions} itemCount={filteredData.length} {...pagination} />
+        }
+      />
+    </DataView>
+  );
+};
+
+export const TreeFilterExample: React.FunctionComponent = () => (
+  <BrowserRouter>
+    <MyTable />
+  </BrowserRouter>
+);

package/patternfly-docs/patternfly-docs.config.js

@@ -2,5 +2,8 @@
 module.exports = {
   sideNavItems: [ { section: 'extensions' } ],
   topNavItems: [],
-  port: 8006
+  port: 8006,
+  hasThemeSwitcher: true,
+  hasHighContrastSwitcher: true,
+  hasRTLSwitcher: true,
 };

package/release.config.js

@@ -18,5 +18,5 @@ module.exports = {
     '@semantic-release/npm'
   ],
   tagFormat: 'prerelease-v${version}',
-  dryRun: true
+  dryRun: false
 };

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

@@ -135,7 +135,6 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
                       class="pf-v6-c-label__actions"
                     >
                       <button
-                        aria-disabled="false"
                         aria-label="Close Workspace one"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
                         data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -176,7 +175,6 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
           class="pf-v6-c-toolbar__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-link pf-m-inline"
             data-ouia-component-id="DataViewToolbar-clear-all-filters"
             data-ouia-component-type="PF6/Button"

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

@@ -26,7 +26,6 @@ exports[`DataViewFilters component should render correctly 1`] = `
               class="pf-v6-c-toolbar__toggle"
             >
               <button
-                aria-disabled="false"
                 aria-haspopup="false"
                 aria-label="Show Filters"
                 class="pf-v6-c-button pf-m-plain"
@@ -173,7 +172,6 @@ exports[`DataViewFilters component should render correctly 1`] = `
           class="pf-v6-c-toolbar__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-link pf-m-inline"
             data-ouia-component-id="DataViewToolbar-clear-all-filters"
             data-ouia-component-type="PF6/Button"

package/src/DataViewTable/DataViewTable.tsx

@@ -1,46 +1,57 @@
 import { FC, ReactNode } from 'react';
-import {
-  TdProps,
-  ThProps,
-  TrProps
-} from '@patternfly/react-table';
+import { TdProps, ThProps, TrProps, InnerScrollContainer } from '@patternfly/react-table';
 import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
-import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
+import { DataViewTableBasic, DataViewTableBasicProps, ExpandableContent } from '../DataViewTableBasic';
+import { DataViewThResizableProps } from '../DataViewTh/DataViewTh';
+
+export type { ExpandableContent };
 
 // Table head typings
-export type DataViewTh = ReactNode | {
-  /** Table head cell node */
-  cell: ReactNode;
-  /** Props passed to Th */
-  props?: ThProps
-};
-export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } => value != null && typeof value === 'object' && 'cell' in value;
+export type DataViewTh =
+  | ReactNode
+  | {
+      /** Table head cell node */
+      cell: ReactNode;
+      /** Additional props for a resizable column */
+      resizableProps?: DataViewThResizableProps;
+      /** Props passed to Th */
+      props?: ThProps;
+    };
+export const isDataViewThObject = (value: DataViewTh): value is { cell: ReactNode; props?: ThProps } =>
+  value != null && typeof value === 'object' && 'cell' in value;
 
 // Basic table typings
 export interface DataViewTrObject {
   /** Array of rows */
-  row: DataViewTd[],
+  row: DataViewTd[];
   /** Unique identifier of a row */
-  id?: string,
+  id?: string;
   /** Props passed to Tr */
-  props?: TrProps
+  props?: TrProps;
 }
 
-export type DataViewTd = ReactNode | {
-  /** Table body cell node */
-  cell: ReactNode;
-  /** Props passed to Td */
-  props?: TdProps
-};
+export type DataViewTd =
+  | ReactNode
+  | {
+      /** Table body cell node */
+      cell: ReactNode;
+      /** Props passed to Td */
+      props?: TdProps;
+    };
 
 export type DataViewTr = DataViewTd[] | DataViewTrObject;
 
-export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } => value != null && typeof value === 'object' && 'cell' in value;
-export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[], id?: string } => value != null && typeof value === 'object' && 'row' in value;
+export const isDataViewTdObject = (value: DataViewTd): value is { cell: ReactNode; props?: TdProps } =>
+  value != null && typeof value === 'object' && 'cell' in value;
+export const isDataViewTrObject = (value: DataViewTr): value is { row: DataViewTd[]; id?: string } =>
+  value != null && typeof value === 'object' && 'row' in value;
 
 // Tree table typings
 /** extends DataViewTrObject */
-export interface DataViewTrTree extends DataViewTrObject { id: string, children?: DataViewTrTree[] }
+export interface DataViewTrTree extends DataViewTrObject {
+  id: string;
+  children?: DataViewTrTree[];
+}
 
 export type DataViewTableProps =
   | ({
@@ -48,10 +59,22 @@ export type DataViewTableProps =
     } & DataViewTableTreeProps)
   | ({
       isTreeTable?: false;
+      isResizable?: boolean;
     } & DataViewTableBasicProps);
 
-export const DataViewTable: FC<DataViewTableProps> = (props) => (
-  props.isTreeTable ? <DataViewTableTree {...props} /> : <DataViewTableBasic {...props} />
-);
+export const DataViewTable: FC<DataViewTableProps> = (props) => {
+  if (props.isTreeTable) {
+    return <DataViewTableTree {...props} />;
+  } else {
+    const { isResizable, ...rest } = props;
+    return isResizable ? (
+      <InnerScrollContainer>
+        <DataViewTableBasic hasResizableColumns {...rest} />
+      </InnerScrollContainer>
+    ) : (
+      <DataViewTableBasic {...rest} />
+    );
+  }
+};
 
 export default DataViewTable;

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

@@ -4,7 +4,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
 <div>
   <table
     aria-label="Repositories table"
-    class="pf-v6-c-table pf-m-grid-md"
+    class="pf-v6-c-table pf-m-grid-md pf-m-animate-expand"
     data-ouia-component-id="TableExample"
     data-ouia-component-type="PF6/Table"
     data-ouia-safe="true"
@@ -21,7 +21,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
         data-ouia-safe="true"
       >
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-0"
           scope="col"
           tabindex="-1"
@@ -29,7 +29,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Repositories
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-1"
           scope="col"
           tabindex="-1"
@@ -37,7 +37,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Branches
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-2"
           scope="col"
           tabindex="-1"
@@ -45,7 +45,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Pull requests
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-3"
           scope="col"
           tabindex="-1"
@@ -53,7 +53,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
           Workspaces
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-4"
           scope="col"
           tabindex="-1"
@@ -67,7 +67,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
       role="rowgroup"
     >
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-0"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -109,7 +109,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-1"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -151,7 +151,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-2"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -193,7 +193,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-3"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -235,7 +235,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-4"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -277,7 +277,7 @@ exports[`DataViewTable component should render a basic table correctly 1`] = `
         </td>
       </tr>
       <tr
-        class="pf-v6-c-table__tr"
+        class="pf-v6-c-table__tr pf-v6-c-table__control-row"
         data-ouia-component-id="TableExample-tr-5"
         data-ouia-component-type="PF6/TableRow"
         data-ouia-safe="true"
@@ -344,7 +344,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         data-ouia-safe="true"
       >
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-0"
           scope="col"
           tabindex="-1"
@@ -352,7 +352,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
           Repositories
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-1"
           scope="col"
           tabindex="-1"
@@ -360,7 +360,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
           Branches
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-2"
           scope="col"
           tabindex="-1"
@@ -368,7 +368,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
           Pull requests
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-3"
           scope="col"
           tabindex="-1"
@@ -376,7 +376,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
           Workspaces
         </th>
         <th
-          class="pf-v6-c-table__th"
+          class="pf-v6-c-table__th pf-m-truncate"
           data-ouia-component-id="TableExample-th-4"
           scope="col"
           tabindex="-1"
@@ -411,7 +411,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Expand row 0"
                 class="pf-v6-c-button pf-m-plain"
@@ -457,7 +456,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -553,7 +551,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -649,7 +646,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -735,7 +731,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Expand row 3"
                 class="pf-v6-c-button pf-m-plain"
@@ -781,7 +776,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -877,7 +871,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"
@@ -972,7 +965,6 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
               class="pf-v6-c-table__tree-view-details-toggle"
             >
               <button
-                aria-disabled="false"
                 aria-expanded="false"
                 aria-label="Show row details"
                 class="pf-v6-c-button pf-m-plain"