@patternfly/react-core 4.236.6 → 4.236.9

package/src/components/OptionsMenu/OptionsMenu.tsx

@@ -47,6 +47,8 @@ export interface OptionsMenuProps
    * menuAppendTo={document.getElementById('target')}
    */
   menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
 }
 
 export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({
@@ -61,6 +63,7 @@ export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({
   menuAppendTo = 'inline',
   ouiaId,
   ouiaSafe = true,
+  removeFindDomNode = false,
   ...props
 }: OptionsMenuProps) => (
   <DropdownContext.Provider
@@ -88,6 +91,7 @@ export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({
       isGrouped={isGrouped}
       toggle={toggle}
       menuAppendTo={menuAppendTo}
+      removeFindDomNode={removeFindDomNode}
       {...props}
     />
   </DropdownContext.Provider>

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

@@ -31,6 +31,23 @@ describe('optionsMenu', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('renders in strict mode', () => {
+    const consoleError = jest.spyOn(console, 'error');
+    const { asFragment } = render(
+      <React.StrictMode>
+        <OptionsMenu
+          removeFindDomNode
+          id="regular"
+          menuItems={menuItems}
+          isOpen
+          toggle={<OptionsMenuToggle>Options Menu</OptionsMenuToggle>}
+        />
+      </React.StrictMode>
+    );
+    expect(consoleError).not.toHaveBeenCalled();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('right aligned', () => {
     const { asFragment } = render(
       <OptionsMenu

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

@@ -4,7 +4,7 @@ exports[`optionsMenu expanded 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-options-menu pf-m-expanded"
-    data-ouia-component-id="OUIA-Generated-OptionsMenu-5"
+    data-ouia-component-id="OUIA-Generated-OptionsMenu-7"
     data-ouia-component-type="PF4/OptionsMenu"
     data-ouia-safe="true"
     id="expanded"
@@ -14,7 +14,7 @@ exports[`optionsMenu expanded 1`] = `
       aria-haspopup="listbox"
       aria-label="Options menu"
       class="pf-c-options-menu__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
       id="expanded-toggle"
@@ -68,7 +68,7 @@ exports[`optionsMenu expanded 1`] = `
             <button
               aria-disabled="false"
               class="pf-c-options-menu__menu-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-1"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-13"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
@@ -85,7 +85,7 @@ exports[`optionsMenu expanded 1`] = `
             <button
               aria-disabled="false"
               class="pf-c-options-menu__menu-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-2"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-14"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
@@ -102,7 +102,7 @@ exports[`optionsMenu expanded 1`] = `
             <button
               aria-disabled="true"
               class="pf-m-disabled pf-c-options-menu__menu-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-3"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-15"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
@@ -119,7 +119,7 @@ exports[`optionsMenu expanded 1`] = `
             <button
               aria-disabled="false"
               class="pf-c-options-menu__menu-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-4"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-16"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
@@ -158,7 +158,7 @@ exports[`optionsMenu expanded 1`] = `
             <button
               aria-disabled="false"
               class="pf-c-options-menu__menu-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-5"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-17"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
@@ -175,7 +175,7 @@ exports[`optionsMenu expanded 1`] = `
             <button
               aria-disabled="false"
               class="pf-c-options-menu__menu-item"
-              data-ouia-component-id="OUIA-Generated-DropdownItem-6"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-18"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
               role="menuitem"
@@ -200,7 +200,7 @@ exports[`optionsMenu isDisabled 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-options-menu"
-    data-ouia-component-id="OUIA-Generated-OptionsMenu-8"
+    data-ouia-component-id="OUIA-Generated-OptionsMenu-10"
     data-ouia-component-type="PF4/OptionsMenu"
     data-ouia-safe="true"
     id="disabled"
@@ -210,7 +210,7 @@ exports[`optionsMenu isDisabled 1`] = `
       aria-haspopup="listbox"
       aria-label="Options menu"
       class="pf-c-options-menu__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
       disabled=""
@@ -246,7 +246,7 @@ exports[`optionsMenu open up 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-options-menu pf-m-top"
-    data-ouia-component-id="OUIA-Generated-OptionsMenu-3"
+    data-ouia-component-id="OUIA-Generated-OptionsMenu-5"
     data-ouia-component-type="PF4/OptionsMenu"
     data-ouia-safe="true"
     id="openUp"
@@ -256,7 +256,7 @@ exports[`optionsMenu open up 1`] = `
       aria-haspopup="listbox"
       aria-label="Options menu"
       class="pf-c-options-menu__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
       id="openUp-toggle"
@@ -291,7 +291,7 @@ exports[`optionsMenu plain 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-options-menu"
-    data-ouia-component-id="OUIA-Generated-OptionsMenu-6"
+    data-ouia-component-id="OUIA-Generated-OptionsMenu-8"
     data-ouia-component-type="PF4/OptionsMenu"
     data-ouia-safe="true"
     id="plain"
@@ -301,7 +301,7 @@ exports[`optionsMenu plain 1`] = `
       aria-haspopup="listbox"
       aria-label="Options menu"
       class="pf-c-options-menu__toggle pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
       id="plain-toggle"
@@ -358,11 +358,207 @@ exports[`optionsMenu regular 1`] = `
 </DocumentFragment>
 `;
 
+exports[`optionsMenu renders in strict mode 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-options-menu pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-OptionsMenu-3"
+    data-ouia-component-type="PF4/OptionsMenu"
+    data-ouia-safe="true"
+    id="regular"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="listbox"
+      aria-label="Options menu"
+      class="pf-c-options-menu__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="regular-toggle"
+      type="button"
+    >
+      <span
+        class="pf-c-options-menu__toggle-text"
+      />
+      <span
+        class="pf-c-options-menu__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 320 512"
+          width="1em"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      aria-labelledby="regular-toggle"
+      class="pf-c-options-menu__menu"
+      role="menu"
+    >
+      <section
+        class="pf-c-options-menu__group"
+        index="0"
+        role="none"
+      >
+        <h1
+          class="pf-c-options-menu__group-title"
+        >
+          Sort order
+        </h1>
+        <ul
+          aria-label=""
+          class=""
+          role="group"
+        >
+          <li
+            id=""
+            role="none"
+          >
+            <button
+              aria-disabled="false"
+              class="pf-c-options-menu__menu-item"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-2"
+              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-safe="true"
+              role="menuitem"
+              tabindex="-1"
+              type="button"
+            >
+              Name
+            </button>
+          </li>
+          <li
+            id=""
+            role="none"
+          >
+            <button
+              aria-disabled="false"
+              class="pf-c-options-menu__menu-item"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-4"
+              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-safe="true"
+              role="menuitem"
+              tabindex="-1"
+              type="button"
+            >
+              Date
+            </button>
+          </li>
+          <li
+            id=""
+            role="none"
+          >
+            <button
+              aria-disabled="true"
+              class="pf-m-disabled pf-c-options-menu__menu-item"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-6"
+              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-safe="true"
+              role="menuitem"
+              tabindex="-1"
+              type="button"
+            >
+              Disabled
+            </button>
+          </li>
+          <li
+            id=""
+            role="none"
+          >
+            <button
+              aria-disabled="false"
+              class="pf-c-options-menu__menu-item"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-8"
+              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-safe="true"
+              role="menuitem"
+              tabindex="-1"
+              type="button"
+            >
+              Size
+            </button>
+          </li>
+        </ul>
+      </section>
+      <li
+        class="pf-c-divider"
+        index="1"
+        role="separator"
+      />
+      <section
+        class="pf-c-options-menu__group"
+        index="2"
+        role="none"
+      >
+        <h1
+          class="pf-c-options-menu__group-title"
+        >
+          Sort direction
+        </h1>
+        <ul
+          aria-label=""
+          class=""
+          role="group"
+        >
+          <li
+            id=""
+            role="none"
+          >
+            <button
+              aria-disabled="false"
+              class="pf-c-options-menu__menu-item"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-10"
+              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-safe="true"
+              role="menuitem"
+              tabindex="-1"
+              type="button"
+            >
+              Ascending
+            </button>
+          </li>
+          <li
+            id=""
+            role="none"
+          >
+            <button
+              aria-disabled="false"
+              class="pf-c-options-menu__menu-item"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-12"
+              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-safe="true"
+              role="menuitem"
+              tabindex="-1"
+              type="button"
+            >
+              Descending
+            </button>
+          </li>
+          <li
+            class="pf-c-divider"
+            role="separator"
+          />
+        </ul>
+      </section>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`optionsMenu right aligned + open up 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-options-menu pf-m-top pf-m-align-right"
-    data-ouia-component-id="OUIA-Generated-OptionsMenu-4"
+    data-ouia-component-id="OUIA-Generated-OptionsMenu-6"
     data-ouia-component-type="PF4/OptionsMenu"
     data-ouia-safe="true"
     id="rightAlignedOpenUp"
@@ -372,7 +568,7 @@ exports[`optionsMenu right aligned + open up 1`] = `
       aria-haspopup="listbox"
       aria-label="Options menu"
       class="pf-c-options-menu__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
       id="rightAlignedOpenUp-toggle"
@@ -407,7 +603,7 @@ exports[`optionsMenu right aligned 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-options-menu pf-m-align-right"
-    data-ouia-component-id="OUIA-Generated-OptionsMenu-2"
+    data-ouia-component-id="OUIA-Generated-OptionsMenu-4"
     data-ouia-component-type="PF4/OptionsMenu"
     data-ouia-safe="true"
     id="rightAligned"
@@ -417,7 +613,7 @@ exports[`optionsMenu right aligned 1`] = `
       aria-haspopup="listbox"
       aria-label="Options menu"
       class="pf-c-options-menu__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
       id="rightAligned-toggle"
@@ -452,14 +648,14 @@ exports[`optionsMenu text 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-options-menu"
-    data-ouia-component-id="OUIA-Generated-OptionsMenu-7"
+    data-ouia-component-id="OUIA-Generated-OptionsMenu-9"
     data-ouia-component-type="PF4/OptionsMenu"
     data-ouia-safe="true"
     id="text"
   >
     <div
       class="pf-c-options-menu__toggle pf-m-text"
-      id="pf-dropdown-toggle-id-6"
+      id="pf-dropdown-toggle-id-8"
     >
       <span
         class="pf-c-options-menu__toggle-text"

package/src/components/Popover/Popover.tsx

@@ -203,6 +203,8 @@ export interface PopoverProps {
   boundary?: 'scrollParent' | 'window' | 'viewport' | HTMLElement;
   /** @deprecated - no longer used */
   tippyProps?: Partial<TippyProps>;
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
 }
 
 const alertStyle = {
@@ -252,6 +254,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   reference,
   hasNoPadding = false,
   hasAutoWidth = false,
+  removeFindDomNode = false,
   ...rest
 }: PopoverProps) => {
   if (process.env.NODE_ENV !== 'production') {
@@ -466,6 +469,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         enableFlip={enableFlip}
         zIndex={zIndex}
         flipBehavior={flipBehavior}
+        removeFindDomNode={removeFindDomNode}
       />
     </PopoverContext.Provider>
   );

package/src/components/Popover/PopoverCloseButton.tsx

@@ -1,27 +1,16 @@
 import * as React from 'react';
 import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import { FindRefWrapper } from '../../helpers/Popper/FindRefWrapper';
 
 export const PopoverCloseButton: React.FunctionComponent<PopoverCloseButtonProps> = ({
   onClose = () => undefined as void,
   ...props
-}: PopoverCloseButtonProps) => {
-  const [closeButtonElement, setCloseButtonElement] = React.useState(null);
-  React.useEffect(() => {
-    closeButtonElement && closeButtonElement.addEventListener('click', onClose, false);
-    return () => {
-      closeButtonElement && closeButtonElement.removeEventListener('click', onClose, false);
-    };
-  }, [closeButtonElement]);
-  return (
-    <FindRefWrapper onFoundRef={(foundRef: any) => setCloseButtonElement(foundRef)}>
-      <Button variant="plain" aria-label {...props} style={{ pointerEvents: 'auto' }}>
-        <TimesIcon />
-      </Button>
-    </FindRefWrapper>
-  );
-};
+}: PopoverCloseButtonProps) => (
+  <Button onClick={onClose} variant="plain" aria-label {...props} style={{ pointerEvents: 'auto' }}>
+    <TimesIcon />
+  </Button>
+);
+
 PopoverCloseButton.displayName = 'PopoverCloseButton';
 
 export interface PopoverCloseButtonProps {

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

@@ -90,3 +90,28 @@ test('popover can close from content (uncontrolled)', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('popover renders in strict mode', () => {
+  const consoleError = jest.spyOn(console, 'error');
+  const { asFragment } = render(
+    <React.StrictMode>
+      <Popover
+        id="test"
+        position="top"
+        isVisible
+        hideOnOutsideClick
+        headerContent={<div>Popover Header</div>}
+        bodyContent={
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+          </div>
+        }
+        removeFindDomNode
+      >
+        <div>Toggle Popover</div>
+      </Popover>
+    </React.StrictMode>
+  );
+  expect(consoleError).not.toHaveBeenCalled();
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -33,3 +33,13 @@ exports[`popover renders close-button, header and body 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`popover renders in strict mode 1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      Toggle Popover
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/SearchInput/SearchInput.tsx

@@ -90,6 +90,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
    * appendTo={document.getElementById('target')}
    */
   appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
@@ -120,6 +122,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   submitSearchButtonLabel = 'Search',
   isDisabled = false,
   appendTo,
+  removeFindDomNode = false,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -316,6 +319,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             isVisible={isSearchMenuOpen}
             enableFlip={true}
             appendTo={() => appendTo || searchInputRef.current}
+            removeFindDomNode={removeFindDomNode}
           />
         </div>
       );

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

@@ -33,6 +33,32 @@ describe('SearchInput', () => {
     expect(screen.getByTestId('test-id').querySelector('.pf-c-badge')).toBeInTheDocument();
   });
 
+  test('renders search input in strict mode', async () => {
+    const user = userEvent.setup();
+
+    const consoleError = jest.spyOn(console, 'error');
+    const { asFragment } = render(
+      <React.StrictMode>
+        <SearchInput
+          attributes={[
+            { attr: 'username', display: 'Username' },
+            { attr: 'firstname', display: 'First name' }
+          ]}
+          advancedSearchDelimiter=":"
+          value="username:player firstname:john"
+          onChange={props.onChange}
+          onSearch={props.onSearch}
+          onClear={props.onClear}
+          removeFindDomNode
+        />
+      </React.StrictMode>
+    );
+    await user.click(screen.getByRole('button', { name: 'Search' }));
+    expect(consoleError).not.toHaveBeenCalled();
+    expect(props.onSearch).toHaveBeenCalled();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('navigable search results', async () => {
     const user = userEvent.setup();
 
@@ -110,7 +136,7 @@ describe('SearchInput', () => {
     await user.click(screen.getByRole('button', { name: 'Search' }));
 
     await user.click(screen.getByRole('button', { name: 'Open advanced search' }));
-    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'))
+    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'));
 
     expect(props.onSearch).toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();