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

package/patternfly-docs/generated/components/menus/context-selector/react-demos.js

@@ -1,665 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { useRef, useState } from 'react';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-const pageData = {
-  "id": "Context selector",
-  "section": "components",
-  "subsection": "menus",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react-demos",
-  "tabName": null,
-  "slug": "/components/menus/context-selector/react-demos",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/CustomMenus/ContextSelector.md",
-  "relPath": "packages/react-core/src/demos/CustomMenus/ContextSelector.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": "MenuFooter",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the footer"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the footer",
-          "defaultValue": "''"
-        }
-      ]
-    },
-    {
-      "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": "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": "InputGroup",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the input group.",
-          "required": true
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the input group."
-        }
-      ]
-    },
-    {
-      "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": [
-    "Context selector menu"
-  ]
-};
-pageData.liveContext = {
-  useRef,
-  useState,
-  SearchIcon
-};
-pageData.examples = {
-  'Context selector menu': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport {\n  MenuToggle,\n  MenuFooter,\n  MenuSearch,\n  MenuSearchInput,\n  Divider,\n  InputGroup,\n  InputGroupItem,\n  Button,\n  ButtonVariant,\n  SearchInput,\n  Dropdown,\n  DropdownList,\n  DropdownItem\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\n\ninterface ItemData {\n  text: string;\n  href?: string;\n  isDisabled?: boolean | undefined;\n}\n\ntype ItemArrayType = (ItemData | string)[];\n\nexport const ContextSelectorDemo: React.FunctionComponent = () => {\n  const items: ItemArrayType = [\n    {\n      text: 'Action'\n    },\n    {\n      text: 'Link',\n      href: '#'\n    },\n    {\n      text: 'Disabled action',\n      isDisabled: true\n    },\n    {\n      text: 'Disabled link',\n      href: '#',\n      isDisabled: true\n    },\n    'My project',\n    'OpenShift cluster',\n    'Production Ansible',\n    'AWS',\n    'Azure',\n    'My project 2',\n    'OpenShift cluster ',\n    'Production Ansible 2 ',\n    'AWS 2',\n    'Azure 2'\n  ];\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [selected, setSelected] = useState(typeof items[0] === 'string' ? items[0] : items[0].text);\n  const [filteredItems, setFilteredItems] = useState<ItemArrayType>(items);\n  const [searchInputValue, setSearchInputValue] = useState<string>('');\n  const menuRef = useRef<HTMLDivElement>(null);\n  const menuFooterBtnRef = useRef<HTMLButtonElement>(null);\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (ev: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {\n    if (typeof itemId === 'number' || typeof itemId === 'undefined') {\n      return;\n    }\n    setSelected(itemId.toString());\n    setIsOpen(!isOpen);\n  };\n\n  const onSearchInputChange = (value: string) => {\n    setSearchInputValue(value);\n  };\n\n  const onSearchButtonClick = () => {\n    const filtered =\n      searchInputValue === ''\n        ? items\n        : items.filter((item) => {\n            const str = typeof item === 'string' ? item : item.text;\n            return str.toLowerCase().indexOf(searchInputValue.toLowerCase()) !== -1;\n          });\n\n    setFilteredItems(filtered || []);\n    setIsOpen(true); // Keep menu open after search executed\n  };\n\n  const onEnterPressed = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      onSearchButtonClick();\n    }\n  };\n\n  return (\n    <Dropdown\n      isOpen={isOpen}\n      onOpenChange={(isOpen) => setIsOpen(isOpen)}\n      onOpenChangeKeys={['Escape']}\n      toggle={(toggleRef) => (\n        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n          {selected}\n        </MenuToggle>\n      )}\n      ref={menuRef}\n      id=\"context-selector\"\n      onSelect={onSelect}\n      isScrollable\n    >\n      <MenuSearch>\n        <MenuSearchInput>\n          <InputGroup>\n            <InputGroupItem isFill>\n              <SearchInput\n                value={searchInputValue}\n                placeholder=\"Search\"\n                onChange={(_event, value) => onSearchInputChange(value)}\n                onKeyPress={onEnterPressed}\n                aria-labelledby=\"pf-v6-context-selector-search-button-id-1\"\n              />\n            </InputGroupItem>\n            <InputGroupItem>\n              <Button\n                variant={ButtonVariant.control}\n                aria-label=\"Search menu items\"\n                id=\"pf-v6-context-selector-search-button-id-1\"\n                onClick={onSearchButtonClick}\n                icon={<SearchIcon />}\n              />\n            </InputGroupItem>\n          </InputGroup>\n        </MenuSearchInput>\n      </MenuSearch>\n      <Divider />\n      <DropdownList>\n        {filteredItems.map((item, index) => {\n          const [itemText, isDisabled, href] =\n            typeof item === 'string' ? [item, null, null] : [item.text, item.isDisabled || null, item.href || null];\n          return (\n            <DropdownItem\n              itemId={itemText}\n              key={index}\n              isDisabled={isDisabled as boolean | undefined}\n              to={href as string | undefined}\n            >\n              {itemText}\n            </DropdownItem>\n          );\n        })}\n      </DropdownList>\n      <MenuFooter>\n        <Button ref={menuFooterBtnRef} variant=\"link\" isInline>\n          Action\n        </Button>\n      </MenuFooter>\n    </Dropdown>\n  );\n};\n","title":"Context selector menu","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`As the context selector component is now deprecated, a context selector 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["Context selector menu"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsMenusContextSelectorReactDemosDocs';
-Component.pageData = pageData;
-
-export default Component;