@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -21,31 +21,35 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
         type="text"
         value="[object Object]"
       />
-      <button
-        aria-disabled="false"
-        aria-label="'Copy to clipboard'"
-        aria-labelledby="copy-button-0 text-input-0"
-        class="pf-c-button pf-m-control"
-        data-ouia-component-id="OUIA-Generated-Button-control-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        id="copy-button-0"
-        type="button"
+      <div
+        style="display: contents;"
       >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style="vertical-align: -0.125em;"
-          viewBox="0 0 448 512"
-          width="1em"
+        <button
+          aria-disabled="false"
+          aria-label="'Copy to clipboard'"
+          aria-labelledby="copy-button-0 text-input-0"
+          class="pf-c-button pf-m-control"
+          data-ouia-component-id="OUIA-Generated-Button-control-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          id="copy-button-0"
+          type="button"
         >
-          <path
-            d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-          />
-        </svg>
-      </button>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -2,30 +2,34 @@
 
 exports[`copy button render 1`] = `
 <DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="click this button to copy text"
-    aria-labelledby="my-id my-text-id"
-    class="pf-c-button pf-m-control fancy-copy-button"
-    data-ouia-component-id="OUIA-Generated-Button-control-1"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    id="my-id"
-    type="button"
+  <div
+    style="display: contents;"
   >
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      style="vertical-align: -0.125em;"
-      viewBox="0 0 448 512"
-      width="1em"
+    <button
+      aria-disabled="false"
+      aria-label="click this button to copy text"
+      aria-labelledby="my-id my-text-id"
+      class="pf-c-button pf-m-control fancy-copy-button"
+      data-ouia-component-id="OUIA-Generated-Button-control-1"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      id="my-id"
+      type="button"
     >
-      <path
-        d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-      />
-    </svg>
-  </button>
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 448 512"
+        width="1em"
+      >
+        <path
+          d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+        />
+      </svg>
+    </button>
+  </div>
 </DocumentFragment>
 `;

package/src/components/CodeBlock/CodeBlock.tsx

@@ -18,9 +18,11 @@ export const CodeBlock: React.FunctionComponent<CodeBlockProps> = ({
   ...props
 }: CodeBlockProps) => (
   <div className={css(styles.codeBlock, className)} {...props}>
-    <div className={css(styles.codeBlockHeader)}>
-      <div className={css(styles.codeBlockActions)}>{actions && actions}</div>
-    </div>
+    {actions && (
+      <div className={css(styles.codeBlockHeader)}>
+        <div className={css(styles.codeBlockActions)}>{actions}</div>
+      </div>
+    )}
     <div className={css(styles.codeBlockContent)}>{children}</div>
   </div>
 );

package/src/components/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap

