@patternfly/react-core 4.265.1 → 4.266.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.265.1",
+  "version": "4.266.0",
   "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": "c7ebbf2f2179a313370f6d386fec2c6c4fa5d9c2"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -65,6 +65,8 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
   /** Maximum width of the tooltip (default 150px). */
   maxWidth?: string;
   /** Delay in ms before the tooltip disappears. */
@@ -125,7 +127,8 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     textAriaLabel: 'Copyable input',
     toggleAriaLabel: 'Show content',
     additionalActions: null,
-    ouiaSafe: true
+    ouiaSafe: true,
+    removeFindDomNode: false
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -177,6 +180,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
       additionalActions,
       ouiaId,
       ouiaSafe,
+      removeFindDomNode,
       ...divProps
     } = this.props;
     const textIdPrefix = 'text-input-';
@@ -269,6 +273,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                       this.setState({ copied: true });
                     }}
                     onTooltipHidden={() => this.setState({ copied: false })}
+                    removeFindDomNode={removeFindDomNode}
                   >
                     {this.state.copied ? clickTip : hoverTip}
                   </ClipboardCopyButton>

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -39,6 +39,8 @@ export interface ClipboardCopyButtonProps
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
   /** Aria-label for the copy button */
   'aria-label'?: string;
   /** Variant of the copy button */
@@ -59,6 +61,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   children,
   variant = 'control',
   onTooltipHidden = () => {},
+  removeFindDomNode = false,
   ...props
 }: ClipboardCopyButtonProps) => (
   <Tooltip
@@ -71,6 +74,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
     aria="none"
     content={<div>{children}</div>}
     onTooltipHidden={onTooltipHidden}
+    removeFindDomNode={removeFindDomNode}
   >
     <Button
       type="button"

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'
 ```

package/src/components/Truncate/Truncate.tsx

@@ -41,6 +41,8 @@ interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
 }
 
 const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
@@ -51,9 +53,10 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   tooltipPosition = 'top',
   trailingNumChars = 7,
   content,
+  removeFindDomNode,
   ...props
 }: TruncateProps) => (
-  <Tooltip position={tooltipPosition} content={content}>
+  <Tooltip position={tooltipPosition} content={content} removeFindDomNode={removeFindDomNode}>
     <span className={css(styles.truncate, className)} {...props}>
       {(position === TruncatePosition.end || position === TruncatePosition.start) && (
         <span className={truncateStyles[position]}>