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

package/patternfly-docs/generated/components/menus/options-menu/react-demos.js

@@ -1,508 +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": "Options menu",
-  "section": "components",
-  "subsection": "menus",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react-demos",
-  "tabName": null,
-  "slug": "/components/menus/options-menu/react-demos",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/CustomMenus/OptionsMenu.md",
-  "relPath": "packages/react-core/src/demos/CustomMenus/OptionsMenu.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": "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": "Select",
-      "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": "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 select is open"
-        },
-        {
-          "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 select menu"
-        },
-        {
-          "name": "menuHeight",
-          "type": "string",
-          "description": "Height of the select 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 select 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?: SelectOptionProps['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 menu.",
-          "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": "SelectToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode)",
-          "description": "Select 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": "variant",
-          "type": "'default' | 'typeahead'",
-          "description": "Select variant. For typeahead variant focus won't shift to menu items when pressing up/down arrows."
-        },
-        {
-          "name": "zIndex",
-          "type": "number",
-          "description": "z-index of the select menu"
-        }
-      ]
-    },
-    {
-      "name": "SelectList",
-      "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\".",
-          "defaultValue": "false"
-        }
-      ]
-    },
-    {
-      "name": "SelectOption",
-      "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 select option"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Classes applied to root element of select option"
-        },
-        {
-          "name": "description",
-          "type": "React.ReactNode",
-          "description": "Description of the option"
-        },
-        {
-          "name": "hasCheckbox",
-          "type": "boolean",
-          "description": "Indicates the option has a checkbox"
-        },
-        {
-          "name": "icon",
-          "type": "React.ReactNode",
-          "description": "Render option with icon"
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Indicates the option is disabled"
-        },
-        {
-          "name": "isExternalLink",
-          "type": "boolean",
-          "description": "Render an external link icon on focus or hover, and set the link's\n\"target\" attribute to a value of \"_blank\"."
-        },
-        {
-          "name": "isFocused",
-          "type": "boolean",
-          "description": "Indicates the option is focused"
-        },
-        {
-          "name": "isSelected",
-          "type": "boolean",
-          "description": "Indicates the option is selected"
-        },
-        {
-          "name": "value",
-          "type": "any",
-          "description": "Identifies the component in the Select onSelect callback"
-        }
-      ]
-    },
-    {
-      "name": "SelectGroup",
-      "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 select group",
-          "required": true
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Classes applied to root element of select group"
-        },
-        {
-          "name": "label",
-          "type": "React.ReactNode",
-          "description": "Label of the select group"
-        }
-      ]
-    }
-  ],
-  "examples": [
-    "Options menu"
-  ]
-};
-pageData.liveContext = {
-  useRef,
-  useState,
-  SearchIcon
-};
-pageData.examples = {
-  'Options menu': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport { MenuToggle, Divider, Select, SelectList, SelectOption, SelectGroup } from '@patternfly/react-core';\n\nexport const OptionsMenuDemo: React.FunctionComponent = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [selected, setSelected] = useState<string>('');\n  const menuRef = useRef<HTMLDivElement>(undefined);\n\n  const onToggleClick = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <Select\n      isOpen={isOpen}\n      onOpenChange={(isOpen) => setIsOpen(isOpen)}\n      toggle={(toggleRef) => (\n        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>\n          Options menu\n        </MenuToggle>\n      )}\n      ref={menuRef}\n      id=\"options-menu\"\n      selected={selected}\n      onSelect={(_ev, value) => value && setSelected(value.toString())}\n    >\n      <SelectList>\n        <SelectOption value=\"0\" isSelected={selected === '0'}>\n          Option 1\n        </SelectOption>\n        <SelectOption value=\"1\" isSelected={selected === '1'} isDisabled>\n          Disabled Option\n        </SelectOption>\n        <Divider key=\"group1-divider\" />\n        <SelectGroup label=\"Group 1\">\n          <SelectList>\n            <SelectOption value=\"2\" isSelected={selected === '2'}>\n              Option 1\n            </SelectOption>\n            <SelectOption value=\"3\" isSelected={selected === '3'}>\n              Option 2\n            </SelectOption>\n          </SelectList>\n        </SelectGroup>\n        <Divider key=\"group2-divider\" />\n        <SelectGroup label=\"Group 2\">\n          <SelectList>\n            <SelectOption value=\"4\" isSelected={selected === '4'}>\n              Option 1\n            </SelectOption>\n            <SelectOption value=\"5\" isSelected={selected === '5'}>\n              Option 2\n            </SelectOption>\n          </SelectList>\n        </SelectGroup>\n      </SelectList>\n    </Select>\n  );\n};\n","title":"Options menu","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`As the `}
-      <code {...{"className":"ws-code "}}>
-        {`<OptionsMenu>`}
-      </code>
-      {` component is now deprecated, an options menu 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/select","className":""}}>
-        {`select`}
-      </PatternflyThemeLink>
-      {` component that is built off of menu.`}
-    </p>
-    {React.createElement(pageData.examples["Options menu"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsMenusOptionsMenuReactDemosDocs';
-Component.pageData = pageData;
-
-export default Component;