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

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

@@ -0,0 +1,508 @@
+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;