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

package/patternfly-docs/generated/components/number-input/react.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useReducer, useState } from 'react';
+const pageData = {
+  "id": "Number input",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/number-input/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/NumberInput/examples/NumberInput.md",
+  "relPath": "packages/react-core/src/components/NumberInput/examples/NumberInput.md",
+  "propComponents": [
+    {
+      "name": "NumberInput",
+      "description": "",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the number input"
+        },
+        {
+          "name": "inputAriaLabel",
+          "type": "string",
+          "description": "Aria label of the input",
+          "defaultValue": "'Input'"
+        },
+        {
+          "name": "inputName",
+          "type": "string",
+          "description": "Name of the input"
+        },
+        {
+          "name": "inputProps",
+          "type": "any",
+          "description": "Additional properties added to the text input"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Indicates the whole number input should be disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "description": "Maximum value of the number input, disabling the plus button when reached"
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "description": "Minimum value of the number input, disabling the minus button when reached"
+        },
+        {
+          "name": "minusBtnAriaLabel",
+          "type": "string",
+          "description": "Aria label of the minus button",
+          "defaultValue": "'Minus'"
+        },
+        {
+          "name": "minusBtnProps",
+          "type": "ButtonProps",
+          "description": "Additional properties added to the minus button"
+        },
+        {
+          "name": "onBlur",
+          "type": "(event?: any) => void",
+          "description": "Callback function when text input is blurred (focus leaves)"
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.FormEvent<HTMLInputElement>) => void",
+          "description": "Callback for the text input changing"
+        },
+        {
+          "name": "onMinus",
+          "type": "(event: React.MouseEvent, name?: string) => void",
+          "description": "Callback for the minus button",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "onPlus",
+          "type": "(event: React.MouseEvent, name?: string) => void",
+          "description": "Callback for the plus button",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "plusBtnAriaLabel",
+          "type": "string",
+          "description": "Aria label of the plus button",
+          "defaultValue": "'Plus'"
+        },
+        {
+          "name": "plusBtnProps",
+          "type": "ButtonProps",
+          "description": "Additional properties added to the plus button"
+        },
+        {
+          "name": "unit",
+          "type": "React.ReactNode",
+          "description": "Adds the given unit to the number input"
+        },
+        {
+          "name": "unitPosition",
+          "type": "'before' | 'after'",
+          "description": "Position of the number input unit in relation to the number input",
+          "defaultValue": "'after'"
+        },
+        {
+          "name": "validated",
+          "type": "'default' | 'error' | 'warning' | 'success' | ValidatedOptions",
+          "description": "Value to indicate if the input is modified to show that validation state",
+          "defaultValue": "ValidatedOptions.default"
+        },
+        {
+          "name": "value",
+          "type": "number | ''",
+          "description": "Value of the number input",
+          "defaultValue": "0"
+        },
+        {
+          "name": "widthChars",
+          "type": "number",
+          "description": "Sets the width of the number input to a number of characters"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-number-input"
+  ],
+  "examples": [
+    "Default",
+    "With unit",
+    "With unit and thresholds",
+    "Disabled",
+    "With status",
+    "Varying sizes",
+    "Custom increment/decrement",
+    "Custom increment/decrement and thresholds"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useReducer,
+  useState
+};
+pageData.examples = {
+  'Default': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { NumberInput } from '@patternfly/react-core';\n\nexport const NumberInputDefault: React.FunctionComponent = () => {\n  const [value, setValue] = useState<number | ''>(90);\n\n  const onMinus = () => {\n    const newValue = (value || 0) - 1;\n    setValue(newValue);\n  };\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>) => {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === '' ? value : +value);\n  };\n\n  const onPlus = () => {\n    const newValue = (value || 0) + 1;\n    setValue(newValue);\n  };\n\n  return (\n    <NumberInput\n      value={value}\n      onMinus={onMinus}\n      onChange={onChange}\n      onPlus={onPlus}\n      inputName=\"input\"\n      inputAriaLabel=\"number input\"\n      minusBtnAriaLabel=\"minus\"\n      plusBtnAriaLabel=\"plus\"\n    />\n  );\n};\n","title":"Default","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With unit': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { NumberInput } from '@patternfly/react-core';\n\nexport const NumberInputUnit: React.FunctionComponent = () => {\n  const [value1, setValue1] = useState<number | ''>(90);\n  const [value2, setValue2] = useState<number | ''>(Number((1.0).toFixed(2)));\n\n  const onMinus1 = () => setValue1((value1 || 0) - 1);\n  const onChange1 = (event: React.FormEvent<HTMLInputElement>) => {\n    const value = (event.target as HTMLInputElement).value;\n    setValue1(value === '' ? value : +value);\n  };\n  const onPlus1 = () => setValue1((value1 || 0) + 1);\n\n  const onMinus2 = () => {\n    const newValue = Number(((value2 || 0) - 0.01).toFixed(2));\n    setValue2(newValue);\n  };\n  const onChange2 = (event: React.FormEvent<HTMLInputElement>) => {\n    const value = (event.target as HTMLInputElement).value;\n    setValue2(value === '' ? value : +value);\n  };\n  const onPlus2 = () => {\n    const newValue = Number(((value2 || 0) + 0.01).toFixed(2));\n    setValue2(newValue);\n  };\n\n  return (\n    <Fragment>\n      <NumberInput\n        value={value1}\n        onMinus={onMinus1}\n        onChange={onChange1}\n        onPlus={onPlus1}\n        inputName=\"input 1\"\n        inputAriaLabel=\"number input 1\"\n        minusBtnAriaLabel=\"minus 1\"\n        plusBtnAriaLabel=\"plus 1\"\n        unit=\"%\"\n      />\n      <br />\n      <br />\n      <NumberInput\n        value={value2}\n        onMinus={onMinus2}\n        onChange={onChange2}\n        onPlus={onPlus2}\n        inputName=\"input 2\"\n        inputAriaLabel=\"number input 2\"\n        minusBtnAriaLabel=\"minus 0.01\"\n        plusBtnAriaLabel=\"plus 0.01\"\n        unit=\"$\"\n        unitPosition=\"before\"\n      />\n    </Fragment>\n  );\n};\n","title":"With unit","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With unit and thresholds': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { NumberInput } from '@patternfly/react-core';\n\nexport const NumberInputUnitThreshold: React.FunctionComponent = () => {\n  const [value, setValue] = useState<number | ''>(0);\n  const minValue = 0;\n  const maxValue = 10;\n\n  const normalizeBetween = (value, min, max) => {\n    if (min !== undefined && max !== undefined) {\n      return Math.max(Math.min(value, max), min);\n    } else if (value <= min) {\n      return min;\n    } else if (value >= max) {\n      return max;\n    }\n    return value;\n  };\n\n  const onMinus = () => {\n    const newValue = normalizeBetween((value as number) - 1, minValue, maxValue);\n    setValue(newValue);\n  };\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>) => {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === '' ? value : +value);\n  };\n\n  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const blurVal = +event.target.value;\n\n    if (blurVal < minValue) {\n      setValue(minValue);\n    } else if (blurVal > maxValue) {\n      setValue(maxValue);\n    }\n  };\n\n  const onPlus = () => {\n    const newValue = normalizeBetween((value as number) + 1, minValue, maxValue);\n    setValue(newValue);\n  };\n\n  return (\n    <Fragment>\n      With a minimum value of 0 and maximum value of 10\n      <br />\n      <NumberInput\n        value={value}\n        min={minValue}\n        max={maxValue}\n        onMinus={onMinus}\n        onChange={onChange}\n        onBlur={onBlur}\n        onPlus={onPlus}\n        inputName=\"input\"\n        inputAriaLabel=\"number input\"\n        minusBtnAriaLabel=\"minus\"\n        plusBtnAriaLabel=\"plus\"\n        unit=\"%\"\n      />\n    </Fragment>\n  );\n};\n","title":"With unit and thresholds","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To enable a user entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler.`}
+      </p>
+    </Example>,
+  'Disabled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { NumberInput } from '@patternfly/react-core';\n\nexport const NumberInputDisabled: React.FunctionComponent = () => {\n  const [value, setValue] = useState<number | ''>(100);\n  const minValue = 0;\n  const maxValue = 100;\n\n  const onMinus = () => {\n    const newValue = (value || 0) - 1;\n    setValue(newValue);\n  };\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>) => {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === '' ? value : +value);\n  };\n\n  const onPlus = () => {\n    const newValue = (value || 0) + 1;\n    setValue(newValue);\n  };\n\n  return (\n    <NumberInput\n      value={value}\n      min={minValue}\n      max={maxValue}\n      onMinus={onMinus}\n      onChange={onChange}\n      onPlus={onPlus}\n      inputName=\"input\"\n      inputAriaLabel=\"number input\"\n      minusBtnAriaLabel=\"minus\"\n      plusBtnAriaLabel=\"plus\"\n      unit=\"%\"\n      isDisabled\n    />\n  );\n};\n","title":"Disabled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With status': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useReducer, useState } from 'react';\nimport { NumberInput, ValidatedOptions } from '@patternfly/react-core';\n\nexport const NumberInputWithStatus: React.FunctionComponent = () => {\n  const max = 10;\n  const min = 0;\n\n  const [validated, setValidated] = useState<ValidatedOptions>(ValidatedOptions.success);\n  const [value, setValue] = useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5);\n\n  const onPlus = () => {\n    const newVal = (value || 0) + 1;\n    setValue(newVal);\n    validate(newVal);\n  };\n\n  const onMinus = () => {\n    const newVal = (value || 0) - 1;\n    setValue(newVal);\n    validate(newVal);\n  };\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>) => {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === '' ? value : +value);\n    validate(value);\n  };\n\n  const validate = (newVal) => {\n    const diff = Math.abs(5 - newVal);\n    if (diff > 3) {\n      setValidated(ValidatedOptions.error);\n    } else if (diff > 1) {\n      setValidated(ValidatedOptions.warning);\n    } else {\n      setValidated(ValidatedOptions.success);\n    }\n  };\n  return (\n    <>\n      In the following example, the validated status will update based on the value of the number input and how far from\n      the number 5 it is.\n      <br />\n      <NumberInput\n        validated={validated}\n        value={value}\n        min={0}\n        max={10}\n        onMinus={onMinus}\n        onPlus={onPlus}\n        onChange={onChange}\n        inputName=\"input\"\n        inputAriaLabel=\"number input\"\n        minusBtnAriaLabel=\"minus\"\n        plusBtnAriaLabel=\"plus\"\n      />\n    </>\n  );\n};\n","title":"With status","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Varying sizes': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { NumberInput } from '@patternfly/react-core';\n\nexport const NumberInputVaryingSizes: React.FunctionComponent = () => {\n  const [input1Value, setInput1Value] = useState<number | ''>(1);\n  const [input2Value, setInput2Value] = useState<number | ''>(1234567890);\n  const [input3Value, setInput3Value] = useState<number | ''>(5);\n  const [input4Value, setInput4Value] = useState<number | ''>(12345);\n\n  const onChange = (\n    event: React.FormEvent<HTMLInputElement>,\n    updateFunction: React.Dispatch<React.SetStateAction<number | ''>>\n  ) => {\n    const value = (event.target as HTMLInputElement).value;\n    updateFunction(value === '' ? value : +value);\n  };\n\n  const onMinus = (value: number | '', updateFunction: React.Dispatch<React.SetStateAction<number | ''>>) => {\n    updateFunction((value || 0) - 1);\n  };\n\n  const onPlus = (value: number | '', updateFunction: React.Dispatch<React.SetStateAction<number | ''>>) => {\n    updateFunction((value || 0) + 1);\n  };\n\n  return (\n    <Fragment>\n      <NumberInput\n        value={input1Value}\n        onMinus={() => onMinus(input1Value, setInput1Value)}\n        onChange={(event) => onChange(event, setInput1Value)}\n        onPlus={() => onPlus(input1Value, setInput1Value)}\n        inputName=\"input1\"\n        inputAriaLabel=\"number input 1\"\n        minusBtnAriaLabel=\"input 2 minus\"\n        plusBtnAriaLabel=\"input 2 plus\"\n        widthChars={1}\n      />\n      <br />\n      <br />\n      <NumberInput\n        value={input2Value}\n        onMinus={() => onMinus(input2Value, setInput2Value)}\n        onChange={(event) => onChange(event, setInput2Value)}\n        onPlus={() => onPlus(input2Value, setInput2Value)}\n        inputName=\"input2\"\n        inputAriaLabel=\"number input 2\"\n        minusBtnAriaLabel=\"input 2 minus\"\n        plusBtnAriaLabel=\"input 2 plus\"\n        widthChars={10}\n      />\n      <br />\n      <br />\n      <NumberInput\n        value={input3Value}\n        onMinus={() => onMinus(input3Value, setInput3Value)}\n        onChange={(event) => onChange(event, setInput3Value)}\n        onPlus={() => onPlus(input3Value, setInput3Value)}\n        inputName=\"input3\"\n        inputAriaLabel=\"number input 3\"\n        minusBtnAriaLabel=\"input 3 minus\"\n        plusBtnAriaLabel=\"input 3 plus\"\n        widthChars={5}\n      />\n      <br />\n      <br />\n      <NumberInput\n        value={input4Value}\n        onMinus={() => onMinus(input4Value, setInput4Value)}\n        onChange={(event) => onChange(event, setInput4Value)}\n        onPlus={() => onPlus(input4Value, setInput4Value)}\n        inputName=\"input4\"\n        inputAriaLabel=\"number input 4\"\n        minusBtnAriaLabel=\"input 4 minus\"\n        plusBtnAriaLabel=\"input 4 plus\"\n        widthChars={5}\n      />\n    </Fragment>\n  );\n};\n","title":"Varying sizes","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Custom increment/decrement': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { NumberInput } from '@patternfly/react-core';\n\nexport const NumberInputCustomStep: React.FunctionComponent = () => {\n  const [value, setValue] = useState<number | ''>(90);\n  const step = 3;\n\n  const stepper = (stepValue: number) => {\n    setValue((value || 0) + stepValue);\n  };\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>) => {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === '' ? value : +value);\n  };\n\n  return (\n    <NumberInput\n      value={value}\n      onMinus={() => stepper(-step)}\n      onChange={onChange}\n      onPlus={() => stepper(step)}\n      inputName=\"input\"\n      inputAriaLabel=\"number input\"\n      minusBtnAriaLabel=\"minus\"\n      plusBtnAriaLabel=\"plus\"\n    />\n  );\n};\n","title":"Custom increment/decrement","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Custom increment/decrement and thresholds': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { NumberInput } from '@patternfly/react-core';\n\nexport const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => {\n  const [value, setValue] = useState<number | ''>(90);\n  const minValue = 90;\n  const maxValue = 100;\n  const step = 3;\n\n  const normalizeBetween = (value, min, max) => {\n    if (min !== undefined && max !== undefined) {\n      return Math.max(Math.min(value, max), min);\n    } else if (value <= min) {\n      return min;\n    } else if (value >= max) {\n      return max;\n    }\n    return value;\n  };\n\n  const stepper = (stepValue: number) => {\n    setValue((value || 0) + stepValue);\n  };\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>) => {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === '' ? value : +value);\n  };\n\n  const onBlur = (event: React.FormEvent<HTMLInputElement>) => {\n    const target = event.target as HTMLInputElement;\n    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);\n    setValue(newValue);\n  };\n\n  return (\n    <NumberInput\n      value={value}\n      min={minValue}\n      max={maxValue}\n      onMinus={() => stepper(-step)}\n      onChange={onChange}\n      onBlur={onBlur}\n      onPlus={() => stepper(step)}\n      inputName=\"input\"\n      inputAriaLabel=\"number input\"\n      minusBtnAriaLabel=\"minus\"\n      plusBtnAriaLabel=\"plus\"\n    />\n  );\n};\n","title":"Custom increment/decrement and thresholds","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Default"])}
+    {React.createElement(pageData.examples["With unit"])}
+    {React.createElement(pageData.examples["With unit and thresholds"])}
+    {React.createElement(pageData.examples["Disabled"])}
+    {React.createElement(pageData.examples["With status"])}
+    {React.createElement(pageData.examples["Varying sizes"])}
+    {React.createElement(pageData.examples["Custom increment/decrement"])}
+    {React.createElement(pageData.examples["Custom increment/decrement and thresholds"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsNumberInputReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/overflow-menu/react.js

@@ -0,0 +1,274 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useRef, useState } from 'react';
+import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
+import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
+import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+const pageData = {
+  "id": "Overflow menu",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/overflow-menu/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md",
+  "relPath": "packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md",
+  "propComponents": [
+    {
+      "name": "OverflowMenu",
+      "description": "",
+      "props": [
+        {
+          "name": "breakpoint",
+          "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl'",
+          "description": "Indicates breakpoint at which to switch between expanded and collapsed states. The \"sm\" breakpoint does not apply to vertical overflow menus.",
+          "required": true
+        },
+        {
+          "name": "breakpointReference",
+          "type": "HTMLElement | (() => HTMLElement) | React.RefObject<any>",
+          "description": "A container reference to base the specified breakpoint on instead of the viewport width."
+        },
+        {
+          "name": "children",
+          "type": "any",
+          "description": "Any elements that can be rendered in the menu"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the OverflowMenu."
+        },
+        {
+          "name": "isVertical",
+          "type": "boolean",
+          "description": "Indicates the overflow menu orientation is vertical and should respond to height changes instead of width.",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "OverflowMenuContent",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "any",
+          "description": "Any elements that can be rendered in the menu"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the OverflowMenuContent"
+        },
+        {
+          "name": "isPersistent",
+          "type": "boolean",
+          "description": "Modifies the overflow menu content visibility"
+        }
+      ]
+    },
+    {
+      "name": "OverflowMenuControl",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "any",
+          "description": "Any elements that can be rendered in the menu"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the OverflowMenuControl"
+        },
+        {
+          "name": "hasAdditionalOptions",
+          "type": "boolean",
+          "description": "Triggers the overflow dropdown to persist at all viewport sizes"
+        }
+      ]
+    },
+    {
+      "name": "OverflowMenuDropdownItem",
+      "description": "",
+      "props": [
+        {
+          "name": "isShared",
+          "type": "boolean",
+          "description": "Indicates when a dropdown item shows and hides the corresponding list item",
+          "defaultValue": "false"
+        },
+        {
+          "name": "itemId",
+          "type": "string | number",
+          "description": "Identifies the component in the dropdown onSelect callback"
+        }
+      ]
+    },
+    {
+      "name": "OverflowMenuGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "any",
+          "description": "Any elements that can be rendered in the menu"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the OverflowMenuGroup"
+        },
+        {
+          "name": "groupType",
+          "type": "'button' | 'icon'",
+          "description": "Indicates a button or icon group"
+        },
+        {
+          "name": "isPersistent",
+          "type": "boolean",
+          "description": "Modifies the overflow menu group visibility",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "OverflowMenuItem",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "any",
+          "description": "Any elements that can be rendered in the menu"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the OverflowMenuItem"
+        },
+        {
+          "name": "isPersistent",
+          "type": "boolean",
+          "description": "Modifies the overflow menu item visibility",
+          "defaultValue": "false"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-overflow-menu"
+  ],
+  "examples": [
+    "Simple (responsive)",
+    "Vertical",
+    "Group types",
+    "Multiple groups",
+    "Persistent",
+    "Breakpoint on container width"
+  ],
+  "fullscreenExamples": [
+    "Breakpoint on container height"
+  ]
+};
+pageData.liveContext = {
+  useRef,
+  useState,
+  AlignLeftIcon,
+  AlignCenterIcon,
+  AlignRightIcon,
+  RhUiEllipsisVerticalFillIcon
+};
+pageData.examples = {
+  'Simple (responsive)': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  OverflowMenu,\n  OverflowMenuControl,\n  OverflowMenuContent,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  OverflowMenuDropdownItem,\n  MenuToggle,\n  Dropdown,\n  DropdownList\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const dropdownItems = [\n    <OverflowMenuDropdownItem itemId={0} key=\"item1\" isShared>\n      Item 1\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={1} key=\"item2\" isShared>\n      Item 2\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={2} key=\"item3\" isShared>\n      Item 3\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={3} key=\"item4\" isShared>\n      Item 4\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={5} key=\"item5\" isShared>\n      Item 5\n    </OverflowMenuDropdownItem>\n  ];\n\n  return (\n    <OverflowMenu breakpoint=\"lg\">\n      <OverflowMenuContent>\n        <OverflowMenuItem>Item</OverflowMenuItem>\n        <OverflowMenuItem>Item</OverflowMenuItem>\n        <OverflowMenuGroup>\n          <OverflowMenuItem>Item</OverflowMenuItem>\n          <OverflowMenuItem>Item</OverflowMenuItem>\n          <OverflowMenuItem>Item</OverflowMenuItem>\n        </OverflowMenuGroup>\n      </OverflowMenuContent>\n      <OverflowMenuControl>\n        <Dropdown\n          onSelect={onSelect}\n          toggle={(toggleRef) => (\n            <MenuToggle\n              ref={toggleRef}\n              aria-label=\"Simple example overflow menu\"\n              variant=\"plain\"\n              onClick={onToggle}\n              isExpanded={isOpen}\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n          isOpen={isOpen}\n          onOpenChange={(isOpen) => setIsOpen(isOpen)}\n        >\n          <DropdownList>{dropdownItems}</DropdownList>\n        </Dropdown>\n      </OverflowMenuControl>\n    </OverflowMenu>\n  );\n};\n","title":"Simple (responsive)","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Vertical': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  OverflowMenu,\n  OverflowMenuControl,\n  OverflowMenuContent,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  OverflowMenuDropdownItem,\n  MenuToggle,\n  Dropdown,\n  DropdownList\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const OverflowMenuSimpleVertical: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const dropdownItems = [\n    <OverflowMenuDropdownItem itemId={0} key=\"item1\" isShared>\n      Item 1\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={1} key=\"item2\" isShared>\n      Item 2\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={2} key=\"item3\" isShared>\n      Item 3\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={3} key=\"item4\" isShared>\n      Item 4\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={4} key=\"item5\" isShared>\n      Item 5\n    </OverflowMenuDropdownItem>\n  ];\n\n  return (\n    <OverflowMenu breakpoint=\"md\" isVertical>\n      <OverflowMenuContent>\n        <OverflowMenuItem>Item</OverflowMenuItem>\n        <OverflowMenuItem>Item</OverflowMenuItem>\n        <OverflowMenuGroup>\n          <OverflowMenuItem>Item</OverflowMenuItem>\n          <OverflowMenuItem>Item</OverflowMenuItem>\n          <OverflowMenuItem>Item</OverflowMenuItem>\n        </OverflowMenuGroup>\n      </OverflowMenuContent>\n      <OverflowMenuControl>\n        <Dropdown\n          onSelect={onSelect}\n          toggle={(toggleRef) => (\n            <MenuToggle\n              ref={toggleRef}\n              aria-label=\"Simple example overflow menu\"\n              variant=\"plain\"\n              onClick={onToggle}\n              isExpanded={isOpen}\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n          isOpen={isOpen}\n          onOpenChange={(isOpen) => setIsOpen(isOpen)}\n        >\n          <DropdownList>{dropdownItems}</DropdownList>\n        </Dropdown>\n      </OverflowMenuControl>\n    </OverflowMenu>\n  );\n};\n","title":"Vertical","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Passing `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isVertical`}
+        </code>
+        {` to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`OverflowMenu`}
+        </code>
+        {` will change its behavior to respond to breakpoints based on window height instead of width.`}
+      </p>
+    </Example>,
+  'Group types': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  OverflowMenu,\n  OverflowMenuControl,\n  OverflowMenuContent,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  OverflowMenuDropdownItem,\n  MenuToggle,\n  Button,\n  ButtonVariant,\n  Dropdown,\n  DropdownList\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';\nimport AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';\nimport AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';\n\nexport const OverflowMenuGroupTypes: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const dropdownItems = [\n    <OverflowMenuDropdownItem itemId={0} key=\"item1\" isShared>\n      Item 1\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={1} key=\"item2\" isShared>\n      Item 2\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={2} key=\"item3\" isShared>\n      Item 3\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={3} key=\"primary\" isShared>\n      Primary\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={4} key=\"secondary\" isShared>\n      Secondary\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={5} key=\"tertiary\" isShared>\n      Tertiary\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={6} key=\"action1\" isShared>\n      Action 1\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={7} key=\"action2\" isShared>\n      Action 2\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={8} key=\"action3\" isShared>\n      Action 3\n    </OverflowMenuDropdownItem>\n  ];\n\n  return (\n    <OverflowMenu breakpoint=\"lg\">\n      <OverflowMenuContent>\n        <OverflowMenuGroup>\n          <OverflowMenuItem>Item</OverflowMenuItem>\n          <OverflowMenuItem>Item</OverflowMenuItem>\n          <OverflowMenuItem>Item</OverflowMenuItem>\n        </OverflowMenuGroup>\n        <OverflowMenuGroup groupType=\"button\">\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.primary}>Primary</Button>\n          </OverflowMenuItem>\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.secondary}>Secondary</Button>\n          </OverflowMenuItem>\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.tertiary}>Tertiary</Button>\n          </OverflowMenuItem>\n        </OverflowMenuGroup>\n        <OverflowMenuGroup groupType=\"icon\">\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.plain} aria-label=\"Align left\" icon={<AlignLeftIcon />} />\n          </OverflowMenuItem>\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.plain} aria-label=\"Align center\" icon={<AlignCenterIcon />} />\n          </OverflowMenuItem>\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.plain} aria-label=\"Align right\" icon={<AlignRightIcon />} />\n          </OverflowMenuItem>\n        </OverflowMenuGroup>\n      </OverflowMenuContent>\n      <OverflowMenuControl>\n        <Dropdown\n          onSelect={onSelect}\n          toggle={(toggleRef) => (\n            <MenuToggle\n              ref={toggleRef}\n              aria-label=\"Group example overflow menu\"\n              variant=\"plain\"\n              onClick={onToggle}\n              isExpanded={isOpen}\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n          isOpen={isOpen}\n          onOpenChange={(isOpen) => setIsOpen(isOpen)}\n        >\n          <DropdownList>{dropdownItems}</DropdownList>\n        </Dropdown>\n      </OverflowMenuControl>\n    </OverflowMenu>\n  );\n};\n","title":"Group types","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Multiple groups': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  OverflowMenu,\n  OverflowMenuControl,\n  OverflowMenuContent,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  OverflowMenuDropdownItem,\n  MenuToggle,\n  Button,\n  ButtonVariant,\n  Dropdown,\n  DropdownList\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';\nimport AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';\nimport AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';\n\nexport const OverflowMenuMultiGroup: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const dropdownItems = [\n    <OverflowMenuDropdownItem itemId={0} key=\"1\" isShared>\n      Primary\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={1} key=\"2\" isShared>\n      Secondary\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={2} key=\"3\" isShared>\n      Tertiary\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={3} key=\"4\" isShared>\n      Action 4\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={4} key=\"5\" isShared>\n      Action 5\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={5} key=\"6\" isShared>\n      Action 6\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={6} key=\"7\">\n      Action 7\n    </OverflowMenuDropdownItem>\n  ];\n\n  return (\n    <OverflowMenu breakpoint=\"lg\">\n      <OverflowMenuContent>\n        <OverflowMenuGroup groupType=\"button\">\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.primary}>Primary</Button>\n          </OverflowMenuItem>\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.secondary}>Secondary</Button>\n          </OverflowMenuItem>\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.tertiary}>Tertiary</Button>\n          </OverflowMenuItem>\n        </OverflowMenuGroup>\n        <OverflowMenuGroup groupType=\"icon\">\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.plain} aria-label=\"Align left\" icon={<AlignLeftIcon />} />\n          </OverflowMenuItem>\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.plain} aria-label=\"Align center\" icon={<AlignCenterIcon />} />\n          </OverflowMenuItem>\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.plain} aria-label=\"Align right\" icon={<AlignRightIcon />} />\n          </OverflowMenuItem>\n        </OverflowMenuGroup>\n      </OverflowMenuContent>\n      <OverflowMenuControl hasAdditionalOptions>\n        <Dropdown\n          onSelect={onSelect}\n          toggle={(toggleRef) => (\n            <MenuToggle\n              ref={toggleRef}\n              aria-label=\"Multiple group example overflow menu\"\n              variant=\"plain\"\n              onClick={onToggle}\n              isExpanded={isOpen}\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n          isOpen={isOpen}\n          onOpenChange={(isOpen) => setIsOpen(isOpen)}\n        >\n          <DropdownList>{dropdownItems}</DropdownList>\n        </Dropdown>\n      </OverflowMenuControl>\n    </OverflowMenu>\n  );\n};\n","title":"Multiple groups","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Persistent': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  OverflowMenu,\n  OverflowMenuControl,\n  OverflowMenuContent,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  OverflowMenuDropdownItem,\n  MenuToggle,\n  Button,\n  ButtonVariant,\n  Dropdown,\n  DropdownList\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const OverflowMenuPersistent: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const dropdownItems = [\n    <OverflowMenuDropdownItem itemId={0} key=\"secondary\" isShared>\n      Secondary\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={1} key=\"tertiary\" isShared>\n      Tertiary\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={2} key=\"action\">\n      Action 4\n    </OverflowMenuDropdownItem>\n  ];\n\n  return (\n    <OverflowMenu breakpoint=\"lg\">\n      <OverflowMenuContent isPersistent>\n        <OverflowMenuGroup groupType=\"button\" isPersistent>\n          <OverflowMenuItem isPersistent>\n            <Button variant={ButtonVariant.primary}>Primary</Button>\n          </OverflowMenuItem>\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.secondary}>Secondary</Button>\n          </OverflowMenuItem>\n          <OverflowMenuItem>\n            <Button variant={ButtonVariant.tertiary}>Tertiary</Button>\n          </OverflowMenuItem>\n        </OverflowMenuGroup>\n      </OverflowMenuContent>\n      <OverflowMenuControl hasAdditionalOptions>\n        <Dropdown\n          onSelect={onSelect}\n          toggle={(toggleRef) => (\n            <MenuToggle\n              ref={toggleRef}\n              aria-label=\"Persistent example overflow menu\"\n              variant=\"plain\"\n              onClick={onToggle}\n              isExpanded={isOpen}\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n          isOpen={isOpen}\n          onOpenChange={(isOpen) => setIsOpen(isOpen)}\n        >\n          <DropdownList>{dropdownItems}</DropdownList>\n        </Dropdown>\n      </OverflowMenuControl>\n    </OverflowMenu>\n  );\n};\n","title":"Persistent","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Breakpoint on container width': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  OverflowMenu,\n  OverflowMenuControl,\n  OverflowMenuContent,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  OverflowMenuDropdownItem,\n  MenuToggle,\n  Slider,\n  SliderOnChangeEvent,\n  Dropdown,\n  DropdownList\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [containerWidth, setContainerWidth] = useState(100);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onChange = (_event: SliderOnChangeEvent, value: number) => {\n    setContainerWidth(value);\n  };\n\n  const containerStyles = {\n    width: `${containerWidth}%`,\n    padding: '1rem',\n    borderWidth: '2px',\n    borderStyle: 'dashed'\n  };\n\n  const dropdownItems = [\n    <OverflowMenuDropdownItem itemId={0} key=\"item1\" isShared>\n      Item 1\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={1} key=\"item2\" isShared>\n      Item 2\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={2} key=\"item3\" isShared>\n      Item 3\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={3} key=\"item4\" isShared>\n      Item 4\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={4} key=\"item5\" isShared>\n      Item 5\n    </OverflowMenuDropdownItem>\n  ];\n\n  return (\n    <>\n      <div style={{ width: '100%', maxWidth: '400px' }}>\n        <div>\n          <span id=\"overflowMenu-hasBreakpointOnContainer-slider-label\">Current container width</span>: {containerWidth}\n          %\n        </div>\n        <Slider\n          value={containerWidth}\n          onChange={onChange}\n          max={100}\n          min={20}\n          step={20}\n          showTicks\n          showBoundaries={false}\n          aria-labelledby=\"overflowMenu-hasBreakpointOnContainer-slider-label\"\n        />\n      </div>\n      <div ref={containerRef} id=\"breakpoint-reference-container\" style={containerStyles}>\n        <OverflowMenu breakpointReference={containerRef} breakpoint=\"sm\">\n          <OverflowMenuContent>\n            <OverflowMenuItem>Item 1</OverflowMenuItem>\n            <OverflowMenuItem>Item 2</OverflowMenuItem>\n            <OverflowMenuGroup>\n              <OverflowMenuItem>Item 3</OverflowMenuItem>\n              <OverflowMenuItem>Item 4</OverflowMenuItem>\n              <OverflowMenuItem>Item 5</OverflowMenuItem>\n            </OverflowMenuGroup>\n          </OverflowMenuContent>\n          <OverflowMenuControl>\n            <Dropdown\n              onSelect={onSelect}\n              toggle={(toggleRef) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  aria-label=\"Breakpoint on container example overflow menu\"\n                  variant=\"plain\"\n                  onClick={onToggle}\n                  isExpanded={isOpen}\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n              isOpen={isOpen}\n              onOpenChange={(isOpen) => setIsOpen(isOpen)}\n            >\n              <DropdownList>{dropdownItems}</DropdownList>\n            </Dropdown>\n          </OverflowMenuControl>\n        </OverflowMenu>\n      </div>\n    </>\n  );\n};\n","title":"Breakpoint on container width","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By passing in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`breakpointReference`}
+        </code>
+        {` property, the overflow menu's breakpoint will be relative to the width of the reference container rather than the viewport width.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can change the container width in this example by adjusting the slider. As the container width changes, the overflow menu will change between a horizontal menu and a vertical dropdown despite the viewport width not changing.`}
+      </p>
+    </Example>,
+  'Breakpoint on container height': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  OverflowMenu,\n  OverflowMenuControl,\n  OverflowMenuContent,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  OverflowMenuDropdownItem,\n  MenuToggle,\n  Slider,\n  SliderOnChangeEvent,\n  Dropdown,\n  DropdownList\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const OverflowMenuBreakpointOnContainerHeight: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [containerHeight, setContainerHeight] = useState(100);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const onToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onChange = (_event: SliderOnChangeEvent, value: number) => {\n    setContainerHeight(value);\n  };\n\n  const containerStyles = {\n    height: `${containerHeight}%`,\n    padding: '1rem',\n    borderWidth: '2px',\n    borderStyle: 'dashed'\n  };\n\n  const dropdownItems = [\n    <OverflowMenuDropdownItem itemId={0} key=\"item1\" isShared>\n      Item 1\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={1} key=\"item2\" isShared>\n      Item 2\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={2} key=\"item3\" isShared>\n      Item 3\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={3} key=\"item4\" isShared>\n      Item 4\n    </OverflowMenuDropdownItem>,\n    <OverflowMenuDropdownItem itemId={4} key=\"item5\" isShared>\n      Item 5\n    </OverflowMenuDropdownItem>\n  ];\n\n  return (\n    <>\n      <span id=\"overflowMenu-hasBreakpointOnContainer-height-slider-label\">Current container height</span>:{' '}\n      {containerHeight}%\n      <Slider\n        value={containerHeight}\n        onChange={onChange}\n        max={100}\n        min={20}\n        step={20}\n        showTicks\n        showBoundaries={false}\n        aria-labelledby=\"overflowMenu-hasBreakpointOnContainer-height-slider-label\"\n      />\n      <div style={{ height: '100%' }}>\n        <div ref={containerRef} id=\"height-breakpoint-reference-container\" style={containerStyles}>\n          <OverflowMenu breakpointReference={containerRef} breakpoint=\"md\" isVertical>\n            <OverflowMenuContent>\n              <OverflowMenuItem>Item 1</OverflowMenuItem>\n              <OverflowMenuItem>Item 2</OverflowMenuItem>\n              <OverflowMenuGroup>\n                <OverflowMenuItem>Item 3</OverflowMenuItem>\n                <OverflowMenuItem>Item 4</OverflowMenuItem>\n                <OverflowMenuItem>Item 5</OverflowMenuItem>\n              </OverflowMenuGroup>\n            </OverflowMenuContent>\n            <OverflowMenuControl>\n              <Dropdown\n                onSelect={onSelect}\n                toggle={(toggleRef) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    aria-label=\"Height breakpoint on container example overflow menu\"\n                    variant=\"plain\"\n                    onClick={onToggle}\n                    isExpanded={isOpen}\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n                isOpen={isOpen}\n                onOpenChange={(isOpen) => setIsOpen(isOpen)}\n              >\n                <DropdownList>{dropdownItems}</DropdownList>\n              </Dropdown>\n            </OverflowMenuControl>\n          </OverflowMenu>\n        </div>\n      </div>\n    </>\n  );\n};\n","title":"Breakpoint on container height","lang":"ts","isFullscreen":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By passing in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`breakpointReference`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isVertical`}
+        </code>
+        {` properties, the overflow menu's breakpoint will be determined relative to the height of the reference container rather than the window height.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Simple (responsive)"])}
+    {React.createElement(pageData.examples["Vertical"])}
+    {React.createElement(pageData.examples["Group types"])}
+    {React.createElement(pageData.examples["Multiple groups"])}
+    {React.createElement(pageData.examples["Persistent"])}
+    {React.createElement(pageData.examples["Breakpoint on container width"])}
+    {React.createElement(pageData.examples["Breakpoint on container height"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsOverflowMenuReactDocs';
+Component.pageData = pageData;
+
+export default Component;