@patternfly/react-core 5.0.0-alpha.90 → 5.0.0-alpha.91

package/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarExpandableContent.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`ToolbarExpandableContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toolbar__expandable-content string"
+    class="pf-v5-c-toolbar__expandable-content string"
   >
     <div
-      class="pf-c-toolbar__group"
+      class="pf-v5-c-toolbar__group"
     />
   </div>
 </DocumentFragment>

package/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarGroup.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ToolbarGroup should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toolbar__group pf-m-filter-group string"
+    class="pf-v5-c-toolbar__group pf-m-filter-group string"
   >
     <div>
       ReactNode

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

@@ -3,52 +3,52 @@
 exports[`Toolbar should render inset 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl"
+    class="pf-v5-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl"
     data-ouia-component-id="OUIA-Generated-Toolbar-1"
     data-ouia-component-type="PF4/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
   >
     <div
-      class="pf-c-toolbar__content"
+      class="pf-v5-c-toolbar__content"
     >
       <div
-        class="pf-c-toolbar__content-section"
+        class="pf-v5-c-toolbar__content-section"
       >
         <div
-          class="pf-c-toolbar__item"
+          class="pf-v5-c-toolbar__item"
         >
           Test
         </div>
         <div
-          class="pf-c-toolbar__item"
+          class="pf-v5-c-toolbar__item"
         >
           Test 2
         </div>
         <hr
-          class="pf-c-divider pf-m-vertical"
+          class="pf-v5-c-divider pf-m-vertical"
         />
         <div
-          class="pf-c-toolbar__item"
+          class="pf-v5-c-toolbar__item"
         >
           Test 3 
         </div>
       </div>
       <div
-        class="pf-c-toolbar__expandable-content"
+        class="pf-v5-c-toolbar__expandable-content"
         id="toolbar-expandable-content-0"
       >
         <div
-          class="pf-c-toolbar__group"
+          class="pf-v5-c-toolbar__group"
         />
       </div>
     </div>
     <div
-      class="pf-c-toolbar__content pf-m-hidden"
+      class="pf-v5-c-toolbar__content pf-m-hidden"
       hidden=""
     >
       <div
-        class="pf-c-toolbar__group"
+        class="pf-v5-c-toolbar__group"
       />
     </div>
   </div>
@@ -58,30 +58,30 @@ exports[`Toolbar should render inset 1`] = `
 exports[`Toolbar should render with custom chip content 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toolbar pf-m-toggle-group-container"
+    class="pf-v5-c-toolbar pf-m-toggle-group-container"
     data-ouia-component-id="OUIA-Generated-Toolbar-3"
     data-ouia-component-type="PF4/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"
   >
     <div
-      class="pf-c-toolbar__content"
+      class="pf-v5-c-toolbar__content"
     >
       <div
-        class="pf-c-toolbar__content-section"
+        class="pf-v5-c-toolbar__content-section"
       >
         <div
-          class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
+          class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
         >
           <div
-            class="pf-c-toolbar__toggle"
+            class="pf-v5-c-toolbar__toggle"
           >
             <button
               aria-controls="toolbar-with-filter-expandable-content-3"
               aria-disabled="false"
               aria-haspopup="false"
               aria-label="Show Filters"
-              class="pf-c-button pf-m-plain"
+              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"
@@ -89,10 +89,10 @@ exports[`Toolbar should render with custom chip content 1`] = `
             />
           </div>
           <div
-            class="pf-c-toolbar__group pf-m-filter-group"
+            class="pf-v5-c-toolbar__group pf-m-filter-group"
           >
             <div
-              class="pf-c-toolbar__item"
+              class="pf-v5-c-toolbar__item"
             >
               test content
             </div>
@@ -100,24 +100,24 @@ exports[`Toolbar should render with custom chip content 1`] = `
         </div>
       </div>
       <div
-        class="pf-c-toolbar__expandable-content"
+        class="pf-v5-c-toolbar__expandable-content"
         id="toolbar-with-filter-expandable-content-3"
       >
         <div
-          class="pf-c-toolbar__group"
+          class="pf-v5-c-toolbar__group"
         />
         <div
-          class="pf-c-toolbar__group pf-m-chip-container"
+          class="pf-v5-c-toolbar__group pf-m-chip-container"
         >
           <div
