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

package/patternfly-docs/generated/components/forms/form-select/react.js

@@ -0,0 +1,208 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+const pageData = {
+  "id": "Form select",
+  "section": "components",
+  "subsection": "forms",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/forms/form-select/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/FormSelect/examples/FormSelect.md",
+  "relPath": "packages/react-core/src/components/FormSelect/examples/FormSelect.md",
+  "propComponents": [
+    {
+      "name": "FormSelect",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Custom flag to show that the FormSelect requires an associated id or aria-label."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "content rendered inside the FormSelect",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "additional classes added to the FormSelect control",
+          "defaultValue": "''"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the FormSelect is disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isRequired",
+          "type": "boolean",
+          "description": "Sets the FormSelect required.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onBlur",
+          "type": "(event: React.FormEvent<HTMLSelectElement>) => void",
+          "description": "Optional callback for updating when selection loses focus",
+          "defaultValue": "(): any => undefined"
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.FormEvent<HTMLSelectElement>, value: string) => void",
+          "description": "Optional callback for updating when selection changes",
+          "defaultValue": "(): any => undefined"
+        },
+        {
+          "name": "onFocus",
+          "type": "(event: React.FormEvent<HTMLSelectElement>) => void",
+          "description": "Optional callback for updating when selection gets focus",
+          "defaultValue": "(): any => undefined"
+        },
+        {
+          "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.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "validated",
+          "type": "'success' | 'warning' | 'error' | 'default'",
+          "description": "Value to indicate if the select is modified to show that validation state.\nIf set to success, select will be modified to indicate valid state.\nIf set to error, select will be modified to indicate error state.",
+          "defaultValue": "'default'"
+        },
+        {
+          "name": "value",
+          "type": "any",
+          "description": "value of selected option",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "FormSelectOption",
+      "description": "",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "additional classes added to the Select Option",
+          "defaultValue": "''"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "flag indicating if the option is disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isPlaceholder",
+          "type": "boolean",
+          "description": "flag indicating if option will have placeholder styling applied when selected *",
+          "defaultValue": "false"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "the label for the option",
+          "required": true
+        },
+        {
+          "name": "value",
+          "type": "any",
+          "description": "the value for the option",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "FormSelectOptionGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "content rendered inside the Select Option Group",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "additional classes added to the Select Option",
+          "defaultValue": "''"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "flag indicating if the Option Group is disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "the label for the option",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-form-control"
+  ],
+  "examples": [
+    "Basic",
+    "Validated",
+    "Disabled",
+    "Grouped"
+  ]
+};
+pageData.liveContext = {
+  useState
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { FormSelect, FormSelectOption } from '@patternfly/react-core';\n\nexport const FormSelectBasic: React.FunctionComponent = () => {\n  const [formSelectValue, setFormSelectValue] = useState('mrs');\n\n  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {\n    setFormSelectValue(value);\n  };\n\n  const options = [\n    { value: 'please choose', label: 'Select one', disabled: true },\n    { value: 'mr', label: 'Mr', disabled: false },\n    { value: 'miss', label: 'Miss', disabled: false },\n    { value: 'mrs', label: 'Mrs', disabled: false },\n    { value: 'ms', label: 'Ms', disabled: false },\n    { value: 'dr', label: 'Dr', disabled: false },\n    { value: 'other', label: 'Other', disabled: false }\n  ];\n\n  return (\n    <FormSelect value={formSelectValue} onChange={onChange} aria-label=\"FormSelect Input\" ouiaId=\"BasicFormSelect\">\n      {options.map((option, index) => (\n        <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />\n      ))}\n    </FormSelect>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Validated': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Form,\n  FormGroup,\n  FormHelperText,\n  FormSelect,\n  FormSelectOption,\n  HelperText,\n  HelperTextItem,\n  ValidatedOptions\n} from '@patternfly/react-core';\n\nexport const FormSelectValidated: React.FunctionComponent = () => {\n  const [formValue, setFormValue] = useState('');\n  const [helperText, setHelperText] = useState('');\n  const [validated, setValidated] = useState<ValidatedOptions>(ValidatedOptions.default);\n\n  const simulateNetworkCall = (callback: () => void) => {\n    setTimeout(callback, 2000);\n  };\n\n  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {\n    setFormValue(value);\n    setValidated(ValidatedOptions.default);\n    setHelperText('Validating...');\n    simulateNetworkCall(() => {\n      if (value === '3') {\n        setValidated(ValidatedOptions.success);\n        setHelperText('You chose wisely');\n      } else if (value === '') {\n        setValidated(ValidatedOptions.warning);\n        setHelperText('You must select a value');\n      } else {\n        setValidated(ValidatedOptions.error);\n        setHelperText('You must chose Three (thought that was obvious)');\n      }\n    });\n  };\n\n  const options = [\n    { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },\n    { value: '1', label: 'One', disabled: false, isPlaceholder: false },\n    { value: '2', label: 'Two', disabled: false, isPlaceholder: false },\n    { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }\n  ];\n\n  return (\n    <Form>\n      <FormGroup label=\"Selection:\" type=\"string\" fieldId=\"selection\">\n        <FormSelect\n          id=\"selection\"\n          validated={validated}\n          value={formValue}\n          onChange={onChange}\n          aria-label=\"FormSelect Input\"\n        >\n          {options.map((option, index) => (\n            <FormSelectOption\n              isDisabled={option.disabled}\n              key={index}\n              value={option.value}\n              label={option.label}\n              isPlaceholder={option.isPlaceholder}\n            />\n          ))}\n        </FormSelect>\n        <FormHelperText>\n          <HelperText>\n            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Validated","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Disabled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { FormSelect, FormSelectOption } from '@patternfly/react-core';\n\nexport const FormSelectDisabled: React.FunctionComponent = () => {\n  const [formSelectValue, setFormSelectValue] = useState('mrs');\n\n  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {\n    setFormSelectValue(value);\n  };\n\n  const options = [\n    { value: 'please choose', label: 'Select one', disabled: true },\n    { value: 'mr', label: 'Mr', disabled: false },\n    { value: 'miss', label: 'Miss', disabled: false },\n    { value: 'mrs', label: 'Mrs', disabled: false },\n    { value: 'ms', label: 'Ms', disabled: false },\n    { value: 'dr', label: 'Dr', disabled: false },\n    { value: 'other', label: 'Other', disabled: false }\n  ];\n\n  return (\n    <FormSelect value={formSelectValue} onChange={onChange} isDisabled aria-label=\"FormSelect Input\">\n      {options.map((option, index) => (\n        <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />\n      ))}\n    </FormSelect>\n  );\n};\n","title":"Disabled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Grouped': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';\n\nexport const FormSelectGrouped: React.FunctionComponent = () => {\n  const [formSelectValue, setFormSelectValue] = useState('2');\n\n  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {\n    setFormSelectValue(value);\n  };\n\n  const groups = [\n    {\n      groupLabel: 'Group1',\n      disabled: false,\n      options: [\n        { value: '1', label: 'The first option', disabled: false },\n        { value: '2', label: 'Second option is selected by default', disabled: false }\n      ]\n    },\n    {\n      groupLabel: 'Group2',\n      disabled: false,\n      options: [\n        { value: '3', label: 'The third option', disabled: false },\n        { value: '4', label: 'The fourth option', disabled: false }\n      ]\n    },\n    {\n      groupLabel: 'Group3',\n      disabled: true,\n      options: [\n        { value: '5', label: 'The fifth option', disabled: false },\n        { value: '6', label: 'The sixth option', disabled: false }\n      ]\n    }\n  ];\n\n  return (\n    <FormSelect value={formSelectValue} onChange={onChange} aria-label=\"FormSelect Input\">\n      {groups.map((group, index) => (\n        <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>\n          {group.options.map((option, i) => (\n            <FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />\n          ))}\n        </FormSelectOptionGroup>\n      ))}\n    </FormSelect>\n  );\n};\n","title":"Grouped","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Validated"])}
+    {React.createElement(pageData.examples["Disabled"])}
+    {React.createElement(pageData.examples["Grouped"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsFormsFormSelectReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/forms/radio/react.js

@@ -0,0 +1,212 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState } from 'react';
+const pageData = {
+  "id": "Radio",
+  "section": "components",
+  "subsection": "forms",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/forms/radio/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Radio/examples/Radio.md",
+  "relPath": "packages/react-core/src/components/Radio/examples/Radio.md",
+  "propComponents": [
+    {
+      "name": "Radio",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-describedby",
+          "type": "string",
+          "description": "Custom aria-describedby value for the radio input. If not provided and description is set, a unique ID will be generated automatically."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Aria label for the radio."
+        },
+        {
+          "name": "body",
+          "type": "React.ReactNode",
+          "description": "Body of the radio."
+        },
+        {
+          "name": "checked",
+          "type": "boolean",
+          "description": "Flag to show if the radio is checked."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the radio wrapper. This wrapper will be div element by default. It will be a label element if\nisLabelWrapped is true, or it can be overridden by any element specified in the component prop.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType",
+          "description": "Sets the radio wrapper component to render. Defaults to \"div\". If set to \"label\", behaves the same as if isLabelWrapped prop was specified."
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Description text of the radio."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id of the radio.",
+          "required": true
+        },
+        {
+          "name": "inputClassName",
+          "type": "string",
+          "description": "Additional classes added to the radio input."
+        },
+        {
+          "name": "isChecked",
+          "type": "boolean",
+          "description": "Flag to show if the radio is checked."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag to show if the radio is disabled.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isLabelWrapped",
+          "type": "boolean",
+          "description": "Flag to indicate whether the radio wrapper element is a native label element for the radio input. Will not apply if a component prop (with a value other than a \"label\") is specified."
+        },
+        {
+          "name": "isValid",
+          "type": "boolean",
+          "description": "Flag to show if the radio selection is valid or invalid.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "description": "Label text of the radio."
+        },
+        {
+          "name": "labelPosition",
+          "type": "'start' | 'end'",
+          "description": "Sets the position of the label. Defaults to 'end' (after the radio input)."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "description": "Name for group of radios",
+          "required": true
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void",
+          "description": "A callback for when the radio selection changes.",
+          "defaultValue": "() => {}"
+        },
+        {
+          "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."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-radio"
+  ],
+  "examples": [
+    "Controlled",
+    "Uncontrolled",
+    "Reversed",
+    "Label wraps",
+    "Disabled",
+    "With description",
+    "With body",
+    "With description and body",
+    "Standalone input"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState
+};
+pageData.examples = {
+  'Controlled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Radio } from '@patternfly/react-core';\n\nexport const RadioControlled: React.FunctionComponent = () => {\n  const [check1, setCheck1] = useState(false);\n\n  const handleChange = () => {\n    setCheck1(true);\n  };\n  return (\n    <Fragment>\n      <Radio\n        isChecked={check1}\n        name=\"radio-1\"\n        onChange={handleChange}\n        label=\"Controlled Radio\"\n        id=\"radio-controlled\"\n      ></Radio>\n    </Fragment>\n  );\n};\n","title":"Controlled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Uncontrolled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Radio } from '@patternfly/react-core';\n\nexport const RadioUncontrolled: React.FunctionComponent = () => (\n  <Radio label=\"Uncontrolled radio example\" id=\"radio-uncontrolled\" name=\"radio-2\" />\n);\n","title":"Uncontrolled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Reversed': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Radio } from '@patternfly/react-core';\n\nexport const RadioReversed: React.FunctionComponent = () => (\n  <Radio labelPosition=\"start\" label=\"Reversed radio example\" id=\"radio-reversed\" name=\"radio-3\" />\n);\n","title":"Reversed","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Label wraps': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Radio } from '@patternfly/react-core';\n\nexport const RadioLabelWraps: React.FunctionComponent = () => (\n  <Radio isLabelWrapped label=\"Label wraps input example\" id=\"radio-label-wraps-input\" name=\"radio-4\" />\n);\n","title":"Label wraps","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can expand the clickable area of a radio so that it spans wider than the radio label by adding the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isLabelWrapped`}
+        </code>
+        {` property. This allows users to select a radio by clicking the radio itself, the label, or the area between the radio and the label.`}
+      </p>
+    </Example>,
+  'Disabled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Radio } from '@patternfly/react-core';\n\nexport const RadioDisabled: React.FunctionComponent = () => (\n  <Fragment>\n    <Radio id=\"radio-disabled\" label=\"Disabled radio example\" isDisabled name=\"radio-5\" />\n    <Radio\n      id=\"radio-disabled-checked\"\n      defaultChecked\n      label=\"Disabled and checked radio example\"\n      isDisabled\n      name=\"radio-6\"\n    />\n  </Fragment>\n);\n","title":"Disabled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With description': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Radio } from '@patternfly/react-core';\n\nexport const RadioWithDescription: React.FunctionComponent = () => (\n  <Radio\n    id=\"radio-with-description\"\n    label=\"Radio with description example\"\n    name=\"radio-7\"\n    description=\"Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.\"\n  />\n);\n","title":"With description","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With body': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Radio } from '@patternfly/react-core';\n\nexport const RadioWithBody: React.FunctionComponent = () => (\n  <Radio id=\"radio-with-body\" label=\"Radio with body\" name=\"radio-8\" body=\"This is where custom content goes.\" />\n);\n","title":"With body","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With description and body': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Radio } from '@patternfly/react-core';\n\nexport const RadioWithDescriptionAndBody: React.FunctionComponent = () => (\n  <Radio\n    id=\"radio-description-body\"\n    label=\"Radio with description and body\"\n    description=\"Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.\"\n    body=\"This is where custom content goes.\"\n    name=\"radio-8\"\n  />\n);\n","title":"With description and body","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Standalone input': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Radio } from '@patternfly/react-core';\n\nexport const RadioStandaloneInput: React.FunctionComponent = () => (\n  <Radio id=\"radio-standalone\" aria-label=\"Standalone input\" name=\"exampleRadioStandalone\" />\n);\n","title":"Standalone input","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Controlled"])}
+    {React.createElement(pageData.examples["Uncontrolled"])}
+    {React.createElement(pageData.examples["Reversed"])}
+    {React.createElement(pageData.examples["Label wraps"])}
+    {React.createElement(pageData.examples["Disabled"])}
+    {React.createElement(pageData.examples["With description"])}
+    {React.createElement(pageData.examples["With body"])}
+    {React.createElement(pageData.examples["With description and body"])}
+    {React.createElement(pageData.examples["Standalone input"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsFormsRadioReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/forms/text-area/react.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useRef, useState } from 'react';
+const pageData = {
+  "id": "Text area",
+  "section": "components",
+  "subsection": "forms",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/forms/text-area/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/TextArea/examples/TextArea.md",
+  "relPath": "packages/react-core/src/components/TextArea/examples/TextArea.md",
+  "propComponents": [
+    {
+      "name": "TextArea",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Custom flag to show that the text area requires an associated id or aria-label."
+        },
+        {
+          "name": "autoResize",
+          "type": "boolean",
+          "description": "Flag to modify height based on contents."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the text area."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag to show if the text area is disabled."
+        },
+        {
+          "name": "isRequired",
+          "type": "boolean",
+          "description": "Flag to show if the text area is required."
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void",
+          "description": "A callback for when the text area value changes."
+        },
+        {
+          "name": "readOnlyVariant",
+          "type": "'default' | 'plain'",
+          "description": "Read only variant."
+        },
+        {
+          "name": "resizeOrientation",
+          "type": "'horizontal' | 'vertical' | 'both' | 'none'",
+          "description": "Sets the orientation to limit the resize to"
+        },
+        {
+          "name": "validated",
+          "type": "'success' | 'warning' | 'error' | 'default'",
+          "description": "Value to indicate if the text area is modified to show that validation state.\nIf set to success, text area will be modified to indicate valid state.\nIf set to error, text area will be modified to indicate error state."
+        },
+        {
+          "name": "value",
+          "type": "string | number",
+          "description": "Value of the text area."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-form-control"
+  ],
+  "examples": [
+    "Basic",
+    "Invalid",
+    "Validated",
+    "Vertically resizable",
+    "Horizontally resizable",
+    "Not resizable",
+    "Uncontrolled",
+    "Disabled",
+    "Read only",
+    "Auto resizing"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useRef,
+  useState
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaBasic: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  return <TextArea value={value} onChange={(_event, value) => setValue(value)} aria-label=\"text area example\" />;\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Invalid': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaInvalid: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  return (\n    <TextArea\n      value={value}\n      onChange={(_event, value) => setValue(value)}\n      isRequired\n      validated={'error'}\n      aria-label=\"invalid text area example\"\n    />\n  );\n};\n","title":"Invalid","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Validated': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextArea } from '@patternfly/react-core';\n\nexport const TextAreaValidated: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  const [validated, setValidated] = useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');\n  const [helperText, setHelperText] = useState('Share your thoughts.');\n  const timerRef = useRef<number | null>(null);\n  const simulateNetworkCall = (callback: Function) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n    }\n    timerRef.current = setTimeout(callback, 2000);\n  };\n\n  const handleTextAreaChange = (value: string) => {\n    setValue(value);\n    setValidated('default');\n    setHelperText('Validating...');\n    simulateNetworkCall(() => {\n      if (value.length > 0) {\n        if (value.length >= 10) {\n          setValidated('success');\n          setHelperText('Thanks for your comments!');\n        } else {\n          setValidated('error');\n          setHelperText(\"You're being too brief, please enter at least 10 characters.\");\n        }\n      } else {\n        setValidated('warning');\n        setHelperText('You must have something to say');\n      }\n    });\n  };\n  return (\n    <Form>\n      <FormGroup label=\"Comments:\" type=\"string\" fieldId=\"selection\">\n        <TextArea\n          value={value}\n          onChange={(_event, value) => handleTextAreaChange(value)}\n          isRequired\n          validated={validated}\n          aria-label=\"invalid text area example\"\n        />\n        <FormHelperText>\n          <HelperText>\n            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Validated","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Vertically resizable': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const VerticalResizeTextArea: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  return (\n    <TextArea\n      value={value}\n      onChange={(_event, value) => setValue(value)}\n      resizeOrientation=\"vertical\"\n      aria-label=\"text area vertical resize example\"\n    />\n  );\n};\n","title":"Vertically resizable","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Horizontally resizable': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaHorizontallyResizable: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  return (\n    <TextArea\n      value={value}\n      onChange={(_event, value) => setValue(value)}\n      resizeOrientation=\"horizontal\"\n      aria-label=\"text area horizontal resize example\"\n    />\n  );\n};\n","title":"Horizontally resizable","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Not resizable': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaResizeNone: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  return (\n    <TextArea\n      value={value}\n      onChange={(_event, value) => setValue(value)}\n      resizeOrientation=\"none\"\n      aria-label=\"text area resize none example\"\n    />\n  );\n};\n","title":"Not resizable","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Uncontrolled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaUncontrolled: React.FunctionComponent = () => (\n  <TextArea defaultValue=\"default value\" aria-label=\"uncontrolled text area example\" />\n);\n","title":"Uncontrolled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Disabled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaDisabled: React.FunctionComponent = () => (\n  <TextArea aria-label=\"disabled text area example\" isDisabled />\n);\n","title":"Disabled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Read only': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Checkbox, TextArea } from '@patternfly/react-core';\n\nexport const TextAreaReadOnly: React.FunctionComponent = () => {\n  const [isPlainChecked, setIsPlainChecked] = useState(false);\n\n  return (\n    <Fragment>\n      <div style={{ marginBottom: '12px' }}>\n        <Checkbox\n          id=\"isPlain\"\n          key=\"isPlain\"\n          label=\"Plain read only variant\"\n          isChecked={isPlainChecked}\n          onChange={(_event, checked) => setIsPlainChecked(checked)}\n        />\n      </div>\n      <TextArea\n        aria-label=\"read only text area example\"\n        value=\"read only text area example\"\n        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}\n      />\n    </Fragment>\n  );\n};\n","title":"Read only","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Auto resizing': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextArea } from '@patternfly/react-core';\n\nexport const TextAreaAutoResizing: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  return (\n    <TextArea\n      value={value}\n      onChange={(_event, value) => setValue(value)}\n      aria-label=\"auto resizing text area example\"\n      autoResize\n    />\n  );\n};\n","title":"Auto resizing","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Invalid"])}
+    {React.createElement(pageData.examples["Validated"])}
+    {React.createElement(pageData.examples["Vertically resizable"])}
+    {React.createElement(pageData.examples["Horizontally resizable"])}
+    {React.createElement(pageData.examples["Not resizable"])}
+    {React.createElement(pageData.examples["Uncontrolled"])}
+    {React.createElement(pageData.examples["Disabled"])}
+    {React.createElement(pageData.examples["Read only"])}
+    {React.createElement(pageData.examples["Auto resizing"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsFormsTextAreaReactDocs';
+Component.pageData = pageData;
+
+export default Component;