@patternfly/react-core 4.265.1 → 4.265.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.265.1",
+  "version": "4.265.2",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -77,5 +77,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "48ab4d42a8037f77aa57bdfa3211745d4d873f34"
+  "gitHead": "16dc61cc8c2e8ee43522c388c638290d34bbb20b"
 }

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -133,21 +133,24 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
 
   const handleValueChange = (attribute: string, newValue: string, event: React.FormEvent<HTMLInputElement>) => {
     const newMap = getAttrValueMap();
+
     newMap[attribute] = newValue;
     let updatedValue = '';
     Object.entries(newMap).forEach(([k, v]) => {
       if (v.trim() !== '') {
+        /* Wrap the value in quotes if it contains spaces */
+        const quoteWrappedValue = v.includes(' ') ? `'${v.replace(/(^'|'$)/g, '')}'` : v;
+
         if (k !== 'haswords') {
-          updatedValue = `${updatedValue} ${k}${advancedSearchDelimiter}${v}`;
+          updatedValue = `${updatedValue} ${k}${advancedSearchDelimiter}${quoteWrappedValue}`;
         } else {
-          updatedValue = `${updatedValue} ${v}`;
+          updatedValue = `${updatedValue} ${quoteWrappedValue}`;
         }
       }
     });
-    updatedValue = updatedValue.replace(/^\s+/g, '');
 
     if (onChange) {
-      onChange(updatedValue, event);
+      onChange(updatedValue.replace(/^\s+/g, ''), event);
     }
   };
 

package/src/components/SearchInput/SearchInput.tsx

@@ -229,13 +229,36 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     setIsSearchMenuOpen(false);
   };
 
+  const splitStringExceptInQuotes = (str: string) => {
+    let quoteType: string;
+
+    return str.match(/\\?.|^$/g).reduce(
+      (p: any, c: string) => {
+        if (c === "'" || c === '"') {
+          if (!quoteType) {
+            quoteType = c;
+          }
+          if (c === quoteType) {
+            p.quote = !p.quote;
+          }
+        } else if (!p.quote && c === ' ') {
+          p.a.push('');
+        } else {
+          p.a[p.a.length - 1] += c.replace(/\\(.)/, '$1');
+        }
+        return p;
+      },
+      { a: [''] }
+    ).a;
+  };
+
   const getAttrValueMap = () => {
     const attrValue: { [key: string]: string } = {};
-    const pairs = searchValue.split(' ');
-    pairs.map(pair => {
+    const pairs = splitStringExceptInQuotes(searchValue);
+    pairs.map((pair: string) => {
       const splitPair = pair.split(advancedSearchDelimiter);
       if (splitPair.length === 2) {
-        attrValue[splitPair[0]] = splitPair[1];
+        attrValue[splitPair[0]] = splitPair[1].replace(/(^'|'$)/g, '');
       } else if (splitPair.length === 1) {
         attrValue.haswords = attrValue.hasOwnProperty('haswords')
           ? `${attrValue.haswords} ${splitPair[0]}`

package/src/components/SearchInput/examples/SearchInput.md

@@ -48,5 +48,9 @@ the following example. The search input component can also be used as a composab
 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>.
 
+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.
+
 ```ts file='./SearchInputAdvanced.tsx'
 ```