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

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useEffect, useRef, useState } from 'react';
+import {
+Button,
+Card,
+CardBody,
+CardFooter,
+DatePicker,
+Form,
+FormGroup,
+Grid,
+GridItem,
+Menu,
+MenuContent,
+MenuItem,
+MenuList,
+MenuToggle,
+Popper,
+SearchInput,
+TextInput
+} from '@patternfly/react-core';
+import { words } from '../../../../../react-core/src/demos/SearchInput/./words.js';
+const pageData = {
+  "id": "Search input",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/search-input/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/SearchInput/SearchInput.md",
+  "relPath": "packages/react-core/src/demos/SearchInput/SearchInput.md",
+  "examples": [
+    "Search with autocomplete",
+    "Composable advanced search"
+  ]
+};
+pageData.liveContext = {
+  useEffect,
+  useRef,
+  useState,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  DatePicker,
+  Form,
+  FormGroup,
+  Grid,
+  GridItem,
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuList,
+  MenuToggle,
+  Popper,
+  SearchInput,
+  TextInput,
+  words
+};
+pageData.relativeImports = "import { words } from 'react-core/src/demos/SearchInput/./words.js';"
+pageData.examples = {
+  'Search with autocomplete': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport { Menu, MenuContent, MenuItem, MenuList, Popper, SearchInput } from '@patternfly/react-core';\n\nimport { words } from '../words';\n\nexport const SearchInputAutocomplete: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  const [hint, setHint] = useState('');\n  const [autocompleteOptions, setAutocompleteOptions] = useState([]);\n\n  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);\n\n  const searchInputRef = useRef(null);\n  const autocompleteRef = useRef(null);\n\n  const onClear = () => {\n    setValue('');\n  };\n\n  const onChange = (_event, newValue) => {\n    if (\n      newValue !== '' &&\n      searchInputRef &&\n      searchInputRef.current &&\n      searchInputRef.current.contains(document.activeElement)\n    ) {\n      setIsAutocompleteOpen(true);\n\n      // When the value of the search input changes, build a list of no more than 10 autocomplete options.\n      // Options which start with the search input value are listed first, followed by options which contain\n      // the search input value.\n      let options = words\n        .filter((option) => option.startsWith(newValue.toLowerCase()))\n        .map((option) => (\n          <MenuItem itemId={option} key={option}>\n            {option}\n          </MenuItem>\n        ));\n      if (options.length > 10) {\n        options = options.slice(0, 10);\n      } else {\n        options = [\n          ...options,\n          ...words\n            .filter((option) => !option.startsWith(newValue.toLowerCase()) && option.includes(newValue.toLowerCase()))\n            .map((option) => (\n              <MenuItem itemId={option} key={option}>\n                {option}\n              </MenuItem>\n            ))\n        ].slice(0, 10);\n      }\n\n      // The hint is set whenever there is only one autocomplete option left.\n      setHint(options.length === 1 ? options[0].props.itemId : '');\n      // The menu is hidden if there are no options\n      setIsAutocompleteOpen(options.length > 0);\n      setAutocompleteOptions(options);\n    } else {\n      setIsAutocompleteOpen(false);\n    }\n    setValue(newValue);\n  };\n\n  // Whenever an autocomplete option is selected, set the search input value, close the menu, and put the browser\n  // focus back on the search input\n  const onSelect = (e, itemId) => {\n    e.stopPropagation();\n    setValue(itemId);\n    setIsAutocompleteOpen(false);\n    searchInputRef.current.focus();\n  };\n\n  const handleMenuKeys = (event) => {\n    // If there is a hint while the browser focus is on the search input, tab or right arrow will 'accept' the hint value\n    // and set it as the search input value\n    if (hint && (event.key === 'Tab' || event.key === 'ArrowRight') && searchInputRef.current === event.target) {\n      setValue(hint);\n      setHint('');\n      setIsAutocompleteOpen(false);\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n      }\n      // if the autocomplete is open and the browser focus is on the search input,\n    } else if (isAutocompleteOpen && searchInputRef.current && searchInputRef.current === event.target) {\n      // the escape key closes the autocomplete menu and keeps the focus on the search input.\n      if (event.key === 'Escape') {\n        setIsAutocompleteOpen(false);\n        searchInputRef.current.focus();\n        // the up and down arrow keys move browser focus into the autocomplete menu\n      } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        const firstElement = autocompleteRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && firstElement.focus();\n        event.preventDefault(); // by default, the up and down arrow keys scroll the window\n        // the tab, enter, and space keys will close the menu, and the tab key will move browser\n        // focus forward one element (by default)\n      } else if (event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') {\n        setIsAutocompleteOpen(false);\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n        }\n      }\n      // If the autocomplete is open and the browser focus is in the autocomplete menu\n      // hitting tab will close the autocomplete and but browser focus back on the search input.\n    } else if (isAutocompleteOpen && autocompleteRef.current.contains(event.target) && event.key === 'Tab') {\n      event.preventDefault();\n      setIsAutocompleteOpen(false);\n      searchInputRef.current.focus();\n    }\n  };\n\n  // The autocomplete menu should close if the user clicks outside the menu.\n  const handleClickOutside = (event) => {\n    if (\n      isAutocompleteOpen &&\n      autocompleteRef &&\n      autocompleteRef.current &&\n      !autocompleteRef.current.contains(event.target)\n    ) {\n      setIsAutocompleteOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isAutocompleteOpen, hint, searchInputRef.current]);\n\n  const searchInput = (\n    <SearchInput\n      value={value}\n      onChange={onChange}\n      onClear={onClear}\n      ref={searchInputRef}\n      hint={hint}\n      id=\"autocomplete-search\"\n      aria-label=\"Search with autocomplete\"\n    />\n  );\n\n  const autocomplete = (\n    <Menu ref={autocompleteRef} onSelect={onSelect}>\n      <MenuContent>\n        <MenuList>{autocompleteOptions}</MenuList>\n      </MenuContent>\n    </Menu>\n  );\n\n  return (\n    <Popper\n      trigger={searchInput}\n      triggerRef={searchInputRef}\n      popper={autocomplete}\n      popperRef={autocompleteRef}\n      isVisible={isAutocompleteOpen}\n      enableFlip={false}\n      // append the autocomplete menu to the search input in the DOM for the sake of the keyboard navigation experience\n      appendTo={() => document.querySelector('#autocomplete-search')}\n    />\n  );\n};\n","title":"Search with autocomplete","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demo handles building the advanced search form using the composable Menu, and the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`SearchInput`}
+        </code>
+        {`'s `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`hint`}
+        </code>
+        {` prop.
+It also demonstrates wiring up the appropriate keyboard interactions, focus management, and general event handling.`}
+      </p>
+    </Example>,
+  'Composable advanced search': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport {\n  ActionGroup,\n  Button,\n  DatePicker,\n  Form,\n  FormGroup,\n  Grid,\n  GridItem,\n  isValidDate,\n  Menu,\n  MenuContent,\n  MenuItem,\n  MenuList,\n  MenuToggle,\n  Panel,\n  PanelMain,\n  PanelMainBody,\n  Popper,\n  SearchInput,\n  TextInput,\n  yyyyMMddFormat\n} from '@patternfly/react-core';\n\nexport const SearchInputAdvancedComposable: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  const [hasWords, setHasWords] = useState('');\n  const [dateWithin, setDateWithin] = useState('1 day');\n  const [date, setDate] = useState();\n\n  const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = useState(false);\n  const [isDateWithinOpen, setIsDateWithinOpen] = useState(false);\n\n  const isInitialMount = useRef(true);\n  const firstAttrRef = useRef(null);\n  const searchInputRef = useRef(null);\n  const advancedSearchPaneRef = useRef(null);\n  const dateWithinToggleRef = useRef(undefined);\n  const dateWithinMenuRef = useRef(undefined);\n\n  const onClear = () => {\n    setValue('');\n    setHasWords('');\n    setDateWithin('');\n    setDate('');\n  };\n\n  const onChange = (_event, value) => {\n    if (value.length <= hasWords.length + 1) {\n      setValue(value);\n      setHasWords(value);\n    } else {\n      setValue(hasWords);\n    }\n  };\n\n  // After initial page load, whenever the advanced search menu is opened, the browser focus should be placed on the\n  // first advanced search form input. Whenever the advanced search menu is closed, the browser focus should\n  // be returned to the search input.\n  useEffect(() => {\n    if (isInitialMount.current) {\n      isInitialMount.current = false;\n    } else {\n      if (isAdvancedSearchOpen && firstAttrRef && firstAttrRef.current) {\n        firstAttrRef.current.focus();\n      } else if (!isAdvancedSearchOpen && searchInputRef) {\n        searchInputRef.current.focus();\n      }\n    }\n  }, [isAdvancedSearchOpen]);\n\n  // If a menu is open and has browser focus, then the escape key closes them and puts the browser focus onto their\n  // respective toggle. The 'date within' menu also needs to close when the 'tab' key is hit. However, hitting tab while\n  // focus is in the advanced search form should move the focus to the next form input, not close the advanced search\n  // menu.\n  const handleMenuKeys = (event) => {\n    if (isDateWithinOpen && dateWithinMenuRef.current && dateWithinMenuRef.current.contains(event.target)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsDateWithinOpen(!isDateWithinOpen);\n        dateWithinToggleRef.current.focus();\n      }\n    }\n    if (isAdvancedSearchOpen && advancedSearchPaneRef.current && advancedSearchPaneRef.current.contains(event.target)) {\n      if (\n        event.key === 'Escape' ||\n        (event.key === 'Tab' &&\n          !event.shiftKey &&\n          advancedSearchPaneRef.current.querySelector('button[type=reset]') === event.target)\n      ) {\n        setIsAdvancedSearchOpen(!isAdvancedSearchOpen);\n        searchInputRef.current.focus();\n      }\n    }\n  };\n\n  // If a menu is open and has browser focus, then clicking outside the menu should close it.\n  const handleClickOutside = (event) => {\n    if (\n      isDateWithinOpen &&\n      dateWithinMenuRef &&\n      dateWithinMenuRef.current &&\n      !dateWithinMenuRef.current.contains(event.target)\n    ) {\n      setIsDateWithinOpen(false);\n    }\n    if (\n      isAdvancedSearchOpen &&\n      advancedSearchPaneRef &&\n      advancedSearchPaneRef.current &&\n      !advancedSearchPaneRef.current.contains(event.target)\n    ) {\n      setIsAdvancedSearchOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [dateWithinMenuRef.current, advancedSearchPaneRef.current, isAdvancedSearchOpen, isDateWithinOpen]);\n\n  // This demo and its handling of 'date within' and a date picker is modeled after the gmail advanced search form.\n  const onSubmit = (event, _value) => {\n    event.preventDefault();\n\n    if (isValidDate(new Date(date)) && dateWithin) {\n      const afterDate = new Date(date);\n      const toDate = new Date(date);\n      switch (dateWithin) {\n        case '1 day':\n          afterDate.setDate(afterDate.getDate());\n          toDate.setDate(toDate.getDate() + 2);\n          break;\n        case '3 days':\n          afterDate.setDate(afterDate.getDate() - 2);\n          toDate.setDate(toDate.getDate() + 4);\n          break;\n        case '1 week':\n          afterDate.setDate(afterDate.getDate() - 6);\n          toDate.setDate(toDate.getDate() + 8);\n          break;\n        case '2 weeks':\n          afterDate.setDate(afterDate.getDate() - 13);\n          toDate.setDate(toDate.getDate() + 15);\n          break;\n        case '1 month':\n          afterDate.setMonth(afterDate.getMonth() - 1);\n          afterDate.setDate(afterDate.getDate() + 1);\n          toDate.setMonth(toDate.getMonth() + 1);\n          toDate.setDate(toDate.getDate() + 1);\n          break;\n        case '2 months':\n          afterDate.setMonth(afterDate.getMonth() - 2);\n          afterDate.setDate(afterDate.getDate() + 1);\n          toDate.setMonth(toDate.getMonth() + 2);\n          toDate.setDate(toDate.getDate() + 1);\n          break;\n        case '6 months':\n          afterDate.setMonth(afterDate.getMonth() - 6);\n          afterDate.setDate(afterDate.getDate() + 1);\n          toDate.setMonth(toDate.getMonth() + 6);\n          toDate.setDate(toDate.getDate() + 1);\n          break;\n        case '1 year':\n          afterDate.setFullYear(afterDate.getFullYear() - 1);\n          afterDate.setDate(afterDate.getDate() + 1);\n          toDate.setFullYear(toDate.getFullYear() + 1);\n          toDate.setDate(toDate.getDate() + 1);\n          break;\n      }\n      setValue(`${hasWords && hasWords + ' '}after:${yyyyMMddFormat(afterDate)} to:${yyyyMMddFormat(toDate)}`);\n    } else {\n      setValue(hasWords);\n    }\n\n    setIsAdvancedSearchOpen(false);\n  };\n\n  const searchInput = (\n    <SearchInput\n      value={value}\n      onChange={onChange}\n      onToggleAdvancedSearch={(e, isOpen) => {\n        e.stopPropagation();\n        setIsAdvancedSearchOpen(isOpen);\n      }}\n      isAdvancedSearchOpen={isAdvancedSearchOpen}\n      onClear={onClear}\n      onSearch={onSubmit}\n      ref={searchInputRef}\n      id=\"custom-advanced-search\"\n      aria-label=\"Composable advanced search\"\n    />\n  );\n\n  // Clicking the 'date within' toggle should open its associated menu and then place the browser\n  // focus on the first menu item.\n  const toggleDateWithinMenu = (ev) => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (dateWithinMenuRef.current) {\n        const firstElement = dateWithinMenuRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && firstElement.focus();\n      }\n    }, 0);\n    setIsDateWithinOpen(!isDateWithinOpen);\n  };\n\n  // Selecting a date within option closes the menu, sets the value of date within, and puts browser focus back\n  // on the date within toggle.\n  const onDateWithinSelect = (e, itemId) => {\n    e.stopPropagation();\n    setIsDateWithinOpen(false);\n    setDateWithin(itemId);\n    if (dateWithinToggleRef && dateWithinToggleRef.current) {\n      dateWithinToggleRef.current.focus();\n    }\n  };\n\n  const dateWithinOptions = (\n    <Menu ref={dateWithinMenuRef} selected={dateWithin} onSelect={onDateWithinSelect}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId=\"1 day\">1 day</MenuItem>\n          <MenuItem itemId=\"3 days\">3 days</MenuItem>\n          <MenuItem itemId=\"1 week\">1 week</MenuItem>\n          <MenuItem itemId=\"2 weeks\">2 weeks</MenuItem>\n          <MenuItem itemId=\"1 month\">1 month</MenuItem>\n          <MenuItem itemId=\"2 months\">2 months</MenuItem>\n          <MenuItem itemId=\"6 months\">6 months</MenuItem>\n          <MenuItem itemId=\"1 year\">1 year</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n\n  const dateWithinToggle = (\n    <MenuToggle\n      ref={dateWithinToggleRef}\n      onClick={toggleDateWithinMenu}\n      isExpanded={isDateWithinOpen}\n      style={{ width: '100%' }}\n    >\n      {dateWithin}\n    </MenuToggle>\n  );\n\n  const advancedForm = (\n    <div ref={advancedSearchPaneRef} role=\"dialog\" aria-label=\"Advanced search form\">\n      <Panel variant=\"raised\">\n        <PanelMain>\n          <PanelMainBody>\n            <Form>\n              <FormGroup label=\"Has the words\" fieldId=\"has-words\" key=\"has-words\">\n                <TextInput\n                  type=\"text\"\n                  id=\"has-words\"\n                  value={hasWords}\n                  onChange={(_event, value) => {\n                    setHasWords(value);\n                    setValue(value);\n                  }}\n                  ref={firstAttrRef}\n                />\n              </FormGroup>\n              <Grid hasGutter md={6}>\n                <GridItem>\n                  <FormGroup label=\"Date within\" fieldId=\"date-within\" key=\"date-within\">\n                    <Popper\n                      trigger={dateWithinToggle}\n                      triggerRef={dateWithinToggleRef}\n                      popper={dateWithinOptions}\n                      popperRef={dateWithinMenuRef}\n                      isVisible={isDateWithinOpen}\n                    />\n                  </FormGroup>\n                </GridItem>\n                <GridItem>\n                  <FormGroup label=\"Of date\" fieldId=\"date\" key=\"date\">\n                    <DatePicker\n                      id=\"datePicker\"\n                      style={{ width: '100%' }}\n                      value={date}\n                      onChange={(_e, newValue) => setDate(newValue)}\n                      appendTo={() => document.querySelector('#datePicker')}\n                    />\n                  </FormGroup>\n                </GridItem>\n              </Grid>\n              <ActionGroup>\n                <Button variant=\"primary\" type=\"submit\" onClick={(e) => onSubmit(null, e)}>\n                  Submit\n                </Button>\n                {!!onClear && (\n                  <Button variant=\"link\" type=\"reset\" onClick={onClear}>\n                    Reset\n                  </Button>\n                )}\n              </ActionGroup>\n            </Form>\n          </PanelMainBody>\n        </PanelMain>\n      </Panel>\n    </div>\n  );\n\n  // Popper is just one way to build a relationship between a toggle and a menu.\n  return (\n    <Popper\n      trigger={searchInput}\n      triggerRef={searchInputRef}\n      popper={advancedForm}\n      popperRef={advancedSearchPaneRef}\n      isVisible={isAdvancedSearchOpen}\n      enableFlip={false}\n      appendTo={() => document.querySelector('#custom-advanced-search')}\n    />\n  );\n};\n","title":"Composable advanced search","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This demo handles building the advanced search form using the composable Menu, as well as wiring up a
+select using the composable Menu and MenuToggle components. This demo also demonstrates wiring up the appropriate
+keyboard interactions, focus management, and general event handling.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Note: This demo and its handling of 'date within' and a date picker is modeled after the gmail advanced search form.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Search with autocomplete"])}
+    {React.createElement(pageData.examples["Composable advanced search"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsSearchInputReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/search-input/react.js

@@ -0,0 +1,263 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useRef, useState } from 'react';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
+const pageData = {
+  "id": "Search input",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/search-input/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/SearchInput/examples/SearchInput.md",
+  "relPath": "packages/react-core/src/components/SearchInput/examples/SearchInput.md",
+  "propComponents": [
+    {
+      "name": "SearchInput",
+      "description": "",
+      "props": [
+        {
+          "name": "advancedSearchDelimiter",
+          "type": "string",
+          "description": "Delimiter in the query string for pairing attributes with search values.\nRequired whenever attributes are passed as props."
+        },
+        {
+          "name": "attributes",
+          "type": "string[] | SearchInputSearchAttribute[]",
+          "description": "Array of attribute values used for dynamically generated advanced search.",
+          "defaultValue": "[]"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the advanced search menu."
+        },
+        {
+          "name": "formAdditionalItems",
+          "type": "React.ReactNode",
+          "description": ""
+        },
+        {
+          "name": "getAttrValueMap",
+          "type": "() => { [key: string]: string }",
+          "description": "Function which builds an attribute-value map by parsing the value in the search input."
+        },
+        {
+          "name": "hasWordsAttrLabel",
+          "type": "React.ReactNode",
+          "description": "Attribute label for strings unassociated with one of the provided listed attributes.",
+          "defaultValue": "'Has words'"
+        },
+        {
+          "name": "isSearchMenuOpen",
+          "type": "boolean",
+          "description": "Flag for toggling the open/close state of the advanced search menu."
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.FormEvent<HTMLInputElement>, value: string) => void",
+          "description": "A callback for when the input value changes."
+        },
+        {
+          "name": "onClear",
+          "type": "(event: React.SyntheticEvent<HTMLButtonElement>) => void",
+          "description": "A callback for when the user clicks the clear button."
+        },
+        {
+          "name": "onSearch",
+          "type": "(\n  event: React.SyntheticEvent<HTMLButtonElement>,\n  value: string,\n  attrValueMap: { [key: string]: string }\n) => void",
+          "description": "A callback for when the search button is clicked."
+        },
+        {
+          "name": "onToggleAdvancedMenu",
+          "type": "(e: React.SyntheticEvent<HTMLButtonElement>) => void",
+          "description": "A callback for when the open advanced search button is clicked."
+        },
+        {
+          "name": "parentInputRef",
+          "type": "React.RefObject<any>",
+          "description": "Ref of the input element within the search input."
+        },
+        {
+          "name": "parentRef",
+          "type": "React.RefObject<any>",
+          "description": "Ref of the div wrapping the whole search input."
+        },
+        {
+          "name": "resetButtonLabel",
+          "type": "string",
+          "description": "Label for the button which resets the advanced search form and clears the search input.",
+          "defaultValue": "'Reset'"
+        },
+        {
+          "name": "submitSearchButtonLabel",
+          "type": "string",
+          "description": "Label for the button which calls the onSearch event handler.",
+          "defaultValue": "'Search'"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Value of the search input.",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "SearchInputSearchAttribute",
+      "description": "Properties for adding search attributes to an advanced search input. These properties must\nbe passed in as an object within an array to the search input component's attribute property.",
+      "props": [
+        {
+          "name": "attr",
+          "type": "string",
+          "description": "The search attribute's value to be provided in the search input's query string.\nIt should have no spaces and be unique for every attribute.",
+          "required": true
+        },
+        {
+          "name": "display",
+          "type": "React.ReactNode",
+          "description": "The search attribute's display name. It is used to label the field in the advanced\nsearch menu.",
+          "required": true
+        }
+      ]
+    },
+    {
+      "name": "SearchInputExpandable",
+      "description": "Properties for creating an expandable search input. These properties should be passed into\nthe search input component's expandableInput property.",
+      "props": [
+        {
+          "name": "hasAnimations",
+          "type": "boolean",
+          "description": "Flag indicating animations should be enabled when the search input expands and collapses. Note: this will change the component's DOM structure. In a future breaking change release, this will become the default behavior and will no longer be needed."
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag to indicate if the search input is expanded.",
+          "required": true
+        },
+        {
+          "name": "onToggleExpand",
+          "type": "(event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => void",
+          "description": "Callback function to toggle the expandable search input.",
+          "required": true
+        },
+        {
+          "name": "toggleAriaLabel",
+          "type": "string",
+          "description": "An accessible label for the expandable search input toggle.",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-search-input"
+  ],
+  "examples": [
+    "Basic",
+    "Match with result count",
+    "Match with navigable options",
+    "With submit button",
+    "Focus search input using ref",
+    "With expandable button",
+    "Advanced"
+  ]
+};
+pageData.liveContext = {
+  useRef,
+  useState,
+  RhUiExternalLinkFillIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { SearchInput } from '@patternfly/react-core';\n\nexport const SearchInputBasic: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n\n  const onChange = (value: string) => {\n    setValue(value);\n  };\n\n  return (\n    <SearchInput\n      aria-label=\"Search basic example\"\n      placeholder=\"Find by name\"\n      value={value}\n      onChange={(_event, value) => onChange(value)}\n      onClear={() => onChange('')}\n    />\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Match with result count': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { SearchInput } from '@patternfly/react-core';\n\nexport const SearchInputWithResultCount: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  const [resultsCount, setResultsCount] = useState(0);\n\n  const onChange = (value: string) => {\n    setValue(value);\n    setResultsCount(3);\n  };\n\n  const onClear = () => {\n    setValue('');\n    setResultsCount(0);\n  };\n\n  return (\n    <SearchInput\n      aria-label=\"Match with result count\"\n      placeholder=\"Find by name\"\n      value={value}\n      onChange={(_event, value) => onChange(value)}\n      onClear={onClear}\n      resultsCount={resultsCount}\n    />\n  );\n};\n","title":"Match with result count","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Match with navigable options': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { SearchInput } from '@patternfly/react-core';\n\nexport const SearchInputWithNavigableOptions: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  const [resultsCount, setResultsCount] = useState(0);\n  const [currentResult, setCurrentResult] = useState(1);\n\n  const onChange = (value: string) => {\n    setValue(value);\n    setResultsCount(3);\n  };\n\n  const onClear = () => {\n    setValue('');\n    setResultsCount(0);\n    setCurrentResult(1);\n  };\n\n  const onNext = () => {\n    const newCurrentResult = currentResult + 1;\n    setCurrentResult(newCurrentResult > resultsCount ? resultsCount : newCurrentResult);\n  };\n\n  const onPrevious = () => {\n    const newCurrentResult = currentResult - 1;\n    setCurrentResult(newCurrentResult > 0 ? newCurrentResult : 1);\n  };\n\n  return (\n    <SearchInput\n      aria-label=\"Search match with navigable options example\"\n      placeholder=\"Find by name\"\n      value={value}\n      onChange={(_event, value) => onChange(value)}\n      onClear={onClear}\n      isNextNavigationButtonDisabled={currentResult === 3}\n      isPreviousNavigationButtonDisabled={currentResult === 1}\n      resultsCount={`${currentResult} / ${resultsCount}`}\n      onNextClick={onNext}\n      onPreviousClick={onPrevious}\n    />\n  );\n};\n","title":"Match with navigable options","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With submit button': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { SearchInput } from '@patternfly/react-core';\n\nexport const SearchInputWithSubmitButton: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n\n  return (\n    <SearchInput\n      aria-label=\"Search with submit button example\"\n      placeholder=\"Find by name\"\n      value={value}\n      onChange={(_event, value) => setValue(value)}\n      onSearch={(_event, value) => setValue(value)}\n      onClear={() => setValue('')}\n    />\n  );\n};\n","title":"With submit button","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Focus search input using ref': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useRef, useState } from 'react';\nimport { SearchInput, Button } from '@patternfly/react-core';\n\nexport const SearchInputFocusSearch: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  const ref: React.MutableRefObject<HTMLInputElement | null> = useRef(null);\n\n  return (\n    <>\n      <SearchInput\n        ref={ref}\n        value={value}\n        onChange={(_event, value) => setValue(value)}\n        onClear={() => setValue('')}\n        aria-label=\"Search focus using ref example\"\n      />\n      <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>\n    </>\n  );\n};\n","title":"Focus search input using ref","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With expandable button': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { SearchInput } from '@patternfly/react-core';\n\nexport const SearchInputWithExpandable: React.FunctionComponent = () => {\n  const [value, setValue] = useState('');\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onChange = (value: string) => {\n    setValue(value);\n  };\n\n  const onToggleExpand = (_event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => {\n    setIsExpanded(!isExpanded);\n  };\n\n  return (\n    <SearchInput\n      aria-label=\"Search with expandable button example\"\n      placeholder=\"Find by name\"\n      value={value}\n      onChange={(_event, value) => onChange(value)}\n      onClear={() => onChange('')}\n      expandableInput={{\n        isExpanded,\n        onToggleExpand,\n        toggleAriaLabel: 'Expandable search input toggle',\n        hasAnimations: true\n      }}\n    />\n  );\n};\n","title":"With expandable button","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Animations on the expansion and collapse of the search input may be opted into by passing `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`hasAnimations`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`expandableInput`}
+        </code>
+        {` object.`}
+      </p>
+    </Example>,
+  'Advanced': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';\nimport RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';\n\nexport const SearchInputAdvanced: React.FunctionComponent = () => {\n  const [value, setValue] = useState('username:player firstname:john');\n  const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = useState(false);\n  const [useCustomFooter, setUseCustomFooter] = useState(false);\n\n  const toggleDelimiter = (checked: boolean) => {\n    setValue(value.replace(/:|=/g, checked ? '=' : ':'));\n    setUseEqualsAsDelimiter(checked);\n  };\n\n  return (\n    <>\n      <Checkbox\n        label=\"Use equal sign as search attribute delimiter\"\n        isChecked={useEqualsAsDelimiter}\n        onChange={(_event, checked) => toggleDelimiter(checked)}\n        aria-label=\"change delimiter checkbox\"\n        id=\"toggle-delimiter\"\n        name=\"toggle-delimiter\"\n      />\n      <Checkbox\n        label=\"Add custom footer element after the attributes in the menu\"\n        isChecked={useCustomFooter}\n        onChange={(_event, checked) => setUseCustomFooter(checked)}\n        aria-label=\"change use custom footer checkbox\"\n        id=\"toggle-custom-footer\"\n        name=\"toggle-custom-footer\"\n      />\n      <br />\n      <SearchInput\n        aria-label=\"Advanced search\"\n        attributes={[\n          { attr: 'username', display: 'Username' },\n          { attr: 'firstname', display: 'First name' }\n        ]}\n        advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'}\n        value={value}\n        onChange={(_event, value) => setValue(value)}\n        onSearch={(_event, value) => setValue(value)}\n        onClear={() => setValue('')}\n        formAdditionalItems={\n          useCustomFooter ? (\n            <FormGroup>\n              <Button variant=\"link\" isInline icon={<RhUiExternalLinkFillIcon />} iconPosition=\"end\">\n                Link\n              </Button>\n            </FormGroup>\n          ) : null\n        }\n      />\n    </>\n  );\n};\n","title":"Advanced","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The search input component can be used to dynamically build a one to one attribute-value advanced search.
+Using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`attributes`}
+        </code>
+        {` prop alongside the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`advancedSearchDelimiter`}
+        </code>
+        {` will expose this functionality, as demonstrated in
+the following example. The search input component can also be used as a composable component and paired with a Popper
+or other elements to build a completely custom advanced search form. This feature is demonstrated
+in the search input's `}
+                <a href="/components/search-input/react-demos">{`react demos`}</a>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The values used in the attribute-value form fields may contain spaces. The values containing spaces
+should be wrapped with quotes inside the summary search string in the input field. If the latter is
+autogenerated from the individual fields the quotes will be autoplaced.`}
+      </p>
+    </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["Match with result count"])}
+    {React.createElement(pageData.examples["Match with navigable options"])}
+    {React.createElement(pageData.examples["With submit button"])}
+    {React.createElement(pageData.examples["Focus search input using ref"])}
+    {React.createElement(pageData.examples["With expandable button"])}
+    {React.createElement(pageData.examples["Advanced"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsSearchInputReactDocs';
+Component.pageData = pageData;
+
+export default Component;