@patternfly/react-core 4.236.5 → 4.236.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.236.5",
+  "version": "4.236.8",
   "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.5",
-    "@patternfly/react-styles": "^4.86.5",
-    "@patternfly/react-tokens": "^4.88.5",
+    "@patternfly/react-icons": "^4.87.8",
+    "@patternfly/react-styles": "^4.86.8",
+    "@patternfly/react-tokens": "^4.88.8",
     "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": "910d0ce39921d2f89298f0fca3694ea6dc141b63"
+  "gitHead": "37520d7f027e9777fbd76f40485388b29d93e292"
 }

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', () => {