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

package/patternfly-docs/generated/components/menus/dropdown/react.js

@@ -0,0 +1,998 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState, useRef } from 'react';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+const pageData = {
+  "id": "Dropdown",
+  "section": "components",
+  "subsection": "menus",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/menus/dropdown/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Dropdown/examples/Dropdown.md",
+  "relPath": "packages/react-core/src/components/Dropdown/examples/Dropdown.md",
+  "propComponents": [
+    {
+      "name": "Dropdown",
+      "description": "See the Menu documentation for additional props that may be passed.",
+      "props": [
+        {
+          "name": "activeItemId",
+          "type": "string | number",
+          "description": "itemId of the currently active item. You can also specify isActive on the MenuItem."
+        },
+        {
+          "name": "activeMenu",
+          "type": "string",
+          "description": "ID of the currently active menu for the drilldown variant"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of the Menu"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Menu"
+        },
+        {
+          "name": "containerComponent",
+          "type": "React.ReactNode",
+          "description": "Sets the base component to render for the container. Defaults to <span>"
+        },
+        {
+          "name": "containerOuiaId",
+          "type": "number | string",
+          "description": "When applied, wraps dropdown in a container with a data-ouia-component-id."
+        },
+        {
+          "name": "containerOuiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe for the container when containerOuiaId is applied. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "containsDrilldown",
+          "type": "boolean",
+          "description": "Indicates if menu contains a drilldown menu"
+        },
+        {
+          "name": "containsFlyout",
+          "type": "boolean",
+          "description": "Indicates if menu contains a flyout menu"
+        },
+        {
+          "name": "drilldownItemPath",
+          "type": "string[]",
+          "description": "Indicates the path of drilled in menu itemIds"
+        },
+        {
+          "name": "drilledInMenus",
+          "type": "string[]",
+          "description": "Array of menus that are drilled in"
+        },
+        {
+          "name": "focusTimeoutDelay",
+          "type": "number",
+          "description": "Time in ms to wait before firing the toggles' focus event. Defaults to 0"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of the menu"
+        },
+        {
+          "name": "isMenuDrilledIn",
+          "type": "boolean",
+          "description": "Indicates if a menu is drilled into"
+        },
+        {
+          "name": "isNavFlyout",
+          "type": "boolean",
+          "description": "Indicating that the menu should have nav flyout styling"
+        },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Flag to indicate if menu is opened."
+        },
+        {
+          "name": "isPlain",
+          "type": "boolean",
+          "description": "Indicates if the menu should be without the outer box-shadow"
+        },
+        {
+          "name": "isRootMenu",
+          "type": "boolean",
+          "description": "Internal flag indicating if the Menu is the root of a menu tree"
+        },
+        {
+          "name": "isScrollable",
+          "type": "boolean",
+          "description": "Indicates if the menu should be srollable"
+        },
+        {
+          "name": "maxMenuHeight",
+          "type": "string",
+          "description": "Maximum height of dropdown menu"
+        },
+        {
+          "name": "menuHeight",
+          "type": "string",
+          "description": "Height of the dropdown menu"
+        },
+        {
+          "name": "onActionClick",
+          "type": "(event?: any, itemId?: any, actionId?: any) => void",
+          "description": "Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction."
+        },
+        {
+          "name": "onDrillIn",
+          "type": "(\n  event: React.KeyboardEvent | React.MouseEvent,\n  fromItemId: string,\n  toItemId: string,\n  itemId: string\n) => void",
+          "description": "Callback for drilling into a submenu"
+        },
+        {
+          "name": "onDrillOut",
+          "type": "(event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void",
+          "description": "Callback for drilling out of a submenu"
+        },
+        {
+          "name": "onGetMenuHeight",
+          "type": "(menuId: string, height: number) => void",
+          "description": "Callback for collecting menu heights"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(isOpen: boolean) => void",
+          "description": "Callback to allow the dropdown component to change the open state of the menu.\nTriggered by clicking outside of the menu, or by pressing any keys specified in onOpenChangeKeys."
+        },
+        {
+          "name": "onOpenChangeKeys",
+          "type": "string[]",
+          "description": "Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable."
+        },
+        {
+          "name": "onSelect",
+          "type": "(event?: React.MouseEvent<Element, MouseEvent>, value?: DropdownItemProps['value']) => void",
+          "description": "Callback for updating when item selection changes. You can also specify onClick on the MenuItem."
+        },
+        {
+          "name": "onToggleKeydown",
+          "type": "(event: KeyboardEvent) => void",
+          "description": "Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key."
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "parentMenu",
+          "type": "string",
+          "description": "ID of parent menu for drilldown menus"
+        },
+        {
+          "name": "popperProps",
+          "type": "PopperOptions",
+          "description": "Additional properties to pass to the Popper"
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "description": "Determines the accessible role of the menu. For a non-checkbox menu that can have\none or more items selected, pass in \"listbox\"."
+        },
+        {
+          "name": "selected",
+          "type": "any | any[]",
+          "description": "Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem."
+        },
+        {
+          "name": "shouldFocusFirstItemOnOpen",
+          "type": "boolean",
+          "description": "Flag indicating the first menu item should be focused after opening the dropdown.",
+          "beta": true
+        },
+        {
+          "name": "shouldFocusToggleOnSelect",
+          "type": "boolean",
+          "description": "Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus."
+        },
+        {
+          "name": "shouldPreventScrollOnItemFocus",
+          "type": "boolean",
+          "description": "Flag indicating if scroll on focus of the first menu item should occur."
+        },
+        {
+          "name": "toggle",
+          "type": "DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode)",
+          "description": "Dropdown toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property.",
+          "required": true
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "z-index of the dropdown menu"
+        }
+      ]
+    },
+    {
+      "name": "DropdownGroup",
+      "description": "See the MenuGroup section of the Menu documentation for additional props that may be passed.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything which can be rendered in a dropdown group.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to root element of dropdown group"
+        },
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "description": "Label of the dropdown group"
+        },
+        {
+          "name": "labelHeadingLevel",
+          "type": "No type info",
+          "defaultValue": "'h1'"
+        }
+      ]
+    },
+    {
+      "name": "DropdownItem",
+      "description": "See the MenuItem section of the Menu documentation for additional props that may be passed.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything which can be rendered in a dropdown item"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to root element of dropdown item"
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Description of the dropdown item"
+        },
+        {
+          "name": "isAriaDisabled",
+          "type": "boolean",
+          "description": "Render item as aria-disabled option"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Render item as disabled option"
+        },
+        {
+          "name": "onClick",
+          "type": "(event?: any) => void",
+          "description": "Callback for item click"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "tooltipProps",
+          "type": "TooltipProps",
+          "description": "Props for adding a tooltip to a menu item"
+        },
+        {
+          "name": "value",
+          "type": "any",
+          "description": "Identifies the component in the dropdown onSelect callback"
+        }
+      ]
+    },
+    {
+      "name": "DropdownList",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds an accessible name to the menu."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Anything that can be rendered inside of menu list",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the menu list"
+        },
+        {
+          "name": "isAriaMultiselectable",
+          "type": "boolean",
+          "description": "Indicates to assistive technologies whether more than one item can be selected\nfor a non-checkbox menu. Only applies when the menu's role is \"listbox\"."
+        }
+      ]
+    },
+    {
+      "name": "MenuToggle",
+      "description": "",
+      "props": [
+        {
+          "name": "badge",
+          "type": "BadgeProps | React.ReactNode",
+          "description": "Optional badge rendered inside the toggle, after the children content"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the toggle"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the toggle"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Optional icon or image rendered inside the toggle, before the children content. It is\nrecommended to wrap most basic icons in our icon component."
+        },
+        {
+          "name": "isCircle",
+          "type": "boolean",
+          "description": "Flag indicating the toggle has circular styling. Can only be applied to plain toggles.",
+          "beta": true
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the toggle is disabled"
+        },
+        {
+          "name": "isDocked",
+          "type": "boolean",
+          "description": "Flag indicating the menu toggle is a docked variant. For use in docked navigation.",
+          "beta": true
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the toggle has expanded styling"
+        },
+        {
+          "name": "isFullHeight",
+          "type": "boolean",
+          "description": "Flag indicating the toggle is full height"
+        },
+        {
+          "name": "isFullWidth",
+          "type": "boolean",
+          "description": "Flag indicating the toggle takes up the full width of its parent"
+        },
+        {
+          "name": "isInForm",
+          "type": "boolean",
+          "description": "Flag indicating the toggle is placed inside a form",
+          "beta": true
+        },
+        {
+          "name": "isPlaceholder",
+          "type": "boolean",
+          "description": "Flag indicating the toggle contains placeholder text"
+        },
+        {
+          "name": "isSettings",
+          "type": "boolean",
+          "description": "Flag indicating whether the toggle is a settings toggle. This will override the icon property"
+        },
+        {
+          "name": "isTextExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the docked toggle should display text. Only applies when isDocked is true.",
+          "beta": true
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "size",
+          "type": "'default' | 'sm'",
+          "description": "Adds styling which affects the size of the menu toggle"
+        },
+        {
+          "name": "splitButtonItems",
+          "type": "React.ReactNode[]",
+          "description": "Elements to display before the toggle button. When included, renders the menu toggle as a split button."
+        },
+        {
+          "name": "status",
+          "type": "'success' | 'warning' | 'danger'",
+          "description": "Status styles of the menu toggle"
+        },
+        {
+          "name": "statusIcon",
+          "type": "React.ReactNode",
+          "description": "Overrides the status icon"
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead'",
+          "description": "Variant styles of the menu toggle"
+        }
+      ]
+    },
+    {
+      "name": "DropdownToggleProps",
+      "description": "",
+      "props": [
+        {
+          "name": "toggleNode",
+          "type": "React.ReactNode",
+          "description": "Dropdown toggle node.",
+          "required": true
+        },
+        {
+          "name": "toggleRef",
+          "type": "React.RefObject<HTMLButtonElement | null>",
+          "description": "Reference to the toggle."
+        }
+      ]
+    },
+    {
+      "name": "TooltipProps",
+      "description": "",
+      "props": [
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "CSS fade transition animation duration"
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement)",
+          "description": "The element to append the tooltip to, defaults to body"
+        },
+        {
+          "name": "aria",
+          "type": "'describedby' | 'labelledby' | 'none'",
+          "description": "aria-labelledby or aria-describedby for tooltip.\nThe trigger will be cloned to add the aria attribute, and the corresponding id in the form of 'pf-tooltip-#' is added to the content container.\nIf you don't want that or prefer to add the aria attribute yourself on the trigger, set aria to 'none'."
+        },
+        {
+          "name": "children",
+          "type": "ReactElement<any>",
+          "description": "The trigger reference element to which the Tooltip is relatively placed to.\nIf you cannot wrap the element with the Tooltip, you can use the triggerRef prop instead.\nUsage: <Tooltip><Button>Reference</Button></Tooltip>"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Tooltip additional class"
+        },
+        {
+          "name": "content",
+          "type": "React.ReactNode",
+          "description": "Tooltip content",
+          "required": true
+        },
+        {
+          "name": "distance",
+          "type": "number",
+          "description": "Distance of the tooltip to its target, defaults to 15"
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "If true, tries to keep the tooltip in view by flipping it if necessary"
+        },
+        {
+          "name": "entryDelay",
+          "type": "number",
+          "description": "Delay in ms before the tooltip appears"
+        },
+        {
+          "name": "exitDelay",
+          "type": "number",
+          "description": "Delay in ms before the tooltip disappears, Avoid passing in a value of \"0\", as users should\nbe given ample time to move their mouse from the trigger to the tooltip content without the content\nbeing hidden."
+        },
+        {
+          "name": "flipBehavior",
+          "type": "| 'flip'\n    | (\n        | 'top'\n        | 'bottom'\n        | 'left'\n        | 'right'\n        | 'top-start'\n        | 'top-end'\n        | 'bottom-start'\n        | 'bottom-end'\n        | 'left-start'\n        | 'left-end'\n        | 'right-start'\n        | 'right-end'\n      )[]",
+          "description": "The desired position to flip the tooltip to if the initial position is not possible.\nBy setting this prop to 'flip' it attempts to flip the tooltip to the opposite side if there is no space.\nYou can also pass an array of positions that determines the flip order. It should contain the initial position\nfollowed by alternative positions if that position is unavailable.\nExample: Initial position is 'top'. Button with tooltip is in the top right corner. 'flipBehavior' is set to\n['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no\nspace to the right, so it finally shows the tooltip on the left."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "id of the tooltip"
+        },
+        {
+          "name": "isContentLeftAligned",
+          "type": "boolean",
+          "description": "Flag to indicate that the text content is left aligned"
+        },
+        {
+          "name": "isVisible",
+          "type": "boolean",
+          "description": "value for visibility when trigger is 'manual'"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Maximum width of the tooltip (default 18.75rem)"
+        },
+        {
+          "name": "minWidth",
+          "type": "string | 'trigger'",
+          "description": "Minimum width of the tooltip. If set to \"trigger\", the minimum width will be set to the reference element width."
+        },
+        {
+          "name": "onTooltipHidden",
+          "type": "() => void",
+          "description": "Callback when tooltip's hide transition has finished executing"
+        },
+        {
+          "name": "position",
+          "type": "| TooltipPosition\n    | 'auto'\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left-start'\n    | 'left-end'\n    | 'right-start'\n    | 'right-end'",
+          "description": "Tooltip position. Note: With 'enableFlip' set to true,\nit will change the position if there is not enough space for the starting position.\nThe behavior of where it flips to can be controlled through the flipBehavior prop.\nThe 'auto' position chooses the side with the most space.\nThe 'auto' position requires the 'enableFlip' prop to be true."
+        },
+        {
+          "name": "trigger",
+          "type": "string",
+          "description": "Tooltip trigger: click, mouseenter, focus, manual\nSet to manual to trigger tooltip programmatically (through the isVisible prop)"
+        },
+        {
+          "name": "triggerRef",
+          "type": "HTMLElement | (() => HTMLElement) | React.RefObject<any>",
+          "description": "The trigger reference element to which the Tooltip is relatively placed to.\nIf you can wrap the element with the Tooltip, you can use the children prop instead, or both props together.\nWhen passed along with the trigger prop, the div element that wraps the trigger will be removed.\nUsage: <Tooltip triggerRef={() => document.getElementById('reference-element')} />"
+        },
+        {
+          "name": "Unknown",
+          "type": "'off' | 'polite'",
+          "description": "Determines whether the tooltip is an aria-live region. If the triggerRef prop is passed in the\ndefault behavior is 'polite' in order to ensure the tooltip contents is announced to\nassistive technologies. Otherwise the default behavior is 'off'."
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "z-index of the tooltip"
+        }
+      ]
+    },
+    {
+      "name": "PopperOptions",
+      "description": "Properties of Popper that can be used to customize its behavior.",
+      "props": [
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "The duration of the CSS fade transition animation."
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | (() => HTMLElement) | 'inline'",
+          "description": "The container to append the popper to. Defaults to 'inline'."
+        },
+        {
+          "name": "direction",
+          "type": "'up' | 'down'",
+          "description": "popper direction"
+        },
+        {
+          "name": "distance",
+          "type": "number",
+          "description": "Distance of the popper to the trigger"
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "Enable to flip the popper when it reaches the boundary"
+        },
+        {
+          "name": "entryDelay",
+          "type": "number",
+          "description": "Delay in ms before the popper appears"
+        },
+        {
+          "name": "exitDelay",
+          "type": "number",
+          "description": "Delay in ms before the popper disappears"
+        },
+        {
+          "name": "flipBehavior",
+          "type": "| 'flip'\n    | (\n        | 'top'\n        | 'bottom'\n        | 'left'\n        | 'right'\n        | 'top-start'\n        | 'top-end'\n        | 'bottom-start'\n        | 'bottom-end'\n        | 'left-start'\n        | 'left-end'\n        | 'right-start'\n        | 'right-end'\n      )[]",
+          "description": "The behavior of how the popper flips when it reaches the boundary"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string | 'trigger'",
+          "description": "Maximum width of the popper. If the value is \"trigger\", it will set the max width to the trigger element's width"
+        },
+        {
+          "name": "minWidth",
+          "type": "string | 'trigger'",
+          "description": "Minimum width of the popper. If the value is \"trigger\", it will set the min width to the trigger element's width"
+        },
+        {
+          "name": "offset",
+          "type": "OffsetOptions['offset']",
+          "description": "Override for the popper's offset"
+        },
+        {
+          "name": "onBlur",
+          "type": "(event?: FocusEvent) => void",
+          "description": "Callback function when trigger is blurred (focus leaves)"
+        },
+        {
+          "name": "onDocumentClick",
+          "type": "(event?: MouseEvent, triggerElement?: HTMLElement, popperElement?: HTMLElement) => void",
+          "description": "Callback function when document is clicked"
+        },
+        {
+          "name": "onDocumentKeyDown",
+          "type": "(event?: KeyboardEvent) => void",
+          "description": "Callback function when keydown event occurs on document"
+        },
+        {
+          "name": "onFocus",
+          "type": "(event?: FocusEvent) => void",
+          "description": "Callback function when trigger is focused"
+        },
+        {
+          "name": "onHidden",
+          "type": "() => void",
+          "description": "Callback when popper's hide transition has finished executing"
+        },
+        {
+          "name": "onHide",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper begins to transition out."
+        },
+        {
+          "name": "onMount",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper has been mounted to the DOM."
+        },
+        {
+          "name": "onMouseEnter",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse enters trigger"
+        },
+        {
+          "name": "onMouseLeave",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse leaves trigger"
+        },
+        {
+          "name": "onPopperClick",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when popper is clicked"
+        },
+        {
+          "name": "onPopperMouseEnter",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse enters popper content"
+        },
+        {
+          "name": "onPopperMouseLeave",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse leaves popper content"
+        },
+        {
+          "name": "onShow",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper begins to transition in."
+        },
+        {
+          "name": "onShown",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper has fully transitioned in."
+        },
+        {
+          "name": "onTriggerClick",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when trigger is clicked"
+        },
+        {
+          "name": "onTriggerEnter",
+          "type": "(event?: KeyboardEvent) => void",
+          "description": "Callback function when Enter key is used on trigger"
+        },
+        {
+          "name": "placement",
+          "type": "Placement",
+          "description": "Instead of direction and position can set the placement of the popper"
+        },
+        {
+          "name": "position",
+          "type": "'right' | 'left' | 'center' | 'start' | 'end'",
+          "description": "Horizontal position of the popper. Use the additional prop preventOverflow if seeing clipping."
+        },
+        {
+          "name": "positionModifiers",
+          "type": "{\n    top?: string;\n    right?: string;\n    bottom?: string;\n    left?: string;\n    topStart?: string;\n    topEnd?: string;\n    bottomStart?: string;\n    bottomEnd?: string;\n    leftStart?: string;\n    leftEnd?: string;\n    rightStart?: string;\n    rightEnd?: string;\n  }",
+          "description": "Map class names to positions, for example:\n{\n  top: styles.modifiers.top,\n  bottom: styles.modifiers.bottom,\n  left: styles.modifiers.left,\n  right: styles.modifiers.right\n}"
+        },
+        {
+          "name": "preventOverflow",
+          "type": "boolean",
+          "description": "Flag to prevent the popper from overflowing its container and becoming partially obscured."
+        },
+        {
+          "name": "width",
+          "type": "string | 'trigger'",
+          "description": "Custom width of the popper. If the value is \"trigger\", it will set the width to the trigger element's width"
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "z-index of the popper element"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-menu"
+  ],
+  "examples": [
+    "Basic dropdowns",
+    "With kebab toggle",
+    "With groups of items",
+    "With item descriptions",
+    "Split toggle with checkbox"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  useRef,
+  RhUiEllipsisVerticalFillIcon
+};
+pageData.examples = {
+  'Basic dropdowns': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';\n\nexport const DropdownBasic: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', value);\n    setIsOpen(false);\n  };\n\n  return (\n    <Dropdown\n      isOpen={isOpen}\n      onSelect={onSelect}\n      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n          Dropdown\n        </MenuToggle>\n      )}\n      ouiaId=\"BasicDropdown\"\n      shouldFocusToggleOnSelect\n    >\n      <DropdownList>\n        <DropdownItem value={0} key=\"action\">\n          Action\n        </DropdownItem>\n        <DropdownItem\n          value={1}\n          key=\"link\"\n          to=\"#default-link2\"\n          // Prevent the default onClick functionality for example purposes\n          onClick={(ev: any) => ev.preventDefault()}\n        >\n          Link\n        </DropdownItem>\n        <DropdownItem value={2} isDisabled key=\"disabled action\">\n          Disabled Action\n        </DropdownItem>\n        <DropdownItem value={3} isDisabled key=\"disabled link\" to=\"#default-link4\">\n          Disabled Link\n        </DropdownItem>\n        <DropdownItem\n          value={4}\n          isAriaDisabled\n          key=\"aria-disabled link\"\n          to=\"#default-link5\"\n          tooltipProps={{ content: 'aria-disabled link', position: 'top' }}\n        >\n          Aria-disabled Link\n        </DropdownItem>\n        <Divider component=\"li\" key=\"separator\" />\n        <DropdownItem value={5} key=\"separated action\">\n          Separated Action\n        </DropdownItem>\n        <DropdownItem value={6} key=\"separated link\" to=\"#default-link6\" onClick={(ev) => ev.preventDefault()}>\n          Separated Link\n        </DropdownItem>\n      </DropdownList>\n    </Dropdown>\n  );\n};\n","title":"Basic dropdowns","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Basic dropdowns present users with a menu of items upon clicking a dropdown toggle.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Dropdown>`}
+        </code>
+        {` uses a `}
+        
+        <PatternflyThemeLink {...{"to":"/components/menus/menu-toggle","className":""}}>
+          {`menu toggle`}
+        </PatternflyThemeLink>
+        {`, which is passed to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`toggle`}
+        </code>
+        {` property, as well as a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<DropdownList>`}
+        </code>
+        {` with multiple `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<DropdownItem>`}
+        </code>
+        {` components. To allow a dropdown to change the open state of the menu, pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isOpen`}
+        </code>
+        {` property into the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onOpenChange`}
+        </code>
+        {` callback.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isDisabled`}
+          </code>
+          {` property to disable an item.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`onClick`}
+          </code>
+          {` property to trigger a callback for an action.`}
+        </li>
+        
+
+      </ul>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This example also uses a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Divider>`}
+        </code>
+        {` which passes in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`key=”separator”`}
+        </code>
+        {` to split the menu into 2 sections with a horizontal line.`}
+      </p>
+    </Example>,
+  'With kebab toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const DropdownWithKebab: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', value);\n    setIsOpen(false);\n  };\n\n  return (\n    <Dropdown\n      isOpen={isOpen}\n      onSelect={onSelect}\n      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n        <MenuToggle\n          ref={toggleRef}\n          aria-label=\"kebab dropdown toggle\"\n          variant=\"plain\"\n          onClick={onToggleClick}\n          isExpanded={isOpen}\n          icon={<RhUiEllipsisVerticalFillIcon />}\n        />\n      )}\n      shouldFocusToggleOnSelect\n    >\n      <DropdownList>\n        <DropdownItem value={0} key=\"action\">\n          Action\n        </DropdownItem>\n        <DropdownItem\n          value={1}\n          key=\"link\"\n          to=\"#default-link2\"\n          // Prevent the default onClick functionality for example purposes\n          onClick={(ev: any) => ev.preventDefault()}\n        >\n          Link\n        </DropdownItem>\n        <DropdownItem value={2} isDisabled key=\"disabled action\">\n          Disabled Action\n        </DropdownItem>\n        <DropdownItem value={3} isDisabled key=\"disabled link\" to=\"#default-link4\">\n          Disabled Link\n        </DropdownItem>\n        <Divider component=\"li\" key=\"separator\" />\n        <DropdownItem value={4} key=\"separated action\">\n          Separated Action\n        </DropdownItem>\n        <DropdownItem value={5} key=\"separated link\" to=\"#default-link6\" onClick={(ev) => ev.preventDefault()}>\n          Separated Link\n        </DropdownItem>\n      </DropdownList>\n    </Dropdown>\n  );\n};\n","title":"With kebab toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To style a dropdown menu's toggle with a kebab icon, pass a "plain" `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggle>`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`toggle`}
+        </code>
+        {` property. When there isn't enough space for a labeled button, a kebab icon can be used to toggle the dropdown menu open or closed.`}
+      </p>
+    </Example>,
+  'With groups of items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Dropdown,\n  DropdownGroup,\n  DropdownItem,\n  DropdownList,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from '@patternfly/react-core';\n\nexport const DropdownWithGroups: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', value);\n    setIsOpen(false);\n  };\n\n  return (\n    <Dropdown\n      isOpen={isOpen}\n      onSelect={onSelect}\n      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n          Dropdown\n        </MenuToggle>\n      )}\n      shouldFocusToggleOnSelect\n    >\n      <DropdownGroup>\n        <DropdownList>\n          <DropdownItem value={0} key=\"action\">\n            Action\n          </DropdownItem>\n          <DropdownItem\n            value={1}\n            key=\"link\"\n            to=\"#default-link2\"\n            // Prevent the default onClick functionality for example purposes\n            onClick={(ev: any) => ev.preventDefault()}\n          >\n            Link\n          </DropdownItem>\n        </DropdownList>\n      </DropdownGroup>\n      <Divider component=\"li\" />\n      <DropdownGroup label=\"Group 2\" labelHeadingLevel=\"h3\">\n        <DropdownList>\n          <DropdownItem value={2} key=\"group2 action\">\n            Group 2 action\n          </DropdownItem>\n          <DropdownItem value={3} key=\"group2 link\" to=\"#default-link4\" onClick={(ev: any) => ev.preventDefault()}>\n            Group 2 link\n          </DropdownItem>\n        </DropdownList>\n      </DropdownGroup>\n      <Divider />\n      <DropdownGroup label=\"Group 3\" labelHeadingLevel=\"h3\">\n        <DropdownList>\n          <DropdownItem value={4} key=\"group3 action\">\n            Group 3 action\n          </DropdownItem>\n          <DropdownItem value={5} key=\"group3 link\" to=\"#default-link6\" onClick={(ev: any) => ev.preventDefault()}>\n            Group 3 link\n          </DropdownItem>\n        </DropdownList>\n      </DropdownGroup>\n    </Dropdown>\n  );\n};\n","title":"With groups of items","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To group sets of related dropdown items together, use a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<DropdownGroup>`}
+        </code>
+        {`. When more than 1 `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<DropdownGroup>`}
+        </code>
+        {` is created in a menu, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`label`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`labelHeadingLevel`}
+        </code>
+        {` properties to assign a name and heading level to each group.`}
+      </p>
+    </Example>,
+  'With item descriptions': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';\n\nexport const DropdownWithDescriptions: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {\n    // eslint-disable-next-line no-console\n    console.log('selected', value);\n    setIsOpen(false);\n  };\n\n  return (\n    <Dropdown\n      isOpen={isOpen}\n      onSelect={onSelect}\n      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n        <MenuToggle ref={toggleRef} isFullWidth onClick={onToggleClick} isExpanded={isOpen}>\n          Dropdown\n        </MenuToggle>\n      )}\n      shouldFocusToggleOnSelect\n    >\n      <DropdownList>\n        <DropdownItem value={0} key=\"action\" description=\"This is a description\">\n          Action\n        </DropdownItem>\n        <DropdownItem\n          value={1}\n          key=\"link\"\n          description=\"This is a very long description that describes the menu item\"\n          to=\"#default-link2\"\n          // Prevent the default onClick functionality for example purposes\n          onClick={(ev: any) => ev.preventDefault()}\n        >\n          Link\n        </DropdownItem>\n        <DropdownItem value={2} isDisabled description=\"Disabled link description\" key=\"disabled action\">\n          Disabled action\n        </DropdownItem>\n        <DropdownItem value={3} isDisabled description=\"This is a description\" key=\"disabled link\" to=\"#default-link4\">\n          Disabled link\n        </DropdownItem>\n      </DropdownList>\n    </Dropdown>\n  );\n};\n","title":"With item descriptions","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To provide users with more context about a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<DropdownItem>`}
+        </code>
+        {`, pass a short message to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`description`}
+        </code>
+        {` property. As shown in the example below, an item's description will appear below its label.`}
+      </p>
+    </Example>,
+  'Split toggle with checkbox': props => 
+    <Example {...pageData} {...props} {...{"code":"import {\n  Dropdown,\n  MenuToggle,\n  MenuToggleCheckbox,\n  DropdownItem,\n  DropdownList,\n  Divider,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport { useRef, useState } from 'react';\n\nexport const DropdownSplitButtonText: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const toggleRef = useRef<MenuToggleElement>(null);\n\n  const onFocus = () => {\n    if (!toggleRef.current) {\n      return;\n    }\n\n    const toggleButton = toggleRef.current.querySelector('button[aria-expanded]');\n    toggleButton?.focus();\n  };\n\n  const onSelect = () => {\n    setIsOpen(false);\n    onFocus();\n  };\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <Dropdown\n      onSelect={onSelect}\n      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}\n      toggle={(toggleRefCallback: React.Ref<MenuToggleElement>) => (\n        <MenuToggle\n          ref={(node) => {\n            // Handle both callback ref and useRef\n            if (typeof toggleRefCallback === 'function') {\n              toggleRefCallback(node);\n            } else if (toggleRefCallback) {\n              (toggleRefCallback as React.MutableRefObject<MenuToggleElement | null>).current = node;\n            }\n            (toggleRef as React.MutableRefObject<MenuToggleElement | null>).current = node;\n          }}\n          splitButtonItems={[\n            <MenuToggleCheckbox id=\"split-button-checkbox-example\" key=\"split-checkbox\" aria-label=\"Select all\" />\n          ]}\n          aria-label=\"Dropdown with checkbox split button\"\n          onClick={onToggleClick}\n          isExpanded={isOpen}\n        />\n      )}\n      isOpen={isOpen}\n    >\n      <DropdownList>\n        <DropdownItem value={0} key=\"action\">\n          Action\n        </DropdownItem>\n        <DropdownItem\n          value={1}\n          key=\"link\"\n          to=\"#default-link2\"\n          // Prevent the default onClick functionality for example purposes\n          onClick={(ev: any) => ev.preventDefault()}\n        >\n          Link\n        </DropdownItem>\n        <DropdownItem value={2} isDisabled key=\"disabled action\">\n          Disabled Action\n        </DropdownItem>\n        <DropdownItem value={3} isDisabled key=\"disabled link\" to=\"#default-link4\">\n          Disabled Link\n        </DropdownItem>\n        <DropdownItem\n          value={4}\n          isAriaDisabled\n          key=\"aria-disabled link\"\n          to=\"#default-link5\"\n          tooltipProps={{ content: 'aria-disabled link', position: 'top' }}\n        >\n          Aria-disabled Link\n        </DropdownItem>\n        <Divider component=\"li\" key=\"separator\" />\n        <DropdownItem value={5} key=\"separated action\">\n          Separated Action\n        </DropdownItem>\n        <DropdownItem value={6} key=\"separated link\" to=\"#default-link6\" onClick={(ev) => ev.preventDefault()}>\n          Separated Link\n        </DropdownItem>\n      </DropdownList>\n    </Dropdown>\n  );\n};\n","title":"Split toggle with checkbox","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To combine a checkbox or other control with a dropdown menu, use a split button.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggle>`}
+        </code>
+        {` can be rendered as a split button via `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`splitButtonItems`}
+        </code>
+        {`. Elements to be displayed before the dropdown toggle button (like the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggleCheckbox>`}
+        </code>
+        {`) must be included in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`splitButtonItems`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`If the dropdown menu closes upon selection, you will need to manually shift focus back to the toggle element after a user selects an item from the menu.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      <code {...{"className":"ws-code "}}>
+        {`Dropdown`}
+      </code>
+      {` builds off of the Menu component suite to wrap commonly used properties and functions for a dropdown menu. See the `}
+      <PatternflyThemeLink {...{"to":"/components/menus/menu","className":""}}>
+        {`Menu documentation`}
+      </PatternflyThemeLink>
+      {` for a full list of properties that may be passed through `}
+      <code {...{"className":"ws-code "}}>
+        {`Dropdown`}
+      </code>
+      {` to further customize the dropdown menu, or the `}
+      <PatternflyThemeLink {...{"to":"/components/menus/custom-menus","className":""}}>
+        {`custom menu examples`}
+      </PatternflyThemeLink>
+      {` for additional examples of fully functional menus.`}
+    </p>
+    {React.createElement(pageData.examples["Basic dropdowns"])}
+    {React.createElement(pageData.examples["With kebab toggle"])}
+    {React.createElement(pageData.examples["With groups of items"])}
+    {React.createElement(pageData.examples["With item descriptions"])}
+    {React.createElement(pageData.examples["Split toggle with checkbox"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsMenusDropdownReactDocs';
+Component.pageData = pageData;
+
+export default Component;