@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

package/src/deprecated/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -1192,11 +1192,10 @@ exports[`checkbox select renders expanded with filtering successfully 1`] = `
         class="pf-v5-c-form__fieldset"
       >
         <div
-          class="pf-v5-c-select__menu-search"
+          class="pf-v5-c-select__menu-search pf-v5-c-form-control"
         >
           <input
             autocomplete="off"
-            class="pf-v5-c-form-control pf-m-search"
             type="search"
           />
         </div>
@@ -1621,16 +1620,19 @@ exports[`typeahead multi select renders closed successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-invalid="false"
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="typeahead-multi-select-closed-select-multi-typeahead-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label=""
+            autocomplete="off"
+            id="typeahead-multi-select-closed-select-multi-typeahead-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="false"
@@ -1673,16 +1675,19 @@ exports[`typeahead multi select renders expanded successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-invalid="false"
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="pf-select-toggle-id-19-select-multi-typeahead-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label=""
+            autocomplete="off"
+            id="pf-select-toggle-id-19-select-multi-typeahead-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"
@@ -1897,16 +1902,19 @@ exports[`typeahead multi select renders selected successfully 1`] = `
             </ul>
           </div>
         </div>
-        <input
-          aria-invalid="false"
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="typeahead-multi-select-selected-select-multi-typeahead-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-invalid="false"
+            aria-label=""
+            autocomplete="off"
+            id="typeahead-multi-select-selected-select-multi-typeahead-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"
@@ -2039,15 +2047,18 @@ exports[`typeahead select renders closed successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="typeahead-select-closed-select-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-label=""
+            autocomplete="off"
+            id="typeahead-select-closed-select-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="false"
@@ -2090,15 +2101,18 @@ exports[`typeahead select renders expanded successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="pf-select-toggle-id-9-select-typeahead"
-          placeholder=""
-          type="text"
-          value=""
-        />
+        >
+          <input
+            aria-label=""
+            autocomplete="off"
+            id="pf-select-toggle-id-9-select-typeahead"
+            placeholder=""
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"
@@ -2199,15 +2213,18 @@ exports[`typeahead select renders selected successfully 1`] = `
       <div
         class="pf-v5-c-select__toggle-wrapper"
       >
-        <input
-          aria-label=""
-          autocomplete="off"
+        <div
           class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead"
-          id="pf-select-toggle-id-10-select-typeahead"
-          placeholder=""
-          type="text"
-          value="Mr"
-        />
+        >
+          <input
+            aria-label=""
+            autocomplete="off"
+            id="pf-select-toggle-id-10-select-typeahead"
+            placeholder=""
+            type="text"
+            value="Mr"
+          />
+        </div>
       </div>
       <button
         aria-expanded="true"

package/src/deprecated/components/Select/examples/Select.md

@@ -2,7 +2,7 @@
 id: Select
 section: components
 subsection: menus
-cssPrefix: pf-c-select
+cssPrefix: pf-v5-c-select
 propComponents: ['Select', 'SelectOption', 'SelectGroup', 'SelectOptionObject', 'SelectViewMoreObject']
 ouia: true
 ---

package/src/deprecated/components/Wizard/WizardHeader.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../../../components/Button';
-import { Title } from '../../../components/Title';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export interface WizardHeaderProps {
@@ -31,18 +30,20 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   hideClose,
   closeButtonAriaLabel,
   titleId,
-  descriptionComponent: Component = 'p',
+  descriptionComponent: Component = 'div',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
     {!hideClose && (
-      <Button variant="plain" className={css(styles.wizardClose)} aria-label={closeButtonAriaLabel} onClick={onClose}>
-        <TimesIcon aria-hidden="true" />
-      </Button>
+      <div className={css(styles.wizardClose)}>
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>
+          <TimesIcon aria-hidden="true" />
+        </Button>
+      </div>
     )}
-    <Title headingLevel="h2" size="3xl" className={css(styles.wizardTitle)} aria-label={title} id={titleId}>
-      {title || <>&nbsp;</>}
-    </Title>
+    <div className={css(styles.wizardTitle)}>
+      <h2 className={css(styles.wizardTitleText)} id={titleId}>{title || <>&nbsp;</>}</h2>
+    </div>
     {description && (
       <Component className={css(styles.wizardDescription)} id={descriptionId}>
         {description}

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardHeader.test.tsx.snap

@@ -5,24 +5,24 @@ exports[`WizardHeader should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-v5-c-wizard__header"
   >
-    <h2
-      aria-label="string"
-      class="pf-v5-c-title pf-m-3xl pf-v5-c-wizard__title"
-      data-ouia-component-id="OUIA-Generated-Title-1"
-      data-ouia-component-type="PF4/Title"
-      data-ouia-safe="true"
-      id="string"
+    <div
+      class="pf-v5-c-wizard__title"
     >
-      string
-    </h2>
-    <p
+      <h2
+        class="pf-v5-c-wizard__title-text"
+        id="string"
+      >
+        string
+      </h2>
+    </div>
+    <div
       class="pf-v5-c-wizard__description"
       id="string"
-    />
-    <div>
-      ReactNode
+    >
+      <div>
+        ReactNode
+      </div>
     </div>
-    <p />
   </div>
 </DocumentFragment>
 `;

package/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap

@@ -8,37 +8,41 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
     <div
       class="pf-v5-c-wizard__header"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Close"
-        class="pf-v5-c-button pf-m-plain pf-v5-c-wizard__close"
-        data-ouia-component-id="OUIA-Generated-Button-plain-2"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-wizard__close"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 352 512"
+        <button
+          aria-disabled="false"
+          aria-label="Close"
+          class="pf-v5-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
-      </button>
-      <h2
-        aria-label="Wizard title"
-        class="pf-v5-c-title pf-m-3xl pf-v5-c-wizard__title"
-        data-ouia-component-id="OUIA-Generated-Title-2"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-        id="pf-wizard-title-1"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 352 512"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-wizard__title"
       >
-        Wizard title
-      </h2>
+        <h2
+          class="pf-v5-c-wizard__title-text"
+          id="pf-wizard-title-1"
+        >
+          Wizard title
+        </h2>
+      </div>
       <p
         class="pf-v5-c-wizard__description"
         id="pf-wizard-description-1"
@@ -277,37 +281,41 @@ exports[`Wizard Wizard should match snapshot 1`] = `
     <div
       class="pf-v5-c-wizard__header"
     >
-      <button
-        aria-disabled="false"
-        aria-label="Close"
-        class="pf-v5-c-button pf-m-plain pf-v5-c-wizard__close"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
+      <div
+        class="pf-v5-c-wizard__close"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v5-svg"
-          fill="currentColor"
-          role="img"
-          viewBox="0 0 352 512"
+        <button
+          aria-disabled="false"
+          aria-label="Close"
+          class="pf-v5-c-button pf-m-plain"
+          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
-      </button>
-      <h2
-        aria-label="Wizard title"
-        class="pf-v5-c-title pf-m-3xl pf-v5-c-wizard__title"
-        data-ouia-component-id="OUIA-Generated-Title-1"
-        data-ouia-component-type="PF4/Title"
-        data-ouia-safe="true"
-        id="pf-wizard-title-0"
+          <svg
+            aria-hidden="true"
+            class="pf-v5-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 352 512"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-wizard__title"
       >
-        Wizard title
-      </h2>
+        <h2
+          class="pf-v5-c-wizard__title-text"
+          id="pf-wizard-title-0"
+        >
+          Wizard title
+        </h2>
+      </div>
       <p
         class="pf-v5-c-wizard__description"
         id="pf-wizard-description-0"

package/src/deprecated/components/Wizard/examples/Wizard.md

@@ -1,7 +1,7 @@
 ---
 id: Wizard
 section: components
-cssPrefix: pf-c-wizard
+cssPrefix: pf-v5-c-wizard
 propComponents:
   ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
 ouia: true

package/src/helpers/Popper/Popper.tsx

@@ -68,7 +68,7 @@ export interface PopperProps {
   position?: 'right' | 'left' | 'center';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
-  /** Custsom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
   width?: string | 'trigger';
   /** Minimum width of the popper. If the value is "trigger", it will set the min width to the trigger element's width */
   minWidth?: string | 'trigger';
@@ -181,6 +181,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   const [triggerElement, setTriggerElement] = React.useState(null);
   const [refElement, setRefElement] = React.useState<HTMLElement>(null);
   const [popperElement, setPopperElement] = React.useState<HTMLElement>(null);
+  const [popperContent, setPopperContent] = React.useState(null);
   const [ready, setReady] = React.useState(false);
   const refOrTrigger = refElement || triggerElement;
   const onDocumentClickCallback = React.useCallback(
@@ -210,6 +211,18 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       }
     }
   }, [isVisible, popperRef]);
