@patternfly/react-data-view 6.1.0-prerelease.1 → 6.1.0

package/src/DataViewFilters/DataViewFilters.tsx

@@ -0,0 +1,144 @@
+import React, { useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
+import {
+  Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper, ToolbarGroup, ToolbarToggleGroup, ToolbarToggleGroupProps,
+} from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
+
+export interface DataViewFilterOption {
+  /** Filter option label */
+  label: ReactNode;
+  /** Filter option value */
+  value: string;
+}
+
+// helper interface to generate attribute menu
+interface DataViewFilterIdentifiers {
+  filterId: string;
+  title: string;
+}
+
+/** extends ToolbarToggleGroupProps */
+export interface DataViewFiltersProps<T extends object> extends Omit<ToolbarToggleGroupProps, 'toggleIcon' | 'breakpoint' | 'onChange'> {
+  /** Content rendered inside the data view */
+  children: React.ReactNode;
+  /** Optional onChange callback shared across filters */
+  onChange?: (key: string, newValues: Partial<T>) => void;
+  /** Optional values shared across filters */
+  values?: T;
+  /** Icon for the toolbar toggle group */
+  toggleIcon?: ToolbarToggleGroupProps['toggleIcon'];
+  /** Breakpoint for the toolbar toggle group */
+  breakpoint?: ToolbarToggleGroupProps['breakpoint'];
+  /** Custom OUIA ID */
+  ouiaId?: string;
+};
+
+
+export const DataViewFilters = <T extends object>({
+  children,
+  ouiaId = 'DataViewFilters',
+  toggleIcon = <FilterIcon />,
+  breakpoint = 'xl',
+  onChange,
+  values,
+  ...props
+}: DataViewFiltersProps<T>) => {
+  const [ activeAttributeMenu, setActiveAttributeMenu ] = useState<string>('');
+  const [ isAttributeMenuOpen, setIsAttributeMenuOpen ] = useState(false);
+  const attributeToggleRef = useRef<HTMLButtonElement>(null);
+  const attributeMenuRef = useRef<HTMLDivElement>(null);
+  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 ]);
+
+  const filterItems: DataViewFilterIdentifiers[] = useMemo(() => React.Children.toArray(children)
+    .map(child =>
+      React.isValidElement(child) ? { filterId: String(child.props.filterId), title: String(child.props.title) } : undefined
+    ).filter((item): item is DataViewFilterIdentifiers => !!item), [ childrenHash ]);  // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
+  }, [ filterItems ]);
+
+  const handleClickOutside = (event: MouseEvent) => 
+    isAttributeMenuOpen &&
+    !attributeMenuRef.current?.contains(event.target as Node) &&
+    !attributeToggleRef.current?.contains(event.target as Node)
+    && setIsAttributeMenuOpen(false);
+
+  useEffect(() => {
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [ isAttributeMenuOpen ]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const attributeToggle = (
+    <MenuToggle
+      ref={attributeToggleRef}
+      onClick={() => setIsAttributeMenuOpen(!isAttributeMenuOpen)}
+      isExpanded={isAttributeMenuOpen}
+      icon={toggleIcon}
+    >
+      {activeAttributeMenu}
+    </MenuToggle>
+  );
+
+  const attributeMenu = (
+    <Menu
+      ref={attributeMenuRef}
+      onSelect={(_ev, itemId) => {
+        const selectedItem = filterItems.find(item => item.filterId === itemId);
+        selectedItem && setActiveAttributeMenu(selectedItem.title);
+        setIsAttributeMenuOpen(false);
+      }}
+    >
+      <MenuContent>
+        <MenuList>
+          {filterItems.map(item => (
+            <MenuItem key={item.filterId} itemId={item.filterId}>
+              {item.title}
+            </MenuItem>
+          ))}
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <ToolbarToggleGroup data-ouia-component-id={ouiaId} toggleIcon={toggleIcon} breakpoint={breakpoint} {...props}>
+      <ToolbarGroup variant="filter-group">
+        <div ref={attributeContainerRef}>
+          <Popper
+            trigger={attributeToggle}
+            triggerRef={attributeToggleRef}
+            popper={attributeMenu}
+            popperRef={attributeMenuRef}
+            appendTo={attributeContainerRef.current || undefined}
+            isVisible={isAttributeMenuOpen}
+          />
+        </div>
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.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
+            })
+            : child
+        )}
+      </ToolbarGroup>
+    </ToolbarToggleGroup>
+  );
+};
+
+export default DataViewFilters;

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

