@patternfly/react-core 4.236.7 → 4.236.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.236.7",
+  "version": "4.236.10",
   "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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.87.7",
-    "@patternfly/react-styles": "^4.86.7",
-    "@patternfly/react-tokens": "^4.88.7",
+    "@patternfly/react-icons": "^4.87.10",
+    "@patternfly/react-styles": "^4.86.10",
+    "@patternfly/react-tokens": "^4.88.10",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9146bf58545f6e745af4b8ba31a22e1da35b077e"
+  "gitHead": "fb205f92e45be059fa7d0d3fa636e101a66a46aa"
 }

package/src/components/AlertGroup/examples/AlertGroup.md

@@ -6,37 +6,74 @@ propComponents: ['Alert', 'AlertGroup', 'AlertActionCloseButton', 'AlertActionLi
 ---
 
 ## Examples
-### Static alert group
-These alerts appear on page load and are discoverable from within the normal page content flow, and will not be announced individually/explicitly to assistive technology.
+
+### Variants 
+
+Alert groups can be one of the following variants:
+
+| Variant | Description |
+| --- | --- |
+| Static inline | Static inline alert groups contain alerts that appear when the page loads, and are seen within the normal page content flow. These groups should not contain alerts that will dynamically appear or update. |
+| Toast | Toast alert groups contain alerts that typically appear in response to an asynchronous event or user action. These groups are positioned on top of other content at the top right of the page.|
+| Dynamic | Dynamic alert groups contain alerts that typically appear in response to a user action, and are seen within the normal page content flow.|  
+
+Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic `AlertGroup`, both of which must use the `isLiveRegion` property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the [aria-atomic and aria-relevant](/components/alert-group/accessibility#aria-atomic-and-aria-relevant) section of the alert group accessibility documentation.
+
+### Static inline alert group
+
+All alert group variants may combine multiple [alert variants](/components/alert) For example, the following static inline alert group includes one "success" alert and one "info" alert.
+
 ```ts file="./AlertGroupStatic.tsx"
 ```
 
 ### Toast alert group
-Alerts asynchronously appended into dynamic AlertGroups with `isLiveRegion` will be announced to assistive technology at the moment the change happens, following the strategy used for aria-atomic, which defaults to false. This means only changes of type "addition" will be announced.
+
+Toast alert groups are created by passing in the `isToast` and `isLiveRegion` properties. 
+
+Click the buttons in the example below to add alerts to a toast group.
+
 ```ts file="./AlertGroupToast.tsx"
 ```
 
 ### Toast alert group with overflow capture
-After a specified number of alerts displayed is reached, we will see an overflow message instead of new alerts. Alerts asynchronously appended into dynamic AlertGroups with `isLiveRegion` will be announced to assistive technology at the moment the change happens. When the overflow message appears or is updated in AlertGroups with `isLiveRegion`, the `View 1 more alert` text will be read, but the alert message will not be read. screen reader user or keyboard user will need a way to navigate to and reveal the hidden alerts before they disappear. Alternatively, there should be a place that notifications or alerts are collected to be viewed or read later. In this example we are showing a max of 4 alerts.
+
+Users will see an overflow message once a predefined number of alerts are displayed. They will not see any alerts beyond the display limit, which must be explicitly set.
+
+In the following example, an overflow message will appear when more than 4 alerts would be shown. When a 5th alert would appear, an overflow message is shown instead.
+
+When an overflow message appears in an `AlertGroup` using the `isLiveRegion` property, the "view 1 more alert" text label will be announced, but the alert message will not. 
+
+Users navigating via keyboard or another assistive technology will need a way to navigate to and reveal hidden alerts before they disappear. Alternatively, there should be a place where notifications or alerts are collected to be viewed or read later. 
+
 ```ts file="AlertGroupToastOverflowCapture.tsx" isBeta
 ```
 
-### Singular dynamic alert group
-This alert will appear in the page, most likely in response to a user action.
+### Asynchronous alert groups
+
+The following example shows how alerts can be triggered by an asynchronous event in the application. You can customize how an alert will be announced to assistive technology by adjusting the value of the `aria-live` property. Click the "start async" alert button below and then click the buttons in the above toast examples to demonstrate how asynchronous events add alerts to a group. Click the "stop async alerts" button to halt this behavior.
+
+See the [alert group accessibility tab](/components/alert-group/accessibility) for more information on customizing this behavior.
+
+```ts file="./AlertGroupAsync.tsx"
+```
+
+### Dynamic alert groups
+
+Click the buttons in the example below to add dynamic alerts to a group.
+
 ```ts file="./AlertGroupSingularDynamic.tsx"
 ```
 
-### Singular dynamic alert group with overflow message
-This alert will appear in the page, most likely in response to a user action. In this example we are showing a max of 4 alerts.
+### Dynamic alert group with overflow message
+
+In the following example, there can be a maximum of 4 alerts shown at once. 
+
 ```ts file="AlertGroupSingularDynamicOverflow.tsx" isBeta
 ```
 
-### Multiple dynamic alert group
-These alerts will appear in the page, most likely in response to a user action.
-```ts file="./AlertGroupMultipleDynamic.tsx"
-```
+### Multiple dynamic alert groups
 
-### Async alert group
-This shows how an alert could be triggered by an asynchronous event in the application. Note how you can customize how the alert will be announced to assistive technology. See the alert group accessibility tab for more information.
-```ts file="./AlertGroupAsync.tsx"
+You may add multiple alerts to an alert group at once. Click the "add alert collection" button in the example below to add a batch of 3 toast alerts to a group.
+
+```ts file="./AlertGroupMultipleDynamic.tsx"
 ```

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -61,6 +61,8 @@ export interface ApplicationLauncherProps
   favoritesLabel?: string;
   /** ID of toggle */
   toggleId?: string;
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
 }
 
 export class ApplicationLauncher extends React.Component<ApplicationLauncherProps> {
@@ -83,7 +85,8 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
     searchPlaceholderText: 'Filter by name...',
     searchNoResultsText: 'No results found',
     favoritesLabel: 'Favorites',
-    menuAppendTo: 'inline'
+    menuAppendTo: 'inline',
+    removeFindDomNode: false
   };
 
   createSearchBox = () => {
@@ -129,6 +132,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
       favoritesLabel,
       searchNoResultsText,
       menuAppendTo,
+      removeFindDomNode,
       ...props
     } = this.props;
     let renderableItems: React.ReactNode[] = [];
@@ -189,6 +193,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
             className={className}
             aria-label={ariaLabel}
             menuAppendTo={menuAppendTo}
+            removeFindDomNode={removeFindDomNode}
             toggle={
               <DropdownToggle
                 id={toggleId}

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

@@ -55,8 +55,17 @@ describe('ApplicationLauncher', () => {
 
   test('custom icon', () => {
     const { asFragment } = render(
-      <ApplicationLauncher items={dropdownItems} isOpen toggleIcon={<HelpIcon id="test-icon" />} />
+      <React.StrictMode>
+        <ApplicationLauncher items={dropdownItems} isOpen toggleIcon={<HelpIcon id="test-icon" />} />
+      </React.StrictMode>
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders in strict mode', () => {
+    const consoleError = jest.spyOn(console, 'error');
+    const { asFragment } = render(<ApplicationLauncher removeFindDomNode isOpen items={dropdownItems} />);
+    expect(consoleError).not.toHaveBeenCalled();
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

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

@@ -1,5 +1,151 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ApplicationLauncher Renders in strict mode 1`] = `
+<DocumentFragment>
+  <nav
+    aria-label="Application launcher"
+    class="pf-c-app-launcher pf-m-expanded"
+    data-ouia-component-type="PF4/ApplicationLauncher"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-haspopup="true"
+      aria-label="Application launcher"
+      class="pf-c-app-launcher__toggle"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
+      data-ouia-component-type="PF4/DropdownToggle"
+      data-ouia-safe="true"
+      id="pf-dropdown-toggle-id-7"
+      type="button"
+    >
+      <span>
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 512"
+          width="1em"
+        >
+          <path
+            d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
+          />
+        </svg>
+      </span>
+    </button>
+    <ul
+      aria-labelledby="pf-dropdown-toggle-id-7"
+      class="pf-c-app-launcher__menu"
+      role="menu"
+    >
+      <li
+        role="none"
+      >
+        <a
+          aria-disabled="false"
+          class="pf-c-app-launcher__menu-item"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-19"
+          data-ouia-component-type="PF4/DropdownItem"
+          data-ouia-safe="true"
+          role="menuitem"
+          tabindex="-1"
+        >
+          Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-c-app-launcher__menu-item"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-20"
+          data-ouia-component-type="PF4/DropdownItem"
+          data-ouia-safe="true"
+          role="menuitem"
+          tabindex="-1"
+          type="button"
+        >
+          Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-app-launcher__menu-item"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-21"
+          data-ouia-component-type="PF4/DropdownItem"
+          data-ouia-safe="true"
+          role="menuitem"
+          tabindex="-1"
+        >
+          Disabled Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          aria-disabled="true"
+          class="pf-m-disabled pf-c-app-launcher__menu-item"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-22"
+          data-ouia-component-type="PF4/DropdownItem"
+          data-ouia-safe="true"
+          role="menuitem"
+          tabindex="-1"
+          type="button"
+        >
+          Disabled Action
+        </button>
+      </li>
+      <li
+        role="none"
+      >
+        <div
+          class="pf-c-divider"
+          role="separator"
+        />
+      </li>
+      <li
+        role="none"
+      >
+        <a
+          aria-disabled="false"
+          class="pf-c-app-launcher__menu-item"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-23"
+          data-ouia-component-type="PF4/DropdownItem"
+          data-ouia-safe="true"
+          role="menuitem"
+          tabindex="-1"
+        >
+          Separated Link
+        </a>
+      </li>
+      <li
+        role="none"
+      >
+        <button
+          aria-disabled="false"
+          class="pf-c-app-launcher__menu-item"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-24"
+          data-ouia-component-type="PF4/DropdownItem"
+          data-ouia-safe="true"
+          role="menuitem"
+          tabindex="-1"
+          type="button"
+        >
+          Separated Action
+        </button>
+      </li>
+    </ul>
+  </nav>
+</DocumentFragment>
+`;
+
 exports[`ApplicationLauncher custom icon 1`] = `
 <DocumentFragment>
   <nav
@@ -13,7 +159,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
       aria-haspopup="true"
       aria-label="Application launcher"
       class="pf-c-app-launcher__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
       id="pf-dropdown-toggle-id-5"
@@ -47,7 +193,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-7"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-8"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -62,7 +208,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <button
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-8"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-10"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -78,7 +224,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <a
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-9"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-12"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -93,7 +239,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <button
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-10"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-14"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -117,7 +263,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-11"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-16"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -132,7 +278,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <button
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-12"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-18"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"

package/src/components/ContextSelector/ContextSelector.tsx

@@ -66,6 +66,8 @@ 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;
 }
 
 export class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {
@@ -89,7 +91,8 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
     footer: null as React.ReactNode,
     isPlain: false,
     isText: false,
-    isFlipEnabled: false
+    isFlipEnabled: false,
+    removeFindDomNode: false
   };
   constructor(props: ContextSelectorProps) {
     super(props);
@@ -131,6 +134,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       disableFocusTrap,
       isFlipEnabled,
       id,
+      removeFindDomNode,
       ...props
     } = this.props;
 
@@ -231,6 +235,7 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
         popper={popperContainer}
         appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
         isVisible={isOpen}
+        removeFindDomNode={removeFindDomNode}
       />
     );
   }

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

@@ -21,7 +21,24 @@ describe('ContextSelector', () => {
   });
 
   test('Renders ContextSelector open', () => {
-    const { asFragment } = render(<ContextSelector isOpen id="render-open">{items}</ContextSelector>);
+    const { asFragment } = render(
+      <ContextSelector isOpen id="render-open">
+        {items}
+      </ContextSelector>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('Renders in strict mode', () => {
+    const consoleError = jest.spyOn(console, 'error');
+    const { asFragment } = render(
+      <React.StrictMode>
+        <ContextSelector removeFindDomNode isOpen id="render">
+          {items}
+        </ContextSelector>
+      </React.StrictMode>
+    );
+    expect(consoleError).not.toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });
 

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

@@ -183,3 +183,147 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`ContextSelector Renders in strict mode 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-context-selector pf-m-expanded"
+    data-ouia-component-id="OUIA-Generated-ContextSelector-4"
+    data-ouia-component-type="PF4/ContextSelector"
+    data-ouia-safe="true"
+  >
+    <button
+      aria-expanded="true"
+      aria-labelledby="pf-context-selector-label-id-render pf-context-selector-toggle-id-render"
+      class="pf-c-context-selector__toggle"
+      id="pf-context-selector-toggle-id-render"
+      type="button"
+    >
+      <span
+        class="pf-c-context-selector__toggle-text"
+      />
+      <span
+        class="pf-c-context-selector__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>
+    <div
+      class="pf-c-context-selector__menu"
+      id="render"
+    >
+      <div>
+        <div
+          class="pf-c-context-selector__menu-search"
+        >
+          <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=""
+            />
+            <button
+              aria-disabled="false"
+              aria-label="Search menu items"
+              class="pf-c-button pf-m-control"
+              data-ouia-component-id="OUIA-Generated-Button-control-3"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe="true"
+              type="button"
+            >
+              <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>
+            </button>
+          </div>
+        </div>
+        <ul
+          class="pf-c-context-selector__menu-list"
+          role="menu"
+        >
+          <li
+            role="none"
+          >
+            <button
+              class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
+            >
+              My Project
+            </button>
+          </li>
+          <li
+            role="none"
+          >
+            <button
+              class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
+            >
+              OpenShift Cluster
+            </button>
+          </li>
+          <li
+            role="none"
+          >
+            <button
+              class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
+            >
+              Production Ansible
+            </button>
+          </li>
+          <li
+            role="none"
+          >
+            <button
+              class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
+            >
+              AWS
+            </button>
+          </li>
+          <li
+            role="none"
+          >
+            <button
+              class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
+            >
+              Azure
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Dropdown/Dropdown.tsx

@@ -60,6 +60,8 @@ export interface DropdownProps
    * appended inline, e.g. `menuAppendTo="parent"`
    */
   isFlipEnabled?: boolean;
+  /** @beta Opt-in for updated popper that does not use findDOMNode. */
+  removeFindDomNode?: boolean;
 }
 
 export const Dropdown: React.FunctionComponent<DropdownProps> = ({
@@ -72,6 +74,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   contextProps,
   menuAppendTo = 'inline',
   isFlipEnabled = false,
+  removeFindDomNode = false,
   ...props
 }: DropdownProps) => (
   <DropdownContext.Provider
@@ -97,7 +100,12 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
       ...contextProps
     }}
   >
