@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/notification-badge/react.js

@@ -0,0 +1,196 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useEffect, useState } from 'react';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+const pageData = {
+  "id": "Notification badge",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/notification-badge/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md",
+  "relPath": "packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md",
+  "propComponents": [
+    {
+      "name": "NotificationBadge",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds an accessible label to the notification badge."
+        },
+        {
+          "name": "attentionIcon",
+          "type": "React.ReactNode",
+          "description": "Icon to display for attention variant.",
+          "defaultValue": "<RhUiAttentionBellFillIcon />"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the notification badge."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the notification badge."
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "description": "A number displayed in the badge alongside the icon.",
+          "defaultValue": "0"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Icon to display in the notification badge.",
+          "defaultValue": "<RhUiNotificationFillIcon />"
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag for applying expanded styling and setting the aria-expanded attribute on the\nnotification badge.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onAnimationEnd",
+          "type": "(event: React.AnimationEvent<HTMLButtonElement>) => void",
+          "description": "Callback for when the animation of the notification badge icon ends."
+        },
+        {
+          "name": "shouldNotify",
+          "type": "boolean",
+          "description": "Flag indicating whether the notification badge animation should be triggered. Each\ntime this prop is true, the animation will be triggered a single time.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "variant",
+          "type": "NotificationBadgeVariant | 'read' | 'unread' | 'attention' | 'plain'",
+          "description": "Determines the variant of the notification badge.",
+          "defaultValue": "NotificationBadgeVariant.read"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-notification-badge"
+  ],
+  "examples": [
+    "Basic",
+    "With count",
+    "With animation"
+  ]
+};
+pageData.liveContext = {
+  useEffect,
+  useState,
+  RhUiNotificationFillIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';\n\nexport const NotificationBadgeBasic: React.FunctionComponent = () => {\n  const [readExpanded, setReadExpanded] = useState(false);\n  const [unreadExpanded, setUnreadExpanded] = useState(false);\n  const [attentionExpanded, setAttentionExpanded] = useState(false);\n\n  const onReadClick = () => {\n    setReadExpanded(!readExpanded);\n  };\n\n  const onUnreadClick = () => {\n    setUnreadExpanded(!unreadExpanded);\n  };\n\n  const onAttentionClick = () => {\n    setAttentionExpanded(!attentionExpanded);\n  };\n\n  return (\n    <>\n      <NotificationBadge\n        variant={NotificationBadgeVariant.read}\n        onClick={onReadClick}\n        aria-label=\"Basic notification badge with read variant\"\n        isExpanded={readExpanded}\n      />\n      <NotificationBadge\n        variant={NotificationBadgeVariant.unread}\n        onClick={onUnreadClick}\n        aria-label=\"Basic notification badge with unread variant\"\n        isExpanded={unreadExpanded}\n      />\n      <NotificationBadge\n        variant={NotificationBadgeVariant.attention}\n        onClick={onAttentionClick}\n        aria-label=\"Basic notification badge with attention variant\"\n        isExpanded={attentionExpanded}\n      />\n    </>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following example demonstrates the three variants of notification badge that are available: "read", "unread", and "attention".`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isExpanded`}
+        </code>
+        {` property is also passed in to:`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`set the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`aria-expanded`}
+          </code>
+          {` attribute on the notification badge,`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`apply visual styling on the notification badge, and`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`to indicate that a notification drawer is expanded, for use-cases as seen in our `}
+          
+          <PatternflyThemeLink {...{"to":"/components/notification-drawer/react-demos","className":""}}>
+            {`notification drawer react demos`}
+          </PatternflyThemeLink>
+          {`.`}
+        </li>
+        
+
+      </ul>
+    </Example>,
+  'With count': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';\n\nexport const NotificationBadgeWithCount: React.FunctionComponent = () => {\n  const [readExpanded, setReadExpanded] = useState(false);\n  const [unreadExpanded, setUnreadExpanded] = useState(false);\n  const [attentionExpanded, setAttentionExpanded] = useState(false);\n\n  const onReadClick = () => {\n    setReadExpanded(!readExpanded);\n  };\n\n  const onUnreadClick = () => {\n    setUnreadExpanded(!unreadExpanded);\n  };\n\n  const onAttentionClick = () => {\n    setAttentionExpanded(!attentionExpanded);\n  };\n\n  return (\n    <>\n      <NotificationBadge\n        variant={NotificationBadgeVariant.read}\n        onClick={onReadClick}\n        aria-label=\"Notification badge with count and read variant\"\n        isExpanded={readExpanded}\n        count={10}\n      />\n      <NotificationBadge\n        variant={NotificationBadgeVariant.unread}\n        onClick={onUnreadClick}\n        aria-label=\"Notification badge with count and unread variant\"\n        isExpanded={unreadExpanded}\n        count={10}\n      />\n      <NotificationBadge\n        variant={NotificationBadgeVariant.attention}\n        onClick={onAttentionClick}\n        aria-label=\"Notification badge with count and attention variant\"\n        isExpanded={attentionExpanded}\n        count={10}\n      />\n    </>\n  );\n};\n","title":"With count","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can display a number within the notification badge by passing in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`count`}
+        </code>
+        {` property, to indicate how many read, unread, or attention notifications there are. The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isExpanded`}
+        </code>
+        {` property is also passed in, similar to the `}
+        
+        <PatternflyThemeLink {...{"to":"/components/notification-badge#basic","className":""}}>
+          {`notification badge basic example`}
+        </PatternflyThemeLink>
+        {`.`}
+      </p>
+    </Example>,
+  'With animation': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useState } from 'react';\nimport { NotificationBadge, NotificationBadgeVariant, Button, Stack, StackItem } from '@patternfly/react-core';\n\nexport const NotificationBadgeWithAnimation: React.FunctionComponent = () => {\n  const [count, setCount] = useState(0);\n  const [notify, setNotify] = useState(false);\n\n  useEffect(() => {\n    if (count > 0) {\n      setNotify(true);\n    }\n  }, [count]);\n\n  const onAnimationEnd = () => {\n    setNotify(false);\n  };\n\n  return (\n    <Stack hasGutter>\n      <StackItem>\n        <NotificationBadge\n          variant={NotificationBadgeVariant.read}\n          aria-label=\"Notification badge with read variant and no count\"\n          count={count}\n          shouldNotify={notify}\n          onAnimationEnd={onAnimationEnd}\n        />\n        <NotificationBadge\n          variant={NotificationBadgeVariant.unread}\n          aria-label=\"Notification badge animation with unread variant and count\"\n          count={count}\n          shouldNotify={notify}\n          onAnimationEnd={onAnimationEnd}\n        />\n        <NotificationBadge\n          variant={NotificationBadgeVariant.attention}\n          aria-label=\"Notification badge animation with attention variant and count\"\n          count={count}\n          shouldNotify={notify}\n          onAnimationEnd={onAnimationEnd}\n        />\n      </StackItem>\n      <StackItem>\n        <Button onClick={() => setCount((prevCount) => prevCount + 1)}>Add Notification</Button>\n      </StackItem>\n    </Stack>\n  );\n};\n","title":"With animation","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To animate the icon within the notification badge, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`shouldNotify`}
+        </code>
+        {` property. In this example, the notification badge icon will only animate if the notification count is greater than 0.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["With count"])}
+    {React.createElement(pageData.examples["With animation"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsNotificationBadgeReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/notification-drawer/react-demos.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useRef, useState } from 'react';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
+import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+import srcImportbasic from './react-demos/basic.png';
+import srcImportgrouped from './react-demos/grouped.png';
+const pageData = {
+  "id": "Notification drawer",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/notification-drawer/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md",
+  "relPath": "packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md",
+  "fullscreenExamples": [
+    "Basic",
+    "Grouped"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useRef,
+  useState,
+  RhUiNotificationFillIcon,
+  RhUiSettingsFillIcon,
+  RhUiMenuBarsIcon,
+  HelpIcon,
+  RhUiQuestionMarkCircleFillIcon,
+  SearchIcon,
+  imgAvatar,
+  RhUiEllipsisVerticalFillIcon,
+  pfLogo
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportbasic} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Content,\n  Divider,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  EmptyState,\n  EmptyStateActions,\n  EmptyStateBody,\n  EmptyStateFooter,\n  EmptyStateVariant,\n  MenuToggle,\n  Nav,\n  NavItem,\n  NavList,\n  NotificationBadge,\n  NotificationDrawer,\n  NotificationDrawerBody,\n  NotificationDrawerHeader,\n  NotificationDrawerList,\n  NotificationDrawerListItem,\n  NotificationDrawerListItemBody,\n  NotificationDrawerListItemHeader,\n  Page,\n  PageSection,\n  PageSidebar,\n  PageSidebarBody,\n  SkipToContent,\n  PageToggleButton,\n  Masthead,\n  MastheadMain,\n  MastheadBrand,\n  MastheadToggle,\n  MastheadContent,\n  MastheadLogo,\n  Toolbar,\n  ToolbarItem,\n  ToolbarGroup,\n  ToolbarContent\n} from '@patternfly/react-core';\nimport RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';\n\nexport const NotificationDrawerBasic: React.FunctionComponent = () => {\n  const drawerRef = useRef<HTMLElement | null>(null);\n\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n\n  interface UnreadMap {\n    [notificationId: string]: boolean;\n  }\n\n  const [activeItem, setActiveItem] = useState<number | string>(0);\n  const [isUnreadMap, setIsUnreadMap] = useState<UnreadMap | null>({\n    'notification-1': true,\n    'notification-2': true,\n    'notification-3': false,\n    'notification-4': false\n  });\n\n  const [shouldShowNotifications, setShouldShowNotifications] = useState(true);\n\n  interface ActionsMenu {\n    [toggleId: string]: boolean;\n  }\n\n  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<ActionsMenu | {}>({});\n\n  const onNavSelect = (\n    _event: React.FormEvent<HTMLInputElement>,\n    selectedItem: {\n      groupId: number | string;\n      itemId: number | string;\n      to: string;\n    }\n  ) => setActiveItem(selectedItem.itemId);\n\n  const onDropdownToggle = () => setIsDropdownOpen((prevState) => !prevState);\n  const onDropdownSelect = () => setIsDropdownOpen(false);\n  const onKebabDropdownToggle = () => setIsKebabDropdownOpen((prevState) => !prevState);\n  const onKebabDropdownSelect = () => setIsKebabDropdownOpen(false);\n  const onCloseNotificationDrawer = (_event: any) => setIsDrawerExpanded((prevState) => !prevState);\n\n  const onToggle = (id: string) => {\n    setIsActionsMenuOpen({ [id]: !isActionsMenuOpen[id] });\n  };\n\n  const closeActionsMenu = () => setIsActionsMenuOpen({});\n\n  const onListItemClick = (id: string) => {\n    if (!isUnreadMap) {\n      return;\n    }\n    setIsUnreadMap({ ...isUnreadMap, [id]: false });\n  };\n\n  const getNumberUnread: () => number = () => {\n    if (!isUnreadMap) {\n      return 0;\n    }\n    return Object.values(isUnreadMap).reduce((count, value) => count + (value ? 1 : 0), 0);\n  };\n\n  const markAllRead = () => setIsUnreadMap(null);\n\n  const showNotifications = (showNotifications: boolean) => {\n    setIsUnreadMap(null);\n    setShouldShowNotifications(showNotifications);\n  };\n\n  const focusDrawer = (_event: any) => {\n    if (drawerRef.current === null) {\n      return;\n    }\n    const firstTabbableItem = drawerRef.current.querySelector('a, button') as\n      | HTMLAnchorElement\n      | HTMLButtonElement\n      | null;\n    firstTabbableItem?.focus();\n  };\n\n  const PageNav = (\n    <Nav onSelect={onNavSelect} aria-label=\"Nav\">\n      <NavList>\n        <NavItem itemId={0} isActive={activeItem === 0}>\n          System Panel\n        </NavItem>\n        <NavItem itemId={1} isActive={activeItem === 1}>\n          Policy\n        </NavItem>\n        <NavItem itemId={2} isActive={activeItem === 2}>\n          Authentication\n        </NavItem>\n        <NavItem itemId={3} isActive={activeItem === 3}>\n          Network Services\n        </NavItem>\n        <NavItem itemId={4} isActive={activeItem === 4}>\n          Server\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n  const kebabDropdownItems = (\n    <>\n      <DropdownItem>\n        <RhUiSettingsFillIcon /> Settings\n      </DropdownItem>\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    </>\n  );\n  const userDropdownItems = (\n    <>\n      <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n      <DropdownItem key=\"group 2 user\">User management</DropdownItem>\n      <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n    </>\n  );\n  const headerToolbar = (\n    <Toolbar>\n      <ToolbarContent>\n        <ToolbarGroup align={{ default: 'alignEnd' }}>\n          <ToolbarGroup variant=\"action-group-plain\">\n            <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>\n              <NotificationBadge\n                variant={getNumberUnread() === 0 ? 'read' : 'unread'}\n                onClick={(event: any) => onCloseNotificationDrawer(event)}\n                aria-label=\"Notifications\"\n                isExpanded={isDrawerExpanded}\n              />\n            </ToolbarItem>\n            <ToolbarGroup\n              variant=\"action-group-plain\"\n              visibility={{\n                default: 'hidden',\n                lg: 'visible'\n              }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */\n            >\n              <ToolbarItem>\n                <Button aria-label=\"Settings actions\" isSettings variant=\"plain\" />\n              </ToolbarItem>\n              <ToolbarItem>\n                <Button\n                  aria-label=\"Help actions\"\n                  variant={ButtonVariant.plain}\n                  icon={<RhUiQuestionMarkCircleFillIcon />}\n                />\n              </ToolbarItem>\n            </ToolbarGroup>\n          </ToolbarGroup>\n          <ToolbarGroup>\n            <ToolbarItem\n              visibility={{\n                lg: 'hidden'\n              }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */\n            >\n              <Dropdown\n                isOpen={isKebabDropdownOpen}\n                onSelect={onKebabDropdownSelect}\n                onOpenChange={setIsKebabDropdownOpen}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef: React.RefObject<any>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isKebabDropdownOpen}\n                    onClick={onKebabDropdownToggle}\n                    variant=\"plain\"\n                    aria-label=\"Settings and help\"\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n              >\n                <DropdownList>{kebabDropdownItems}</DropdownList>\n              </Dropdown>\n            </ToolbarItem>\n            <ToolbarItem\n              visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */\n            >\n              <Dropdown\n                isOpen={isDropdownOpen}\n                onSelect={onDropdownSelect}\n                onOpenChange={setIsDropdownOpen}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef: React.RefObject<any>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isDropdownOpen}\n                    onClick={onDropdownToggle}\n                    icon={<Avatar src={imgAvatar} alt=\"\" size=\"sm\" />}\n                  >\n                    John Smith\n                  </MenuToggle>\n                )}\n              >\n                <DropdownList>{userDropdownItems}</DropdownList>\n              </Dropdown>\n            </ToolbarItem>\n          </ToolbarGroup>\n        </ToolbarGroup>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton isHamburgerButton aria-label=\"Global navigation\" />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo>\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n  const Sidebar = (\n    <PageSidebar>\n      <PageSidebarBody>{PageNav}</PageSidebarBody>\n    </PageSidebar>\n  );\n  const pageId = 'main-content-page-layout-default-nav';\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    const mainContentElement = document.getElementById(pageId);\n    if (mainContentElement) {\n      mainContentElement.focus();\n    }\n  };\n\n  const PageSkipToContent = (\n    <SkipToContent onClick={handleClick} href={`#${pageId}`}>\n      Skip to content\n    </SkipToContent>\n  );\n\n  const PageBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem>Section home</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\" isActive>\n        Section landing\n      </BreadcrumbItem>\n    </Breadcrumb>\n  );\n\n  const notificationDrawerActions = (\n    <>\n      <DropdownItem key=\"markAllRead\" onClick={markAllRead}>\n        Mark all read\n      </DropdownItem>\n      <DropdownItem key=\"clearAll\" onClick={() => showNotifications(false)}>\n        Clear all\n      </DropdownItem>\n      <DropdownItem key=\"unclearLast\" onClick={() => showNotifications(true)}>\n        Unclear last\n      </DropdownItem>\n      <DropdownItem key=\"settings\">Settings</DropdownItem>\n    </>\n  );\n  const notificationDrawerDropdownItems = (\n    <>\n      <DropdownItem\n        key=\"link\"\n        to=\"#\"\n        // Prevent default onClick behavior for demo purposes\n        onClick={(ev: any) => ev.preventDefault()}\n      >\n        Link\n      </DropdownItem>\n      <DropdownItem key=\"action\">Action</DropdownItem>\n      <Divider component=\"li\" key=\"separator\" />\n      <DropdownItem key=\"disabled link\" isDisabled>\n        Disabled Link\n      </DropdownItem>\n    </>\n  );\n  const notificationDrawer = (\n    <NotificationDrawer ref={drawerRef}>\n      <NotificationDrawerHeader count={getNumberUnread()} onClose={onCloseNotificationDrawer}>\n        <Dropdown\n          onSelect={closeActionsMenu}\n          isOpen={isActionsMenuOpen['toggle-id-0'] || false}\n          id=\"notification-0\"\n          onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n          popperProps={{ position: 'right' }}\n          toggle={(toggleRef: React.RefObject<any>) => (\n            <MenuToggle\n              ref={toggleRef}\n              id=\"toggle-id-0\"\n              aria-label=\"Notification drawer actions\"\n              variant=\"plain\"\n              onClick={() => onToggle('toggle-id-0')}\n              isExpanded={isActionsMenuOpen['toggle-id-0'] || false}\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n        >\n          <DropdownList>{notificationDrawerActions}</DropdownList>\n        </Dropdown>\n      </NotificationDrawerHeader>\n      <NotificationDrawerBody>\n        {shouldShowNotifications && (\n          <NotificationDrawerList>\n            <NotificationDrawerListItem\n              variant=\"info\"\n              onClick={() => onListItemClick('notification-1')}\n              isRead={isUnreadMap === null || !isUnreadMap['notification-1']}\n            >\n              <NotificationDrawerListItemHeader\n                variant=\"info\"\n                title=\"Unread info notification title\"\n                srTitle=\"Info notification:\"\n              >\n                <Dropdown\n                  onSelect={closeActionsMenu}\n                  isOpen={isActionsMenuOpen['toggle-id-1'] || false}\n                  id=\"notification-1\"\n                  onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                  popperProps={{ position: 'right' }}\n                  toggle={(toggleRef: React.RefObject<any>) => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      id=\"toggle-id-1\"\n                      aria-label=\"Notification drawer actions\"\n                      variant=\"plain\"\n                      onClick={() => onToggle('toggle-id-1')}\n                      isExpanded={isActionsMenuOpen['toggle-id-1'] || false}\n                      icon={<RhUiEllipsisVerticalFillIcon />}\n                    />\n                  )}\n                >\n                  <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                </Dropdown>\n              </NotificationDrawerListItemHeader>\n              <NotificationDrawerListItemBody timestamp=\"5 minutes ago\">\n                This is an info notification description.\n              </NotificationDrawerListItemBody>\n            </NotificationDrawerListItem>\n            <NotificationDrawerListItem\n              variant=\"danger\"\n              onClick={() => onListItemClick('notification-2')}\n              isRead={isUnreadMap === null || !isUnreadMap['notification-2']}\n            >\n              <NotificationDrawerListItemHeader\n                variant=\"danger\"\n                title=\"Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.\"\n                srTitle=\"Danger notification:\"\n              >\n                <Dropdown\n                  onSelect={closeActionsMenu}\n                  isOpen={isActionsMenuOpen['toggle-id-2'] || false}\n                  id=\"notification-2\"\n                  onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                  popperProps={{ position: 'right' }}\n                  toggle={(toggleRef: React.RefObject<any>) => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      id=\"toggle-id-2\"\n                      aria-label=\"Notification drawer actions\"\n                      variant=\"plain\"\n                      onClick={() => onToggle('toggle-id-2')}\n                      isExpanded={isActionsMenuOpen['toggle-id-2'] || false}\n                      icon={<RhUiEllipsisVerticalFillIcon />}\n                    />\n                  )}\n                >\n                  <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                </Dropdown>\n              </NotificationDrawerListItemHeader>\n              <NotificationDrawerListItemBody timestamp=\"10 minutes ago\">\n                This is a danger notification description. This is a long description to show how the title will wrap if\n                it is long and wraps to multiple lines.\n              </NotificationDrawerListItemBody>\n            </NotificationDrawerListItem>\n            <NotificationDrawerListItem\n              variant=\"warning\"\n              onClick={() => onListItemClick('notification-3')}\n              isRead={isUnreadMap === null || !isUnreadMap['notification-3']}\n            >\n              <NotificationDrawerListItemHeader\n                variant=\"warning\"\n                title=\"Read warning notification title\"\n                srTitle=\"Warning notification:\"\n              >\n                <Dropdown\n                  onSelect={closeActionsMenu}\n                  isOpen={isActionsMenuOpen['toggle-id-3'] || false}\n                  id=\"notification-3\"\n                  onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                  popperProps={{ position: 'right' }}\n                  toggle={(toggleRef: React.RefObject<any>) => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      id=\"toggle-id-3\"\n                      aria-label=\"Notification drawer actions\"\n                      variant=\"plain\"\n                      onClick={() => onToggle('toggle-id-3')}\n                      isExpanded={isActionsMenuOpen['toggle-id-3'] || false}\n                      icon={<RhUiEllipsisVerticalFillIcon />}\n                    />\n                  )}\n                >\n                  <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                </Dropdown>\n              </NotificationDrawerListItemHeader>\n              <NotificationDrawerListItemBody timestamp=\"20 minutes ago\">\n                This is a warning notification description.\n              </NotificationDrawerListItemBody>\n            </NotificationDrawerListItem>\n            <NotificationDrawerListItem\n              variant=\"success\"\n              onClick={() => onListItemClick('notification-4')}\n              isRead={isUnreadMap === null || !isUnreadMap['notification-4']}\n            >\n              <NotificationDrawerListItemHeader\n                variant=\"success\"\n                title=\"Read success notification title\"\n                srTitle=\"Success notification:\"\n              >\n                <Dropdown\n                  onSelect={closeActionsMenu}\n                  isOpen={isActionsMenuOpen['toggle-id-4'] || false}\n                  id=\"notification-4\"\n                  onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                  popperProps={{ position: 'right' }}\n                  toggle={(toggleRef: React.RefObject<any>) => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      id=\"toggle-id-4\"\n                      aria-label=\"Notification drawer actions\"\n                      variant=\"plain\"\n                      onClick={() => onToggle('toggle-id-4')}\n                      isExpanded={isActionsMenuOpen['toggle-id-4'] || false}\n                      icon={<RhUiEllipsisVerticalFillIcon />}\n                    />\n                  )}\n                >\n                  <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                </Dropdown>\n              </NotificationDrawerListItemHeader>\n              <NotificationDrawerListItemBody timestamp=\"30 minutes ago\">\n                This is a success notification description.\n              </NotificationDrawerListItemBody>\n            </NotificationDrawerListItem>\n          </NotificationDrawerList>\n        )}\n        {!shouldShowNotifications && (\n          <EmptyState headingLevel=\"h2\" titleText=\"No alerts found\" icon={SearchIcon} variant={EmptyStateVariant.full}>\n            <EmptyStateBody>\n              There are currently no alerts. There may be silenced critical alerts however.\n            </EmptyStateBody>\n            <EmptyStateFooter>\n              <EmptyStateActions>\n                <Button variant=\"link\">Action</Button>\n              </EmptyStateActions>\n            </EmptyStateFooter>\n          </EmptyState>\n        )}\n      </NotificationDrawerBody>\n    </NotificationDrawer>\n  );\n\n  return (\n    <Fragment>\n      <Page\n        masthead={masthead}\n        sidebar={Sidebar}\n        isManagedSidebar\n        notificationDrawer={notificationDrawer}\n        onNotificationDrawerExpand={(\n          event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | React.TransitionEvent<Element>\n        ) => focusDrawer(event)}\n        isNotificationDrawerExpanded={isDrawerExpanded}\n        skipToContent={PageSkipToContent}\n        breadcrumb={PageBreadcrumb}\n        mainContainerId={pageId}\n      >\n        <PageSection aria-labelledby=\"main-title\">\n          <Content>\n            <h1 id=\"main-title\">Main title</h1>\n            <p>\n              Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />\n              of its relative line height of 1.5.\n            </p>\n          </Content>\n        </PageSection>\n        <PageSection aria-label=\"Panel section\">Panel section content</PageSection>\n      </Page>\n    </Fragment>\n  );\n};\n","title":"Basic","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Grouped': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportgrouped} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Content,\n  Divider,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  EmptyState,\n  EmptyStateActions,\n  EmptyStateBody,\n  EmptyStateFooter,\n  EmptyStateVariant,\n  MenuToggle,\n  Nav,\n  NavItem,\n  NavList,\n  NotificationBadge,\n  NotificationDrawer,\n  NotificationDrawerBody,\n  NotificationDrawerGroup,\n  NotificationDrawerGroupList,\n  NotificationDrawerHeader,\n  NotificationDrawerList,\n  NotificationDrawerListItem,\n  NotificationDrawerListItemBody,\n  NotificationDrawerListItemHeader,\n  Page,\n  PageSection,\n  PageSidebar,\n  PageSidebarBody,\n  SkipToContent,\n  PageToggleButton,\n  Masthead,\n  MastheadMain,\n  MastheadBrand,\n  MastheadToggle,\n  MastheadContent,\n  MastheadLogo,\n  Toolbar,\n  ToolbarItem,\n  ToolbarGroup,\n  ToolbarContent\n} from '@patternfly/react-core';\nimport RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';\n\nexport const NotificationDrawerGrouped: React.FunctionComponent = () => {\n  const drawerRef = useRef<HTMLElement | null>(null);\n\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const [firstDrawerGroupExpanded, setFirstDrawerGroupExpanded] = useState(false);\n  const [secondDrawerGroupExpanded, setSecondDrawerGroupExpanded] = useState(true);\n  const [thirdDrawerGroupExpanded, setThirdDrawerGroupExpanded] = useState(false);\n\n  interface UnreadMap {\n    [groupName: string]: {\n      [notificationId: string]: boolean;\n    } | null;\n  }\n\n  const [activeItem, setActiveItem] = useState<number | string>(0);\n  const [isUnreadMap, setIsUnreadMap] = useState<UnreadMap | null>({\n    'group-1': {\n      'notification-5': true,\n      'notification-6': true\n    },\n    'group-2': {\n      'notification-9': true,\n      'notification-10': true\n    },\n    'group-3': null\n  });\n\n  const [shouldShowNotifications, setShouldShowNotifications] = useState(true);\n\n  interface ActionsMenu {\n    [toggleId: string]: boolean;\n  }\n\n  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<ActionsMenu | {}>({});\n\n  const onNavSelect = (\n    _event: React.FormEvent<HTMLInputElement>,\n    selectedItem: {\n      groupId: number | string;\n      itemId: number | string;\n      to: string;\n    }\n  ) => setActiveItem(selectedItem.itemId);\n\n  const onDropdownToggle = () => setIsDropdownOpen((prevState) => !prevState);\n  const onDropdownSelect = () => setIsDropdownOpen(false);\n  const onKebabDropdownToggle = () => setIsKebabDropdownOpen((prevState) => !prevState);\n  const onKebabDropdownSelect = () => setIsKebabDropdownOpen(false);\n  const onCloseNotificationDrawer = (_event: any) => setIsDrawerExpanded((prevState) => !prevState);\n\n  const onToggle = (id: string) => {\n    setIsActionsMenuOpen({ [id]: !isActionsMenuOpen[id] });\n  };\n\n  const closeActionsMenu = () => setIsActionsMenuOpen({});\n\n  const onListItemClick = (groupId: string, id: string) => {\n    if (isUnreadMap === null) {\n      return;\n    }\n    if (!isUnreadMap[groupId]) {\n      setIsUnreadMap({ ...isUnreadMap, [groupId]: { [id]: false } });\n    } else {\n      setIsUnreadMap({ ...isUnreadMap, [groupId]: { ...isUnreadMap[groupId], [id]: false } });\n    }\n  };\n\n  const isUnread = (groupId: string, id: string) =>\n    isUnreadMap && isUnreadMap[groupId] !== null && isUnreadMap[groupId][id];\n\n  const getNumberUnread = (groupId: string | null) => {\n    if (!isUnreadMap) {\n      return 0;\n    }\n\n    if (groupId) {\n      const group = isUnreadMap[groupId];\n      if (!group) {\n        return 0;\n      }\n      return Object.values(group).reduce((count, value) => (value ? count + 1 : count), 0);\n    }\n\n    return Object.keys(isUnreadMap).reduce((count, groupId) => {\n      const group = isUnreadMap[groupId];\n      if (!group) {\n        return count;\n      }\n\n      return Object.values(group).reduce((groupCount, value) => (value ? groupCount + 1 : groupCount), count);\n    }, 0);\n  };\n\n  const markAllRead = () => setIsUnreadMap(null);\n\n  const showNotifications = (showNotifications: boolean) => {\n    setIsUnreadMap(null);\n    setShouldShowNotifications(showNotifications);\n  };\n\n  const toggleFirstDrawer = (_event: any, value: boolean | ((prevState: boolean) => boolean)) => {\n    setFirstDrawerGroupExpanded(value);\n  };\n\n  const toggleSecondDrawer = (_event: any, value: boolean | ((prevState: boolean) => boolean)) => {\n    setSecondDrawerGroupExpanded(value);\n  };\n\n  const toggleThirdDrawer = (_event: any, value: boolean | ((prevState: boolean) => boolean)) => {\n    setThirdDrawerGroupExpanded(value);\n  };\n\n  const focusDrawer = (_event: any) => {\n    if (drawerRef.current === null) {\n      return;\n    }\n    // Prevent the NotificationDrawer from receiving focus if a drawer group item is opened\n    if (!document.activeElement?.closest(`.${drawerRef.current.className}`)) {\n      const firstTabbableItem = drawerRef.current.querySelector('a, button') as\n        | HTMLAnchorElement\n        | HTMLButtonElement\n        | null;\n      firstTabbableItem?.focus();\n    }\n  };\n\n  const PageNav = (\n    <Nav onSelect={onNavSelect} aria-label=\"Nav\">\n      <NavList>\n        <NavItem itemId={0} isActive={activeItem === 0}>\n          System Panel\n        </NavItem>\n        <NavItem itemId={1} isActive={activeItem === 1}>\n          Policy\n        </NavItem>\n        <NavItem itemId={2} isActive={activeItem === 2}>\n          Authentication\n        </NavItem>\n        <NavItem itemId={3} isActive={activeItem === 3}>\n          Network Services\n        </NavItem>\n        <NavItem itemId={4} isActive={activeItem === 4}>\n          Server\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n  const kebabDropdownItems = (\n    <>\n      <DropdownItem>\n        <RhUiSettingsFillIcon /> Settings\n      </DropdownItem>\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    </>\n  );\n  const userDropdownItems = (\n    <>\n      <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n      <DropdownItem key=\"group 2 user\">User management</DropdownItem>\n      <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n    </>\n  );\n  const headerToolbar = (\n    <Toolbar>\n      <ToolbarContent>\n        <ToolbarGroup align={{ default: 'alignEnd' }}>\n          <ToolbarGroup variant=\"action-group-plain\">\n            <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>\n              <NotificationBadge\n                variant={getNumberUnread(null) === 0 ? 'read' : 'unread'}\n                onClick={(event: any) => onCloseNotificationDrawer(event)}\n                aria-label=\"Notifications\"\n                isExpanded={isDrawerExpanded}\n              />\n            </ToolbarItem>\n            <ToolbarGroup\n              variant=\"action-group-plain\"\n              visibility={{\n                default: 'hidden',\n                lg: 'visible'\n              }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */\n            >\n              <ToolbarItem>\n                <Button aria-label=\"Settings actions\" isSettings variant=\"plain\" />\n              </ToolbarItem>\n              <ToolbarItem>\n                <Button\n                  aria-label=\"Help actions\"\n                  variant={ButtonVariant.plain}\n                  icon={<RhUiQuestionMarkCircleFillIcon />}\n                />\n              </ToolbarItem>\n            </ToolbarGroup>\n          </ToolbarGroup>\n          <ToolbarGroup>\n            <ToolbarItem\n              visibility={{\n                lg: 'hidden'\n              }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */\n            >\n              <Dropdown\n                isOpen={isKebabDropdownOpen}\n                onSelect={onKebabDropdownSelect}\n                onOpenChange={setIsKebabDropdownOpen}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef: React.RefObject<any>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isKebabDropdownOpen}\n                    onClick={onKebabDropdownToggle}\n                    variant=\"plain\"\n                    aria-label=\"Settings and help\"\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n              >\n                <DropdownList>{kebabDropdownItems}</DropdownList>\n              </Dropdown>\n            </ToolbarItem>\n            <ToolbarItem\n              visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */\n            >\n              <Dropdown\n                isOpen={isDropdownOpen}\n                onSelect={onDropdownSelect}\n                onOpenChange={setIsDropdownOpen}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef: React.RefObject<any>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isDropdownOpen}\n                    onClick={onDropdownToggle}\n                    icon={<Avatar src={imgAvatar} alt=\"\" size=\"sm\" />}\n                  >\n                    John Smith\n                  </MenuToggle>\n                )}\n              >\n                <DropdownList>{userDropdownItems}</DropdownList>\n              </Dropdown>\n            </ToolbarItem>\n          </ToolbarGroup>\n        </ToolbarGroup>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton isHamburgerButton aria-label=\"Global navigation\" />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo>\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n  const Sidebar = (\n    <PageSidebar>\n      <PageSidebarBody>{PageNav}</PageSidebarBody>\n    </PageSidebar>\n  );\n  const pageId = 'main-content-page-layout-default-nav';\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    const mainContentElement = document.getElementById(pageId);\n    if (mainContentElement) {\n      mainContentElement.focus();\n    }\n  };\n\n  const PageSkipToContent = (\n    <SkipToContent onClick={handleClick} href={`#${pageId}`}>\n      Skip to content\n    </SkipToContent>\n  );\n\n  const PageBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem>Section home</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\" isActive>\n        Section landing\n      </BreadcrumbItem>\n    </Breadcrumb>\n  );\n\n  const notificationDrawerActions = (\n    <>\n      <DropdownItem key=\"markAllRead\" onClick={markAllRead}>\n        Mark all read\n      </DropdownItem>\n      <DropdownItem key=\"clearAll\" onClick={() => showNotifications(false)}>\n        Clear all\n      </DropdownItem>\n      <DropdownItem key=\"unclearLast\" onClick={() => showNotifications(true)}>\n        Unclear last\n      </DropdownItem>\n      <DropdownItem key=\"settings\">Settings</DropdownItem>\n    </>\n  );\n  const notificationDrawerDropdownItems = (\n    <>\n      <DropdownItem\n        key=\"link\"\n        to=\"#\"\n        // Prevent default onClick behavior for demo purposes\n        onClick={(ev: any) => ev.preventDefault()}\n      >\n        Link\n      </DropdownItem>\n      <DropdownItem key=\"action\">Action</DropdownItem>\n      <Divider component=\"li\" key=\"separator\" />\n      <DropdownItem key=\"disabled link\" isDisabled>\n        Disabled Link\n      </DropdownItem>\n    </>\n  );\n\n  const notificationDrawer = (\n    <NotificationDrawer ref={drawerRef}>\n      <NotificationDrawerHeader count={getNumberUnread(null)} onClose={onCloseNotificationDrawer}>\n        <Dropdown\n          onSelect={closeActionsMenu}\n          isOpen={isActionsMenuOpen['toggle-id-0'] || false}\n          id=\"notification-0\"\n          onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n          popperProps={{ position: 'right' }}\n          toggle={(toggleRef: React.RefObject<any>) => (\n            <MenuToggle\n              ref={toggleRef}\n              id=\"toggle-id-0\"\n              aria-label=\"Notification drawer actions\"\n              variant=\"plain\"\n              onClick={() => onToggle('toggle-id-0')}\n              isExpanded={isActionsMenuOpen['toggle-id-0'] || false}\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n        >\n          <DropdownList>{notificationDrawerActions}</DropdownList>\n        </Dropdown>\n      </NotificationDrawerHeader>\n      <NotificationDrawerBody>\n        {shouldShowNotifications && (\n          <NotificationDrawerGroupList>\n            <NotificationDrawerGroup\n              title=\"First notification group\"\n              isExpanded={firstDrawerGroupExpanded}\n              count={getNumberUnread('group-1')}\n              onExpand={toggleFirstDrawer}\n            >\n              <NotificationDrawerList isHidden={!firstDrawerGroupExpanded}>\n                <NotificationDrawerListItem\n                  variant=\"info\"\n                  onClick={() => onListItemClick('group-1', 'notification-5')}\n                  isRead={!isUnread('group-1', 'notification-5')}\n                >\n                  <NotificationDrawerListItemHeader\n                    variant=\"info\"\n                    title=\"Unread info notification title\"\n                    srTitle=\"Info notification:\"\n                  >\n                    <Dropdown\n                      onSelect={closeActionsMenu}\n                      isOpen={isActionsMenuOpen['toggle-id-5'] || false}\n                      id=\"notification-5\"\n                      onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                      popperProps={{ position: 'right' }}\n                      toggle={(toggleRef: React.RefObject<any>) => (\n                        <MenuToggle\n                          ref={toggleRef}\n                          id=\"toggle-id-5\"\n                          aria-label=\"Notification drawer actions\"\n                          variant=\"plain\"\n                          onClick={() => onToggle('toggle-id-5')}\n                          isExpanded={isActionsMenuOpen['toggle-id-5'] || false}\n                          icon={<RhUiEllipsisVerticalFillIcon />}\n                        />\n                      )}\n                    >\n                      <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                    </Dropdown>\n                  </NotificationDrawerListItemHeader>\n                  <NotificationDrawerListItemBody timestamp=\"5 minutes ago\">\n                    This is an info notification description.\n                  </NotificationDrawerListItemBody>\n                </NotificationDrawerListItem>\n                <NotificationDrawerListItem\n                  variant=\"danger\"\n                  onClick={() => onListItemClick('group-1', 'notification-6')}\n                  isRead={!isUnread('group-1', 'notification-6')}\n                >\n                  <NotificationDrawerListItemHeader\n                    variant=\"danger\"\n                    title=\"Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.\"\n                    srTitle=\"Danger notification:\"\n                  >\n                    <Dropdown\n                      onSelect={closeActionsMenu}\n                      isOpen={isActionsMenuOpen['toggle-id-6'] || false}\n                      id=\"notification-6\"\n                      onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                      popperProps={{ position: 'right' }}\n                      toggle={(toggleRef: React.RefObject<any>) => (\n                        <MenuToggle\n                          ref={toggleRef}\n                          id=\"toggle-id-6\"\n                          aria-label=\"Notification drawer actions\"\n                          variant=\"plain\"\n                          onClick={() => onToggle('toggle-id-6')}\n                          isExpanded={isActionsMenuOpen['toggle-id-6'] || false}\n                          icon={<RhUiEllipsisVerticalFillIcon />}\n                        />\n                      )}\n                    >\n                      <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                    </Dropdown>\n                  </NotificationDrawerListItemHeader>\n                  <NotificationDrawerListItemBody timestamp=\"10 minutes ago\">\n                    This is a danger notification description. This is a long description to show how the title will\n                    wrap if it is long and wraps to multiple lines.\n                  </NotificationDrawerListItemBody>\n                </NotificationDrawerListItem>\n                <NotificationDrawerListItem\n                  variant=\"warning\"\n                  onClick={() => onListItemClick('group-1', 'notification-7')}\n                  isRead={!isUnread('group-1', 'notification-7')}\n                >\n                  <NotificationDrawerListItemHeader\n                    variant=\"warning\"\n                    title=\"Read warning notification title\"\n                    srTitle=\"Warning notification:\"\n                  >\n                    <Dropdown\n                      onSelect={closeActionsMenu}\n                      isOpen={isActionsMenuOpen['toggle-id-7'] || false}\n                      id=\"notification-7\"\n                      onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                      popperProps={{ position: 'right' }}\n                      toggle={(toggleRef: React.RefObject<any>) => (\n                        <MenuToggle\n                          ref={toggleRef}\n                          id=\"toggle-id-7\"\n                          aria-label=\"Notification drawer actions\"\n                          variant=\"plain\"\n                          onClick={() => onToggle('toggle-id-7')}\n                          isExpanded={isActionsMenuOpen['toggle-id-7'] || false}\n                          icon={<RhUiEllipsisVerticalFillIcon />}\n                        />\n                      )}\n                    >\n                      <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                    </Dropdown>\n                  </NotificationDrawerListItemHeader>\n                  <NotificationDrawerListItemBody timestamp=\"20 minutes ago\">\n                    This is a warning notification description.\n                  </NotificationDrawerListItemBody>\n                </NotificationDrawerListItem>\n                <NotificationDrawerListItem\n                  variant=\"success\"\n                  onClick={() => onListItemClick('group-1', 'notification-8')}\n                  isRead={!isUnread('group-1', 'notification-8')}\n                >\n                  <NotificationDrawerListItemHeader\n                    variant=\"success\"\n                    title=\"Read success notification title\"\n                    srTitle=\"Success notification:\"\n                  >\n                    <Dropdown\n                      onSelect={closeActionsMenu}\n                      isOpen={isActionsMenuOpen['toggle-id-8'] || false}\n                      id=\"notification-8\"\n                      onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                      popperProps={{ position: 'right' }}\n                      toggle={(toggleRef: React.RefObject<any>) => (\n                        <MenuToggle\n                          ref={toggleRef}\n                          id=\"toggle-id-8\"\n                          aria-label=\"Notification drawer actions\"\n                          variant=\"plain\"\n                          onClick={() => onToggle('toggle-id-8')}\n                          isExpanded={isActionsMenuOpen['toggle-id-8'] || false}\n                          icon={<RhUiEllipsisVerticalFillIcon />}\n                        />\n                      )}\n                    >\n                      <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                    </Dropdown>\n                  </NotificationDrawerListItemHeader>\n                  <NotificationDrawerListItemBody timestamp=\"30 minutes ago\">\n                    This is a success notification description.\n                  </NotificationDrawerListItemBody>\n                </NotificationDrawerListItem>\n              </NotificationDrawerList>\n            </NotificationDrawerGroup>\n            <NotificationDrawerGroup\n              title=\"Second notification group\"\n              isExpanded={secondDrawerGroupExpanded}\n              count={getNumberUnread('group-2')}\n              onExpand={toggleSecondDrawer}\n            >\n              <NotificationDrawerList isHidden={!secondDrawerGroupExpanded}>\n                <NotificationDrawerListItem\n                  variant=\"info\"\n                  onClick={() => onListItemClick('group-2', 'notification-9')}\n                  isRead={!isUnread('group-2', 'notification-9')}\n                >\n                  <NotificationDrawerListItemHeader\n                    variant=\"info\"\n                    title=\"Unread info notification title\"\n                    srTitle=\"Info notification:\"\n                  >\n                    <Dropdown\n                      onSelect={closeActionsMenu}\n                      isOpen={isActionsMenuOpen['toggle-id-9'] || false}\n                      id=\"notification-9\"\n                      onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                      popperProps={{ position: 'right' }}\n                      toggle={(toggleRef: React.RefObject<any>) => (\n                        <MenuToggle\n                          ref={toggleRef}\n                          id=\"toggle-id-9\"\n                          aria-label=\"Notification drawer actions\"\n                          variant=\"plain\"\n                          onClick={() => onToggle('toggle-id-9')}\n                          isExpanded={isActionsMenuOpen['toggle-id-9'] || false}\n                          icon={<RhUiEllipsisVerticalFillIcon />}\n                        />\n                      )}\n                    >\n                      <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                    </Dropdown>\n                  </NotificationDrawerListItemHeader>\n                  <NotificationDrawerListItemBody timestamp=\"5 minutes ago\">\n                    This is an info notification description.\n                  </NotificationDrawerListItemBody>\n                </NotificationDrawerListItem>\n                <NotificationDrawerListItem\n                  variant=\"danger\"\n                  onClick={() => onListItemClick('group-2', 'notification-10')}\n                  isRead={!isUnread('group-2', 'notification-10')}\n                >\n                  <NotificationDrawerListItemHeader\n                    variant=\"danger\"\n                    title=\"Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.\"\n                    srTitle=\"Danger notification:\"\n                  >\n                    <Dropdown\n                      onSelect={closeActionsMenu}\n                      isOpen={isActionsMenuOpen['toggle-id-10'] || false}\n                      id=\"notification-10\"\n                      onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                      popperProps={{ position: 'right' }}\n                      toggle={(toggleRef: React.RefObject<any>) => (\n                        <MenuToggle\n                          ref={toggleRef}\n                          id=\"toggle-id-10\"\n                          aria-label=\"Notification drawer actions\"\n                          variant=\"plain\"\n                          onClick={() => onToggle('toggle-id-10')}\n                          isExpanded={isActionsMenuOpen['toggle-id-10'] || false}\n                          icon={<RhUiEllipsisVerticalFillIcon />}\n                        />\n                      )}\n                    >\n                      <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                    </Dropdown>\n                  </NotificationDrawerListItemHeader>\n                  <NotificationDrawerListItemBody timestamp=\"10 minutes ago\">\n                    This is a danger notification description. This is a long description to show how the title will\n                    wrap if it is long and wraps to multiple lines.\n                  </NotificationDrawerListItemBody>\n                </NotificationDrawerListItem>\n                <NotificationDrawerListItem\n                  variant=\"warning\"\n                  onClick={() => onListItemClick('group-2', 'notification-11')}\n                  isRead={!isUnread('group-2', 'notification-11')}\n                >\n                  <NotificationDrawerListItemHeader\n                    variant=\"warning\"\n                    title=\"Read warning notification title\"\n                    srTitle=\"Warning notification:\"\n                  >\n                    <Dropdown\n                      onSelect={closeActionsMenu}\n                      isOpen={isActionsMenuOpen['toggle-id-11'] || false}\n                      id=\"notification-11\"\n                      onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                      popperProps={{ position: 'right' }}\n                      toggle={(toggleRef: React.RefObject<any>) => (\n                        <MenuToggle\n                          ref={toggleRef}\n                          id=\"toggle-id-11\"\n                          aria-label=\"Notification drawer actions\"\n                          variant=\"plain\"\n                          onClick={() => onToggle('toggle-id-11')}\n                          isExpanded={isActionsMenuOpen['toggle-id-11'] || false}\n                          icon={<RhUiEllipsisVerticalFillIcon />}\n                        />\n                      )}\n                    >\n                      <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                    </Dropdown>\n                  </NotificationDrawerListItemHeader>\n                  <NotificationDrawerListItemBody timestamp=\"20 minutes ago\">\n                    This is a warning notification description.\n                  </NotificationDrawerListItemBody>\n                </NotificationDrawerListItem>\n                <NotificationDrawerListItem\n                  variant=\"success\"\n                  onClick={() => onListItemClick('group-2', 'notification-12')}\n                  isRead={!isUnread('group-2', 'notification-12')}\n                >\n                  <NotificationDrawerListItemHeader\n                    variant=\"success\"\n                    title=\"Read success notification title\"\n                    srTitle=\"Success notification:\"\n                  >\n                    <Dropdown\n                      onSelect={closeActionsMenu}\n                      isOpen={isActionsMenuOpen['toggle-id-12'] || false}\n                      id=\"notification-12\"\n                      onOpenChange={(isOpen: boolean) => !isOpen && closeActionsMenu()}\n                      popperProps={{ position: 'right' }}\n                      toggle={(toggleRef: React.RefObject<any>) => (\n                        <MenuToggle\n                          ref={toggleRef}\n                          id=\"toggle-id-12\"\n                          aria-label=\"Notification drawer actions\"\n                          variant=\"plain\"\n                          onClick={() => onToggle('toggle-id-12')}\n                          isExpanded={isActionsMenuOpen['toggle-id-12'] || false}\n                          icon={<RhUiEllipsisVerticalFillIcon />}\n                        />\n                      )}\n                    >\n                      <DropdownList>{notificationDrawerDropdownItems}</DropdownList>\n                    </Dropdown>\n                  </NotificationDrawerListItemHeader>\n                  <NotificationDrawerListItemBody timestamp=\"30 minutes ago\">\n                    This is a success notification description.\n                  </NotificationDrawerListItemBody>\n                </NotificationDrawerListItem>\n              </NotificationDrawerList>\n            </NotificationDrawerGroup>\n            <NotificationDrawerGroup\n              title=\"Third notification group\"\n              isExpanded={thirdDrawerGroupExpanded}\n              count={getNumberUnread('group-3')}\n              onExpand={toggleThirdDrawer}\n            >\n              <NotificationDrawerList isHidden={!thirdDrawerGroupExpanded}>\n                <EmptyState\n                  headingLevel=\"h2\"\n                  titleText=\"No alerts found\"\n                  icon={SearchIcon}\n                  variant={EmptyStateVariant.full}\n                >\n                  <EmptyStateBody>\n                    There are currently no critical alerts firing. There may be firing alerts of other severities or\n                    silenced critical alerts however.\n                  </EmptyStateBody>\n                  <EmptyStateFooter>\n                    <EmptyStateActions>\n                      <Button variant=\"link\">Action</Button>\n                    </EmptyStateActions>\n                  </EmptyStateFooter>\n                </EmptyState>\n              </NotificationDrawerList>\n            </NotificationDrawerGroup>\n          </NotificationDrawerGroupList>\n        )}\n        {!shouldShowNotifications && (\n          <EmptyState headingLevel=\"h2\" titleText=\"No alerts found\" icon={SearchIcon} variant={EmptyStateVariant.full}>\n            <EmptyStateBody>\n              There are currently no alerts. There may be silenced critical alerts however.\n            </EmptyStateBody>\n            <EmptyStateFooter>\n              <EmptyStateActions>\n                <Button variant=\"link\">Action</Button>\n              </EmptyStateActions>\n            </EmptyStateFooter>\n          </EmptyState>\n        )}\n      </NotificationDrawerBody>\n    </NotificationDrawer>\n  );\n\n  return (\n    <Fragment>\n      <Page\n        masthead={masthead}\n        sidebar={Sidebar}\n        isManagedSidebar\n        notificationDrawer={notificationDrawer}\n        isNotificationDrawerExpanded={isDrawerExpanded}\n        onNotificationDrawerExpand={(\n          event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | React.TransitionEvent<Element>\n        ) => focusDrawer(event)}\n        skipToContent={PageSkipToContent}\n        breadcrumb={PageBreadcrumb}\n        mainContainerId={pageId}\n      >\n        <PageSection aria-labelledby=\"main-title\">\n          <Content>\n            <h1 id=\"main-title\">Main title</h1>\n            <p>\n              Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />\n              of its relative line height of 1.5.\n            </p>\n          </Content>\n        </PageSection>\n        <PageSection aria-label=\"Panel section\">Panel section content</PageSection>\n      </Page>\n    </Fragment>\n  );\n};\n","title":"Grouped","lang":"ts","isFullscreen":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When using the NotificationDrawerGroupList and related components, the function that is passed in to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onNotificationDrawerExpand`}
+        </code>
+        {` prop on the Page component must also ensure the NotificationDrawer component only receives focus when it is initially opened. Otherwise any time a drawer group item is opened the NotificationDrawer component will receive focus, which would be unexpected behavior for users.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        {`Focus must be manually managed when the NotificationDrawer component is opened:`}
+        <ol {...{"className":"pf-v6-c-content--ol pf-m-editorial ws-ol "}}>
+          <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+            {`Create a React `}
+            <code {...{"className":"ws-code "}}>
+              {`ref`}
+            </code>
+            {` and pass it into the NotificationDrawer component's `}
+            <code {...{"className":"ws-code "}}>
+              {`ref`}
+            </code>
+            {` attribute`}
+          </li>
+          <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+            {`Pass in a function to the `}
+            <code {...{"className":"ws-code "}}>
+              {`onNotificationDrawerExpand`}
+            </code>
+            {` prop of the Page component that will place focus on the first interact-able element inside the NotificationDrawer component via the previously created `}
+            <code {...{"className":"ws-code "}}>
+              {`ref`}
+            </code>
+          </li>
+        </ol>
+      </li>
+    </ul>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Grouped"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsNotificationDrawerReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;