@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataViewFilters component should render correctly 1`] = `
+<div>
+  <div
+    class="pf-v6-c-toolbar"
+    data-ouia-component-id="DataViewToolbar"
+    data-ouia-component-type="PF6/Toolbar"
+    data-ouia-safe="true"
+    id="pf-random-id-0"
+  >
+    <div
+      class="pf-v6-c-toolbar__content"
+    >
+      <div
+        class="pf-v6-c-toolbar__content-section"
+      >
+        <div
+          class="pf-v6-c-toolbar__item"
+        >
+          <div
+            class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
+            data-ouia-component-id="DataViewFilters"
+          >
+            <div
+              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"
+                data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                data-ouia-component-type="PF6/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v6-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+            <div
+              class="pf-v6-c-toolbar__group pf-m-filter-group"
+            >
+              <div>
+                <button
+                  aria-expanded="false"
+                  class="pf-v6-c-menu-toggle"
+                  data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+                  data-ouia-component-type="PF6/MenuToggle"
+                  data-ouia-safe="true"
+                  type="button"
+                >
+                  <span
+                    class="pf-v6-c-menu-toggle__icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v6-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 512 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="pf-v6-c-menu-toggle__text"
+                  >
+                    One
+                  </span>
+                  <span
+                    class="pf-v6-c-menu-toggle__controls"
+                  >
+                    <span
+                      class="pf-v6-c-menu-toggle__toggle-icon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 320 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="pf-v6-c-toolbar__item"
+                data-ouia-component-id="DataViewTextFilter"
+              >
+                <div
+                  class="pf-v6-c-text-input-group"
+                  data-ouia-component-id="DataViewTextFilter-input"
+                >
+                  <div
+                    class="pf-v6-c-text-input-group__main pf-m-icon"
+                  >
+                    <span
+                      class="pf-v6-c-text-input-group__text"
+                    >
+                      <span
+                        class="pf-v6-c-text-input-group__icon"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="pf-v6-svg"
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          viewBox="0 0 512 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                          />
+                        </svg>
+                      </span>
+                      <input
+                        aria-label="One filter"
+                        class="pf-v6-c-text-input-group__text-input"
+                        id="one"
+                        placeholder="Filter by One"
+                        type="text"
+                        value=""
+                      />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-v6-c-toolbar__content pf-m-hidden"
+      hidden=""
+    >
+      <div
+        class="pf-v6-c-toolbar__group"
+      />
+      <div
+        class="pf-v6-c-toolbar__group pf-m-action-group-inline"
+      >
+        <div
+          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"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Clear filters
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/DataViewFilters/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './DataViewFilters';
+export * from './DataViewFilters';

package/src/DataViewTable/DataViewTable.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DataViewTable, DataViewTrTree } from './DataViewTable';
+
+interface Repository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string;
+  lastCommit: string;
+  children?: Repository[];
+}
+
+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(repo => ({ row: Object.values(repo) }));
+
+const repositoriesTree: Repository[] = [
+  { 
+    name: 'Repository one',
+    branches: 'Branch one',
+    prs: 'Pull request one',
+    workspaces: 'Workspace one',
+    lastCommit: 'Timestamp one',
+    children: [
+      { 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',
+    children: [ { 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 buildRows = (repositories: Repository[]): DataViewTrTree[] => repositories.map((repo) => ({
+  row: [ repo.name, repo.branches, repo.prs, repo.workspaces, repo.lastCommit ],
+  id: repo.name, // unique ID for each row
+  ...(repo.children
+    ? { 
+      children: buildRows(repo.children) // build rows for children
+    }
+    : {})
+}));
+
+const treeRows = buildRows(repositoriesTree);
+
+const columns = [ 'Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit' ];
+
+const ouiaId = 'TableExample';
+
+describe('DataViewTable component', () => {
+  test('should render a basic table correctly', () => {
+    const { container } = render(
+      <DataViewTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={rows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should render a tree table correctly', () => {
+    const { container } = render(
+      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={treeRows} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/DataViewTable/DataViewTable.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode } from 'react';
+import {
+  TdProps,
+  ThProps,
+  TrProps
+} from '@patternfly/react-table';
+import { DataViewTableTree, DataViewTableTreeProps } from '../DataViewTableTree';
+import { DataViewTableBasic, DataViewTableBasicProps } from '../DataViewTableBasic';
+
+// 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;
+
+// Basic table typings
+export interface DataViewTrObject {
+  /** Array of rows */
+  row: DataViewTd[],
+  /** Unique identifier of a row */
+  id?: string,
+  /** Props passed to Tr */
+  props?: TrProps
+}
+
+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;
+
+// Tree table typings
+/** extends DataViewTrObject */
+export interface DataViewTrTree extends DataViewTrObject { id: string, children?: DataViewTrTree[] }
+
+export type DataViewTableProps =
+  | ({
+      isTreeTable: true;
+    } & DataViewTableTreeProps)
+  | ({
+      isTreeTable?: false;
+    } & DataViewTableBasicProps);
+
+export const DataViewTable: React.FC<DataViewTableProps> = (props) => (
+  props.isTreeTable ? <DataViewTableTree {...props} /> : <DataViewTableBasic {...props} />
+);
+
+export default DataViewTable;