-            class="pf-c-toolbar__group"
+            class="pf-v5-c-toolbar__group"
           />
           <div
-            class="pf-c-toolbar__item"
+            class="pf-v5-c-toolbar__item"
           >
             <button
               aria-disabled="false"
-              class="pf-c-button pf-m-link pf-m-inline"
+              class="pf-v5-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-3"
               data-ouia-component-type="PF4/Button"
               data-ouia-safe="true"
@@ -127,11 +127,11 @@ exports[`Toolbar should render with custom chip content 1`] = `
             </button>
           </div>
           <div
-            class="pf-c-toolbar__item"
+            class="pf-v5-c-toolbar__item"
           >
             <button
               aria-disabled="false"
-              class="pf-c-button pf-m-link pf-m-inline"
+              class="pf-v5-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-4"
               data-ouia-component-type="PF4/Button"
               data-ouia-safe="true"
@@ -144,64 +144,64 @@ exports[`Toolbar should render with custom chip content 1`] = `
       </div>
     </div>
     <div
-      class="pf-c-toolbar__content"
+      class="pf-v5-c-toolbar__content"
     >
       <div
         aria-hidden="true"
-        class="pf-c-toolbar__group pf-m-hidden"
+        class="pf-v5-c-toolbar__group pf-m-hidden"
         hidden=""
       >
         <div
-          class="pf-c-toolbar__item pf-m-chip-group"
+          class="pf-v5-c-toolbar__item pf-m-chip-group"
         >
           <div
             aria-labelledby="pf-random-id-0"
-            class="pf-c-chip-group pf-m-category"
+            class="pf-v5-c-chip-group pf-m-category"
             data-ouia-component-type="PF4/ChipGroup"
             data-ouia-safe="true"
             role="group"
           >
             <div
-              class="pf-c-chip-group__main"
+              class="pf-v5-c-chip-group__main"
             >
               <span
-                class="pf-c-chip-group__label"
+                class="pf-v5-c-chip-group__label"
                 id="pf-random-id-0"
               >
                 Status
               </span>
               <ul
                 aria-labelledby="pf-random-id-0"
-                class="pf-c-chip-group__list"
+                class="pf-v5-c-chip-group__list"
                 role="list"
               >
                 <li
-                  class="pf-c-chip-group__list-item"
+                  class="pf-v5-c-chip-group__list-item"
                 >
                   <div
-                    class="pf-c-chip"
+                    class="pf-v5-c-chip"
                     data-ouia-component-id="OUIA-Generated-Chip-1"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
                   >
                     <span
-                      class="pf-c-chip__content"
+                      class="pf-v5-c-chip__content"
                     >
                       <span
-                        class="pf-c-chip__text"
+                        class="pf-v5-c-chip__text"
                         id="pf-random-id-1"
                       >
                         New
                       </span>
                     </span>
                     <span
-                      class="pf-c-chip__actions"
+                      class="pf-v5-c-chip__actions"
                     >
                       <button
                         aria-disabled="false"
                         aria-label="close"
                         aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
-                        class="pf-c-button pf-m-plain"
+                        class="pf-v5-c-button pf-m-plain"
                         data-ouia-component-id="close"
                         data-ouia-component-type="PF4/Button"
                         data-ouia-safe="true"
@@ -210,7 +210,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                       >
                         <svg
                           aria-hidden="true"
-                          class="pf-svg"
+                          class="pf-v5-svg"
                           fill="currentColor"
                           role="img"
                           viewBox="0 0 352 512"
@@ -224,32 +224,32 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   </div>
                 </li>
                 <li
-                  class="pf-c-chip-group__list-item"
+                  class="pf-v5-c-chip-group__list-item"
                 >
                   <div
-                    class="pf-c-chip"
+                    class="pf-v5-c-chip"
                     data-ouia-component-id="OUIA-Generated-Chip-2"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
                   >
                     <span
-                      class="pf-c-chip__content"
+                      class="pf-v5-c-chip__content"
                     >
                       <span
-                        class="pf-c-chip__text"
+                        class="pf-v5-c-chip__text"
                         id="pf-random-id-2"
                       >
                         Pending
                       </span>
                     </span>
                     <span