+  React.useEffect(() => {
+    // Trigger a Popper update when content changes.
+    const observer = new MutationObserver(() => {
+      update && update();
+    });
+    popperElement && observer.observe(popperElement, { attributes: true, childList: true, subtree: true });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [popperElement]);
+
   const addEventListener = (listener: any, element: Document | HTMLElement, event: string, capture = false) => {
     if (listener && element) {
       element.addEventListener(event, listener, { capture });
@@ -234,12 +247,6 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     onDocumentClick && addEventListener(onDocumentClickCallback, document, 'click', true);
     addEventListener(onDocumentKeyDown, document, 'keydown', true);
 
-    // Trigger a Popper update when content changes.
-    const observer = new MutationObserver(() => {
-      update && update();
-    });
-    popperElement && observer.observe(popperElement, { attributes: true, childList: true, subtree: true });
-
     return () => {
       removeEventListener(onMouseEnter, refOrTrigger, 'mouseenter');
       removeEventListener(onMouseLeave, refOrTrigger, 'mouseleave');
@@ -252,7 +259,6 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
       removeEventListener(onPopperMouseLeave, popperElement, 'mouseleave');
       onDocumentClick && removeEventListener(onDocumentClickCallback, document, 'click', true);
       removeEventListener(onDocumentKeyDown, document, 'keydown', true);
-      observer.disconnect();
     };
   }, [
     triggerElement,
@@ -359,8 +365,16 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     ]
   });
 
