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

package/patternfly-docs/generated/components/menus/application-launcher/react-demos.js

@@ -0,0 +1,769 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { cloneElement, Fragment, useRef, useState } from 'react';
+import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
+import brandImg from '../../../../../../react-core/src/demos/CustomMenus/../assets/PF-IconLogo.svg';
+const pageData = {
+  "id": "Application launcher",
+  "section": "components",
+  "subsection": "menus",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/menus/application-launcher/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md",
+  "relPath": "packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md",
+  "propComponents": [
+    {
+      "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": "MenuSearch",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Items within search"
+        }
+      ]
+    },
+    {
+      "name": "MenuSearchInput",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Items within input"
+        }
+      ]
+    },
+    {
+      "name": "Tooltip",
+      "description": "",
+      "props": [
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "CSS fade transition animation duration",
+          "defaultValue": "300"
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement)",
+          "description": "The element to append the tooltip to, defaults to body",
+          "defaultValue": "() => document.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'.",
+          "defaultValue": "'describedby'"
+        },
+        {
+          "name": "aria-live",
+          "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'.",
+          "defaultValue": "triggerRef ? 'polite' : 'off'"
+        },
+        {
+          "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",
+          "defaultValue": "''"
+        },
+        {
+          "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",
+          "defaultValue": "15"
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "If true, tries to keep the tooltip in view by flipping it if necessary",
+          "defaultValue": "true"
+        },
+        {
+          "name": "entryDelay",
+          "type": "number",
+          "description": "Delay in ms before the tooltip appears",
+          "defaultValue": "300"
+        },
+        {
+          "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.",
+          "defaultValue": "300"
+        },
+        {
+          "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.",
+          "defaultValue": "['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "id of the tooltip"
+        },
+        {
+          "name": "isContentLeftAligned",
+          "type": "boolean",
+          "description": "Flag to indicate that the text content is left aligned",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isVisible",
+          "type": "boolean",
+          "description": "value for visibility when trigger is 'manual'",
+          "defaultValue": "false"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Maximum width of the tooltip (default 18.75rem)",
+          "defaultValue": "\"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",
+          "defaultValue": "() => {}"
+        },
+        {
+          "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.",
+          "defaultValue": "'top'"
+        },
+        {
+          "name": "trigger",
+          "type": "string",
+          "description": "Tooltip trigger: click, mouseenter, focus, manual\nSet to manual to trigger tooltip programmatically (through the isVisible prop)",
+          "defaultValue": "'mouseenter focus'"
+        },
+        {
+          "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": "zIndex",
+          "type": "number",
+          "description": "z-index of the tooltip",
+          "defaultValue": "9999"
+        }
+      ]
+    },
+    {
+      "name": "Divider",
+      "description": "",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the divider"
+        },
+        {
+          "name": "component",
+          "type": "'hr' | 'li' | 'div'",
+          "description": "The component type to use",
+          "defaultValue": "DividerVariant.hr"
+        },
+        {
+          "name": "inset",
+          "type": "{\n  default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n  '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';\n}",
+          "description": "Insets at various breakpoints."
+        },
+        {
+          "name": "orientation",
+          "type": "{\n  default?: 'vertical' | 'horizontal';\n  sm?: 'vertical' | 'horizontal';\n  md?: 'vertical' | 'horizontal';\n  lg?: 'vertical' | 'horizontal';\n  xl?: 'vertical' | 'horizontal';\n  '2xl'?: 'vertical' | 'horizontal';\n}",
+          "description": "Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout."
+        },
+        {
+          "name": "role",
+          "type": "'separator' | 'presentation'",
+          "description": "The ARIA role of the divider when the component property has a value other than \"hr\".",
+          "defaultValue": "'separator'"
+        }
+      ]
+    },
+    {
+      "name": "SearchInput",
+      "description": "",
+      "props": [
+        {
+          "name": "advancedSearchDelimiter",
+          "type": "string",
+          "description": "Delimiter in the query string for pairing attributes with search values.\nRequired whenever attributes are passed as props."
+        },
+        {
+          "name": "attributes",
+          "type": "string[] | SearchInputSearchAttribute[]",
+          "description": "Array of attribute values used for dynamically generated advanced search.",
+          "defaultValue": "[]"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the advanced search menu."
+        },
+        {
+          "name": "formAdditionalItems",
+          "type": "React.ReactNode",
+          "description": ""
+        },
+        {
+          "name": "getAttrValueMap",
+          "type": "() => { [key: string]: string }",
+          "description": "Function which builds an attribute-value map by parsing the value in the search input."
+        },
+        {
+          "name": "hasWordsAttrLabel",
+          "type": "React.ReactNode",
+          "description": "Attribute label for strings unassociated with one of the provided listed attributes.",
+          "defaultValue": "'Has words'"
+        },
+        {
+          "name": "isSearchMenuOpen",
+          "type": "boolean",
+          "description": "Flag for toggling the open/close state of the advanced search menu."
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.FormEvent<HTMLInputElement>, value: string) => void",
+          "description": "A callback for when the input value changes."
+        },
+        {
+          "name": "onClear",
+          "type": "(event: React.SyntheticEvent<HTMLButtonElement>) => void",
+          "description": "A callback for when the user clicks the clear button."
+        },
+        {
+          "name": "onSearch",
+          "type": "(\n  event: React.SyntheticEvent<HTMLButtonElement>,\n  value: string,\n  attrValueMap: { [key: string]: string }\n) => void",
+          "description": "A callback for when the search button is clicked."
+        },
+        {
+          "name": "onToggleAdvancedMenu",
+          "type": "(e: React.SyntheticEvent<HTMLButtonElement>) => void",
+          "description": "A callback for when the open advanced search button is clicked."
+        },
+        {
+          "name": "parentInputRef",
+          "type": "React.RefObject<any>",
+          "description": "Ref of the input element within the search input."
+        },
+        {
+          "name": "parentRef",
+          "type": "React.RefObject<any>",
+          "description": "Ref of the div wrapping the whole search input."
+        },
+        {
+          "name": "resetButtonLabel",
+          "type": "string",
+          "description": "Label for the button which resets the advanced search form and clears the search input.",
+          "defaultValue": "'Reset'"
+        },
+        {
+          "name": "submitSearchButtonLabel",
+          "type": "string",
+          "description": "Label for the button which calls the onSearch event handler.",
+          "defaultValue": "'Search'"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Value of the search input.",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "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": "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": "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"
+        }
+      ]
+    }
+  ],
+  "examples": [
+    "Application launcher menu"
+  ]
+};
+pageData.liveContext = {
+  cloneElement,
+  Fragment,
+  useRef,
+  useState,
+  RhUiThumbnailViewSmallFillIcon,
+  brandImg
+};
+pageData.examples = {
+  'Application launcher menu': props => 
+    <Example {...pageData} {...props} {...{"code":"import { cloneElement, Fragment, useRef, useState } from 'react';\nimport {\n  MenuToggle,\n  MenuSearch,\n  MenuSearchInput,\n  Tooltip,\n  Divider,\n  SearchInput,\n  Dropdown,\n  DropdownGroup,\n  DropdownList,\n  DropdownItem\n} from '@patternfly/react-core';\nimport RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-thumbnail-view-small-fill-icon';\nimport brandImg from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';\n\nconst MockLink: React.FunctionComponent = ({ to, ...props }: any) => <a href={to} {...props}></a>;\n\nexport const ApplicationLauncherDemo: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [refFullOptions, setRefFullOptions] = useState<Element[]>();\n  const [favorites, setFavorites] = useState<string[]>([]);\n  const [filteredIds, setFilteredIds] = useState<string[]>(['*']);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const onToggleClick = () => {\n    setTimeout(() => {\n      if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector(\n          'li > button:not(:disabled), li > a:not(:disabled), input:not(:disabled)'\n        );\n        firstElement && (firstElement as HTMLElement).focus();\n        setRefFullOptions(Array.from(menuRef.current.querySelectorAll('li:not(li[role=separator])>*:first-child')));\n      }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const menuItems = [\n    <DropdownGroup key=\"group1\" label=\"Group 1\">\n      <DropdownList>\n        <DropdownItem value=\"0\" id=\"0\" isFavorited={favorites.includes('0')}>\n          Application 1\n        </DropdownItem>\n        <DropdownItem\n          value=\"1\"\n          id=\"1\"\n          isFavorited={favorites.includes('1')}\n          to=\"#default-link2\"\n          onClick={(ev) => ev.preventDefault()}\n        >\n          Application 2\n        </DropdownItem>\n      </DropdownList>\n    </DropdownGroup>,\n    <Divider key=\"group1-divider\" />,\n    <DropdownGroup key=\"group2\" label=\"Group 2\">\n      <DropdownList>\n        <DropdownItem\n          value=\"2\"\n          id=\"2\"\n          isFavorited={favorites.includes('2')}\n          component={(props) => <MockLink {...props} to=\"#router-link\" />}\n        >\n          Custom component (such as @reach/router Link)\n        </DropdownItem>\n        <DropdownItem\n          value=\"3\"\n          id=\"3\"\n          isFavorited={favorites.includes('3')}\n          isExternalLink\n          icon={<img src={brandImg} alt=\"\" width={25} height={25} />}\n          component={(props) => <MockLink {...props} to=\"#router-link2\" />}\n        >\n          Custom component with icon\n        </DropdownItem>\n      </DropdownList>\n    </DropdownGroup>,\n    <Divider key=\"group2-divider\" />,\n    <DropdownList key=\"other-items\">\n      <DropdownItem key=\"tooltip-app\" isFavorited={favorites.includes('4')} value=\"4\" id=\"4\">\n        <Tooltip content={<div>Launch Application 3</div>} position=\"right\">\n          <span>Application 3 with tooltip</span>\n        </Tooltip>\n      </DropdownItem>\n      <DropdownItem key=\"disabled-app\" value=\"5\" id=\"5\" isDisabled>\n        Unavailable Application\n      </DropdownItem>\n    </DropdownList>\n  ];\n\n  const createFavorites = (favIds: string[]) => {\n    const favorites: unknown[] = [];\n\n    menuItems.forEach((item) => {\n      if (item.type === DropdownList) {\n        item.props.children.filter((child) => {\n          if (favIds.includes(child.props.value)) {\n            favorites.push(child);\n          }\n        });\n      } else if (item.type === DropdownGroup) {\n        item.props.children.props.children.filter((child) => {\n          if (favIds.includes(child.props.value)) {\n            favorites.push(child);\n          }\n        });\n      } else {\n        if (favIds.includes(item.props.value)) {\n          favorites.push(item);\n        }\n      }\n    });\n\n    return favorites;\n  };\n\n  const filterItems = (items: any[], filteredIds: string[]) => {\n    if (filteredIds.length === 1 && filteredIds[0] === '*') {\n      return items;\n    }\n    let keepDivider = false;\n    const filteredCopy = items\n      .map((group) => {\n        if (group.type === DropdownGroup) {\n          const filteredGroup = cloneElement(group, {\n            children: cloneElement(group.props.children, {\n              children: group.props.children.props.children.filter((child) => {\n                if (filteredIds.includes(child.props.value)) {\n                  return child;\n                }\n              })\n            })\n          });\n          const filteredList = filteredGroup.props.children;\n          if (filteredList.props.children.length > 0) {\n            keepDivider = true;\n            return filteredGroup;\n          } else {\n            keepDivider = false;\n          }\n        } else if (group.type === DropdownList) {\n          const filteredGroup = cloneElement(group, {\n            children: group.props.children.filter((child) => {\n              if (filteredIds.includes(child.props.value)) {\n                return child;\n              }\n            })\n          });\n          if (filteredGroup.props.children.length > 0) {\n            keepDivider = true;\n            return filteredGroup;\n          } else {\n            keepDivider = false;\n          }\n        } else {\n          if ((keepDivider && group.type === Divider) || filteredIds.includes(group.props.value)) {\n            return group;\n          }\n        }\n      })\n      .filter((newGroup) => newGroup);\n\n    if (filteredCopy.length > 0) {\n      const lastGroup = filteredCopy.pop();\n      if (lastGroup.type !== Divider) {\n        filteredCopy.push(lastGroup);\n      }\n    }\n\n    return filteredCopy;\n  };\n\n  const onTextChange = (textValue: string) => {\n    if (textValue === '') {\n      setFilteredIds(['*']);\n      return;\n    }\n\n    const filteredIds =\n      refFullOptions\n        ?.filter((item) => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))\n        .map((item) => item.id) || [];\n    setFilteredIds(filteredIds);\n  };\n\n  const onFavorite = (event: any, value: string, actionId: string) => {\n    event.stopPropagation();\n    if (actionId === 'fav') {\n      const isFavorite = favorites.includes(value);\n      if (isFavorite) {\n        setFavorites(favorites.filter((fav) => fav !== value));\n      } else {\n        setFavorites([...favorites, value]);\n      }\n    }\n  };\n\n  const filteredFavorites = filterItems(createFavorites(favorites), filteredIds);\n  const filteredItems = filterItems(menuItems, filteredIds);\n  if (filteredItems.length === 0) {\n    filteredItems.push(<DropdownItem key=\"no-items\">No results found</DropdownItem>);\n  }\n\n  return (\n    <Dropdown\n      isOpen={isOpen}\n      onOpenChange={(isOpen) => setIsOpen(isOpen)}\n      onOpenChangeKeys={['Escape']}\n      toggle={(toggleRef) => (\n        <MenuToggle\n          aria-label=\"Toggle\"\n          ref={toggleRef}\n          variant=\"plain\"\n          onClick={onToggleClick}\n          isExpanded={isOpen}\n          style={{ width: 'auto' }}\n          icon={<RhUiThumbnailViewSmallFillIcon />}\n        />\n      )}\n      ref={menuRef}\n      onActionClick={onFavorite}\n      // eslint-disable-next-line no-console\n      onSelect={(_ev, value) => console.log('selected', value)}\n    >\n      <MenuSearch>\n        <MenuSearchInput>\n          <SearchInput aria-label=\"Filter menu items\" onChange={(_event, value) => onTextChange(value)} />\n        </MenuSearchInput>\n      </MenuSearch>\n      <Divider />\n      {filteredFavorites.length > 0 && (\n        <Fragment>\n          <DropdownGroup key=\"favorites-group\" label=\"Favorites\">\n            <DropdownList>{filteredFavorites}</DropdownList>\n          </DropdownGroup>\n          <Divider key=\"favorites-divider\" />\n        </Fragment>\n      )}\n      {filteredItems}\n    </Dropdown>\n  );\n};\n","title":"Application launcher menu","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`As the application launcher component is now deprecated, an application launcher may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new `}
+      <PatternflyThemeLink {...{"to":"/components/menus/dropdown","className":""}}>
+        {`dropdown`}
+      </PatternflyThemeLink>
+      {` component that is built off of menu.`}
+    </p>
+    {React.createElement(pageData.examples["Application launcher menu"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsMenusApplicationLauncherReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;