-                      class="pf-c-chip__actions"
+                      class="pf-v5-c-chip__actions"
                     >
                       <button
                         aria-disabled="false"
                         aria-label="close"
                         aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
-                        class="pf-c-button pf-m-plain"
+                        class="pf-v5-c-button pf-m-plain"
                         data-ouia-component-id="close"
                         data-ouia-component-type="PF4/Button"
                         data-ouia-safe="true"
@@ -258,7 +258,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                       >
                         <svg
                           aria-hidden="true"
-                          class="pf-svg"
+                          class="pf-v5-svg"
                           fill="currentColor"
                           role="img"
                           viewBox="0 0 352 512"
@@ -274,13 +274,13 @@ exports[`Toolbar should render with custom chip content 1`] = `
               </ul>
             </div>
             <div
-              class="pf-c-chip-group__close"
+              class="pf-v5-c-chip-group__close"
             >
               <button
                 aria-disabled="false"
                 aria-label="Close chip group"
                 aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
-                class="pf-c-button pf-m-plain"
+                class="pf-v5-c-button pf-m-plain"
                 data-ouia-component-id="Close chip group"
                 data-ouia-component-type="PF4/Button"
                 data-ouia-safe="true"
@@ -289,7 +289,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-svg"
+                  class="pf-v5-svg"
                   fill="currentColor"
                   role="img"
                   viewBox="0 0 512 512"
@@ -304,20 +304,20 @@ exports[`Toolbar should render with custom chip content 1`] = `
         </div>
       </div>
       <div
-        class="pf-c-toolbar__group"
+        class="pf-v5-c-toolbar__group"
       >
         <div
-          class="pf-c-toolbar__item"
+          class="pf-v5-c-toolbar__item"
         >
           2 filters applied
         </div>
       </div>
       <div
-        class="pf-c-toolbar__item"
+        class="pf-v5-c-toolbar__item"
       >
         <button
           aria-disabled="false"
-          class="pf-c-button pf-m-link pf-m-inline"
+          class="pf-v5-c-button pf-m-link pf-m-inline"
           data-ouia-component-id="OUIA-Generated-Button-link-1"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
