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

package/patternfly-docs/generated/components/text-input-group/react-demos.js

@@ -0,0 +1,152 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useEffect, useRef, useState } from 'react';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+const pageData = {
+  "id": "Text input group",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/text-input-group/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/TextInputGroupDemo.md",
+  "relPath": "packages/react-core/src/demos/TextInputGroupDemo.md",
+  "examples": [
+    "Attribute-value filtering",
+    "Auto-complete search with typeahead"
+  ]
+};
+pageData.liveContext = {
+  useEffect,
+  useRef,
+  useState,
+  SearchIcon,
+  RhMicronsCloseIcon
+};
+pageData.examples = {
+  'Attribute-value filtering': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport {\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  Popper,\n  Divider,\n  Label,\n  LabelGroup\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nexport const AttributeValueFiltering: React.FunctionComponent = () => {\n  const [inputValue, setInputValue] = useState('');\n  const [selectedKey, setSelectedKey] = useState('');\n  const [menuIsOpen, setMenuIsOpen] = useState(false);\n  const [currentChips, setCurrentChips] = useState<string[]>([]);\n\n  interface attributeValueData {\n    [attribute: string]: string[];\n  }\n\n  /** key and value data to be shown in the menu */\n  const data: attributeValueData = {\n    Cluster: ['acmeqe-managed-1', 'local-cluster'],\n    Kind: ['Template', 'ReplicationController', 'ReplicaSet', 'Deployment'],\n    Label: ['release', 'environment', 'partition'],\n    Name: ['backup-1', 'backup-2', 'production-1', 'production-2', 'testing'],\n    Namespace: ['default', 'public'],\n    Status: ['running', 'idle', 'stopped']\n  };\n  const keyNames = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status'];\n  const [menuItemsText, setMenuItemsText] = useState(keyNames);\n  const [menuItems, setMenuItems] = useState<React.ReactElement<any>[]>([]);\n\n  /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */\n  const menuRef = useRef<HTMLDivElement>(null);\n  const textInputGroupRef = useRef<HTMLDivElement>(null);\n\n  /** callback for updating the inputValue state in this component so that the input can be controlled */\n  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setInputValue(value);\n  };\n\n  /** callback for removing a chip from the chip selections */\n  const deleteChip = (chipToDelete: string) => {\n    const newChips = currentChips.filter((chip) => !Object.is(chip, chipToDelete));\n    setCurrentChips(newChips);\n  };\n\n  /** reset state hooks associated with key selection */\n  const clearSelectedKey = () => {\n    setInputValue('');\n    setSelectedKey('');\n    setMenuItemsText(keyNames);\n  };\n\n  /** callback for clearing all selected chips, the text input, and any selected keys */\n  const clearChipsAndInput = () => {\n    setCurrentChips([]);\n    clearSelectedKey();\n  };\n\n  useEffect(() => {\n    /** in the menu only show items that include the text in the input */\n    const filteredMenuItems = menuItemsText\n      .filter(\n        (item) =>\n          !inputValue ||\n          item.toLowerCase().includes(\n            inputValue\n              .toString()\n              .slice(selectedKey.length && selectedKey.length + 2)\n              .toLowerCase()\n          )\n      )\n      .map((currentValue, index) => (\n        <MenuItem key={currentValue} itemId={index}>\n          {currentValue}\n        </MenuItem>\n      ));\n\n    /** in the menu show a disabled \"no result\" when all menu items are filtered out */\n    if (filteredMenuItems.length === 0) {\n      const noResultItem = (\n        <MenuItem isDisabled key=\"no result\">\n          No results found\n        </MenuItem>\n      );\n      setMenuItems([noResultItem]);\n      return;\n    }\n\n    /** determine the menu heading text based on key selection; or lack thereof */\n    const headingItem = (\n      <MenuItem isDisabled key=\"heading\">\n        {selectedKey.length ? `${selectedKey} values` : 'Attributes'}\n      </MenuItem>\n    );\n\n    const divider = <Divider key=\"divider\" />;\n\n    setMenuItems([headingItem, divider, ...filteredMenuItems]);\n  }, [inputValue, menuItemsText, selectedKey]);\n\n  /** add selected key/value pair as a chip in the chip group */\n  const selectValue = (selectedValue: string) => {\n    setCurrentChips([...currentChips, `${selectedKey}: ${selectedValue}`]);\n    clearSelectedKey();\n  };\n\n  /** update the input to show the selected key and the menu to show the values associated with that specific key */\n  const selectKey = (selectedText: string) => {\n    const values = data[selectedText];\n\n    if (!values) {\n      return;\n    }\n\n    setInputValue(`${selectedText}: `);\n    setSelectedKey(selectedText);\n    setMenuItemsText(values);\n  };\n\n  const handleEnter = () => {\n    /** bail if heading + divider + first option are not all present */\n    const firstResult = menuItems[2]?.props?.children;\n\n    if (!firstResult) {\n      return;\n    }\n\n    /** perform the appropriate action based on key selection state */\n    if (selectedKey.length) {\n      selectValue(firstResult);\n    } else {\n      selectKey(firstResult);\n    }\n  };\n\n  /** allow the user to backspace at the selected key name to drop the currently selected key */\n  const handleBackspace = () => {\n    if (selectedKey.length && inputValue === `${selectedKey}: `) {\n      clearSelectedKey();\n    }\n  };\n\n  /** allow the user to select a key by simply typing it and entering a colon, exact (case sensitive) matches only */\n  const handleColon = (event: React.KeyboardEvent) => {\n    if (!selectedKey.length && keyNames.includes(inputValue)) {\n      selectKey(inputValue);\n      event.preventDefault();\n    }\n  };\n\n  /** allow the user to focus on the menu and navigate using the arrow keys */\n  const handleArrowKey = () => {\n    if (menuRef.current) {\n      const firstElement = menuRef.current.querySelector<HTMLButtonElement>('li > button:not(:disabled)');\n      firstElement && firstElement.focus();\n    }\n  };\n\n  /** enable keyboard only usage */\n  const handleTextInputKeyDown = (event: React.KeyboardEvent) => {\n    switch (event.key) {\n      case 'Enter':\n        handleEnter();\n        break;\n      case 'Escape':\n        clearSelectedKey();\n        break;\n      case 'Backspace':\n        handleBackspace();\n        break;\n      case ':':\n        handleColon(event);\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        handleArrowKey();\n        break;\n    }\n  };\n\n  /** perform the proper key or value selection when a menu item is selected */\n  const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined, _itemId: string | number) => {\n    const selectedText = (event?.target as HTMLElement | undefined)?.innerText.trim() || '';\n\n    if (selectedKey.length) {\n      selectValue(selectedText);\n    } else {\n      selectKey(selectedText);\n    }\n    event?.stopPropagation();\n    textInputGroupRef.current?.querySelector('input')?.focus();\n  };\n\n  /** close the menu when a click occurs outside of the menu or text input group */\n  const handleClick = (event: MouseEvent | undefined) => {\n    if (\n      menuRef.current &&\n      !menuRef.current.contains(event?.target as HTMLElement) &&\n      !textInputGroupRef.current?.contains(event?.target as HTMLElement)\n    ) {\n      setMenuIsOpen(false);\n    }\n  };\n\n  /** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */\n  const showSearchIcon = !currentChips.length;\n\n  /** only show the clear button when there is something that can be cleared */\n  const showClearButton = !!inputValue || !!currentChips.length;\n\n  /** render the utilities component only when a component it contains is being rendered */\n  const showUtilities = showClearButton;\n\n  const inputGroup = (\n    <div ref={textInputGroupRef}>\n      <TextInputGroup>\n        <TextInputGroupMain\n          icon={showSearchIcon && <SearchIcon />}\n          value={inputValue}\n          onChange={handleInputChange}\n          onFocus={() => setMenuIsOpen(true)}\n          onKeyDown={handleTextInputKeyDown}\n        >\n          <LabelGroup>\n            {currentChips.map((currentChip) => (\n              <Label key={currentChip} variant=\"outline\" onClose={() => deleteChip(currentChip)}>\n                {currentChip}\n              </Label>\n            ))}\n          </LabelGroup>\n        </TextInputGroupMain>\n        {showUtilities && (\n          <TextInputGroupUtilities>\n            {showClearButton && (\n              <Button\n                variant=\"plain\"\n                onClick={clearChipsAndInput}\n                aria-label=\"Clear button and input\"\n                icon={<RhMicronsCloseIcon />}\n              />\n            )}\n          </TextInputGroupUtilities>\n        )}\n      </TextInputGroup>\n    </div>\n  );\n\n  const menu = (\n    <div ref={menuRef}>\n      <Menu onSelect={onSelect}>\n        <MenuContent>\n          <MenuList>{menuItems}</MenuList>\n        </MenuContent>\n      </Menu>\n    </div>\n  );\n\n  return (\n    <Popper\n      trigger={inputGroup}\n      triggerRef={textInputGroupRef}\n      popper={menu}\n      popperRef={menuRef}\n      isVisible={menuIsOpen}\n      onDocumentClick={handleClick}\n    />\n  );\n};\n","title":"Attribute-value filtering","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demo showcases the selection of attribute-value pairs based on a predefined set of data.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Available attributes are shown in a menu when focus is placed on the text input. Once an attribute is selected the values for that attribute will be shown in the menu. When a value is selected for the attribute the pair will be converted into a chip and placed into the chip group. Typing in the text input will filter the entries shown in the menu.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Attributes and values can both be selected by:`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`clicking the entry shown in the menu`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`hitting the up or down arrows (while focused on the text input) to switch focus to the menu, navigating the menu using the arrow keys, and hitting `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`enter`}
+          </code>
+          {` on an entry`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`hitting `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`enter`}
+          </code>
+          {` (while focused on the text input) to select the first entry shown in the menu at the time`}
+        </li>
+        
+
+      </ul>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Additionally, attributes can be selected by typing the full (case sensitive) name of an attribute, then typing `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`:`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Attributes can be deselected (returning you to attribute selection mode) by hitting `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`escape`}
+        </code>
+        {`, or by hitting `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`backspace`}
+        </code>
+        {` when the only text in the text input is the attribute.`}
+      </p>
+    </Example>,
+  'Auto-complete search with typeahead': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport {\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  Popper,\n  Divider,\n  Label,\n  LabelGroup\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nexport const AutoCompleteSearch: React.FunctionComponent = () => {\n  const [inputValue, setInputValue] = useState('');\n  const [menuIsOpen, setMenuIsOpen] = useState(false);\n  const [currentChips, setCurrentChips] = useState<string[]>([]);\n  const [hint, setHint] = useState('');\n\n  /** auto-completing suggestion text items to be shown in the menu */\n  const suggestionItems = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status'];\n  const [menuItems, setMenuItems] = useState<React.ReactElement<any>[]>([]);\n\n  /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */\n  const menuRef = useRef<HTMLDivElement>(undefined);\n  const textInputGroupRef = useRef<HTMLDivElement>(undefined);\n\n  /** callback for updating the inputValue state in this component so that the input can be controlled */\n  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setInputValue(value);\n  };\n\n  /** callback for removing a chip from the chip selections */\n  const deleteChip = (chipToDelete: string) => {\n    const newChips = currentChips.filter((chip) => !Object.is(chip, chipToDelete));\n    setCurrentChips(newChips);\n  };\n\n  /** callback for clearing all selected chips and the text input */\n  const clearChipsAndInput = () => {\n    setCurrentChips([]);\n    setInputValue('');\n  };\n\n  useEffect(() => {\n    /** in the menu only show items that include the text in the input */\n    const filteredMenuItems = suggestionItems\n      .filter((item) => !inputValue || item.toLowerCase().includes(inputValue.toString().toLowerCase()))\n      .map((currentValue, index) => (\n        <MenuItem key={currentValue} itemId={index}>\n          {currentValue}\n        </MenuItem>\n      ));\n\n    /** in the menu show a disabled \"no result\" when all menu items are filtered out */\n    if (filteredMenuItems.length === 0) {\n      const noResultItem = (\n        <MenuItem isDisabled key=\"no result\">\n          No results found\n        </MenuItem>\n      );\n      setMenuItems([noResultItem]);\n      setHint('');\n      return;\n    }\n\n    /** The hint is set whenever there is only one autocomplete option left. */\n    if (filteredMenuItems.length === 1) {\n      const hint = filteredMenuItems[0].props.children;\n      if (hint.toLowerCase().indexOf(inputValue.toLowerCase())) {\n        // the match was found in a place other than the start, so typeahead wouldn't work right\n        setHint('');\n      } else {\n        // use the input for the first part, otherwise case difference could make things look wrong\n        setHint(inputValue + hint.substr(inputValue.length));\n      }\n    } else {\n      setHint('');\n    }\n\n    /** add a heading to the menu */\n    const headingItem = (\n      <MenuItem isDisabled key=\"heading\">\n        Suggestions\n      </MenuItem>\n    );\n\n    const divider = <Divider key=\"divider\" />;\n\n    setMenuItems([headingItem, divider, ...filteredMenuItems]);\n  }, [inputValue]);\n\n  /** add the given string as a chip in the chip group and clear the input */\n  const addChip = (newChipText: string) => {\n    setCurrentChips([...currentChips, `${newChipText}`]);\n    setInputValue('');\n  };\n\n  /** add the current input value as a chip */\n  const handleEnter = () => {\n    if (inputValue.length) {\n      addChip(inputValue);\n    }\n  };\n\n  const handleTab = () => {\n    if (menuItems.length === 3) {\n      setInputValue(menuItems[2].props.children);\n    }\n    setMenuIsOpen(false);\n  };\n\n  /** close the menu when escape is hit */\n  const handleEscape = () => {\n    setMenuIsOpen(false);\n  };\n\n  /** allow the user to focus on the menu and navigate using the arrow keys */\n  const handleArrowKey = () => {\n    if (menuRef.current) {\n      const firstElement = menuRef.current.querySelector<HTMLButtonElement>('li > button:not(:disabled)');\n      firstElement && firstElement.focus();\n    }\n  };\n\n  /** reopen the menu if it's closed and any un-designated keys are hit */\n  const handleDefault = () => {\n    if (!menuIsOpen) {\n      setMenuIsOpen(true);\n    }\n  };\n\n  /** enable keyboard only usage while focused on the text input */\n  const handleTextInputKeyDown = (event: React.KeyboardEvent) => {\n    switch (event.key) {\n      case 'Enter':\n        handleEnter();\n        break;\n      case 'Escape':\n        handleEscape();\n        break;\n      case 'Tab':\n        handleTab();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown':\n        handleArrowKey();\n        break;\n      default:\n        handleDefault();\n    }\n  };\n\n  /** apply focus to the text input */\n  const focusTextInput = () => {\n    textInputGroupRef.current.querySelector('input').focus();\n  };\n\n  /** add the text of the selected item as a new chip */\n  const onSelect = (event: React.MouseEvent<Element, MouseEvent>, _itemId: string | number) => {\n    const selectedText = (event.target as HTMLElement).innerText;\n    addChip(selectedText);\n    event.stopPropagation();\n    focusTextInput();\n  };\n\n  /** close the menu when a click occurs outside of the menu or text input group */\n  const handleClick = (event: MouseEvent) => {\n    if (\n      menuRef.current &&\n      !menuRef.current.contains(event.target as HTMLElement) &&\n      !textInputGroupRef.current.contains(event.target as HTMLElement)\n    ) {\n      setMenuIsOpen(false);\n    }\n  };\n\n  /** enable keyboard only usage while focused on the menu */\n  const handleMenuKeyDown = (event: React.KeyboardEvent) => {\n    switch (event.key) {\n      case 'Tab':\n      case 'Escape':\n        event.preventDefault();\n        focusTextInput();\n        setMenuIsOpen(false);\n        break;\n      case 'Enter':\n      case ' ':\n        setTimeout(() => setMenuIsOpen(false), 0);\n        break;\n    }\n  };\n\n  /** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */\n  const showSearchIcon = !currentChips.length;\n\n  /** only show the clear button when there is something that can be cleared */\n  const showClearButton = !!inputValue || !!currentChips.length;\n\n  /** render the utilities component only when a component it contains is being rendered */\n  const showUtilities = showClearButton;\n\n  const inputGroup = (\n    <div ref={textInputGroupRef}>\n      <TextInputGroup>\n        <TextInputGroupMain\n          icon={showSearchIcon && <SearchIcon />}\n          value={inputValue}\n          hint={hint}\n          onChange={handleInputChange}\n          onFocus={() => setMenuIsOpen(true)}\n          onKeyDown={handleTextInputKeyDown}\n          placeholder=\"search\"\n          aria-label=\"Search input\"\n        >\n          <LabelGroup>\n            {currentChips.map((currentChip) => (\n              <Label key={currentChip} variant=\"outline\" onClose={() => deleteChip(currentChip)}>\n                {currentChip}\n              </Label>\n            ))}\n          </LabelGroup>\n        </TextInputGroupMain>\n        {showUtilities && (\n          <TextInputGroupUtilities>\n            {showClearButton && (\n              <Button\n                variant=\"plain\"\n                onClick={clearChipsAndInput}\n                aria-label=\"Clear button for chips and input\"\n                icon={<RhMicronsCloseIcon />}\n              />\n            )}\n          </TextInputGroupUtilities>\n        )}\n      </TextInputGroup>\n    </div>\n  );\n\n  const menu = (\n    <div ref={menuRef}>\n      <Menu onSelect={onSelect} onKeyDown={handleMenuKeyDown}>\n        <MenuContent>\n          <MenuList>{menuItems}</MenuList>\n        </MenuContent>\n      </Menu>\n    </div>\n  );\n\n  return (\n    <Popper\n      trigger={inputGroup}\n      triggerRef={textInputGroupRef}\n      popper={menu}\n      popperRef={menuRef}\n      appendTo={() => textInputGroupRef.current}\n      isVisible={menuIsOpen}\n      onDocumentClick={handleClick}\n    />\n  );\n};\n","title":"Auto-complete search with typeahead","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demo showcases a search input with suggestions, which filters possible selections based on the text you've entered. Unlike the attribute-value filtering demo, it allows creation of new chip items when the text entered is not available in the list of suggestions.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The current text in the input can be converted to a chip at any time by hitting `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`enter`}
+        </code>
+        {`. Auto-complete suggestions can be chosen by clicking the corresponding entry in the menu, or by navigating to an entry using the up/down arrow keys and selecting it with `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`enter`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Hitting `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`escape`}
+        </code>
+        {` while focused on the input or menu will close the menu, and the menu will reopen when text is entered.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When only one item remains in the suggestion list, a typeahead hint will show and tab can be used to auto-complete the typing of that item.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Attribute-value filtering"])}
+    {React.createElement(pageData.examples["Auto-complete search with typeahead"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsTextInputGroupReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/text-input-group/react.js

@@ -0,0 +1,278 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+const pageData = {
+  "id": "Text input group",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/text-input-group/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md",
+  "relPath": "packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md",
+  "propComponents": [
+    {
+      "name": "TextInputGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the text input group"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes applied to the text input group container"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and a disabled context value which text input group main hooks into for the input itself"
+        },
+        {
+          "name": "isPlain",
+          "type": "boolean",
+          "description": "Flag to indicate the toggle has no border or background"
+        },
+        {
+          "name": "validated",
+          "type": "'success' | 'warning' | 'error' | 'default' | ValidatedOptions",
+          "description": "Value to indicate if the text input group is modified to show that validation state.\nIf set to success, warning, or error, the group will show that state.\nIf set to default, no validation styling is applied (use to clear a prior validation state)."
+        }
+      ]
+    },
+    {
+      "name": "TextInputGroupMain",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-activedescendant",
+          "type": "string",
+          "description": "The id of the active element. Required if role has a value of \"combobox\", and focus\nshould remain on the input."
+        },
+        {
+          "name": "aria-controls",
+          "type": "string",
+          "description": "The id of the element(s) controlled by the input. Required if role has a value of \"combobox\"."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessibility label for the input"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the text input group main div"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes applied to the text input group main container"
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "description": "Suggestion that will show up like a placeholder even with text in the input"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Icon to be shown on the left side of the text input group main container"
+        },
+        {
+          "name": "inputId",
+          "type": "string",
+          "description": "The id of the input element"
+        },
+        {
+          "name": "inputProps",
+          "type": "any",
+          "description": "Additional props to spread to the input element."
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag for whether an associated element controlled by the input is visible. Required if\nrole has a value of \"combobox\"."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "description": "Name for the input"
+        },
+        {
+          "name": "onBlur",
+          "type": "(event?: any) => void",
+          "description": "Callback for when focus is lost on the input field"
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.FormEvent<HTMLInputElement>, value: string) => void",
+          "description": "Callback for when there is a change in the input field"
+        },
+        {
+          "name": "onFocus",
+          "type": "(event?: any) => void",
+          "description": "Callback for when the input field is focused"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "description": "Placeholder value for the input"
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "description": "Determines the accessible role of the input."
+        },
+        {
+          "name": "type",
+          "type": "| 'text'\n| 'date'\n| 'datetime-local'\n| 'email'\n| 'month'\n| 'number'\n| 'password'\n| 'search'\n| 'tel'\n| 'time'\n| 'url'",
+          "description": "Type that the input accepts."
+        },
+        {
+          "name": "value",
+          "type": "string | number",
+          "description": "Value for the input"
+        }
+      ]
+    },
+    {
+      "name": "TextInputGroupUtilities",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the text input group utilities div"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes applied to the text input group utilities container"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-text-input-group"
+  ],
+  "examples": [
+    "Basic text input group",
+    "Disabled text input group",
+    "With icon and utilities",
+    "With validation",
+    "With filters"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  SearchIcon,
+  RhMicronsCloseIcon
+};
+pageData.examples = {
+  'Basic text input group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';\n\nexport const TextInputGroupBasic: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  return (\n    <TextInputGroup>\n      <TextInputGroupMain value={value} onChange={(_event, value) => setValue(value)} />\n    </TextInputGroup>\n  );\n};\n","title":"Basic text input group","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A basic text input group updates its contents as users enter text.`}
+      </p>
+    </Example>,
+  'Disabled text input group': props => 
+    <Example {...pageData} {...props} {...{"code":"import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';\n\nexport const TextInputGroupDisabled: React.FunctionComponent = () => (\n  <TextInputGroup isDisabled>\n    <TextInputGroupMain value=\"Disabled\" type=\"text\" aria-label=\"Disabled text input group example input\" />\n  </TextInputGroup>\n);\n","title":"Disabled text input group","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To prevent users from making edits to a text input group, you can disable it using `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isDisabled`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'With icon and utilities': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nexport const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {\n  const [inputValue, setInputValue] = useState('');\n\n  /** callback for updating the inputValue state in this component so that the input can be controlled */\n  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setInputValue(value);\n  };\n\n  /** show the input clearing button only when the input is not empty */\n  const showClearButton = !!inputValue;\n\n  /** render the utilities component only when a component it contains is being rendered */\n  const showUtilities = showClearButton;\n\n  /** callback for clearing the text input */\n  const clearInput = () => {\n    setInputValue('');\n  };\n\n  return (\n    <TextInputGroup>\n      <TextInputGroupMain icon={<SearchIcon />} value={inputValue} onChange={handleInputChange} />\n      {showUtilities && (\n        <TextInputGroupUtilities>\n          {showClearButton && (\n            <Button\n              variant=\"plain\"\n              onClick={clearInput}\n              aria-label=\"Clear button and input\"\n              icon={<RhMicronsCloseIcon />}\n            />\n          )}\n        </TextInputGroupUtilities>\n      )}\n    </TextInputGroup>\n  );\n};\n","title":"With icon and utilities","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To help users identify the purpose of an input group, you can add an icon. To do this, import your icon and pass it to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`icon`}
+        </code>
+        {` within `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TextInputGroupMain>`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can also add additional actions or utilities via `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TextInputGroupUtilities>`}
+        </code>
+        {`. The following example includes a clear button that allows users to remove their previous input.`}
+      </p>
+    </Example>,
+  'With validation': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button,\n  ValidatedOptions,\n  Flex,\n  FlexItem\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nexport const TextInputGroupWithStatus: React.FunctionComponent = () => {\n  const [successValue, setSuccessValue] = useState('Success validation');\n  const [warningValue, setWarningValue] = useState('Warning validation with custom non-status icon at start');\n  const [errorValue, setErrorValue] = useState('Error validation with custom non-status icon at start and utilities');\n\n  /** show the input clearing button only when the input is not empty */\n  const showClearButton = !!errorValue;\n\n  /** render the utilities component only when a component it contains is being rendered */\n  const showUtilities = showClearButton;\n\n  /** callback for clearing the text input */\n  const clearInput = () => {\n    setErrorValue('');\n  };\n\n  return (\n    <Flex direction={{ default: 'column' }} rowGap={{ default: 'rowGapSm' }}>\n      <FlexItem>\n        <TextInputGroup validated={ValidatedOptions.success}>\n          <TextInputGroupMain value={successValue} onChange={(_event, value) => setSuccessValue(value)} />\n        </TextInputGroup>\n      </FlexItem>\n      <FlexItem>\n        <TextInputGroup validated={ValidatedOptions.warning}>\n          <TextInputGroupMain\n            icon={<SearchIcon />}\n            value={warningValue}\n            onChange={(_event, value) => setWarningValue(value)}\n          />\n        </TextInputGroup>\n      </FlexItem>\n      <FlexItem>\n        <TextInputGroup validated={ValidatedOptions.error}>\n          <TextInputGroupMain\n            icon={<SearchIcon />}\n            value={errorValue}\n            onChange={(_event, value) => setErrorValue(value)}\n          />\n          {showUtilities && (\n            <TextInputGroupUtilities>\n              {showClearButton && (\n                <Button\n                  variant=\"plain\"\n                  onClick={clearInput}\n                  aria-label=\"Clear button and input\"\n                  icon={<RhMicronsCloseIcon />}\n                />\n              )}\n            </TextInputGroupUtilities>\n          )}\n        </TextInputGroup>\n      </FlexItem>\n    </Flex>\n  );\n};\n","title":"With validation","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can add a validation status to a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TextInputGroup>`}
+        </code>
+        {` by passing the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`validated`}
+        </code>
+        {` property with a value of either "success", "warning", or "error".`}
+      </p>
+    </Example>,
+  'With filters': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Label,\n  LabelGroup,\n  Button\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nexport const TextInputGroupFilters: React.FunctionComponent = () => {\n  const [inputValue, setInputValue] = useState('');\n  const [currentChips, setCurrentChips] = useState([\n    'chip one',\n    'chip two',\n    'chip three',\n    'chip four',\n    'chip five',\n    'chip six',\n    'chip seven',\n    'chip eight',\n    'chip nine',\n    'chip ten',\n    'chip eleven',\n    'chip twelve',\n    'chip thirteen',\n    'chip fourteen'\n  ]);\n\n  /** show the search icon only when there are no chips to prevent the chips from being displayed behind the icon */\n  const showSearchIcon = !currentChips.length;\n\n  /** callback for updating the inputValue state in this component so that the input can be controlled */\n  const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setInputValue(value);\n  };\n\n  /** callback for removing a chip from the chip selections */\n  const deleteChip = (chipToDelete: string) => {\n    const newChips = currentChips.filter((chip) => !Object.is(chip, chipToDelete));\n    setCurrentChips(newChips);\n  };\n\n  /** show the input/chip clearing button only when either the text input or chip group are not empty */\n  const showClearButton = !!inputValue || !!currentChips.length;\n\n  /** render the utilities component only when a component it contains is being rendered */\n  const showUtilities = showClearButton;\n\n  /** callback for clearing all selected chips and the text input */\n  const clearChipsAndInput = () => {\n    setCurrentChips([]);\n    setInputValue('');\n  };\n\n  return (\n    <TextInputGroup>\n      <TextInputGroupMain icon={showSearchIcon && <SearchIcon />} value={inputValue} onChange={handleInputChange}>\n        <LabelGroup>\n          {currentChips.map((currentChip) => (\n            <Label key={currentChip} variant=\"outline\" onClose={() => deleteChip(currentChip)}>\n              {currentChip}\n            </Label>\n          ))}\n        </LabelGroup>\n      </TextInputGroupMain>\n      {showUtilities && (\n        <TextInputGroupUtilities>\n          {showClearButton && (\n            <Button\n              variant=\"plain\"\n              onClick={clearChipsAndInput}\n              aria-label=\"Clear button and input\"\n              icon={<RhMicronsCloseIcon />}\n            />\n          )}\n        </TextInputGroupUtilities>\n      )}\n    </TextInputGroup>\n  );\n};\n","title":"With filters","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When a text input group is used within a data view, like a table, you can nest filter labels within the group. To do this, pass a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<LabelGroup>`}
+        </code>
+        {` to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TextInputGroupMain>`}
+        </code>
+        {`, with all of the labels that a user has selected. Users can interact with these labels as needed.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic text input group"])}
+    {React.createElement(pageData.examples["Disabled text input group"])}
+    {React.createElement(pageData.examples["With icon and utilities"])}
+    {React.createElement(pageData.examples["With validation"])}
+    {React.createElement(pageData.examples["With filters"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsTextInputGroupReactDocs';
+Component.pageData = pageData;
+
+export default Component;