+  /** We want to forceUpdate only when a tooltip's content is dynamically updated.
+   * TODO: Investigate into 3rd party libraries for a less limited/specific solution
+   */
   React.useEffect(() => {
-    forceUpdate && forceUpdate();
+    const currentPopperContent = popper?.props?.children[1]?.props?.children;
+    setPopperContent(currentPopperContent);
+
+    if (currentPopperContent && popperContent && currentPopperContent !== popperContent) {
+      forceUpdate && forceUpdate();
+    }
   }, [popper]);
 
   // Returns the CSS modifier class in order to place the Popper's arrow properly

package/src/helpers/typeUtils.ts

@@ -14,3 +14,5 @@ export type PickOptional<T> = Pick<T, OptionalKeys<T>>;
 // Picks all the optional keys from interface/type T and makes them required
 // so that they cannot be accidentally omitted when providing default values
 export type PickAndRequireOptional<T> = Required<Pick<T, OptionalKeys<T>>>;
+
+export type DropEvent = React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | DragEvent | Event;

package/src/layouts/Bullseye/examples/Bullseye.md

@@ -1,6 +1,6 @@
 ---
 id: Bullseye
-cssPrefix: pf-l-bullseye
+cssPrefix: pf-v5-l-bullseye
 section: layouts
 propComponents: ['Bullseye']
 ---

package/src/layouts/Bullseye/examples/bullseye.css

@@ -1,5 +1,5 @@
-.ws-react-l-bullseye .pf-l-bullseye,
-.ws-react-l-bullseye .pf-l-bullseye > div {
+.ws-react-l-bullseye .pf-v5-l-bullseye,
+.ws-react-l-bullseye .pf-v5-l-bullseye > div {
   padding: 1rem;
   border-width: 2px;
   border-style: dashed;