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

package/patternfly-docs/generated/components/popover/react.js

@@ -0,0 +1,390 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useRef, useState } from 'react';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
+const pageData = {
+  "id": "Popover",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/popover/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Popover/examples/Popover.md",
+  "relPath": "packages/react-core/src/components/Popover/examples/Popover.md",
+  "propComponents": [
+    {
+      "name": "Popover",
+      "description": "The main popover component. The following properties can also be passed into another component\nthat has a property specifically for passing in popover properties.",
+      "props": [
+        {
+          "name": "alertSeverityScreenReaderText",
+          "type": "string",
+          "description": "Text announced by screen reader when alert severity variant is set to indicate\nseverity level."
+        },
+        {
+          "name": "alertSeverityVariant",
+          "type": "'custom' | 'info' | 'warning' | 'success' | 'danger'",
+          "description": "Severity variants for an alert popover. This modifies the color of the header to\nmatch the severity."
+        },
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "The duration of the CSS fade transition animation.",
+          "defaultValue": "300"
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'",
+          "description": "The element to append the popover to. Defaults to \"inline\".",
+          "defaultValue": "() => document.body"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the popover, required when header is not present.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "bodyContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Body content of the popover. If you want to close the popover after an action within the\nbody content, you can use the isVisible prop for manual control, or you can provide a\nfunction which will receive a callback as an argument to hide the popover, i.e.\nbodyContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "ReactElement<any>",
+          "description": "The trigger reference element to which the popover is relatively placed to. If you cannot wrap\nthe element with the Popover, you can use the triggerRef prop instead.\nUsage: <Popover><Button>Reference</Button></Popover>"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the popover.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "closeBtnAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the close button.",
+          "defaultValue": "'Close'"
+        },
+        {
+          "name": "distance",
+          "type": "number",
+          "description": "Distance of the popover to its target. Defaults to 25.",
+          "defaultValue": "25"
+        },
+        {
+          "name": "elementToFocus",
+          "type": "HTMLElement | SVGElement | string",
+          "description": "The element to focus when the popover becomes visible. By default the first\nfocusable element will receive focus."
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "If true, tries to keep the popover in view by flipping it if necessary.\nIf the position is set to 'auto', this prop is ignored.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "flipBehavior",
+          "type": "| 'flip'\n| (\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left-start'\n    | 'left-end'\n    | 'right-start'\n    | 'right-end'\n  )[]",
+          "description": "The desired position to flip the popover to if the initial position is not possible.\nBy setting this prop to 'flip' it attempts to flip the popover to the opposite side if\nthere is no space.\nYou can also pass an array of positions that determines the flip order. It should contain\nthe initial position followed by alternative positions if that position is unavailable.\nExample: Initial position is 'top'. Button with popover is in the top right corner.\n'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it\nchecks if right is available. There's also no space to the right, so it finally shows the\npopover on the left.",
+          "defaultValue": "[\n  'top',\n  'bottom',\n  'left',\n  'right',\n  'top-start',\n  'top-end',\n  'bottom-start',\n  'bottom-end',\n  'left-start',\n  'left-end',\n  'right-start',\n  'right-end'\n]"
+        },
+        {
+          "name": "footerContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Footer content of the popover. If you want to close the popover after an action within the\nfooter content, you can use the isVisible prop for manual control, or you can provide a\nfunction which will receive a callback as an argument to hide the popover, i.e.\nfooterContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "defaultValue": "null"
+        },
+        {
+          "name": "hasAutoWidth",
+          "type": "boolean",
+          "description": "Removes fixed-width and allows width to be defined by contents.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Allows content to touch edges of popover container.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "headerComponent",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "Sets the heading level to use for the popover header. Defaults to h6.",
+          "defaultValue": "'h6'"
+        },
+        {
+          "name": "headerContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Simple header content to be placed within a title. If you want to close the popover after\nan action within the header content, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the\npopover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "defaultValue": "null"
+        },
+        {
+          "name": "headerIcon",
+          "type": "React.ReactNode",
+          "description": "Icon to be displayed in the popover header. *",
+          "defaultValue": "null"
+        },
+        {
+          "name": "hideOnOutsideClick",
+          "type": "boolean",
+          "description": "Hides the popover when a click occurs outside (only works if isVisible is not controlled\nby the user).",
+          "defaultValue": "true"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id used as part of the various popover elements (popover-${id}-header/body/footer)."
+        },
+        {
+          "name": "isVisible",
+          "type": "boolean",
+          "description": "True to show the popover programmatically. Used in conjunction with the shouldClose prop.\nBy default, the popover child element handles click events automatically. If you want to\ncontrol this programmatically, the popover will not auto-close if the close button is\nclicked, the escape key is used, or if a click occurs outside the popover. Instead, the\nconsumer is responsible for closing the popover themselves by adding a callback listener\nfor the shouldClose prop.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Maximum width of the popover (default 18.75rem).",
+          "defaultValue": "popoverMaxWidth && popoverMaxWidth.value"
+        },
+        {
+          "name": "minWidth",
+          "type": "string",
+          "description": "Minimum width of the popover (default 6.25rem).",
+          "defaultValue": "popoverMinWidth && popoverMinWidth.value"
+        },
+        {
+          "name": "onHidden",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has fully transitioned out.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onHide",
+          "type": "(event: MouseEvent | KeyboardEvent) => void",
+          "description": "Lifecycle function invoked when the popover begins to transition out.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onMount",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has been mounted to the DOM.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onShow",
+          "type": "(event: MouseEvent | KeyboardEvent) => void",
+          "description": "Lifecycle function invoked when the popover begins to transition in.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onShown",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has fully transitioned in.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "position",
+          "type": "| PopoverPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "Popover position. Note: With the enableFlip property set to true, it will change the\nposition if there is not enough space for the starting position. The behavior of where it\nflips to can be controlled through the flipBehavior property.",
+          "defaultValue": "'top'"
+        },
+        {
+          "name": "shouldClose",
+          "type": "(event: MouseEvent | KeyboardEvent, hideFunction?: () => void) => void",
+          "description": "Callback function that is only invoked when isVisible is also controlled. Called when the\npopover close button is clicked, the enter key was used on it, or the escape key is used.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "shouldOpen",
+          "type": "(event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void",
+          "description": "Callback function that is only invoked when isVisible is also controlled. Called when the\nenter key is used on the focused trigger.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "showClose",
+          "type": "boolean",
+          "description": "Flag indicating whether the close button should be shown.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "triggerAction",
+          "type": "'click' | 'hover'",
+          "description": "Sets an interaction to open popover, defaults to \"click\"",
+          "defaultValue": "'click'"
+        },
+        {
+          "name": "triggerRef",
+          "type": "HTMLElement | (() => HTMLElement) | React.RefObject<any>",
+          "description": "The trigger reference element to which the popover is relatively placed to. If you can wrap the\nelement with the popover, you can use the children prop instead, or both props together.\nWhen passed along with the trigger prop, the div element that wraps the trigger will be removed.\nUsage: <Popover triggerRef={() => document.getElementById('reference-element')} />"
+        },
+        {
+          "name": "withFocusTrap",
+          "type": "boolean",
+          "description": "Whether to trap focus in the popover."
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "The z-index of the popover.",
+          "defaultValue": "9999"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-popover"
+  ],
+  "examples": [
+    "Basic",
+    "Hoverable",
+    "Close popover from content (controlled)",
+    "Close popover from content (uncontrolled)",
+    "Without header/footer/close and no padding",
+    "Width auto",
+    "Popover react ref",
+    "Popover selector ref",
+    "Advanced",
+    "Popover with icon in the title",
+    "Alert popover",
+    "Custom focus"
+  ]
+};
+pageData.liveContext = {
+  useRef,
+  useState,
+  RhUiNotificationFillIcon,
+  RhUiInformationFillIcon,
+  RhUiCheckCircleFillIcon,
+  RhUiWarningFillIcon,
+  RhUiErrorFillIcon,
+  RhUiAttentionBellFillIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Popover, Button } from '@patternfly/react-core';\n\nexport const PopoverBasic: React.FunctionComponent = () => (\n  <div style={{ margin: '50px' }}>\n    <Popover\n      aria-label=\"Basic popover\"\n      headerContent={<div>Popover header</div>}\n      bodyContent={<div>Popovers are triggered by click rather than hover.</div>}\n      footerContent=\"Popover footer\"\n    >\n      <Button>Toggle popover</Button>\n    </Popover>\n  </div>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Hoverable': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Popover, Button } from '@patternfly/react-core';\n\nexport const PopoverHover: React.FunctionComponent = () => (\n  <div style={{ margin: '50px' }}>\n    <Popover\n      triggerAction=\"hover\"\n      aria-label=\"Hoverable popover\"\n      headerContent={<div>Popover header</div>}\n      bodyContent={<div>This popover opens on hover.</div>}\n      footerContent=\"Popover footer\"\n    >\n      <Button disabled>Hover to trigger popover</Button>\n    </Popover>\n  </div>\n);\n","title":"Hoverable","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Close popover from content (controlled)': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Popover, Button } from '@patternfly/react-core';\n\nexport const PopoverCloseControlled: React.FunctionComponent = () => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  return (\n    <div style={{ margin: '50px' }}>\n      <Popover\n        aria-label=\"Popover with button in the body that can close it\"\n        isVisible={isVisible}\n        shouldOpen={(_event, _fn) => setIsVisible(true)}\n        shouldClose={(_event, _fn) => setIsVisible(false)}\n        headerContent={<div>Popover header</div>}\n        bodyContent={\n          <div>\n            <div>A controlled popover can be closed by updating its isVisible state after some user interaction.</div>\n            <div>\n              <button onClick={() => setIsVisible(false)}>Close popover</button>\n            </div>\n          </div>\n        }\n        footerContent=\"Popover footer\"\n      >\n        <Button>Toggle popover</Button>\n      </Popover>\n    </div>\n  );\n};\n","title":"Close popover from content (controlled)","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Close popover from content (uncontrolled)': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Popover, Button } from '@patternfly/react-core';\n\nexport const PopoverCloseUncontrolled: React.FunctionComponent = () => (\n  <div style={{ margin: '50px' }}>\n    <Popover\n      aria-label=\"Uncontrolled popover with button in the body that can close it\"\n      headerContent={<div>Popover header</div>}\n      bodyContent={(hide) => (\n        <div>\n          <div>\n            All the content props (headerContent, bodyContent, footerContent) can take a function which the popover\n            component passes the hide function to which can be used to close the popover after some user interaction.\n          </div>\n          <div>\n            <button onClick={hide}>Close popover</button>\n          </div>\n        </div>\n      )}\n      footerContent=\"Popover footer\"\n    >\n      <Button>Toggle popover</Button>\n    </Popover>\n  </div>\n);\n","title":"Close popover from content (uncontrolled)","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Note: If you use the isVisible prop, either refer to the example above or if you want to use the hide callback from the content then be sure to keep isVisible in-sync.`}
+      </p>
+    </Example>,
+  'Without header/footer/close and no padding': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Popover, Button } from '@patternfly/react-core';\n\nexport const PopoverWithoutHeaderFooterCloseNoPadding: React.FunctionComponent = () => (\n  <div style={{ margin: '50px' }}>\n    <Popover\n      aria-label=\"Popover with no header, footer, close button, and padding\"\n      hasNoPadding\n      showClose={false}\n      bodyContent={() => (\n        <div>\n          This popover has no padding and is intended for use with content that has its own spacing and should touch the\n          edges of the popover container.\n        </div>\n      )}\n      withFocusTrap={false /* no focusable content in this example */}\n    >\n      <Button>Toggle popover</Button>\n    </Popover>\n  </div>\n);\n","title":"Without header/footer/close and no padding","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Width auto': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Popover, Button } from '@patternfly/react-core';\n\nexport const PopoverWidthAuto: React.FunctionComponent = () => (\n  <div style={{ margin: '50px' }}>\n    <Popover\n      aria-label=\"Popover with auto-width\"\n      hasAutoWidth\n      bodyContent={() => <div>Removes fixed-width and allows width to be defined by contents</div>}\n      appendTo={() => document.body}\n    >\n      <Button>Toggle popover</Button>\n    </Popover>\n  </div>\n);\n","title":"Width auto","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Here the popover goes over the navigation, so the prop `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`appendTo`}
+        </code>
+        {` is set to the documents body.`}
+      </p>
+    </Example>,
+  'Popover react ref': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef } from 'react';\nimport { Popover } from '@patternfly/react-core';\n\nexport const PopoverReactRef: React.FunctionComponent = () => {\n  const popoverRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div style={{ margin: '50px' }}>\n      <button ref={popoverRef}>Popover attached via react ref</button>\n      <Popover\n        aria-label=\"Popover with react reference example\"\n        headerContent={<div>Popover header</div>}\n        bodyContent={\n          <div>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.\n          </div>\n        }\n        footerContent=\"Popover footer\"\n        triggerRef={popoverRef}\n      />\n    </div>\n  );\n};\n","title":"Popover react ref","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Popover selector ref': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Popover } from '@patternfly/react-core';\n\nexport const PopoverSelectorRef: React.FunctionComponent = () => (\n  <div style={{ margin: '50px' }}>\n    <button id=\"popover-selector\">Popover attached via selector ref</button>\n    <Popover\n      aria-label=\"Popover with selector reference example\"\n      headerContent={<div>Popover header</div>}\n      bodyContent={\n        <div>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.\n        </div>\n      }\n      footerContent=\"Popover footer\"\n      triggerRef={() => document.getElementById('popover-selector') as HTMLButtonElement}\n    />\n  </div>\n);\n","title":"Popover selector ref","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Advanced': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Popover, PopoverPosition, Checkbox, Button } from '@patternfly/react-core';\n\nexport const PopoverAdvanced: React.FunctionComponent = () => {\n  const [position, setPosition] = useState(PopoverPosition.auto);\n  const [show, setShow] = useState(false);\n  const [keepInViewChecked, setKeepInViewChecked] = useState(true);\n\n  const handleKeepInViewChange = (checked: boolean) => {\n    setKeepInViewChecked(checked);\n  };\n\n  const handleProgrammaticChange = (checked: boolean) => {\n    setShow(checked);\n  };\n\n  const shouldClose = (_event, _fn) => {\n    setShow(false);\n  };\n\n  const shouldOpen = (_event, _fn) => {\n    setShow(true);\n  };\n\n  return (\n    <>\n      <div>\n        <span style={{ paddingRight: '10px' }}>Popover position</span>\n        <select\n          aria-label=\"Popover position\"\n          onChange={(event) => {\n            setPosition(event.target.value as PopoverPosition);\n          }}\n        >\n          {Object.values(PopoverPosition).map((position) => (\n            <option key={position} value={position}>\n              {position}\n            </option>\n          ))}\n        </select>\n        <Checkbox\n          label=\"Flip popover if the position falls outside the view\"\n          isChecked={keepInViewChecked}\n          onChange={(_event, checked) => handleKeepInViewChange(checked)}\n          aria-label=\"Keep in view\"\n          id=\"popover-advanced-check-1\"\n        />\n        <Checkbox\n          label=\"Toggle popover from outside\"\n          isChecked={show}\n          onChange={(_event, checked) => handleProgrammaticChange(checked)}\n          aria-label=\"Toggle popover from outside\"\n          id=\"popover-advanced-check-2\"\n        />\n      </div>\n\n      <div style={{ margin: '50px' }}>\n        <Popover\n          aria-label=\"Advanced popover usages example\"\n          position={position}\n          hideOnOutsideClick={false}\n          isVisible={show}\n          shouldClose={shouldClose}\n          shouldOpen={shouldOpen}\n          enableFlip={keepInViewChecked}\n          headerContent={<div>Popover header</div>}\n          bodyContent={\n            <div>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.\n            </div>\n          }\n          footerContent=\"Popover footer\"\n        >\n          <Button>Toggle popover</Button>\n        </Popover>\n      </div>\n    </>\n  );\n};\n","title":"Advanced","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Popover with icon in the title': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Popover, Button } from '@patternfly/react-core';\nimport RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';\n\nexport const PopoverWithIconInTheTitle: React.FunctionComponent = () => (\n  <div style={{ margin: '50px' }}>\n    <Popover\n      aria-label=\"Popover with icon in the title example\"\n      headerContent=\"Popover with icon\"\n      headerIcon={<RhUiAttentionBellFillIcon />}\n      bodyContent={<div>Popovers are triggered by click rather than hover.</div>}\n      footerContent=\"Popover footer\"\n      appendTo={() => document.body}\n    >\n      <Button>Toggle popover</Button>\n    </Popover>\n  </div>\n);\n","title":"Popover with icon in the title","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Here the popover goes over the navigation, so the prop `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`appendTo`}
+        </code>
+        {` is set to the documents body.`}
+      </p>
+    </Example>,
+  'Alert popover': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Popover, Button } from '@patternfly/react-core';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\nimport RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\n\nexport const AlertPopover: React.FunctionComponent = () => {\n  const [alertSeverityVariant, setAlertSeverityVariant] = useState('default');\n\n  const alertIcons = {\n    custom: <RhUiNotificationFillIcon />,\n    info: <RhUiInformationFillIcon />,\n    success: <RhUiCheckCircleFillIcon />,\n    warning: <RhUiWarningFillIcon />,\n    danger: <RhUiErrorFillIcon />\n  };\n\n  return (\n    <>\n      <div>\n        <span style={{ paddingRight: '10px' }}>Alert variant:</span>\n        <select aria-label=\"Popover alert type\" onChange={(event) => setAlertSeverityVariant(event.target.value)}>\n          <option value=\"custom\">custom</option>\n          <option value=\"info\">info</option>\n          <option value=\"success\">success</option>\n          <option value=\"warning\">warning</option>\n          <option value=\"danger\">danger</option>\n        </select>\n      </div>\n      <div style={{ margin: '50px' }}>\n        <Popover\n          aria-label=\"Alert popover\"\n          alertSeverityVariant={alertSeverityVariant as 'custom' | 'info' | 'warning' | 'success' | 'danger'}\n          headerContent=\"Default popover title\"\n          headerIcon={alertIcons[alertSeverityVariant]}\n          headerComponent=\"h1\"\n          bodyContent={<div>Popovers are triggered by click rather than hover.</div>}\n          footerContent=\"Popover footer\"\n          appendTo={() => document.body}\n        >\n          <Button>Toggle popover</Button>\n        </Popover>\n      </div>\n    </>\n  );\n};\n","title":"Alert popover","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Here the popover goes over the navigation, so the prop `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`appendTo`}
+        </code>
+        {` is set to the documents body.`}
+      </p>
+    </Example>,
+  'Custom focus': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Popover, Button } from '@patternfly/react-core';\n\nexport const PopoverCustomFocus: React.FunctionComponent = () => (\n  <Popover\n    elementToFocus=\"#popover-cancel-button\"\n    showClose={false}\n    aria-label=\"Popover with custom focus\"\n    headerContent={<div>Popover header</div>}\n    bodyContent={\n      <div>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit.{' '}\n        <Button\n          // Preventing default click behavior for example purposes only\n          onClick={(event: React.MouseEvent) => event.preventDefault()}\n          component=\"a\"\n          isInline\n          variant=\"link\"\n          href=\"#basic\"\n        >\n          View the basic example\n        </Button>\n      </div>\n    }\n    footerContent={(hide) => (\n      <Button onClick={hide} variant=\"secondary\" id=\"popover-cancel-button\">\n        Cancel\n      </Button>\n    )}\n  >\n    <Button>Toggle popover with custom focus</Button>\n  </Popover>\n);\n","title":"Custom focus","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`elementToFocus`}
+        </code>
+        {` property to customize which element inside the Popover receives focus when opened.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`By default, the `}
+      <code {...{"className":"ws-code "}}>
+        {`appendTo`}
+      </code>
+      {` prop of the popover will append to the document body in order to avoid the popover content not being fully visible. Another option is to increase the z-index of the element the popover is appended to to be higher than the z-index of the element that is hiding the popover.`}
+    </p>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Hoverable"])}
+    {React.createElement(pageData.examples["Close popover from content (controlled)"])}
+    {React.createElement(pageData.examples["Close popover from content (uncontrolled)"])}
+    {React.createElement(pageData.examples["Without header/footer/close and no padding"])}
+    {React.createElement(pageData.examples["Width auto"])}
+    {React.createElement(pageData.examples["Popover react ref"])}
+    {React.createElement(pageData.examples["Popover selector ref"])}
+    {React.createElement(pageData.examples["Advanced"])}
+    {React.createElement(pageData.examples["Popover with icon in the title"])}
+    {React.createElement(pageData.examples["Alert popover"])}
+    {React.createElement(pageData.examples["Custom focus"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsPopoverReactDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+const pageData = {
+  "id": "Progress",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/progress/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/ProgressDemo.md",
+  "relPath": "packages/react-core/src/demos/ProgressDemo.md",
+  "examples": [
+    "Basic",
+    "With only increasing progress"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  accessibilityStyles
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Progress, Button, Stack, StackItem } from '@patternfly/react-core';\nimport accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';\n\nexport const ProgressBasic: React.FunctionComponent = () => {\n  const [currentValue, setCurrentValue] = useState(0);\n\n  const onProgressUpdate = (nextValue) => {\n    setCurrentValue(nextValue);\n  };\n\n  return (\n    <Stack>\n      <StackItem>\n        <Button onClick={() => onProgressUpdate(currentValue - 10)} isDisabled={currentValue === 0}>\n          Decrease value\n        </Button>{' '}\n        <Button onClick={() => onProgressUpdate(currentValue + 10)} isDisabled={currentValue === 100}>\n          Increase value\n        </Button>\n        <br />\n        <br />\n      </StackItem>\n      <StackItem>\n        <div className={accessibilityStyles.screenReader} aria-live=\"polite\">\n          {`Progress value is ${currentValue}%.`}\n        </div>\n        <Progress value={currentValue} title=\"Title\" />\n      </StackItem>\n    </Stack>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With only increasing progress': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Progress, Button, Stack, StackItem } from '@patternfly/react-core';\n\nexport const ProgressWithOnlyIncreasing: React.FunctionComponent = () => {\n  const [currentValue, setCurrentValue] = useState(0);\n\n  const onProgressUpdate = (nextValue) => {\n    if (nextValue > currentValue) {\n      setCurrentValue(nextValue);\n    }\n  };\n\n  return (\n    <Stack>\n      <StackItem>\n        <Button onClick={() => onProgressUpdate(currentValue - 10)} isDisabled={currentValue === 0}>\n          Decrease value\n        </Button>{' '}\n        <Button onClick={() => onProgressUpdate(currentValue + 10)} isDisabled={currentValue === 100}>\n          Increase value\n        </Button>\n        <br />\n        <br />\n      </StackItem>\n      <StackItem>\n        <div className={accessibilityStyles.screenReader} aria-live=\"polite\">\n          {`Progress value is ${currentValue}%.`}\n        </div>\n        <Progress value={currentValue} title=\"Title\" />\n      </StackItem>\n    </Stack>\n  );\n};\n","title":"With only increasing progress","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Sometimes a progress bar should only show increases to progress state. In this case, before the next value is set it should be checked against the current progress. The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`Decrease progress`}
+        </code>
+        {` button attempts to set a lower progress value, simulating an update to a progress state that isn't desired, but won't change the progress state due to this check.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["With only increasing progress"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsProgressReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;