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

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

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