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

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

@@ -0,0 +1,598 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useRef, useState } from 'react';
+import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+const pageData = {
+  "id": "Drawer",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/drawer/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Drawer/examples/Drawer.md",
+  "relPath": "packages/react-core/src/components/Drawer/examples/Drawer.md",
+  "propComponents": [
+    {
+      "name": "Drawer",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered in the drawer panel"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Drawer.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Indicates if the drawer is expanded",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isInline",
+          "type": "boolean",
+          "description": "Indicates if the content element and panel element are displayed side by side.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isPill",
+          "type": "boolean",
+          "description": "Indicates if the drawer will have pill styles",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "isStatic",
+          "type": "boolean",
+          "description": "Indicates if the drawer will always show both content and panel.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onExpand",
+          "type": "(event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void",
+          "description": "Callback when drawer panel is expanded after waiting 250ms for animation to complete.",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "position",
+          "type": "'start' | 'end' | 'bottom' | 'left' | 'right'",
+          "description": "Position of the drawer panel. left and right are deprecated, use start and end instead.",
+          "defaultValue": "'end'"
+        }
+      ]
+    },
+    {
+      "name": "DrawerSection",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered in the drawer section."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the drawer section.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "colorVariant",
+          "type": "DrawerColorVariant | 'no-background' | 'default' | 'secondary'",
+          "description": "Color variant of the background of the drawer section.\nThe `no-background` value is deprecated; use the `isPlain` prop instead.",
+          "defaultValue": "DrawerColorVariant.default"
+        },
+        {
+          "name": "isPlain",
+          "type": "boolean",
+          "description": "Flag indicating that the drawer section should use plain styles.",
+          "defaultValue": "false",
+          "beta": true
+        }
+      ]
+    },
+    {
+      "name": "DrawerContent",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered in the drawer."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Drawer."
+        },
+        {
+          "name": "colorVariant",
+          "type": "DrawerContentColorVariant | 'default' | 'primary' | 'secondary'",
+          "description": "Color variant of the background of the drawer panel",
+          "defaultValue": "DrawerContentColorVariant.default"
+        },
+        {
+          "name": "panelContent",
+          "type": "React.ReactNode",
+          "description": "Content rendered in the drawer panel.",
+          "required": true
+        }
+      ]
+    },
+    {
+      "name": "DrawerContentBody",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered in the drawer"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Drawer.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "hasPadding",
+          "type": "boolean",
+          "description": "Indicates if there should be padding around the drawer content body",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "DrawerPanelContent",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered in the drawer panel."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the drawer."
+        },
+        {
+          "name": "colorVariant",
+          "type": "DrawerColorVariant | 'no-background' | 'default' | 'secondary'",
+          "description": "Color variant of the background of the drawer panel.\nThe `no-background`is deprecated; use the `isPlain` prop instead.",
+          "defaultValue": "DrawerColorVariant.default"
+        },
+        {
+          "name": "defaultSize",
+          "type": "string",
+          "description": "The starting size of a drawer."
+        },
+        {
+          "name": "focusTrap",
+          "type": "DrawerPanelFocusTrapObject",
+          "description": "Adds and customizes a focus trap on the drawer panel content."
+        },
+        {
+          "name": "hasNoBorder",
+          "type": "boolean",
+          "description": "Flag indicating that the drawer panel should not have a border.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hasNoGlass",
+          "type": "boolean",
+          "description": "Flag indicating that the drawer panel should disable glass styles. This prop is intended to work with isPill drawers.",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of the drawer panel"
+        },
+        {
+          "name": "increment",
+          "type": "number",
+          "description": "The increment amount for keyboard drawer resizing.",
+          "defaultValue": "5"
+        },
+        {
+          "name": "isGlass",
+          "type": "boolean",
+          "description": "Flag indicating that the drawer panel should use glass styles when in glass theme",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "isNoPlainOnGlass",
+          "type": "boolean",
+          "description": "Flag indicating that plain styles should be disabled when glass styles are used. This only applies when the drawer is static or inline.",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "isPlain",
+          "type": "boolean",
+          "description": "Flag indicating that the drawer panel should use plain styles. This only applies when the drawer is static or inline.",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "isResizable",
+          "type": "boolean",
+          "description": "Flag indicating that the drawer panel should be resizable.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "maxSize",
+          "type": "string",
+          "description": "The maximum size of a drawer."
+        },
+        {
+          "name": "minSize",
+          "type": "string",
+          "description": "The minimum size of a drawer."
+        },
+        {
+          "name": "onResize",
+          "type": "(event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void",
+          "description": "Callback for resize end."
+        },
+        {
+          "name": "resizeAriaLabel",
+          "type": "string",
+          "description": "Aria label for the resizable drawer splitter.",
+          "defaultValue": "'Resize'"
+        },
+        {
+          "name": "widths",
+          "type": "{\n  default?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n  lg?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n  xl?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n  '2xl'?: 'width_25' | 'width_33' | 'width_50' | 'width_66' | 'width_75' | 'width_100';\n}",
+          "description": "Width for drawer panel at various breakpoints. Overridden by resizable drawer minSize and defaultSize."
+        }
+      ]
+    },
+    {
+      "name": "DrawerHead",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered in the drawer head"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the drawer head.",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "DrawerActions",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Actions to be rendered in the panel head."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the drawer actions button.",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "DrawerCloseButton",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the drawer close button",
+          "defaultValue": "'Close drawer panel'"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the drawer close button outer <div>.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "description": "A callback for when the close button is clicked",
+          "defaultValue": "() => undefined as any"
+        }
+      ]
+    },
+    {
+      "name": "DrawerPanelDescription",
+      "description": "Provides a description within the drawer panel. This should typically follow the drawer head.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered in the drawer description",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the drawer description."
+        }
+      ]
+    },
+    {
+      "name": "DrawerPanelBody",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered in the drawer"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Drawer.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Indicates if there should be no padding around the drawer panel body",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "DrawerPanelFocusTrapObject",
+      "description": "",
+      "props": [
+        {
+          "name": "elementToFocusOnExpand",
+          "type": "HTMLElement | SVGElement | string",
+          "description": "The element to focus when the drawer panel content expands. By default the\nfirst focusable element will receive focus. If there are no focusable elements, the\npanel itself will receive focus."
+        },
+        {
+          "name": "enabled",
+          "type": "boolean",
+          "description": "Enables a focus trap on the drawer panel content. This will also automatically\nhandle focus management when the panel expands and when it collapses. Do not pass\nthis prop if the isStatic prop on the drawer component is true."
+        },
+        {
+          "name": "Unknown",
+          "type": "string",
+          "description": "One or more id's to use for the drawer panel content's accessible label."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-drawer"
+  ],
+  "examples": [
+    "Basic",
+    "Panel at end",
+    "Panel at start",
+    "Panel on bottom",
+    "Basic inline",
+    "Inline panel at end",
+    "Inline panel at start",
+    "Stacked content body elements",
+    "Modified content padding",
+    "Modified panel padding",
+    "Additional section above drawer content",
+    "Static drawer",
+    "Breakpoint",
+    "Resizable at end",
+    "Resizable at start",
+    "Resizable on bottom",
+    "Resizable on inline",
+    "Panel with secondary background",
+    "With focus trap",
+    "Pill",
+    "Pill inline"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useRef,
+  useState,
+  accessibility
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerPanelBody,\n  DrawerPanelDescription,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerBasic: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n      <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>\n      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Panel at end': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerPanelEnd: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} position=\"end\" onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Panel at end","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Panel at start': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerPanelStart: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} position=\"start\" onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Panel at start","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Panel on bottom': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerPanelBottom: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <div style={{ height: '400px' }}>\n        <Drawer isExpanded={isExpanded} position=\"bottom\" onExpand={onExpand}>\n          <DrawerContent panelContent={panelContent}>\n            <DrawerContentBody>{drawerContent}</DrawerContentBody>\n          </DrawerContent>\n        </Drawer>\n      </div>\n    </Fragment>\n  );\n};\n","title":"Panel on bottom","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Basic inline': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerBasicInline: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} isInline onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Basic inline","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Inline panel at end': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerInlinePanelEnd: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} isInline onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Inline panel at end","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Inline panel at start': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerInlinePanelStart: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} isInline position=\"start\" onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Inline panel at start","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Stacked content body elements': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerPanelBody,\n  Button,\n  Title\n} from '@patternfly/react-core';\n\nexport const DrawerStackedContentBodyElements: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLDivElement>(undefined);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <Title headingLevel=\"h3\" size=\"2xl\" tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header in a Title\n        </Title>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n      <DrawerPanelBody hasNoPadding>Drawer panel body with no padding</DrawerPanelBody>\n      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>\n    </DrawerPanelContent>\n  );\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>content-body</DrawerContentBody>\n          <DrawerContentBody hasPadding>content-body with padding</DrawerContentBody>\n          <DrawerContentBody>content-body</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Stacked content body elements","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Modified content padding': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerModifiedContentPadding: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody hasPadding>\n            <b>Drawer content padding.</b> {drawerContent}\n          </DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Modified content padding","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Modified panel padding': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerModifiedPanelPadding: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Modified panel padding","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Additional section above drawer content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerSection,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerAdditionalSectionAboveContent: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          drawer-panel\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} onExpand={onExpand}>\n        <DrawerSection>drawer-section</DrawerSection>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Additional section above drawer content","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Static drawer': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\nimport accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';\n\nexport const DrawerStatic: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button className={accessibility.hiddenOnMd} aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isStatic isExpanded={isExpanded} onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Static drawer","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        
+        <strong {...{"className":""}}>
+          {`Note:`}
+        </strong>
+        {` For mobile viewports, all drawer variants behave the same way. At the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`md`}
+        </code>
+        {` breakpoint, or where `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`.pf-m-static{-on-[lg, xl, 2xl]}`}
+        </code>
+        {` is applied, the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`static drawer`}
+        </code>
+        {` variant’s `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`close button`}
+        </code>
+        {` is automatically hidden because the drawer panel doesn’t close by design.`}
+      </p>
+    </Example>,
+  'Breakpoint': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerBreakpoint: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent widths={{ default: 'width_33' }}>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Breakpoint","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Resizable at end': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerResizableAtEnd: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const onResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, newWidth: number, id: string) => {\n    // eslint-disable-next-line no-console\n    console.log(`${id} has new width of: ${newWidth}`);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent isResizable onResize={onResize} id=\"end-resize-panel\" defaultSize={'500px'} minSize={'150px'}>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} onExpand={onExpand} position=\"end\">\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Resizable at end","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Resizable at start': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerResizableAtStart: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent isResizable defaultSize={'500px'} minSize={'200px'}>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} onExpand={onExpand} position=\"start\">\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Resizable at start","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Resizable on bottom': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button,\n  DrawerContent,\n  DrawerContentBody\n} from '@patternfly/react-core';\n\nexport const DrawerResizableOnBottom: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n  const panelContent = (\n    <DrawerPanelContent isResizable defaultSize={'200px'} minSize={'100px'}>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <div style={{ height: '400px' }}>\n        <Drawer isExpanded={isExpanded} onExpand={onExpand} position=\"bottom\">\n          <DrawerContent panelContent={panelContent}>\n            <DrawerContentBody>{drawerContent}</DrawerContentBody>\n          </DrawerContent>\n        </Drawer>\n      </div>\n    </Fragment>\n  );\n};\n","title":"Resizable on bottom","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Resizable on inline': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button,\n  DrawerContent,\n  DrawerContentBody\n} from '@patternfly/react-core';\n\nexport const DrawerResizableOnInline: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n  const panelContent = (\n    <DrawerPanelContent isResizable defaultSize={'500px'} minSize={'150px'}>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} onExpand={onExpand} isInline>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Resizable on inline","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Panel with secondary background': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Checkbox,\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerSection,\n  Button,\n  DrawerColorVariant,\n  DrawerContentColorVariant\n} from '@patternfly/react-core';\n\nexport const DrawerSecondaryBackground: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [panelSecondary, setPanelSecondary] = useState(true);\n  const [contentSecondary, setContentSecondary] = useState(false);\n  const [sectionSecondary, setSectionSecondary] = useState(false);\n\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const togglePanelSecondary = (checked: boolean) => {\n    setPanelSecondary(checked);\n  };\n\n  const toggleSectionSecondary = (checked: boolean) => {\n    setSectionSecondary(checked);\n  };\n\n  const toggleContentSecondary = (checked: boolean) => {\n    setContentSecondary(checked);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Checkbox\n        label=\"Secondary panel\"\n        isChecked={panelSecondary}\n        onChange={(_event, checked) => togglePanelSecondary(checked)}\n        aria-label=\"Secondary panel checkbox\"\n        id=\"toggle-secondary-panel\"\n        name=\"toggle-secondary-panel\"\n      />\n      <Checkbox\n        label=\"Secondary content\"\n        isChecked={contentSecondary}\n        onChange={(_event, checked) => toggleContentSecondary(checked)}\n        aria-label=\"Secondary content checkbox\"\n        id=\"toggle-secondary-content\"\n        name=\"toggle-secondary-content\"\n      />\n      <Checkbox\n        label=\"Secondary section\"\n        isChecked={sectionSecondary}\n        onChange={(_event, checked) => toggleSectionSecondary(checked)}\n        aria-label=\"Secondary section checkbox\"\n        id=\"toggle-secondary-section\"\n        name=\"toggle-secondary-section\"\n      />\n      <br />\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} onExpand={onExpand}>\n        <DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}>\n          drawer-section\n        </DrawerSection>\n        <DrawerContent\n          colorVariant={contentSecondary ? DrawerContentColorVariant.secondary : DrawerContentColorVariant.default}\n          panelContent={panelContent}\n        >\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Panel with secondary background","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With focus trap': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerFocusTrap: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  // An onKeyDown property must be passed to the Drawer component to handle closing\n  // the drawer panel and deactivating the focus trap via the Escape key.\n  const onEscape = (event: React.KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      setIsExpanded(false);\n    }\n  };\n\n  const panelContent = (\n    <DrawerPanelContent focusTrap={{ enabled: true }}>\n      <DrawerHead>\n        <span>Drawer panel header</span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer with focus trap\n      </Button>\n      <Drawer onKeyDown={onEscape} isExpanded={isExpanded}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"With focus trap","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When a `}
+        
+        <PatternflyThemeLink {...{"to":"/accessibility/develop#trapping-focus","className":""}}>
+          {`focus trap`}
+        </PatternflyThemeLink>
+        {` is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To enable and customize a focus trap on a drawer panel, apply the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`focusTrap`}
+        </code>
+        {` property to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<DrawerPanelContent>`}
+        </code>
+        {` component. Enabling a focus trap with `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`focusTrap.enabled`}
+        </code>
+        {` will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To customize which element receives focus when the drawer panel expands, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`focusTrap.elementToFocusOnExpand`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'Pill': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerBasicPill: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} isPill onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Pill","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Pill inline': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from '@patternfly/react-core';\n\nexport const DrawerBasicPill: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef<HTMLSpanElement>(null);\n\n  const onExpand = () => {\n    drawerRef.current && drawerRef.current.focus();\n  };\n\n  const onClick = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>\n          Drawer panel header\n        </span>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseClick} />\n        </DrawerActions>\n      </DrawerHead>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';\n\n  return (\n    <Fragment>\n      <Button aria-expanded={isExpanded} onClick={onClick}>\n        Toggle drawer\n      </Button>\n      <Drawer isExpanded={isExpanded} isPill isInline onExpand={onExpand}>\n        <DrawerContent panelContent={panelContent}>\n          <DrawerContentBody>{drawerContent}</DrawerContentBody>\n        </DrawerContent>\n      </Drawer>\n    </Fragment>\n  );\n};\n","title":"Pill inline","lang":"ts","className":""}}>
+      
+    </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["Panel at end"])}
+    {React.createElement(pageData.examples["Panel at start"])}
+    {React.createElement(pageData.examples["Panel on bottom"])}
+    {React.createElement(pageData.examples["Basic inline"])}
+    {React.createElement(pageData.examples["Inline panel at end"])}
+    {React.createElement(pageData.examples["Inline panel at start"])}
+    {React.createElement(pageData.examples["Stacked content body elements"])}
+    {React.createElement(pageData.examples["Modified content padding"])}
+    {React.createElement(pageData.examples["Modified panel padding"])}
+    {React.createElement(pageData.examples["Additional section above drawer content"])}
+    {React.createElement(pageData.examples["Static drawer"])}
+    {React.createElement(pageData.examples["Breakpoint"])}
+    {React.createElement(pageData.examples["Resizable at end"])}
+    {React.createElement(pageData.examples["Resizable at start"])}
+    {React.createElement(pageData.examples["Resizable on bottom"])}
+    {React.createElement(pageData.examples["Resizable on inline"])}
+    {React.createElement(pageData.examples["Panel with secondary background"])}
+    {React.createElement(pageData.examples["With focus trap"])}
+    {React.createElement(pageData.examples["Pill"])}
+    {React.createElement(pageData.examples["Pill inline"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDrawerReactDocs';
+Component.pageData = pageData;
+
+export default Component;