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

package/patternfly-docs/generated/components/menus/select/react-templates.js

@@ -0,0 +1,257 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useEffect, useMemo, useState, FunctionComponent } from 'react';
+import { Checkbox } from '@patternfly/react-core';
+import { SimpleSelect, CheckboxSelect, TypeaheadSelect, MultiTypeaheadSelect } from '@patternfly/react-templates';
+const pageData = {
+  "id": "Select",
+  "section": "components",
+  "subsection": "menus",
+  "deprecated": false,
+  "template": true,
+  "beta": true,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-templates",
+  "tabName": null,
+  "slug": "/components/menus/select/react-templates",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-templates/src/components/Select/examples/SelectTemplates.md",
+  "relPath": "packages/react-templates/src/components/Select/examples/SelectTemplates.md",
+  "propComponents": [
+    {
+      "name": "SimpleSelect",
+      "description": "",
+      "props": [
+        {
+          "name": "initialOptions",
+          "type": "SimpleSelectOption[]",
+          "description": "Initial options of the select."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the select should be disabled."
+        },
+        {
+          "name": "onSelect",
+          "type": "(_event: React.MouseEvent<Element, MouseEvent>, selection: SimpleSelectOption['value']) => void",
+          "description": "Callback triggered on selection."
+        },
+        {
+          "name": "onToggle",
+          "type": "(nextIsOpen: boolean) => void",
+          "description": "Callback triggered when the select opens or closes."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "description": "Placeholder text for the select input."
+        },
+        {
+          "name": "toggleContent",
+          "type": "React.ReactNode",
+          "description": "Content of the toggle. Defaults to the selected option."
+        },
+        {
+          "name": "toggleProps",
+          "type": "MenuToggleProps",
+          "description": "Additional props passed to the toggle."
+        },
+        {
+          "name": "toggleWidth",
+          "type": "string",
+          "description": "Width of the toggle."
+        }
+      ]
+    },
+    {
+      "name": "CheckboxSelect",
+      "description": "",
+      "props": [
+        {
+          "name": "initialOptions",
+          "type": "CheckboxSelectOption[]",
+          "description": "Initial options of the select."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the select should be disabled."
+        },
+        {
+          "name": "onSelect",
+          "type": "(_event: React.MouseEvent<Element, MouseEvent>, value?: CheckboxSelectOption['value']) => void",
+          "description": "Callback triggered on selection."
+        },
+        {
+          "name": "onToggle",
+          "type": "(nextIsOpen: boolean) => void",
+          "description": "Callback triggered when the select opens or closes."
+        },
+        {
+          "name": "toggleContent",
+          "type": "React.ReactNode",
+          "description": "Content of the toggle. Defaults to a string with badge count of selected options."
+        },
+        {
+          "name": "toggleProps",
+          "type": "MenuToggleProps",
+          "description": "Additional props passed to the toggle."
+        },
+        {
+          "name": "toggleWidth",
+          "type": "string",
+          "description": "Width of the toggle."
+        }
+      ]
+    },
+    {
+      "name": "TypeaheadSelect",
+      "description": "",
+      "props": [
+        {
+          "name": "createOptionMessage",
+          "type": "string | ((newValue: string) => string)",
+          "description": "Message to display to create a new option"
+        },
+        {
+          "name": "initialOptions",
+          "type": "TypeaheadSelectOption[]",
+          "description": "Initial options of the select.",
+          "required": true
+        },
+        {
+          "name": "isCreatable",
+          "type": "boolean",
+          "description": "Flag to indicate if the typeahead select allows new items"
+        },
+        {
+          "name": "isCreateOptionOnTop",
+          "type": "boolean",
+          "description": "Flag to indicate if create option should be at top of typeahead"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the select should be disabled."
+        },
+        {
+          "name": "noOptionsAvailableMessage",
+          "type": "string",
+          "description": "Message to display when no options are available."
+        },
+        {
+          "name": "noOptionsFoundMessage",
+          "type": "string | ((filter: string) => string)",
+          "description": "Message to display when no options match the filter."
+        },
+        {
+          "name": "onClearSelection",
+          "type": "() => void",
+          "description": "Callback triggered when the clear button is selected"
+        },
+        {
+          "name": "onInputChange",
+          "type": "(newValue: string) => void",
+          "description": "Callback triggered when the text in the input field changes."
+        },
+        {
+          "name": "onInputKeyDown",
+          "type": "(event: React.KeyboardEvent<HTMLInputElement>) => void",
+          "description": "Custom callback triggered when the input field has focus and a keyboard event is triggered.\nThis will override the default keydown behavior for the input field."
+        },
+        {
+          "name": "onSelect",
+          "type": "(\n  _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,\n  selection: TypeaheadSelectOption['value']\n) => void",
+          "description": "Callback triggered on selection."
+        },
+        {
+          "name": "onToggle",
+          "type": "(nextIsOpen: boolean) => void",
+          "description": "Callback triggered when the select opens or closes."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "description": "Placeholder text for the select input."
+        },
+        {
+          "name": "toggleProps",
+          "type": "MenuToggleProps",
+          "description": "Additional props passed to the toggle."
+        },
+        {
+          "name": "toggleWidth",
+          "type": "string",
+          "description": "Width of the toggle."
+        }
+      ]
+    }
+  ],
+  "examples": [
+    "Simple",
+    "Checkbox",
+    "Typeahead",
+    "Multi-Typeahead"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useEffect,
+  useMemo,
+  useState,
+  FunctionComponent,
+  Checkbox,
+  SimpleSelect,
+  CheckboxSelect,
+  TypeaheadSelect,
+  MultiTypeaheadSelect
+};
+pageData.examples = {
+  'Simple': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useMemo, useState, FunctionComponent } from 'react';\nimport { Checkbox } from '@patternfly/react-core';\nimport { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';\n\nconst Options: SimpleSelectOption[] = [\n  { content: 'Option 1', value: 'Option1' },\n  { content: 'Option 2', value: 'Option2', description: 'Option with description' },\n  { content: 'Option 3', value: 'Option3' }\n];\n\nexport const SelectSimpleDemo: FunctionComponent = () => {\n  const [isDisabled, setIsDisabled] = useState<boolean>(false);\n  const [selected, setSelected] = useState<string | undefined>('Option1');\n\n  const initialOptions = useMemo<SimpleSelectOption[]>(\n    () => Options.map((o) => ({ ...o, selected: o.value === selected })),\n    [selected]\n  );\n\n  return (\n    <Fragment>\n      <Checkbox\n        id=\"toggle-disabled\"\n        label=\"isDisabled\"\n        isChecked={isDisabled}\n        onChange={(_event, checked) => setIsDisabled(checked)}\n        style={{ marginBottom: 20 }}\n      />\n      <SimpleSelect\n        initialOptions={initialOptions}\n        isDisabled={isDisabled}\n        onSelect={(_ev, selection) => setSelected(String(selection))}\n      />\n    </Fragment>\n  );\n};\n","title":"Simple","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Checkbox': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useMemo, useState, FunctionComponent } from 'react';\nimport { CheckboxSelect, CheckboxSelectOption } from '@patternfly/react-templates';\n\nconst Options: { content: string; value: string; description?: string; isDisabled?: boolean }[] = [\n  { content: 'Option 1', value: 'option-1' },\n  { content: 'Option 2', value: 'option-2', description: 'Option with description' },\n  { content: 'Option 3', value: 'option-3', isDisabled: true },\n  { content: 'Option 4', value: 'option-4' }\n];\n\nexport const SelectBasic: FunctionComponent = () => {\n  const [selected, setSelected] = useState<string[]>(['option-2']);\n\n  const initialOptions = useMemo<CheckboxSelectOption[]>(\n    () => Options.map((o) => ({ ...o, selected: selected.includes(o.value) })),\n    [selected]\n  );\n\n  return (\n    <CheckboxSelect\n      initialOptions={initialOptions}\n      onSelect={(_ev, value) => {\n        const val = String(value);\n        setSelected((prevSelected) =>\n          prevSelected.includes(val) ? prevSelected.filter((item) => item !== val) : [...prevSelected, String(val)]\n        );\n      }}\n    />\n  );\n};\n","title":"Checkbox","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Typeahead': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useMemo, useState, FunctionComponent } from 'react';\nimport { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';\nimport { Checkbox } from '@patternfly/react-core';\n\nconst Options = [\n  { content: 'Alabama', value: 'option1' },\n  { content: 'Florida', value: 'option2' },\n  { content: 'New Jersey', value: 'option3' },\n  { content: 'New Mexico', value: 'option4' },\n  { content: 'New York', value: 'option5' },\n  { content: 'North Carolina', value: 'option6' }\n];\n\n/* eslint-disable no-console */\nexport const SelectTypeaheadDemo: FunctionComponent = () => {\n  const [selected, setSelected] = useState<string | undefined>();\n  const [options, setOptions] = useState(Options);\n  const [isCreatable, setIsCreatable] = useState<boolean>(false);\n  const [isCreateOptionOnTop, setIsCreateOptionOnTop] = useState<boolean>(false);\n\n  const initialOptions = useMemo<TypeaheadSelectOption[]>(\n    () => options.map((o) => ({ ...o, selected: o.value === selected })),\n    [options, selected]\n  );\n\n  useEffect(() => {\n    console.log(`Selected: ${selected || 'none'}`);\n  }, [selected]);\n\n  return (\n    <>\n      <TypeaheadSelect\n        initialOptions={initialOptions}\n        placeholder=\"Select a state\"\n        noOptionsFoundMessage={(filter) => `No state was found for \"${filter}\"`}\n        onClearSelection={() => setSelected(undefined)}\n        onSelect={(_ev, selection) => {\n          if (!options.find((o) => o.value === selection)) {\n            setOptions([...options, { content: String(selection), value: String(selection) }]);\n          }\n          setSelected(String(selection));\n        }}\n        isCreatable={isCreatable}\n        isCreateOptionOnTop={isCreateOptionOnTop}\n      />\n      <Checkbox\n        className=\"pf-u-mt-sm\"\n        label=\"isCreatable\"\n        isChecked={isCreatable}\n        onChange={(_event, checked) => setIsCreatable(checked)}\n        aria-label=\"toggle creatable checkbox\"\n        id=\"toggle-creatable-typeahead\"\n        name=\"toggle-creatable-typeahead\"\n      />\n      <Checkbox\n        label=\"isCreateOptionOnTop\"\n        isChecked={isCreateOptionOnTop}\n        onChange={(_event, checked) => setIsCreateOptionOnTop(checked)}\n        aria-label=\"toggle createOptionOnTop checkbox\"\n        id=\"toggle-create-option-on-top-typeahead\"\n        name=\"toggle-create-option-on-top-typeahead\"\n      />\n    </>\n  );\n};\n","title":"Typeahead","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Multi-Typeahead': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useMemo, useState, FunctionComponent } from 'react';\nimport { MultiTypeaheadSelect, MultiTypeaheadSelectOption } from '@patternfly/react-templates';\n\nconst Options = [\n  { content: 'Alabama', value: 'option1' },\n  { content: 'Arizona', value: 'option2' },\n  { content: 'California', value: 'option3' },\n  { content: 'Florida', value: 'option4' },\n  { content: 'Massachusetts', value: 'option5' },\n  { content: 'Maine', value: 'option6' },\n  { content: 'New Jersey', value: 'option7' },\n  { content: 'New Mexico', value: 'option8' },\n  { content: 'New York', value: 'option9' },\n  { content: 'North Carolina', value: 'option10' }\n];\n\ntype SelectionsType = (string | number)[];\n\nexport const MultiSelectTypeaheadDemo: FunctionComponent = () => {\n  const [selected, setSelected] = useState<SelectionsType>(['option5']);\n\n  const initialOptions = useMemo<MultiTypeaheadSelectOption[]>(\n    () => Options.map((o) => ({ ...o, selected: selected.includes(o.value) })),\n    [selected]\n  );\n\n  return (\n    <MultiTypeaheadSelect\n      initialOptions={initialOptions}\n      placeholder=\"Select a state\"\n      noOptionsFoundMessage={(filter) => `No state was found for \"${filter}\"`}\n      onSelectionChange={(_ev, selections) => setSelected(selections)}\n    />\n  );\n};\n","title":"Multi-Typeahead","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Note: Templates live in their own package at `}
+      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-templates","className":""}}>
+        {`@patternfly/react-templates`}
+      </PatternflyThemeLink>
+      {`!`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`For custom use cases, please see the select component suite from `}
+      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-core","className":""}}>
+        {`@patternfly/react-core`}
+      </PatternflyThemeLink>
+      {`.`}
+    </p>
+    <AutoLinkHeader {...{"id":"select-template-examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Select template examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Simple"])}
+    {React.createElement(pageData.examples["Checkbox"])}
+    {React.createElement(pageData.examples["Typeahead"])}
+    {React.createElement(pageData.examples["Multi-Typeahead"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsMenusSelectReactTemplatesDocs';
+Component.pageData = pageData;
+
+export default Component;