@@ -5,13 +5,6 @@ exports[`CodeBlock renders successfully 1`] = `
   <div
     class="pf-c-code-block"
   >
-    <div
-      class="pf-c-code-block__header"
-    >
-      <div
-        class="pf-c-code-block__actions"
-      />
-    </div>
     <div
       class="pf-c-code-block__content"
     >

package/src/components/ContextSelector/ContextSelector.tsx

@@ -1,20 +1,15 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
 import { css } from '@patternfly/react-styles';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import { ContextSelectorToggle } from './ContextSelectorToggle';
 import { ContextSelectorMenuList } from './ContextSelectorMenuList';
 import { ContextSelectorContext } from './contextSelectorConstants';
-import { Button, ButtonVariant } from '../Button';
-import { TextInput } from '../TextInput';
-import { InputGroup } from '../InputGroup';
-import { KeyTypes } from '../../helpers/constants';
 import { FocusTrap, getUniqueId } from '../../helpers';
-import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { Popper } from '../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { SearchInput } from '../SearchInput';
 
-export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>, OUIAProps {
+export interface ContextSelectorProps extends OUIAProps {
   /** content rendered inside the Context Selector */
   children?: React.ReactNode;
   /** Classes applied to root element of Context Selector */
@@ -46,7 +41,7 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
   /** Value in the Search field */
   searchInputValue?: string;
   /** Function callback called when user changes the Search Input */
-  onSearchInputChange?: (value: string) => void;
+  onSearchInputChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Search Input placeholder */
   searchInputPlaceholder?: string;
   /** Function callback for when Search Button is clicked */
@@ -66,8 +61,6 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
   isFlipEnabled?: boolean;
   /** Id of the context selector */
   id?: string;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
   /** z-index of the context selector when menuAppendTo is not inline. */
   zIndex?: number;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -98,7 +91,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     isPlain: false,
     isText: false,
     isFlipEnabled: true,
-    removeFindDomNode: false,
     zIndex: 9999
   };
   constructor(props: ContextSelectorProps) {
@@ -111,12 +103,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
   parentRef: React.RefObject<HTMLDivElement> = React.createRef();
   popperRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-  onEnterPressed = (event: any) => {
-    if (event.key === KeyTypes.Enter) {
-      this.props.onSearchButtonClick();
-    }
-  };
-
   render() {
     const {
       children,
@@ -141,7 +127,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       disableFocusTrap,
       isFlipEnabled,
       id,
-      removeFindDomNode,
       zIndex,
       ...props
     } = this.props;
@@ -159,23 +144,16 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
             focusTrapOptions={{ clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } }}
           >
             <div className={css(styles.contextSelectorMenuSearch)}>
-              <InputGroup>
-                <TextInput
-                  value={searchInputValue}
-                  type="search"
-                  placeholder={searchInputPlaceholder}
-                  onChange={onSearchInputChange}
-                  onKeyPress={this.onEnterPressed}
-                  aria-label={searchButtonAriaLabel}
-                />
-                <Button
-                  variant={ButtonVariant.control}
-                  aria-label={searchButtonAriaLabel}
-                  onClick={onSearchButtonClick}
-                >
-                  <SearchIcon aria-hidden="true" />
-                </Button>
-              </InputGroup>
+              <SearchInput
+                type="search"
+                submitSearchButtonLabel={searchButtonAriaLabel}
+                placeholder={searchInputPlaceholder}
+                onChange={onSearchInputChange}
+                onSearch={(event, _value, _) => {
+                  onSearchButtonClick(event);
+                }}
+                value={searchInputValue}
+              />
             </div>
             <ContextSelectorContext.Provider value={{ onSelect }}>
               <ContextSelectorMenuList isOpen={isOpen}>{children}</ContextSelectorMenuList>
@@ -238,7 +216,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
         popper={popperContainer}
         appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
         isVisible={isOpen}
-        removeFindDomNode={removeFindDomNode}
         zIndex={zIndex}
       />
     );

package/src/components/ContextSelector/__tests__/ContextSelector.test.tsx

@@ -33,7 +33,7 @@ describe('ContextSelector', () => {
     const consoleError = jest.spyOn(console, 'error');
     const { asFragment } = render(
       <React.StrictMode>
-        <ContextSelector removeFindDomNode isOpen id="render">
+        <ContextSelector isOpen id="render">
           {items}
         </ContextSelector>
       </React.StrictMode>

package/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap

@@ -87,17 +87,42 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           <div
             class="pf-c-input-group"
           >
-            <input
-              aria-invalid="false"
-              aria-label="Search menu items"
-              class="pf-c-form-control"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-              data-ouia-component-type="PF4/TextInput"
-              data-ouia-safe="true"
-              placeholder="Search"
-              type="search"
-              value=""
-            />
+            <div
+              class="pf-c-text-input-group"
+            >
+              <div
+                class="pf-c-text-input-group__main pf-m-icon"
+              >
+                <span
+                  class="pf-c-text-input-group__text"
+                >
+                  <span
+                    class="pf-c-text-input-group__icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 512 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                      />
+                    </svg>
+                  </span>
+                  <input
+                    aria-label="Search input"
+                    class="pf-c-text-input-group__text-input"
+                    placeholder="Search"
+                    type="search"
+                    value=""
+                  />
+                </span>
+              </div>
+            </div>
             <button
               aria-disabled="false"
               aria-label="Search menu items"
@@ -105,7 +130,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
               data-ouia-component-id="OUIA-Generated-Button-control-1"
               data-ouia-component-type="PF4/Button"
               data-ouia-safe="true"
-              type="button"
+              type="submit"
             >
               <svg
                 aria-hidden="true"
@@ -113,11 +138,11 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
                 height="1em"
                 role="img"
                 style="vertical-align: -0.125em;"
-                viewBox="0 0 512 512"
+                viewBox="0 0 448 512"
                 width="1em"
               >
                 <path
-                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
                 />
               </svg>
             </button>
@@ -231,17 +256,42 @@ exports[`ContextSelector Renders in strict mode 1`] = `
           <div
             class="pf-c-input-group"
           >
-            <input
-              aria-invalid="false"
-              aria-label="Search menu items"
-              class="pf-c-form-control"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-              data-ouia-component-type="PF4/TextInput"
-              data-ouia-safe="true"
-              placeholder="Search"
-              type="search"
-              value=""
-            />
+            <div
+              class="pf-c-text-input-group"
+            >
+              <div
+                class="pf-c-text-input-group__main pf-m-icon"
+              >
+                <span
+                  class="pf-c-text-input-group__text"
+                >
+                  <span
+                    class="pf-c-text-input-group__icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 512 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                      />
+                    </svg>
+                  </span>
+                  <input
+                    aria-label="Search input"
+                    class="pf-c-text-input-group__text-input"
+                    placeholder="Search"
+                    type="search"
+                    value=""
+                  />
+                </span>
+              </div>
+            </div>
             <button
               aria-disabled="false"
               aria-label="Search menu items"
@@ -249,7 +299,7 @@ exports[`ContextSelector Renders in strict mode 1`] = `
               data-ouia-component-id="OUIA-Generated-Button-control-3"
               data-ouia-component-type="PF4/Button"
               data-ouia-safe="true"
-              type="button"
+              type="submit"
             >
               <svg
                 aria-hidden="true"
@@ -257,11 +307,11 @@ exports[`ContextSelector Renders in strict mode 1`] = `
                 height="1em"
                 role="img"
                 style="vertical-align: -0.125em;"
-                viewBox="0 0 512 512"
+                viewBox="0 0 448 512"
                 width="1em"
               >
                 <path
-                  d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
                 />
               </svg>
             </button>

package/src/components/ContextSelector/examples/ContextSelectorBasic.tsx

@@ -44,7 +44,7 @@ export const ContextSelectorBasic: React.FunctionComponent = () => {
     setOpen(!isOpen);
   };
 
-  const onSearchInputChange = (value: string) => {
+  const onSearchInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setSearchValue(value);
   };
 

package/src/components/ContextSelector/examples/ContextSelectorPlainText.tsx

@@ -43,7 +43,7 @@ export const ContextSelectorPlainText: React.FunctionComponent = () => {
     setOpen(!isOpen);
   };
 
-  const onSearchInputChange = (value: string) => {
+  const onSearchInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setSearchValue(value);
   };
 

package/src/components/ContextSelector/examples/ContextSelectorWithFooter.tsx

@@ -43,7 +43,7 @@ export const ContextSelectorWithFooter: React.FunctionComponent = () => {
     setOpen(!isOpen);
   };
 
-  const onSearchInputChange = (value: string) => {
+  const onSearchInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setSearchValue(value);
   };