@@ -327,11 +327,11 @@ exports[`Toolbar should render with custom chip content 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-toolbar__item"
+        class="pf-v5-c-toolbar__item"
       >
         <button
           aria-disabled="false"
-          class="pf-c-button pf-m-link pf-m-inline"
+          class="pf-v5-c-button pf-m-link pf-m-inline"
           data-ouia-component-id="OUIA-Generated-Button-link-2"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
@@ -348,52 +348,52 @@ exports[`Toolbar should render with custom chip content 1`] = `
 exports[`Toolbar should render with page inset flag 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toolbar pf-m-page-insets"
+    class="pf-v5-c-toolbar pf-m-page-insets"
     data-ouia-component-id="OUIA-Generated-Toolbar-2"
     data-ouia-component-type="PF4/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
   >
     <div
-      class="pf-c-toolbar__content"
+      class="pf-v5-c-toolbar__content"
     >
       <div
-        class="pf-c-toolbar__content-section"
+        class="pf-v5-c-toolbar__content-section"
       >
         <div
-          class="pf-c-toolbar__item"
+          class="pf-v5-c-toolbar__item"
         >
           Test
         </div>
         <div
-          class="pf-c-toolbar__item"
+          class="pf-v5-c-toolbar__item"
         >
           Test 2
         </div>
         <hr
-          class="pf-c-divider pf-m-vertical"
+          class="pf-v5-c-divider pf-m-vertical"
         />
         <div
-          class="pf-c-toolbar__item"
+          class="pf-v5-c-toolbar__item"
         >
           Test 3 
         </div>
       </div>
       <div
-        class="pf-c-toolbar__expandable-content"
+        class="pf-v5-c-toolbar__expandable-content"
         id="toolbar-expandable-content-1"
       >
         <div
-          class="pf-c-toolbar__group"
+          class="pf-v5-c-toolbar__group"
         />
       </div>
     </div>
     <div
-      class="pf-c-toolbar__content pf-m-hidden"
+      class="pf-v5-c-toolbar__content pf-m-hidden"
       hidden=""
     >
       <div
-        class="pf-c-toolbar__group"
+        class="pf-v5-c-toolbar__group"
       />
     </div>
   </div>

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.test.tsx.snap

@@ -3,8 +3,8 @@
 exports[`ToolbarItem should map width breakpoints 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-toolbar__item"
-    style="--pf-c-toolbar__item--Width: 100px; --pf-c-toolbar__item--Width-on-sm: 80px; --pf-c-toolbar__item--Width-on-md: 150px; --pf-c-toolbar__item--Width-on-lg: 200px; --pf-c-toolbar__item--Width-on-xl: 250px; --pf-c-toolbar__item--Width-on-2xl: 300px;"
+    class="pf-v5-c-toolbar__item"
+    style="--pf-v5-c-toolbar__item--Width: 100px; --pf-v5-c-toolbar__item--Width-on-sm: 80px; --pf-v5-c-toolbar__item--Width-on-md: 150px; --pf-v5-c-toolbar__item--Width-on-lg: 200px; --pf-v5-c-toolbar__item--Width-on-xl: 250px; --pf-v5-c-toolbar__item--Width-on-2xl: 300px;"
   >
     Test
   </div>

package/src/components/Tooltip/__tests__/Generated/__snapshots__/TooltipArrow.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TooltipArrow should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tooltip__arrow string"
+    class="pf-v5-c-tooltip__arrow string"
   />
 </DocumentFragment>
 `;

package/src/components/Tooltip/__tests__/Generated/__snapshots__/TooltipContent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TooltipContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tooltip__content pf-m-text-align-left string"
+    class="pf-v5-c-tooltip__content pf-m-text-align-left string"
   >
     <div>
       ReactNode

package/src/components/TreeView/TreeViewRoot.tsx

@@ -32,7 +32,9 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
       );
     }
     if (this.props.hasCheckboxes || this.props.hasSelectableNodes) {
-      const firstToggle = this.treeRef.current.getElementsByClassName('pf-c-tree-view__node-toggle')[0] as HTMLElement;
+      const firstToggle = this.treeRef.current.getElementsByClassName(
+        'pf-v5-c-tree-view__node-toggle'
+      )[0] as HTMLElement;
       if (firstToggle) {
         firstToggle.tabIndex = 0;
       }
@@ -51,7 +53,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
         }
       }
     } else {
-      (this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node')[0] as HTMLElement).tabIndex = 0;
+      (this.treeRef.current?.getElementsByClassName('pf-v5-c-tree-view__node')[0] as HTMLElement).tabIndex = 0;
     }
   }
 
@@ -70,8 +72,8 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
     }
     const activeElement = document.activeElement;
     const key = event.key;
-    const treeItems = Array.from(this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node')).filter(
-      el => !el.classList.contains('pf-m-disabled')
+    const treeItems = Array.from(this.treeRef.current?.getElementsByClassName('pf-v5-c-tree-view__node')).filter(
+      (el) => !el.classList.contains('pf-m-disabled')
     );
 
     if (key === KeyTypes.Space) {
@@ -91,9 +93,8 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
     );
 
     if (['ArrowLeft', 'ArrowRight'].includes(key)) {
-      const isExpandable = activeElement?.firstElementChild?.firstElementChild?.classList.contains(
-        'pf-c-tree-view__node-toggle'
-      );
+      const isExpandable =
+        activeElement?.firstElementChild?.firstElementChild?.classList.contains('pf-c-tree-view__node-toggle');
       const isExpanded = activeElement?.closest('li')?.classList.contains('pf-m-expanded');
       if (key === 'ArrowLeft') {
         if (isExpandable && isExpanded) {
@@ -113,10 +114,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
         if (isExpandable && !isExpanded) {
           (activeElement as HTMLElement).tabIndex = -1;
           (activeElement as HTMLElement).click();
-          const childElement = activeElement
-            ?.closest('li')
-            ?.querySelector('ul > li')
-            ?.querySelector('button');
+          const childElement = activeElement?.closest('li')?.querySelector('ul > li')?.querySelector('button');
           if (childElement) {
             childElement.tabIndex = 0;
             childElement.focus();
@@ -140,7 +138,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
       event.preventDefault();
     }
 
-    const treeNodes = Array.from(this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node'));
+    const treeNodes = Array.from(this.treeRef.current?.getElementsByClassName('pf-v5-c-tree-view__node'));
 
     handleArrows(
       event,