@patternfly/react-core 6.0.0-alpha.8 → 6.0.0-alpha.80

package/src/demos/examples/Card/CardWithAccordion.tsx

@@ -33,7 +33,7 @@ export const CardWithAccordion: React.FunctionComponent = () => {
       </CardHeader>
       <CardBody>
         <Accordion>
-          <AccordionItem>
+          <AccordionItem isExpanded={openCPU === 'cpu1'}>
             <AccordionToggle
               id="cpu1-toggle"
               onClick={() => {
@@ -43,11 +43,10 @@ export const CardWithAccordion: React.FunctionComponent = () => {
                   setOpenCPU('cpu1');
                 }
               }}
-              isExpanded={openCPU === 'cpu1'}
             >
               CPU 1
             </AccordionToggle>
-            <AccordionContent isHidden={openCPU !== 'cpu1'}>
+            <AccordionContent>
               <Grid hasGutter>
                 <Grid hasGutter>
                   <GridItem md={4}>
@@ -191,7 +190,7 @@ export const CardWithAccordion: React.FunctionComponent = () => {
               </Grid>
             </AccordionContent>
           </AccordionItem>
-          <AccordionItem>
+          <AccordionItem isExpanded={openCPU === 'cpu2'}>
             <AccordionToggle
               id="cpu2-toggle"
               onClick={() => {
@@ -201,11 +200,10 @@ export const CardWithAccordion: React.FunctionComponent = () => {
                   setOpenCPU('cpu2');
                 }
               }}
-              isExpanded={openCPU === 'cpu2'}
             >
               CPU 2
             </AccordionToggle>
-            <AccordionContent isHidden={openCPU !== 'cpu2'}>
+            <AccordionContent>
               <Grid hasGutter>
                 <Grid hasGutter>
                   <GridItem md={4}>
@@ -349,7 +347,7 @@ export const CardWithAccordion: React.FunctionComponent = () => {
               </Grid>
             </AccordionContent>
           </AccordionItem>
-          <AccordionItem>
+          <AccordionItem isExpanded={openCPU === 'cpu3'}>
             <AccordionToggle
               id="cpu3-toggle"
               onClick={() => {
@@ -359,11 +357,10 @@ export const CardWithAccordion: React.FunctionComponent = () => {
                   setOpenCPU('cpu3');
                 }
               }}
-              isExpanded={openCPU === 'cpu3'}
             >
               CPU 3
             </AccordionToggle>
-            <AccordionContent isHidden={openCPU !== 'cpu3'}>
+            <AccordionContent>
               <Grid hasGutter>
                 <Grid hasGutter>
                   <GridItem md={4}>

package/src/demos/examples/DashboardWrapper.js

@@ -55,7 +55,7 @@ export default class DashboardWrapper extends React.Component {
       children,
       mainContainerId,
       breadcrumb,
-      header,
+      masthead,
       sidebar,
       sidebarNavOpen,
       onPageResize = () => {},
@@ -106,7 +106,7 @@ export default class DashboardWrapper extends React.Component {
 
     return (
       <Page
-        header={header !== undefined ? header : <DashboardHeader />}
+        masthead={masthead !== undefined ? masthead : <DashboardHeader />}
         sidebar={sidebar !== undefined ? sidebar : _sidebar}
         isManagedSidebar
         skipToContent={PageSkipToContent}

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -74,9 +74,12 @@ export const DateTimePicker: React.FunctionComponent = () => {
   );
 
   const calendarButton = (
-    <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
-      <OutlinedCalendarAltIcon />
-    </Button>
+    <Button
+      variant="control"
+      aria-label="Toggle the calendar"
+      onClick={onToggleCalendar}
+      icon={<OutlinedCalendarAltIcon />}
+    />
   );
 
   return (

package/src/demos/examples/HelperText/HelperTextDynamic.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextDynamic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [inputValidation, setInputValidation] = React.useState('default');
+
+  const handleInputChange = (_event, inputValue: string) => {
+    setValue(inputValue);
+  };
+
+  React.useEffect(() => {
+    if (value === '') {
+      setInputValidation('default');
+    } else if (value === 'johndoe') {
+      setInputValidation('error');
+    } else {
+      setInputValidation('success');
+    }
+  }, [value]);
+
+  return (
+    <Form>
+      <FormGroup label="Username" isRequired fieldId="login-input-helper-text2">
+        <TextInput
+          isRequired
+          type="text"
+          id="login-input-helper-text2"
+          name="login-input-helper-text2"
+          onChange={handleInputChange}
+          aria-describedby="helper-text2"
+          aria-invalid={inputValidation === 'error'}
+          value={value}
+        />
+        <FormHelperText>
+          <HelperText id="helper-text2" aria-live="polite">
+            {inputValidation !== 'success' && (
+              <HelperTextItem variant={inputValidation as any}>
+                {inputValidation === 'default' ? 'Please enter a username' : 'Username already exists'}
+              </HelperTextItem>
+            )}
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/demos/examples/HelperText/HelperTextStatic.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStaticText: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleInputChange = (_event, inputValue: string) => {
+    setValue(inputValue);
+  };
+
+  return (
+    <Form>
+      <FormGroup label="Middle Name" fieldId="login-input-helper-text1">
+        <TextInput
+          type="text"
+          id="login-input-helper-text1"
+          name="login-input-helper-text1"
+          onChange={handleInputChange}
+          aria-describedby="helper-text1"
+          value={value}
+        />
+        <FormHelperText>
+          <HelperText id="helper-text1">
+            <HelperTextItem>Enter your middle name or your middle initial</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStaticTextDynamicVariant: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [inputValidation, setInputValidation] = React.useState({
+    ruleLength: 'indeterminate',
+    ruleCharacterTypes: 'indeterminate'
+  });
+  const { ruleLength, ruleCharacterTypes } = inputValidation;
+
+  React.useEffect(() => {
+    let lengthVariant = ruleLength;
+    let typeVariant = ruleCharacterTypes;
+
+    if (value === '') {
+      setInputValidation({
+        ruleLength: 'indeterminate',
+        ruleCharacterTypes: 'indeterminate'
+      });
+      return;
+    }
+
+    if (!/\d/g.test(value)) {
+      typeVariant = 'error';
+    } else {
+      typeVariant = 'success';
+    }
+
+    if (value.length < 5) {
+      lengthVariant = 'error';
+    } else {
+      lengthVariant = 'success';
+    }
+
+    setInputValidation({ ruleLength: lengthVariant, ruleCharacterTypes: typeVariant });
+  }, [value, ruleLength, ruleCharacterTypes]);
+
+  const handleInputChange = (_event, inputValue: string) => {
+    setValue(inputValue);
+  };
+
+  const filterValidations = () => Object.keys(inputValidation).filter((item) => inputValidation[item] !== 'success');
+
+  return (
+    <Form>
+      <FormGroup label="Username" isRequired fieldId="login-input-helper-text3">
+        <TextInput
+          isRequired
+          type="text"
+          id="login-input-helper-text3"
+          name="login-input-helper-text3"
+          onChange={handleInputChange}
+          aria-describedby={filterValidations().join(' ')}
+          aria-invalid={ruleCharacterTypes === 'error' || ruleLength === 'error'}
+          value={value}
+        />
+        <FormHelperText>
+          <HelperText component="ul">
+            <HelperTextItem component="li" id="ruleLength" variant={ruleLength as any}>
+              Must be at least 5 characters in length
+            </HelperTextItem>
+            <HelperTextItem component="li" id="ruleCharacterTypes" variant={ruleCharacterTypes as any}>
+              Must include at least 1 number
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -16,11 +16,33 @@ import {
   SidebarContent,
   SidebarPanel,
   TextContent,
-  getResizeObserver
+  getResizeObserver,
+  DrawerContext
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
+const JumpLinksWrapper = ({ offsetHeight, headings }) => {
+  const { drawerContentRef } = React.useContext(DrawerContext);
+
+  return (
+    <JumpLinks
+      isVertical={true}
+      label="Jump to section"
+      scrollableRef={drawerContentRef}
+      offset={offsetHeight}
+      expandable={{ default: 'expandable', md: 'nonExpandable' }}
+    >
+      {headings.map((heading) => (
+        <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
+          {`${heading} section`}
+          <JumpLinksList></JumpLinksList>
+        </JumpLinksItem>
+      ))}
+    </JumpLinks>
+  );
+};
+
 export const JumpLinksWithDrawer = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
 
@@ -65,25 +87,12 @@ export const JumpLinksWithDrawer = () => {
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
       <Drawer isExpanded={isExpanded}>
-        <DrawerContent panelContent={panelContent} id="jump-links-drawer-drawer-scrollable-container">
+        <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>
             <Sidebar>
               <SidebarPanel variant="sticky">
                 <PageSection>
-                  <JumpLinks
-                    isVertical={true}
-                    label="Jump to section"
-                    scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
-                    offset={offsetHeight}
-                    expandable={{ default: 'expandable', md: 'nonExpandable' }}
-                  >
-                    {headings.map((heading) => (
-                      <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
-                        {`${heading} section`}
-                        <JumpLinksList></JumpLinksList>
-                      </JumpLinksItem>
-                    ))}
-                  </JumpLinks>
+                  <JumpLinksWrapper offsetHeight={offsetHeight} headings={headings} />
                 </PageSection>
               </SidebarPanel>
               <SidebarContent>

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -0,0 +1,322 @@
+import React from 'react';
+import {
+  Avatar,
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  Gallery,
+  GalleryItem,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MenuToggle,
+  MenuToggleElement,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  SkipToContent,
+  Text,
+  TextContent,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-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 imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+
+interface NavOnSelectProps {
+  groupId: number | string;
+  itemId: number | string;
+  to: string;
+}
+
+export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
+    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+  };
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onFullKebabDropdownToggle = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const onFullKebabDropdownSelect = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (!isOpen) {
+      return;
+    }
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
+      if (event.key === 'Escape') {
+        setIsOpen(!isOpen);
+        toggleRef.current?.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, menuRef]);
+
+  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 kebabDropdownItems = (
+    <>
+      <DropdownItem key="settings">
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem key="help">
+        <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 PageHorizontalNav = () => (
+    <ToolbarItem isOverflowContainer>
+      <Nav
+        id="page-layout-horizontal-nav-horizontal-nav"
+        onSelect={onNavSelect}
+        aria-label="Global"
+        variant="horizontal"
+      >
+        <NavList>
+          <NavItem itemId={0} isActive={activeItem === 0} to="#horizontal-1">
+            Horizontal nav item 1
+          </NavItem>
+          <NavItem itemId={1} isActive={activeItem === 1} to="#horizontal-2">
+            Horizontal nav item 2
+          </NavItem>
+          <NavItem itemId={2} isActive={activeItem === 2} to="#horizontal-3">
+            Horizontal nav item 3
+          </NavItem>
+          <NavItem itemId={3} isActive={activeItem === 3} to="#horizontal-4">
+            Horizontal nav item 4
+          </NavItem>
+          <NavItem itemId={4} isActive={activeItem === 4} to="#horizontal-5">
+            Horizontal nav item 5
+          </NavItem>
+          <NavItem itemId={5} isActive={activeItem === 4} to="#horizontal-6">
+            Horizontal nav item 6
+          </NavItem>
+          <NavItem itemId={6} isActive={activeItem === 4} to="#horizontal-7">
+            Horizontal nav item 7
+          </NavItem>
+        </NavList>
+      </Nav>
+    </ToolbarItem>
+  );
+
+  const headerToolbar = (
+    <Toolbar id="toolbar" isFullHeight>
+      <ToolbarContent>
+        <PageHorizontalNav />
+        <ToolbarGroup
+          variant="icon-button-group"
+          align={{ default: 'alignRight' }}
+          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+        >
+          <ToolbarItem>
+            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+          </ToolbarItem>
+          <ToolbarGroup variant="icon-button-group" 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={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onKebabDropdownToggle}
+                  isExpanded={isKebabDropdownOpen}
+                  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={onFullKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onFullKebabDropdownToggle}
+                  isExpanded={isFullKebabDropdownOpen}
+                  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={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onDropdownToggle}
+                isFullHeight
+                isExpanded={isDropdownOpen}
+                icon={<Avatar src={imgAvatar} alt="" />}
+              >
+                Ned Username
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{userDropdownItems}</DropdownList>
+          </Dropdown>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const mainContainerId = 'main-content-page-layout-tertiary-nav';
+
+  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+
+  return (
+    <Page
+      header={masthead}
+      isManagedSidebar
+      skipToContent={pageSkipToContent}
+      breadcrumb={dashboardBreadcrumb}
+      mainContainerId={mainContainerId}
+      isTertiaryNavWidthLimited
+      isBreadcrumbWidthLimited
+      isTertiaryNavGrouped
+      isBreadcrumbGrouped
+      additionalGroupedContent={
+        <PageSection variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Main title</Text>
+            <Text component="p">This is a full page demo.</Text>
+          </TextContent>
+        </PageSection>
+      }
+    >
+      <PageSection>
+        <Gallery hasGutter>
+          {Array.from({ length: 10 }).map((_value, index) => (
+            <GalleryItem key={index}>
+              <Card>
+                <CardBody>This is a card</CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+    </Page>
+  );
+};

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -382,8 +382,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
@@ -521,15 +521,14 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
 
   return (
     <Page
-      header={masthead}
+      masthead={masthead}
       sidebar={sidebar}
       isManagedSidebar
       skipToContent={pageSkipToContent}
       breadcrumb={dashboardBreadcrumb}
       mainContainerId={mainContainerId}
-      isTertiaryNavWidthLimited
+      isHorizontalSubnavWidthLimited
       isBreadcrumbWidthLimited
-      isTertiaryNavGrouped
       isBreadcrumbGrouped
       additionalGroupedContent={
         <PageSection>