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

package/patternfly-docs/generated/components/action-list/react.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState } from 'react';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-close-icon';
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+const pageData = {
+  "id": "Action list",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/action-list/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ActionList/examples/ActionList.md",
+  "relPath": "packages/react-core/src/components/ActionList/examples/ActionList.md",
+  "propComponents": [
+    {
+      "name": "ActionList",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Children of the action list"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the action list"
+        },
+        {
+          "name": "isIconList",
+          "type": "boolean",
+          "description": "Flag indicating the action list contains multiple icons and item padding should be removed"
+        },
+        {
+          "name": "isVertical",
+          "type": "boolean",
+          "description": "Whether the layout of children is vertical or horizontal.",
+          "defaultValue": "false",
+          "beta": true
+        }
+      ]
+    },
+    {
+      "name": "ActionListGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Children of the action list group"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the action list group"
+        },
+        {
+          "name": "isIconGroup",
+          "type": "boolean",
+          "description": "Flag indicating the action list group contains multiple icons and item padding should be removed"
+        }
+      ]
+    },
+    {
+      "name": "ActionListItem",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Children of the action list item"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the action list item"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-action-list"
+  ],
+  "examples": [
+    "Action list single group",
+    "Action list with icons",
+    "Action list multiple groups",
+    "Action list with cancel button",
+    "Vertical action list"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  RhMicronsCloseIcon,
+  CheckIcon,
+  RhUiEllipsisVerticalFillIcon
+};
+pageData.examples = {
+  'Action list single group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  ActionList,\n  ActionListGroup,\n  ActionListItem,\n  Button,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const ActionListSingleGroup: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined) => {\n    event?.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const dropdownItems = (\n    <>\n      <DropdownItem to=\"#\" key=\"link\">\n        Link\n      </DropdownItem>\n      <DropdownItem key=\"action\">Action</DropdownItem>\n      <DropdownItem to=\"#\" key=\"disabled link\" isDisabled>\n        Disabled Link\n      </DropdownItem>\n      <DropdownItem key=\"disabled action\" isDisabled>\n        Disabled Action\n      </DropdownItem>\n      <Divider component=\"li\" key=\"separator\" />\n      <DropdownItem to=\"#\" key=\"separated link\">\n        Separated Link\n      </DropdownItem>\n      <DropdownItem key=\"separated action\">Separated Action</DropdownItem>\n    </>\n  );\n  return (\n    <Fragment>\n      <ActionList>\n        <ActionListGroup>\n          <ActionListItem>\n            <Button variant=\"primary\" id=\"single-group-next-button\">\n              Next\n            </Button>\n          </ActionListItem>\n          <ActionListItem>\n            <Button variant=\"secondary\" id=\"single-group-back-button\">\n              Back\n            </Button>\n          </ActionListItem>\n        </ActionListGroup>\n      </ActionList>\n      <br />\n      With kebab\n      <ActionList>\n        <ActionListGroup>\n          <ActionListItem>\n            <Button variant=\"primary\" id=\"single-group-next-button2\">\n              Next\n            </Button>\n          </ActionListItem>\n          <ActionListItem>\n            <Button variant=\"secondary\" id=\"single-group-back-button2\">\n              Back\n            </Button>\n          </ActionListItem>\n          <ActionListItem>\n            <Dropdown\n              onSelect={onSelect}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onToggle}\n                  variant=\"plain\"\n                  isExpanded={isOpen}\n                  aria-label=\"Action list single group kebab\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n              isOpen={isOpen}\n              onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n            >\n              <DropdownList>{dropdownItems}</DropdownList>\n            </Dropdown>\n          </ActionListItem>\n        </ActionListGroup>\n      </ActionList>\n    </Fragment>\n  );\n};\n","title":"Action list single group","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Action list with icons': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\nimport CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';\n\nexport const ActionListWithIcons: React.FunctionComponent = () => (\n  <>\n    <h4>With list icons wrapper</h4>\n    <ActionList isIconList>\n      <ActionListItem>\n        <Button\n          variant=\"plain\"\n          id=\"with-icons-times-button\"\n          aria-label=\"times icon button\"\n          icon={<RhMicronsCloseIcon />}\n        />\n      </ActionListItem>\n      <ActionListItem>\n        <Button variant=\"plain\" id=\"with-icons-check-button\" aria-label=\"check icon button\" icon={<CheckIcon />} />\n      </ActionListItem>\n    </ActionList>\n    <br />\n    <h4>With group icons wrapper</h4>\n    <ActionList>\n      <ActionListGroup isIconGroup>\n        <ActionListItem>\n          <Button\n            variant=\"plain\"\n            id=\"with-icons-list-times-button\"\n            aria-label=\"times icon button\"\n            icon={<RhMicronsCloseIcon />}\n          />\n        </ActionListItem>\n        <ActionListItem>\n          <Button\n            variant=\"plain\"\n            id=\"with-icons-list-check-button\"\n            aria-label=\"check icon button\"\n            icon={<CheckIcon />}\n          />\n        </ActionListItem>\n      </ActionListGroup>\n      <ActionListGroup isIconGroup>\n        <ActionListItem>\n          <Button\n            variant=\"plain\"\n            id=\"with-icons-group-times-button\"\n            aria-label=\"times icon button\"\n            icon={<RhMicronsCloseIcon />}\n          />\n        </ActionListItem>\n        <ActionListItem>\n          <Button\n            variant=\"plain\"\n            id=\"with-icons-group-check-button\"\n            aria-label=\"check icon button\"\n            icon={<CheckIcon />}\n          />\n        </ActionListItem>\n      </ActionListGroup>\n    </ActionList>\n  </>\n);\n","title":"Action list with icons","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Action list multiple groups': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';\n\nexport const ActionListMultipleGroups: React.FunctionComponent = () => (\n  <ActionList>\n    <ActionListGroup>\n      <ActionListItem>\n        <Button variant=\"primary\" id=\"multi-group-next-button\">\n          Next\n        </Button>\n      </ActionListItem>\n      <ActionListItem>\n        <Button variant=\"secondary\" id=\"multi-group-back-button\">\n          Back\n        </Button>\n      </ActionListItem>\n    </ActionListGroup>\n    <ActionListGroup>\n      <ActionListItem>\n        <Button variant=\"primary\" id=\"multi-group-submit-button\">\n          Submit\n        </Button>\n      </ActionListItem>\n      <ActionListItem>\n        <Button variant=\"link\" id=\"multi-group-cancel-button\">\n          Cancel\n        </Button>\n      </ActionListItem>\n    </ActionListGroup>\n  </ActionList>\n);\n","title":"Action list multiple groups","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Action list with cancel button': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';\n\nexport const ActionListWithCancelButton: React.FunctionComponent = () => (\n  <Fragment>\n    In modals, forms, data lists\n    <ActionList>\n      <ActionListGroup>\n        <ActionListItem>\n          <Button variant=\"primary\" id=\"with-cancel-save-button\">\n            Save\n          </Button>\n        </ActionListItem>\n        <ActionListItem>\n          <Button variant=\"link\" id=\"with-cancel-cancel-button\">\n            Cancel\n          </Button>\n        </ActionListItem>\n      </ActionListGroup>\n    </ActionList>\n    <br />\n    In wizards\n    <ActionList>\n      <ActionListGroup>\n        <ActionListItem>\n          <Button variant=\"primary\" id=\"with-cancel-next-button\">\n            Next\n          </Button>\n        </ActionListItem>\n        <ActionListItem>\n          <Button variant=\"secondary\" id=\"with-cancel-back-button\">\n            Back\n          </Button>\n        </ActionListItem>\n      </ActionListGroup>\n      <ActionListGroup>\n        <ActionListItem>\n          <Button variant=\"link\" id=\"with-cancel-cancel-button2\">\n            Cancel\n          </Button>\n        </ActionListItem>\n      </ActionListGroup>\n    </ActionList>\n  </Fragment>\n);\n","title":"Action list with cancel button","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Vertical action list': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';\nimport CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nexport const ActionListVertical: React.FunctionComponent = () => (\n  <>\n    <h4>Multiple groups</h4>\n    <ActionList isVertical>\n      <ActionListGroup>\n        <ActionListItem>\n          <Button>Next</Button>\n        </ActionListItem>\n        <ActionListItem>\n          <Button variant=\"secondary\">Back</Button>\n        </ActionListItem>\n      </ActionListGroup>\n      <ActionListGroup>\n        <ActionListItem>\n          <Button>Submit</Button>\n        </ActionListItem>\n        <ActionListItem>\n          <Button variant=\"link\">Cancel</Button>\n        </ActionListItem>\n      </ActionListGroup>\n    </ActionList>\n    <h4>Icons, in two groups</h4>\n    <ActionList isVertical>\n      <ActionListGroup>\n        <ActionListItem>\n          <Button aria-label=\"Close vertical action list group 1\" variant=\"plain\" icon={<RhMicronsCloseIcon />} />\n        </ActionListItem>\n        <ActionListItem>\n          <Button aria-label=\"Toggle vertical action list example group 1\" variant=\"plain\" icon={<CheckIcon />} />\n        </ActionListItem>\n      </ActionListGroup>\n      <ActionListGroup>\n        <ActionListItem>\n          <Button aria-label=\"Close vertical action list group 2\" variant=\"plain\" icon={<RhMicronsCloseIcon />} />\n        </ActionListItem>\n        <ActionListItem>\n          <Button aria-label=\"Toggle vertical action list example group 2\" variant=\"plain\" icon={<CheckIcon />} />\n        </ActionListItem>\n      </ActionListGroup>\n    </ActionList>\n  </>\n);\n","title":"Vertical action list","lang":"ts","isBeta":true,"className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Action list single group"])}
+    {React.createElement(pageData.examples["Action list with icons"])}
+    {React.createElement(pageData.examples["Action list multiple groups"])}
+    {React.createElement(pageData.examples["Action list with cancel button"])}
+    {React.createElement(pageData.examples["Vertical action list"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsActionListReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/alert/react-demos.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useEffect, useState } from 'react';
+import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
+import srcImportalertgrouptoastwithnotificationdrawer from './react-demos/alert-group-toast-with-notification-drawer.png';
+const pageData = {
+  "id": "Alert",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/alert/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/AlertGroup.md",
+  "relPath": "packages/react-core/src/demos/AlertGroup.md",
+  "fullscreenExamples": [
+    "Alert group toast with notification drawer"
+  ]
+};
+pageData.liveContext = {
+  useEffect,
+  useState,
+  SearchIcon,
+  RhUiEllipsisVerticalFillIcon,
+  DashboardWrapper,
+  DashboardHeader
+};
+pageData.examples = {
+  'Alert group toast with notification drawer': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportalertgrouptoastwithnotificationdrawer} {...{"code":"import { useEffect, useState } from 'react';\nimport {\n  Button,\n  EmptyState,\n  EmptyStateBody,\n  NotificationBadge,\n  NotificationBadgeVariant,\n  NotificationDrawer,\n  NotificationDrawerBody,\n  NotificationDrawerHeader,\n  NotificationDrawerList,\n  NotificationDrawerListItem,\n  NotificationDrawerListItemBody,\n  NotificationDrawerListItemHeader,\n  PageSection,\n  Content,\n  EmptyStateVariant,\n  NumberInput,\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  ToolbarItem,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\n\ninterface NotificationProps {\n  title: string;\n  srTitle: string;\n  variant: 'custom' | 'success' | 'danger' | 'warning' | 'info';\n  key: React.Key;\n  timestamp: string;\n  description: string;\n  isNotificationRead: boolean;\n}\n\nexport const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = () => {\n  const maxDisplayedAlerts = 3;\n  const minAlerts = 0;\n  const maxAlerts = 100;\n  const alertTimeout = 8000;\n\n  const [isDrawerExpanded, setDrawerExpanded] = useState(false);\n  const [openDropdownKey, setOpenDropdownKey] = useState<React.Key | null>(null);\n  const [overflowMessage, setOverflowMessage] = useState<string>('');\n  const [maxDisplayed, setMaxDisplayed] = useState(maxDisplayedAlerts);\n  const [alerts, setAlerts] = useState<React.ReactElement<AlertProps>[]>([]);\n  const [notifications, setNotifications] = useState<NotificationProps[]>([]);\n\n  useEffect(() => {\n    setOverflowMessage(buildOverflowMessage());\n  }, [maxDisplayed, notifications, alerts]);\n\n  const addNewNotification = (variant: NotificationProps['variant']) => {\n    const variantFormatted = variant.charAt(0).toUpperCase() + variant.slice(1);\n    const title = variantFormatted + ' alert notification';\n    const srTitle = variantFormatted + ' alert';\n    const description = variantFormatted + ' alert notification description';\n    const key = getUniqueId();\n    const timestamp = getTimeCreated();\n\n    setNotifications((prevNotifications) => [\n      { title, srTitle, variant, key, timestamp, description, isNotificationRead: false },\n      ...prevNotifications\n    ]);\n\n    if (!isDrawerExpanded) {\n      setAlerts((prevAlerts) => [\n        <Alert\n          variant={variant}\n          title={title}\n          timeout={alertTimeout}\n          onTimeout={() => removeAlert(key)}\n          isLiveRegion\n          actionClose={\n            <AlertActionCloseButton title={title} variantLabel={`${variant} alert`} onClose={() => removeAlert(key)} />\n          }\n          key={key}\n          id={key.toString()}\n        >\n          <p>{description}</p>\n        </Alert>,\n        ...prevAlerts\n      ]);\n    }\n  };\n\n  const removeNotification = (key: React.Key) => {\n    setNotifications((prevNotifications) => prevNotifications.filter((notification) => notification.key !== key));\n  };\n\n  const removeAllNotifications = () => {\n    setNotifications([]);\n  };\n\n  const isNotificationRead = (key: React.Key) =>\n    notifications.find((notification) => notification.key === key)?.isNotificationRead;\n\n  const markNotificationRead = (key: React.Key) => {\n    setNotifications((prevNotifications) =>\n      prevNotifications.map((notification) =>\n        notification.key === key ? { ...notification, isNotificationRead: true } : notification\n      )\n    );\n  };\n\n  const markAllNotificationsRead = () => {\n    setNotifications((prevNotifications) =>\n      prevNotifications.map((notification) => ({ ...notification, isNotificationRead: true }))\n    );\n  };\n\n  const getUnreadNotificationsNumber = () =>\n    notifications.filter((notification) => notification.isNotificationRead === false).length;\n\n  const containsUnreadAlertNotification = () =>\n    notifications.filter(\n      (notification) => notification.isNotificationRead === false && notification.variant === 'danger'\n    ).length > 0;\n\n  const getNotificationBadgeVariant = () => {\n    if (getUnreadNotificationsNumber() === 0) {\n      return NotificationBadgeVariant.read;\n    }\n    if (containsUnreadAlertNotification()) {\n      return NotificationBadgeVariant.attention;\n    }\n    return NotificationBadgeVariant.unread;\n  };\n\n  const onNotificationBadgeClick = () => {\n    removeAllAlerts();\n    setDrawerExpanded(!isDrawerExpanded);\n  };\n\n  const onDropdownToggle = (id: React.Key) => {\n    if (id && openDropdownKey !== id) {\n      setOpenDropdownKey(id);\n      return;\n    }\n    setOpenDropdownKey(null);\n  };\n\n  const onDropdownSelect = () => {\n    setOpenDropdownKey(null);\n  };\n\n  const buildOverflowMessage = () => {\n    const overflow = alerts.length - maxDisplayed;\n    if (overflow > 0 && maxDisplayed > 0) {\n      return `View ${overflow} more notification(s) in notification drawer`;\n    }\n    return '';\n  };\n\n  const getUniqueId = () => new Date().getTime();\n\n  const getTimeCreated = () => {\n    const dateCreated = new Date();\n    return (\n      dateCreated.toDateString() +\n      ' at ' +\n      ('00' + dateCreated.getHours().toString()).slice(-2) +\n      ':' +\n      ('00' + dateCreated.getMinutes().toString()).slice(-2)\n    );\n  };\n\n  const removeAlert = (key: React.Key) => {\n    setAlerts((prevAlerts) => prevAlerts.filter((alert) => alert.props.id !== key.toString()));\n  };\n\n  const removeAllAlerts = () => {\n    setAlerts([]);\n  };\n\n  const onAlertGroupOverflowClick = () => {\n    removeAllAlerts();\n    setDrawerExpanded(true);\n  };\n\n  const onMaxDisplayedAlertsMinus = () => {\n    setMaxDisplayed(normalizeAlertsNumber(maxDisplayed - 1));\n  };\n\n  const onMaxDisplayedAlertsChange = (event: any) => {\n    setMaxDisplayed(normalizeAlertsNumber(Number(event.target.value)));\n  };\n\n  const onMaxDisplayedAlertsPlus = () => {\n    setMaxDisplayed(normalizeAlertsNumber(maxDisplayed + 1));\n  };\n\n  const normalizeAlertsNumber = (value: number) => Math.max(Math.min(value, maxAlerts), minAlerts);\n\n  const alertButtonStyle = { marginRight: '8px', marginTop: '8px' };\n\n  const notificationBadge = (\n    <ToolbarItem>\n      <NotificationBadge\n        variant={getNotificationBadgeVariant()}\n        onClick={onNotificationBadgeClick}\n        aria-label=\"Notifications\"\n      ></NotificationBadge>\n    </ToolbarItem>\n  );\n\n  const notificationDrawerActions = (\n    <>\n      <DropdownItem key=\"markAllRead\" onClick={markAllNotificationsRead}>\n        Mark all read\n      </DropdownItem>\n      <DropdownItem key=\"clearAll\" onClick={removeAllNotifications}>\n        Clear all\n      </DropdownItem>\n    </>\n  );\n  const notificationDrawerDropdownItems = (key: React.Key) => [\n    <DropdownItem key={`markRead-${key}`} onClick={() => markNotificationRead(key)}>\n      Mark as read\n    </DropdownItem>,\n    <DropdownItem key={`clear-${key}`} onClick={() => removeNotification(key)}>\n      Clear\n    </DropdownItem>\n  ];\n\n  const notificationDrawer = (\n    <NotificationDrawer>\n      <NotificationDrawerHeader count={getUnreadNotificationsNumber()} onClose={(_event) => setDrawerExpanded(false)}>\n        <Dropdown\n          id=\"notification-drawer-0\"\n          isOpen={openDropdownKey === 'dropdown-toggle-id-0'}\n          onSelect={onDropdownSelect}\n          popperProps={{ position: 'right' }}\n          onOpenChange={(isOpen: boolean) => !isOpen && setOpenDropdownKey(null)}\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              ref={toggleRef}\n              isExpanded={openDropdownKey === 'dropdown-toggle-id-0'}\n              variant=\"plain\"\n              onClick={() => onDropdownToggle('dropdown-toggle-id-0')}\n              aria-label=\"Notification drawer actions\"\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n        >\n          <DropdownList>{notificationDrawerActions}</DropdownList>\n        </Dropdown>\n      </NotificationDrawerHeader>\n      <NotificationDrawerBody>\n        {notifications.length !== 0 && (\n          <NotificationDrawerList>\n            {notifications.map(({ key, variant, title, srTitle, description, timestamp }, index) => (\n              <NotificationDrawerListItem\n                key={key}\n                variant={variant}\n                isRead={isNotificationRead(key)}\n                onClick={() => markNotificationRead(key)}\n              >\n                <NotificationDrawerListItemHeader variant={variant} title={title} srTitle={srTitle}>\n                  <Dropdown\n                    id={key.toString()}\n                    isOpen={openDropdownKey === key}\n                    onSelect={onDropdownSelect}\n                    popperProps={{ position: 'right' }}\n                    onOpenChange={(isOpen: boolean) => !isOpen && setOpenDropdownKey(null)}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        isExpanded={openDropdownKey === key}\n                        variant=\"plain\"\n                        onClick={() => onDropdownToggle(key)}\n                        aria-label={`Notification ${index + 1} actions`}\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>{notificationDrawerDropdownItems(key)}</DropdownList>\n                  </Dropdown>\n                </NotificationDrawerListItemHeader>\n                <NotificationDrawerListItemBody timestamp={timestamp}> {description} </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n            ))}\n          </NotificationDrawerList>\n        )}\n        {notifications.length === 0 && (\n          <EmptyState\n            headingLevel=\"h2\"\n            titleText=\"No notifications found\"\n            icon={SearchIcon}\n            variant={EmptyStateVariant.full}\n          >\n            <EmptyStateBody>There are currently no notifications.</EmptyStateBody>\n          </EmptyState>\n        )}\n      </NotificationDrawerBody>\n    </NotificationDrawer>\n  );\n\n  return (\n    <DashboardWrapper\n      masthead={<DashboardHeader notificationBadge={notificationBadge} />}\n      mainContainerId=\"main-content-page-layout-default-nav\"\n      notificationDrawer={notificationDrawer}\n      isNotificationDrawerExpanded={isDrawerExpanded}\n    >\n      <PageSection aria-labelledby=\"alert-group-title\">\n        <Content>\n          <h1 id=\"alert-group-title\">Alert group with notification drawer demo</h1>\n          <p>\n            New alerts can be added with the following buttons. Each alert has a timeout of 7 seconds, however, even\n            after the timeout expires, all alerts are still visible in the notification drawer. By default, only 3\n            alerts are displayed. The rest can be accessed in the notification drawer after clicking on the bell icon in\n            the header or by clicking on the overflow message.\n          </p>\n        </Content>\n      </PageSection>\n\n      <PageSection aria-label=\"Alert Buttons\">\n        <Button variant=\"secondary\" onClick={() => addNewNotification('success')} style={alertButtonStyle}>\n          Add toast success alert\n        </Button>\n        <Button variant=\"secondary\" onClick={() => addNewNotification('danger')} style={alertButtonStyle}>\n          Add toast danger alert\n        </Button>\n        <Button variant=\"secondary\" onClick={() => addNewNotification('info')} style={alertButtonStyle}>\n          Add toast info alert\n        </Button>\n        <br />\n        <br />\n        <Button variant=\"secondary\" onClick={() => addNewNotification('warning')} style={alertButtonStyle}>\n          Add toast warning alert\n        </Button>\n        <Button variant=\"secondary\" onClick={() => addNewNotification('custom')} style={alertButtonStyle}>\n          Add toast custom alert\n        </Button>\n      </PageSection>\n\n      <PageSection aria-labelledby=\"max-displayed-alerts-title\">\n        <Content>\n          <br />\n          <h2 id=\"max-displayed-alerts-title\">Max displayed alerts</h2>\n          <p>Adjust the maximum number of displayed alerts.</p>\n        </Content>\n        <NumberInput\n          value={maxDisplayed}\n          min={minAlerts}\n          max={maxAlerts}\n          onMinus={onMaxDisplayedAlertsMinus}\n          onChange={onMaxDisplayedAlertsChange}\n          onPlus={onMaxDisplayedAlertsPlus}\n          inputName=\"input\"\n          inputAriaLabel=\"max displayed alerts number input\"\n          minusBtnAriaLabel=\"minus\"\n          plusBtnAriaLabel=\"plus\"\n          style={{ margin: '12px 0' }}\n        />\n      </PageSection>\n      <PageSection component=\"div\">\n        <AlertGroup\n          hasAnimations\n          isToast\n          isLiveRegion\n          onOverflowClick={onAlertGroupOverflowClick}\n          overflowMessage={overflowMessage}\n        >\n          {alerts.slice(0, maxDisplayed)}\n        </AlertGroup>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Alert group toast with notification drawer","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`This demonstrates how you can assemble a full page view including the use of alert group toast notifications with timeout that are also displayed inside the notification drawer.`}
+    </p>
+    {React.createElement(pageData.examples["Alert group toast with notification drawer"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsAlertReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;