@patternfly/react-table 6.0.0-alpha.1 → 6.0.0-alpha.100

package/src/components/Table/utils/decorators/sortable.tsx

@@ -15,12 +15,15 @@ export const sortableFavorites = (sort: any) => () =>
         sortBy: sort.sortBy,
         onSort: sort?.onSort
       }
-    }
+    },
+    tooltip: sort.tooltip,
+    tooltipProps: sort.tooltipProps,
+    tooltipHasDefaultBehavior: true
   });
 
 export const sortable: ITransform = (
   label: IFormatterValueType,
-  { columnIndex, column, property, className, ariaLabel }: IExtra
+  { columnIndex, column, property, className, ariaLabel, tooltip, tooltipProps, tooltipHasDefaultBehavior }: IExtra
 ) => {
   const {
     extraParams: { sortBy, onSort }
@@ -56,6 +59,9 @@ export const sortable: ITransform = (
         sortDirection={isSortedBy ? sortBy.direction : ''}
         onSort={sortClicked}
         aria-label={ariaLabel}
+        tooltip={tooltip}
+        tooltipProps={tooltipProps}
+        tooltipHasDefaultBehavior={tooltipHasDefaultBehavior}
       >
         {label as React.ReactNode}
       </SortColumn>

package/src/components/Table/utils/decorators/treeRow.tsx

@@ -31,7 +31,7 @@ export const treeRow =
             {icon}
           </span>
         )}
-        <span className="pf-v5-c-table__text" key="table-text">
+        <span className={styles.tableText} key="table-text">
           {content as React.ReactNode}
         </span>
       </div>
@@ -41,7 +41,7 @@ export const treeRow =
     };
     return {
       component: 'th',
-      className: 'pf-v5-c-table__tree-view-title-cell',
+      className: stylesTreeView.tableTreeViewTitleCell,
       children:
         level !== undefined ? (
           <div className={css(stylesTreeView.tableTreeViewMain)}>
@@ -83,7 +83,7 @@ export const treeRow =
                     onToggleRowDetails && onToggleRowDetails(event, rowIndex, content as React.ReactNode, rowData)
                   }
                 >
-                  <span className="pf-v5-c-table__details-toggle-icon">
+                  <span className={`${styles.table}__details-toggle-icon`}>
                     <EllipsisHIcon aria-hidden />
                   </span>
                 </Button>

package/src/components/Table/utils/transformers.test.tsx

@@ -18,7 +18,6 @@ import {
   textCenter,
   cellActions
 } from './';
-import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
 import {
   IAction,
   IActions,
@@ -29,6 +28,9 @@ import {
   IRowData,
   ISeparator
 } from '../TableTypes';
+import { css } from '@patternfly/react-styles';
+import tableStyles from '@patternfly/react-styles/css/components/Table/table';
+import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 
 const testCellActions = async ({
   actions,
@@ -55,8 +57,8 @@ const testCellActions = async ({
     rowData,
     column: {
       extraParams: {
-        dropdownPosition: DropdownPosition.right,
-        dropdownDirection: DropdownDirection.down
+        dropdownPosition: 'right',
+        dropdownDirection: 'down'
       }
     }
   });
@@ -65,7 +67,7 @@ const testCellActions = async ({
     actions = actionResolver(rowData, extraData);
   }
 
-  expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__action' });
+  expect(returnedData).toMatchObject({ className: tableStyles.tableAction });
 
   if (!actions || actions.length === 0) {
     expect(returnedData.children).toBeUndefined();
@@ -73,7 +75,8 @@ const testCellActions = async ({
     const { container } = render(returnedData.children as React.ReactElement<any>);
     await user.click(screen.getAllByRole('button')[0]);
     await waitFor(() =>
-      expect(container.querySelectorAll('.pf-v5-c-dropdown__menu li button')).toHaveLength(expectDisabled ? 0 : 1)
+      // eslint-disable-next-line testing-library/no-container
+      expect(container.querySelectorAll(`.${menuStyles.menu} li button`)).toHaveLength(expectDisabled ? 0 : 1)
     );
   }
 };
@@ -86,7 +89,7 @@ describe('Transformer functions', () => {
         extraParams: { onSelect }
       };
       const returnedData = selectable('', { column, rowData: {} } as IExtra);
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__check' });
+      expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
 
       const user = userEvent.setup();
 
@@ -103,7 +106,7 @@ describe('Transformer functions', () => {
         extraParams: { onSelect }
       };
       const returnedData = selectable('', { column, rowIndex: 0, rowData: { selected: true } } as IExtra);
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__check' });
+      expect(returnedData).toMatchObject({ className: tableStyles.tableCheck });
       const user = userEvent.setup();
 
       render(returnedData.children as React.ReactElement<any>);
@@ -128,7 +131,7 @@ describe('Transformer functions', () => {
       const onSort = jest.fn();
       const column = { extraParams: { sortBy: {}, onSort } };
       const returnedData = sortable('', { column, columnIndex: 0 });
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__sort' });
+      expect(returnedData).toMatchObject({ className: tableStyles.tableSort });
 
       const user = userEvent.setup();
 
@@ -154,7 +157,7 @@ describe('Transformer functions', () => {
       const onSort = jest.fn();
       const column = { extraParams: { sortBy: { index: 0, direction: 'desc' }, onSort } };
       const returnedData = sortable('', { column, columnIndex: 0 } as IExtra);
-      expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__sort pf-m-selected' });
+      expect(returnedData).toMatchObject({ className: css(tableStyles.tableSort, tableStyles.modifiers.selected) });
 
       const user = userEvent.setup();
 
@@ -226,7 +229,7 @@ describe('Transformer functions', () => {
       extraParams: { onCollapse }
     };
     const returnedData = collapsible('', { rowIndex: 0, rowData, column });
-    expect(returnedData).toMatchObject({ className: 'pf-v5-c-table__toggle' });
+    expect(returnedData).toMatchObject({ className: tableStyles.tableToggle });
 
     const user = userEvent.setup();
 
@@ -332,7 +335,7 @@ describe('Transformer functions', () => {
       extraParams: { onRowEdit }
     };
     const returned = editable('test', { rowIndex: 0, column });
-    expect(returned).toMatchObject({ className: 'pf-v5-c-table__inline-edit-action' });
+    expect(returned).toMatchObject({ className: tableStyles.tableInlineEditAction });
   });
 
   describe('visibility classNames', () => {

package/src/demos/DashboardHeader.tsx

@@ -0,0 +1,201 @@
+import React, { useState } from 'react';
+import {
+  Avatar,
+  Brand,
+  Button,
+  ButtonVariant,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  MenuToggle,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  PageToggleButton
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import imgAvatar from '@patternfly/react-table/src/demos/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-table/src/demos/assets/pf-logo.svg';
+
+interface DashboardHeaderProps {
+  /** Render custom notification badge */
+  notificationBadge?: React.ReactNode;
+}
+
+export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBadge }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem>
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem>
+        <HelpIcon /> Help
+      </DropdownItem>
+    </>
+  );
+
+  const userDropdownItems = (
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  );
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(false);
+  };
+
+  const onFullKebabToggle = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const onFullKebabSelect = () => {
+    setIsFullKebabDropdownOpen(false);
+  };
+
+  return (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>
+        <Toolbar id="toolbar" isFullHeight isStatic>
+          <ToolbarContent>
+            <ToolbarGroup
+              variant="action-group-plain"
+              align={{ default: 'alignEnd' }}
+              gap={{ default: 'gapNone', md: 'gapMd' }}
+            >
+              {notificationBadge ?? (
+                <ToolbarItem>
+                  <Button
+                    aria-label="Notifications"
+                    variant={ButtonVariant.plain}
+                    icon={<BellIcon />}
+                    onClick={() => {}}
+                  />
+                </ToolbarItem>
+              )}
+              <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
+                <ToolbarItem>
+                  <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+                </ToolbarItem>
+              </ToolbarGroup>
+              <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+                <Dropdown
+                  isOpen={isKebabDropdownOpen}
+                  onSelect={onKebabDropdownSelect}
+                  onOpenChange={setIsKebabDropdownOpen}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: React.RefObject<any>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isKebabDropdownOpen}
+                      onClick={onKebabDropdownToggle}
+                      variant="plain"
+                      aria-label="Settings and help"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownList>{kebabDropdownItems}</DropdownList>
+                </Dropdown>
+              </ToolbarItem>
+              <ToolbarItem visibility={{ md: 'hidden' }}>
+                <Dropdown
+                  isOpen={isFullKebabDropdownOpen}
+                  onSelect={onFullKebabSelect}
+                  onOpenChange={setIsFullKebabDropdownOpen}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: React.RefObject<any>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isFullKebabDropdownOpen}
+                      onClick={onFullKebabToggle}
+                      variant="plain"
+                      aria-label="Toolbar menu"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                >
+                  <DropdownGroup key="group 2" aria-label="User actions">
+                    <DropdownList>{userDropdownItems}</DropdownList>
+                  </DropdownGroup>
+                  <Divider />
+                  <DropdownList>{kebabDropdownItems}</DropdownList>
+                </Dropdown>
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                onSelect={onDropdownSelect}
+                onOpenChange={setIsDropdownOpen}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef: React.RefObject<any>) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isDropdownOpen}
+                    onClick={onDropdownToggle}
+                    icon={<Avatar src={imgAvatar} alt="" />}
+                    isFullHeight
+                  >
+                    Ned Username
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+};
+DashboardHeader.displayName = 'DashboardHeader';

package/src/demos/DashboardWrapper.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Content,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent
+} from '@patternfly/react-core';
+import { DashboardHeader } from './DashboardHeader';
+
+interface DashboardWrapperProps {
+  /** Programmatically manage if the sidebar nav is shown */
+  sidebarNavOpen?: boolean;
+  /** Flag to render sample breadcrumb if custom breadcrumb not passed */
+  hasDefaultBreadcrumb?: boolean;
+  /** Flag to render sample page title if custom title not passed */
+  hasPageTemplateTitle?: boolean;
+  /** Content rendered inside the main section of the page layout (e.g. <PageSection />) */
+  children?: React.ReactNode;
+  /** Additional classes added to the page layout */
+  className?: string;
+  /** Masthead component (e.g. <Masthead />) */
+  masthead?: React.ReactNode;
+  /** Sidebar component for a side nav (e.g. <PageSidebar />) */
+  sidebar?: React.ReactNode;
+  /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
+  notificationDrawer?: React.ReactNode;
+  /** Flag indicating Notification drawer in expanded */
+  isNotificationDrawerExpanded?: boolean;
+  /** Flag indicating if breadcrumb width should be limited */
+  isBreadcrumbWidthLimited?: boolean;
+  /** Callback when notification drawer panel is finished expanding. */
+  onNotificationDrawerExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
+  /** Skip to content component for the page */
+  skipToContent?: React.ReactElement;
+  /** Sets the value for role on the <main> element */
+  role?: string;
+  /** an id to use for the [role="main"] element */
+  mainContainerId?: string;
+  /** tabIndex to use for the [role="main"] element, null to unset it */
+  mainTabIndex?: number | null;
+  /**
+   * If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
+   * the sidebar component or add a callback onSidebarToggle function into the Masthead component
+   */
+  isManagedSidebar?: boolean;
+  /** Flag indicating if tertiary nav width should be limited */
+  isTertiaryNavWidthLimited?: boolean;
+  /**
+   * If true, the managed sidebar is initially open for desktop view
+   */
+  defaultManagedSidebarIsOpen?: boolean;
+  /**
+   * Can add callback to be notified when resize occurs, for example to set the sidebar isSidebarOpen prop to false for a width < 768px
+   * Returns object { mobileView: boolean, windowSize: number }
+   */
+  onPageResize?: ((event: MouseEvent | TouchEvent | React.KeyboardEvent, object: any) => void) | null;
+  /**
+   * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
+   * You can override the default getBreakpoint function to return breakpoints at different sizes than the default
+   * You can view the default getBreakpoint function here:
+   * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
+   */
+  getBreakpoint?: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
+   * You can override the default getVerticalBreakpoint function to return breakpoints at different sizes than the default
+   * You can view the default getVerticalBreakpoint function here:
+   * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
+   */
+  getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Breadcrumb component for the page */
+  breadcrumb?: React.ReactNode;
+  /** Tertiary nav component for the page */
+  tertiaryNav?: React.ReactNode;
+  /** Accessible label, can be used to name main section */
+  mainAriaLabel?: string;
+  /** Flag indicating if the tertiaryNav should be in a group */
+  isTertiaryNavGrouped?: boolean;
+  /** Flag indicating if the breadcrumb should be in a group */
+  isBreadcrumbGrouped?: boolean;
+  /** Additional content of the group */
+  additionalGroupedContent?: React.ReactNode;
+  /** HTML component used as main component of the page. Defaults to 'main', only pass in 'div' if another 'main' element already exists. */
+  mainComponent?: 'main' | 'div';
+  /** Additional props of the group */
+  groupProps?: any;
+  /** Additional props of the breadcrumb */
+  breadcrumbProps?: any;
+}
+
+export const DashboardBreadcrumb = (
+  <Breadcrumb>
+    <BreadcrumbItem>Section home</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#" isActive>
+      Section landing
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+const PageTemplateTitle = (
+  <PageSection>
+    <Content>
+      <h1>Main title</h1>
+      <p>This is a full page demo.</p>
+    </Content>
+  </PageSection>
+);
+
+export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
+  children,
+  mainContainerId,
+  breadcrumb,
+  masthead,
+  sidebar,
+  sidebarNavOpen,
+  onPageResize,
+  hasDefaultBreadcrumb,
+  notificationDrawer,
+  isNotificationDrawerExpanded,
+  hasPageTemplateTitle,
+  ...pageProps
+}: DashboardWrapperProps) => {
+  const [activeItem, setActiveItem] = useState(1);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, result: any) => {
+    setActiveItem(result.itemId);
+  };
+
+  let renderedBreadcrumb;
+  if (!hasDefaultBreadcrumb) {
+    renderedBreadcrumb = breadcrumb ?? DashboardBreadcrumb;
+  }
+
+  const PageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
+          System panel
+        </NavItem>
+        <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
+          Policy
+        </NavItem>
+        <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
+          Authentication
+        </NavItem>
+        <NavItem itemId={3} isActive={activeItem === 3} to="#network">
+          Network services
+        </NavItem>
+        <NavItem itemId={4} isActive={activeItem === 4} to="#server">
+          Server
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const _sidebar = (
+    <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
+      <PageSidebarBody>{PageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const PageSkipToContent = (
+    <SkipToContent href={`#${mainContainerId ?? 'main-content-page-layout-default-nav'}`}>
+      Skip to content
+    </SkipToContent>
+  );
+
+  return (
+    <Page
+      masthead={masthead ?? <DashboardHeader />}
+      sidebar={sidebar ?? _sidebar}
+      isManagedSidebar
+      skipToContent={PageSkipToContent}
+      breadcrumb={renderedBreadcrumb}
+      mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
+      notificationDrawer={notificationDrawer}
+      isNotificationDrawerExpanded={isNotificationDrawerExpanded}
+      {...(typeof onPageResize === 'function' && {
+        onPageResize: (event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>, resizeObject: any) =>
+          onPageResize(event, resizeObject)
+      })}
+      {...pageProps}
+    >
+      {hasPageTemplateTitle && PageTemplateTitle}
+      {children}
+    </Page>
+  );
+};
+DashboardWrapper.displayName = 'DashboardWrapper';