-    <DropdownWithContext menuAppendTo={menuAppendTo} isFlipEnabled={isFlipEnabled} {...props} />
+    <DropdownWithContext
+      menuAppendTo={menuAppendTo}
+      isFlipEnabled={isFlipEnabled}
+      removeFindDomNode={removeFindDomNode}
+      {...props}
+    />
   </DropdownContext.Provider>
 );
 Dropdown.displayName = 'Dropdown';

package/src/components/Dropdown/DropdownWithContext.tsx

@@ -77,6 +77,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       autoFocus,
       menuAppendTo,
       isFlipEnabled,
+      removeFindDomNode,
       ...props
     } = this.props;
     const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
@@ -174,6 +175,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
               position={position}
               appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
               isVisible={isOpen}
+              removeFindDomNode={removeFindDomNode}
             />
           );
         }}

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

@@ -123,6 +123,22 @@ describe('Dropdown', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders in strict mode', () => {
+    const consoleError = jest.spyOn(console, 'error');
+    const { asFragment } = render(
+      <React.StrictMode>
+        <Dropdown
+          isOpen
+          dropdownItems={dropdownItems}
+          toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+          removeFindDomNode
+        />
+      </React.StrictMode>
+    );
+    expect(consoleError).not.toHaveBeenCalled();
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
 
 describe('KebabToggle', () => {