@redhat-cloud-services/frontend-components 4.0.2 → 4.0.4

package/TreeTable/decorator.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import './styles.scss';
 import { TreeTableRowProps } from '.';
-export declare type TreeTableDecoratorCollapse = (event: React.MouseEvent<HTMLButtonElement>, value: any, row: TreeTableRowProps) => void;
+export type TreeTableDecoratorCollapse = (event: React.MouseEvent<HTMLButtonElement>, value: any, row: TreeTableRowProps) => void;
 declare const treeTableDecorator: (onCollapse: TreeTableDecoratorCollapse) => (value?: {
     title: React.ReactNode;
 } | string, { rowData, ...props }?: TreeTableRowProps) => {
     value: string | {
         title: React.ReactNode;
     };
-    children: React.ReactNode;
+    children: string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
     className: string;
 };
 export default treeTableDecorator;

package/TreeTable/decorator.js

@@ -33,8 +33,8 @@ var treeTableDecorator = function (onCollapse) {
         var rowData = _a.rowData, props = __rest(_a, ["rowData"]);
         return ({
             value: value,
-            children: rowData.level !== undefined ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "pf-c-treeview__control" }, { children: [rowData.isTreeOpen !== undefined && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "pf-c-treeview__toggle" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, __assign({ variant: "plain", onClick: function (event) { return onCollapse && onCollapse(event, value, __assign({ rowData: rowData }, props)); } }, { children: (0, jsx_runtime_1.jsx)(react_icons_1.AngleRightIcon, { className: "pf-c-treeview__toggle-icon", "aria-hidden": "true" }) })) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: "pf-c-treeview__control-text" }, { children: typeof value === 'object' ? value.title : value }))] }))) : typeof value === 'object' ? (value.title) : (value),
-            className: rowData.level !== undefined ? 'pf-c-treeview__title-cell' : '',
+            children: rowData.level !== undefined ? ((0, jsx_runtime_1.jsxs)("div", { className: "pf-v5-c-treeview__control", children: [rowData.isTreeOpen !== undefined && ((0, jsx_runtime_1.jsx)("div", { className: "pf-v5-c-treeview__toggle", children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", onClick: function (event) { return onCollapse && onCollapse(event, value, __assign({ rowData: rowData }, props)); }, children: (0, jsx_runtime_1.jsx)(react_icons_1.AngleRightIcon, { className: "pf-v5-c-treeview__toggle-icon", "aria-hidden": "true" }) }) })), (0, jsx_runtime_1.jsx)("div", { className: "pf-v5-c-treeview__control-text", children: typeof value === 'object' ? value.title : value })] })) : typeof value === 'object' ? (value.title) : (value),
+            className: rowData.level !== undefined ? 'pf-v5-c-treeview__title-cell' : '',
         });
     };
 };

package/TreeTable/decorator.js.map

@@ -1 +1 @@
-{"version":3,"file":"decorator.js","sourceRoot":"","sources":["../src/TreeTable/decorator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAEA,qDAAgD;AAChD,uDAAyD;AACzD,yBAAuB;AAKvB,IAAM,kBAAkB,GACtB,UAAC,UAAsC;IACvC,OAAA,UAAC,KAA+C,EAAE,EAA0D;QAA3G,sBAAA,EAAA,UAA+C;QAAE,mBAAA,EAAA,OAA6C,OAAO,EAAE,EAAE,EAAE;QAAxD,IAAA,OAAO,aAAA,EAAK,KAAK,cAAnB,WAAqB,CAAF;QAA4C,OAAA,CAAC;YAChH,KAAK,OAAA;YACL,QAAQ,EACN,OAAO,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC5B,0CAAK,SAAS,EAAC,wBAAwB,iBACpC,OAAO,CAAC,UAAU,KAAK,SAAS,IAAI,CACnC,yCAAK,SAAS,EAAC,uBAAuB,gBACpC,uBAAC,mBAAM,aAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,UAAC,KAAK,IAAK,OAAA,UAAU,IAAI,UAAU,CAAC,KAAK,EAAE,KAAK,aAAI,OAAO,SAAA,IAAK,KAAK,EAAG,EAA7D,CAA6D,gBACvG,uBAAC,4BAAc,IAAC,SAAS,EAAC,4BAA4B,iBAAa,MAAM,GAAG,IACrE,IACL,CACP,EACD,yCAAK,SAAS,EAAC,6BAA6B,gBAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAO,KAChG,CACP,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,KAAK,CAAC,KAAK,CACZ,CAAC,CAAC,CAAC,CACF,KAAK,CACN;YACH,SAAS,EAAE,OAAO,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;SAC1E,CAAC,CAAA;KAAA;AApBF,CAoBE,CAAC;AAEL,kBAAe,kBAAkB,CAAC"}
+{"version":3,"file":"decorator.js","sourceRoot":"","sources":["../src/TreeTable/decorator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAEA,qDAAgD;AAChD,uDAAyD;AACzD,yBAAuB;AAKvB,IAAM,kBAAkB,GACtB,UAAC,UAAsC;IACvC,OAAA,UAAC,KAA+C,EAAE,EAA0D;QAA3G,sBAAA,EAAA,UAA+C;QAAE,mBAAA,EAAA,OAA6C,OAAO,EAAE,EAAE,EAAE;QAAxD,IAAA,OAAO,aAAA,EAAK,KAAK,cAAnB,WAAqB,CAAF;QAA4C,OAAA,CAAC;YAChH,KAAK,OAAA;YACL,QAAQ,EACN,OAAO,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC5B,iCAAK,SAAS,EAAC,2BAA2B,aACvC,OAAO,CAAC,UAAU,KAAK,SAAS,IAAI,CACnC,gCAAK,SAAS,EAAC,0BAA0B,YACvC,uBAAC,mBAAM,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,UAAC,KAAK,IAAK,OAAA,UAAU,IAAI,UAAU,CAAC,KAAK,EAAE,KAAK,aAAI,OAAO,SAAA,IAAK,KAAK,EAAG,EAA7D,CAA6D,YACvG,uBAAC,4BAAc,IAAC,SAAS,EAAC,+BAA+B,iBAAa,MAAM,GAAG,GACxE,GACL,CACP,EACD,gCAAK,SAAS,EAAC,gCAAgC,YAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAO,IACnG,CACP,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,KAAK,CAAC,KAAK,CACZ,CAAC,CAAC,CAAC,CACF,KAAK,CACN;YACH,SAAS,EAAE,OAAO,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE;SAC7E,CAAC,CAAA;KAAA;AApBF,CAoBE,CAAC;AAEL,kBAAe,kBAAkB,CAAC"}

package/TreeTable/helpers.d.ts

@@ -7,7 +7,7 @@ export interface RowData {
 export interface TreeTableRowProps {
     rowData: Partial<RowData>;
 }
-export declare type Point = {
+export type Point = {
     size: number;
 };
 export declare const sizeCalculator: (rows: TreeTableRow[]) => TreeTableRow[];

package/TreeTable/styles.css

@@ -1,156 +1,156 @@
-.pf-c-treeview {
-  --pf-c-treeview--th--Padding: var(--pf-global--spacer--md);
-  --pf-c-treeview--td--Padding: var(--pf-global--spacer--md);
-  --pf-c-treeview--cell--Padding: var(--pf-global--spacer--md);
-  --pf-c-treeview__toggle-button--Padding: var(--pf-c-treeview--td--Padding);
-  --pf-c-treeview__control-toggle--Width: 42px;
-  --pf-c-treeview__control-check--Width: 22px;
-  --pf-c-treeview--td--level-2--PaddingLeft: calc(var(--pf-c-treeview--td--Padding) * 3);
-  --pf-c-treeview--td--level-3--PaddingLeft: calc(var(--pf-c-treeview--td--Padding) * 5);
-  --pf-c-treeview--level--PaddingLeft: var(--pf-global--spacer--xl);
-  --pf-c-treeview__aria-level--GridColumn: 1;
-  --pf-c-treeview--tr--Display: table-row;
-  --pf-c-treeview--tr--Visibility: visible;
+.pf-v5-c-treeview {
+  --pf-v5-c-treeview--th--Padding: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-treeview--td--Padding: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-treeview--cell--Padding: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-treeview__toggle-button--Padding: var(--pf-v5-c-treeview--td--Padding);
+  --pf-v5-c-treeview__control-toggle--Width: 42px;
+  --pf-v5-c-treeview__control-check--Width: 22px;
+  --pf-v5-c-treeview--td--level-2--PaddingLeft: calc(var(--pf-v5-c-treeview--td--Padding) * 3);
+  --pf-v5-c-treeview--td--level-3--PaddingLeft: calc(var(--pf-v5-c-treeview--td--Padding) * 5);
+  --pf-v5-c-treeview--level--PaddingLeft: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-treeview__aria-level--GridColumn: 1;
+  --pf-v5-c-treeview--tr--Display: table-row;
+  --pf-v5-c-treeview--tr--Visibility: visible;
   width: 100%;
   border-collapse: collapse;
   --background: #fff;
   --background-base: #ddd;
 }
-.pf-c-treeview th,
-.pf-c-treeview td {
-  padding: var(--pf-c-treeview--cell--Padding);
+.pf-v5-c-treeview th,
+.pf-v5-c-treeview td {
+  padding: var(--pf-v5-c-treeview--cell--Padding);
   text-align: left;
   vertical-align: baseline;
 }
-.pf-c-treeview tr {
+.pf-v5-c-treeview tr {
   border-bottom: 1px solid #ddd;
 }
-.pf-c-treeview tbody tr {
+.pf-v5-c-treeview tbody tr {
   display: none;
   visibility: hidden;
 }
-.pf-c-treeview [aria-level="1"] {
+.pf-v5-c-treeview [aria-level="1"] {
   display: table-row;
   visibility: visible;
-  --pf-c-treeview--tr--Display: table-row;
-  --pf-c-treeview--tr--Visibility: visible;
+  --pf-v5-c-treeview--tr--Display: table-row;
+  --pf-v5-c-treeview--tr--Visibility: visible;
 }
-.pf-c-treeview .pf-m-hidden,
-.pf-c-treeview tr.pf-m-hidden,
-.pf-c-treeview td.pf-m-hidden,
-.pf-c-treeview th.pf-m-hidden {
+.pf-v5-c-treeview .pf-m-hidden,
+.pf-v5-c-treeview tr.pf-m-hidden,
+.pf-v5-c-treeview td.pf-m-hidden,
+.pf-v5-c-treeview th.pf-m-hidden {
   display: none;
   visibility: hidden;
 }
-.pf-c-treeview tr.pf-m-visible {
+.pf-v5-c-treeview tr.pf-m-visible {
   display: table-row;
   visibility: visible;
 }
-.pf-c-treeview td.pf-m-visible,
-.pf-c-treeview th.pf-m-visible {
+.pf-v5-c-treeview td.pf-m-visible,
+.pf-v5-c-treeview th.pf-m-visible {
   display: table-cell;
   visibility: visible;
 }
-.pf-c-treeview .pf-c-treeview__check,
-.pf-c-treeview .pf-c-treeview__action {
+.pf-v5-c-treeview .pf-v5-c-treeview__check,
+.pf-v5-c-treeview .pf-v5-c-treeview__action {
   width: 1px;
 }
-.pf-c-treeview th.pf-c-treeview__title-cell {
+.pf-v5-c-treeview th.pf-v5-c-treeview__title-cell {
   padding-left: 0;
 }
-.pf-c-treeview tbody .pf-c-treeview__check + .pf-c-treeview__title-cell {
+.pf-v5-c-treeview tbody .pf-v5-c-treeview__check + .pf-v5-c-treeview__title-cell {
   padding-left: 0;
 }
-.pf-c-treeview .pf-c-treeview__toggle-icon {
+.pf-v5-c-treeview .pf-v5-c-treeview__toggle-icon {
   transition: 0.2s;
 }
-.pf-c-treeview .pf-c-treeview__action {
+.pf-v5-c-treeview .pf-v5-c-treeview__action {
   text-align: right;
 }
-.pf-c-treeview tr {
+.pf-v5-c-treeview tr {
   background: var(--background);
 }
 
-.pf-c-treeview tr[aria-level="1"] .pf-c-treeview__title-cell {
-  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 0);
+.pf-v5-c-treeview tr[aria-level="1"] .pf-v5-c-treeview__title-cell {
+  padding-left: calc(var(--pf-v5-c-treeview--level--PaddingLeft) * 0);
 }
-.pf-c-treeview tr[aria-level="2"] .pf-c-treeview__title-cell {
-  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 1);
+.pf-v5-c-treeview tr[aria-level="2"] .pf-v5-c-treeview__title-cell {
+  padding-left: calc(var(--pf-v5-c-treeview--level--PaddingLeft) * 1);
 }
-.pf-c-treeview tr[aria-level="3"] .pf-c-treeview__title-cell {
-  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 2);
+.pf-v5-c-treeview tr[aria-level="3"] .pf-v5-c-treeview__title-cell {
+  padding-left: calc(var(--pf-v5-c-treeview--level--PaddingLeft) * 2);
 }
-.pf-c-treeview tr[aria-level="4"] .pf-c-treeview__title-cell {
-  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 3);
+.pf-v5-c-treeview tr[aria-level="4"] .pf-v5-c-treeview__title-cell {
+  padding-left: calc(var(--pf-v5-c-treeview--level--PaddingLeft) * 3);
 }
-.pf-c-treeview tr[aria-level="5"] .pf-c-treeview__title-cell {
-  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 4);
+.pf-v5-c-treeview tr[aria-level="5"] .pf-v5-c-treeview__title-cell {
+  padding-left: calc(var(--pf-v5-c-treeview--level--PaddingLeft) * 4);
 }
-.pf-c-treeview tr[aria-level="6"] .pf-c-treeview__title-cell {
-  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 5);
+.pf-v5-c-treeview tr[aria-level="6"] .pf-v5-c-treeview__title-cell {
+  padding-left: calc(var(--pf-v5-c-treeview--level--PaddingLeft) * 5);
 }
-.pf-c-treeview tr[aria-level="7"] .pf-c-treeview__title-cell {
-  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 6);
+.pf-v5-c-treeview tr[aria-level="7"] .pf-v5-c-treeview__title-cell {
+  padding-left: calc(var(--pf-v5-c-treeview--level--PaddingLeft) * 6);
 }
-.pf-c-treeview tr[aria-level="8"] .pf-c-treeview__title-cell {
-  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 7);
+.pf-v5-c-treeview tr[aria-level="8"] .pf-v5-c-treeview__title-cell {
+  padding-left: calc(var(--pf-v5-c-treeview--level--PaddingLeft) * 7);
 }
-.pf-c-treeview tr[aria-level="9"] .pf-c-treeview__title-cell {
-  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 8);
+.pf-v5-c-treeview tr[aria-level="9"] .pf-v5-c-treeview__title-cell {
+  padding-left: calc(var(--pf-v5-c-treeview--level--PaddingLeft) * 8);
 }
-.pf-c-treeview tr[aria-level="10"] .pf-c-treeview__title-cell {
-  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 9);
+.pf-v5-c-treeview tr[aria-level="10"] .pf-v5-c-treeview__title-cell {
+  padding-left: calc(var(--pf-v5-c-treeview--level--PaddingLeft) * 9);
 }
-.pf-c-treeview tbody tr {
+.pf-v5-c-treeview tbody tr {
   display: none;
 }
-.pf-c-treeview [aria-level="1"] {
+.pf-v5-c-treeview [aria-level="1"] {
   display: table-row;
 }
-.pf-c-treeview [aria-level="1"].pf-m-expanded ~ [aria-level="2"] {
+.pf-v5-c-treeview [aria-level="1"].pf-m-expanded ~ [aria-level="2"] {
   display: table-row;
 }
-.pf-c-treeview [aria-level="2"].pf-m-expanded ~ [aria-level="3"] {
+.pf-v5-c-treeview [aria-level="2"].pf-m-expanded ~ [aria-level="3"] {
   display: table-row;
 }
-.pf-c-treeview [aria-level="3"].pf-m-expanded ~ [aria-level="4"] {
+.pf-v5-c-treeview [aria-level="3"].pf-m-expanded ~ [aria-level="4"] {
   display: table-row;
 }
-.pf-c-treeview [aria-level="4"].pf-m-expanded ~ [aria-level="5"] {
+.pf-v5-c-treeview [aria-level="4"].pf-m-expanded ~ [aria-level="5"] {
   display: table-row;
 }
-.pf-c-treeview [aria-level="5"].pf-m-expanded ~ [aria-level="6"] {
+.pf-v5-c-treeview [aria-level="5"].pf-m-expanded ~ [aria-level="6"] {
   display: table-row;
 }
-.pf-c-treeview [aria-level="6"].pf-m-expanded ~ [aria-level="7"] {
+.pf-v5-c-treeview [aria-level="6"].pf-m-expanded ~ [aria-level="7"] {
   display: table-row;
 }
-.pf-c-treeview [aria-level="7"].pf-m-expanded ~ [aria-level="8"] {
+.pf-v5-c-treeview [aria-level="7"].pf-m-expanded ~ [aria-level="8"] {
   display: table-row;
 }
-.pf-c-treeview [aria-level="8"].pf-m-expanded ~ [aria-level="9"] {
+.pf-v5-c-treeview [aria-level="8"].pf-m-expanded ~ [aria-level="9"] {
   display: table-row;
 }
-.pf-c-treeview [aria-level="9"].pf-m-expanded ~ [aria-level="10"] {
+.pf-v5-c-treeview [aria-level="9"].pf-m-expanded ~ [aria-level="10"] {
   display: table-row;
 }
-.pf-c-treeview [aria-level="10"].pf-m-expanded ~ [aria-level="11"] {
+.pf-v5-c-treeview [aria-level="10"].pf-m-expanded ~ [aria-level="11"] {
   display: table-row;
 }
-.pf-c-treeview tr.pf-m-expanded .pf-c-treeview__toggle-icon {
+.pf-v5-c-treeview tr.pf-m-expanded .pf-v5-c-treeview__toggle-icon {
   transform: rotate(90deg);
 }
 
-.pf-c-treeview__control {
+.pf-v5-c-treeview__control {
   display: grid;
   align-items: baseline;
 }
 
-.pf-c-treeview__control-toggle {
+.pf-v5-c-treeview__control-toggle {
   grid-area: 1/toggle;
 }
 
-.pf-c-treeview__control-text {
+.pf-v5-c-treeview__control-text {
   grid-area: 1/text;
   max-width: 100%;
   overflow: hidden;
@@ -158,180 +158,180 @@
   text-overflow: ellipsis;
 }
 
-.pf-c-treeview__check {
+.pf-v5-c-treeview__check {
   grid-row-start: 1;
   grid-column-start: 2;
 }
 
-.pf-c-treeview.pf-m-expandable .pf-c-treeview__control {
-  grid-template-columns: [toggle] var(--pf-c-treeview__control-toggle--Width) [text] auto;
+.pf-v5-c-treeview.pf-m-expandable .pf-v5-c-treeview__control {
+  grid-template-columns: [toggle] var(--pf-v5-c-treeview__control-toggle--Width) [text] auto;
 }
 
 @media (max-width: 2000px) {
-  .pf-c-treeview.pf-m-grid {
+  .pf-v5-c-treeview.pf-m-grid {
     width: 480px;
     background: lightgray;
     padding: 12px;
   }
-  .pf-c-treeview.pf-m-grid,
-.pf-c-treeview.pf-m-grid tr {
+  .pf-v5-c-treeview.pf-m-grid,
+  .pf-v5-c-treeview.pf-m-grid tr {
     display: grid;
   }
-  .pf-c-treeview.pf-m-grid thead {
+  .pf-v5-c-treeview.pf-m-grid thead {
     display: none;
   }
-  .pf-c-treeview.pf-m-grid tbody {
+  .pf-v5-c-treeview.pf-m-grid tbody {
     display: grid;
   }
-  .pf-c-treeview.pf-m-grid td,
-.pf-c-treeview.pf-m-grid th {
+  .pf-v5-c-treeview.pf-m-grid td,
+  .pf-v5-c-treeview.pf-m-grid th {
     display: grid;
     grid-template-columns: 1fr 1.5fr;
     grid-column: 1;
     padding-left: 0;
     font-weight: normal;
   }
-  .pf-c-treeview.pf-m-grid [data-label]::before {
+  .pf-v5-c-treeview.pf-m-grid [data-label]::before {
     content: attr(data-label);
     grid-column: 1;
     font-weight: bold;
   }
-  .pf-c-treeview.pf-m-grid [data-label] {
-    grid-column-gap: var(--pf-global--spacer--md);
+  .pf-v5-c-treeview.pf-m-grid [data-label] {
+    grid-column-gap: var(--pf-v5-global--spacer--md);
     padding-top: 8px;
     padding-bottom: 8px;
   }
-  .pf-c-treeview.pf-m-grid [data-label] * {
+  .pf-v5-c-treeview.pf-m-grid [data-label] * {
     grid-column: 2;
   }
-  .pf-c-treeview.pf-m-grid .pf-c-treeview__check,
-.pf-c-treeview.pf-m-grid .pf-c-treeview__action {
+  .pf-v5-c-treeview.pf-m-grid .pf-v5-c-treeview__check,
+  .pf-v5-c-treeview.pf-m-grid .pf-v5-c-treeview__action {
     display: inline-block;
     width: auto;
     grid-row: 1;
     align-self: baseline;
     padding: 0;
   }
-  .pf-c-treeview.pf-m-grid .pf-c-treeview__check {
+  .pf-v5-c-treeview.pf-m-grid .pf-v5-c-treeview__check {
     grid-column: 3;
   }
-  .pf-c-treeview.pf-m-grid .pf-c-treeview__action {
+  .pf-v5-c-treeview.pf-m-grid .pf-v5-c-treeview__action {
     grid-column: 4;
   }
-  .pf-c-treeview.pf-m-grid .pf-c-treeview__control {
+  .pf-v5-c-treeview.pf-m-grid .pf-v5-c-treeview__control {
     display: block;
   }
-  .pf-c-treeview.pf-m-grid .pf-c-treeview__control .pf-c-treeview__toggle {
+  .pf-v5-c-treeview.pf-m-grid .pf-v5-c-treeview__control .pf-v5-c-treeview__toggle {
     display: none;
   }
-  .pf-c-treeview.pf-m-grid [aria-level] .pf-c-treeview__title-cell {
+  .pf-v5-c-treeview.pf-m-grid [aria-level] .pf-v5-c-treeview__title-cell {
     padding-left: 0;
   }
-  .pf-c-treeview.pf-m-grid tr {
+  .pf-v5-c-treeview.pf-m-grid tr {
     grid-template-columns: 1fr;
     grid-auto-columns: max-content;
-    padding: var(--pf-global--spacer--md);
+    padding: var(--pf-v5-global--spacer--md);
     background: rgba(255, 255, 255, 0.5);
     display: none;
     visibility: hidden;
   }
 }
 
-.pf-c-treeview.pf-m-grid tr {
+.pf-v5-c-treeview.pf-m-grid tr {
   display: none;
 }
 @media (max-width: 2000px) {
-  .pf-c-treeview.pf-m-grid .pf-m-level-1 [aria-level="1"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-1 [aria-level="1"] {
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-2 tr[aria-level="1"].pf-m-expanded ~ tr[aria-level="2"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-2 tr[aria-level="1"].pf-m-expanded ~ tr[aria-level="2"] {
     background: lightsalmon;
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-2 tr[aria-level="1"].pf-m-expanded ~ tr[aria-level="1"] ~ tr[aria-level="2"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-2 tr[aria-level="1"].pf-m-expanded ~ tr[aria-level="1"] ~ tr[aria-level="2"] {
     display: none;
     visibility: hidden;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-3 tr[aria-level="2"].pf-m-expanded ~ tr[aria-level="3"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-3 tr[aria-level="2"].pf-m-expanded ~ tr[aria-level="3"] {
     background: lightsalmon;
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-3 tr[aria-level="2"].pf-m-expanded ~ tr[aria-level="2"] ~ tr[aria-level="3"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-3 tr[aria-level="2"].pf-m-expanded ~ tr[aria-level="2"] ~ tr[aria-level="3"] {
     display: none;
     visibility: hidden;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-4 tr[aria-level="3"].pf-m-expanded ~ tr[aria-level="4"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-4 tr[aria-level="3"].pf-m-expanded ~ tr[aria-level="4"] {
     background: lightsalmon;
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-4 tr[aria-level="3"].pf-m-expanded ~ tr[aria-level="3"] ~ tr[aria-level="4"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-4 tr[aria-level="3"].pf-m-expanded ~ tr[aria-level="3"] ~ tr[aria-level="4"] {
     display: none;
     visibility: hidden;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-5 tr[aria-level="4"].pf-m-expanded ~ tr[aria-level="5"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-5 tr[aria-level="4"].pf-m-expanded ~ tr[aria-level="5"] {
     background: lightsalmon;
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-5 tr[aria-level="4"].pf-m-expanded ~ tr[aria-level="4"] ~ tr[aria-level="5"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-5 tr[aria-level="4"].pf-m-expanded ~ tr[aria-level="4"] ~ tr[aria-level="5"] {
     display: none;
     visibility: hidden;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-6 tr[aria-level="5"].pf-m-expanded ~ tr[aria-level="6"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-6 tr[aria-level="5"].pf-m-expanded ~ tr[aria-level="6"] {
     background: lightsalmon;
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-6 tr[aria-level="5"].pf-m-expanded ~ tr[aria-level="5"] ~ tr[aria-level="6"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-6 tr[aria-level="5"].pf-m-expanded ~ tr[aria-level="5"] ~ tr[aria-level="6"] {
     display: none;
     visibility: hidden;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-7 tr[aria-level="6"].pf-m-expanded ~ tr[aria-level="7"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-7 tr[aria-level="6"].pf-m-expanded ~ tr[aria-level="7"] {
     background: lightsalmon;
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-7 tr[aria-level="6"].pf-m-expanded ~ tr[aria-level="6"] ~ tr[aria-level="7"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-7 tr[aria-level="6"].pf-m-expanded ~ tr[aria-level="6"] ~ tr[aria-level="7"] {
     display: none;
     visibility: hidden;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-8 tr[aria-level="7"].pf-m-expanded ~ tr[aria-level="8"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-8 tr[aria-level="7"].pf-m-expanded ~ tr[aria-level="8"] {
     background: lightsalmon;
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-8 tr[aria-level="7"].pf-m-expanded ~ tr[aria-level="7"] ~ tr[aria-level="8"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-8 tr[aria-level="7"].pf-m-expanded ~ tr[aria-level="7"] ~ tr[aria-level="8"] {
     display: none;
     visibility: hidden;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-9 tr[aria-level="8"].pf-m-expanded ~ tr[aria-level="9"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-9 tr[aria-level="8"].pf-m-expanded ~ tr[aria-level="9"] {
     background: lightsalmon;
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-9 tr[aria-level="8"].pf-m-expanded ~ tr[aria-level="8"] ~ tr[aria-level="9"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-9 tr[aria-level="8"].pf-m-expanded ~ tr[aria-level="8"] ~ tr[aria-level="9"] {
     display: none;
     visibility: hidden;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-10 tr[aria-level="9"].pf-m-expanded ~ tr[aria-level="10"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-10 tr[aria-level="9"].pf-m-expanded ~ tr[aria-level="10"] {
     background: lightsalmon;
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-10 tr[aria-level="9"].pf-m-expanded ~ tr[aria-level="9"] ~ tr[aria-level="10"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-10 tr[aria-level="9"].pf-m-expanded ~ tr[aria-level="9"] ~ tr[aria-level="10"] {
     display: none;
     visibility: hidden;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-11 tr[aria-level="10"].pf-m-expanded ~ tr[aria-level="11"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-11 tr[aria-level="10"].pf-m-expanded ~ tr[aria-level="11"] {
     background: lightsalmon;
     display: grid;
     visibility: visible;
   }
-  .pf-c-treeview.pf-m-grid .pf-m-level-11 tr[aria-level="10"].pf-m-expanded ~ tr[aria-level="10"] ~ tr[aria-level="11"] {
+  .pf-v5-c-treeview.pf-m-grid .pf-m-level-11 tr[aria-level="10"].pf-m-expanded ~ tr[aria-level="10"] ~ tr[aria-level="11"] {
     display: none;
     visibility: hidden;
   }