@redhat-cloud-services/frontend-components 3.4.13 → 3.6.0

package/esm/TreeTable/rowWrapper.js

@@ -1,40 +1,38 @@
-import _extends from "@babel/runtime/helpers/extends";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React from 'react';
 import PropTypes from 'prop-types';
 import { RowWrapper } from '@patternfly/react-table';
 import classnames from 'classnames';
-
-var TreeRowWrapper = function TreeRowWrapper(props) {
-  var className = props.className;
-
-  var _ref = props.row || {},
-      level = _ref.level,
-      isTreeOpen = _ref.isTreeOpen,
-      point = _ref.point,
-      posinset = _ref.posinset;
-
-  return /*#__PURE__*/React.createElement(RowWrapper, _extends({}, props, {
-    "aria-level": level === undefined ? 1 : level + 1,
-    "aria-posinset": posinset,
-    "aria-setsize": point ? point.size : 0,
-    className: classnames({
-      className: className,
-      'pf-m-expandable': isTreeOpen === true || isTreeOpen === false,
-      'pf-m-expanded': isTreeOpen === true
-    })
-  }));
+var TreeRowWrapper = function (props) {
+    var className = props.className;
+    var _a = props.row || {}, level = _a.level, isTreeOpen = _a.isTreeOpen, point = _a.point, posinset = _a.posinset;
+    return React.createElement(RowWrapper, __assign({}, props, { "aria-level": level === undefined ? 1 : level + 1, "aria-posinset": posinset, "aria-setsize": point ? point.size : 0, className: classnames({
+            className: className,
+            'pf-m-expandable': isTreeOpen === true || isTreeOpen === false,
+            'pf-m-expanded': isTreeOpen === true
+        }) }));
 };
-
 TreeRowWrapper.propTypes = {
-  rows: PropTypes.arrayOf(PropTypes.shape({
-    level: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    isTreeOpen: PropTypes.bool,
-    point: PropTypes.shape({
-      size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    }),
-    posinset: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  })),
-  className: PropTypes.string,
-  row: PropTypes.object
+    rows: PropTypes.arrayOf(PropTypes.shape({
+        level: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        isTreeOpen: PropTypes.bool,
+        point: PropTypes.shape({
+            size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        }),
+        posinset: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    })),
+    className: PropTypes.string,
+    row: PropTypes.object
 };
-export default TreeRowWrapper;
+export default TreeRowWrapper;
+//# sourceMappingURL=rowWrapper.js.map

package/esm/TreeTable/rowWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowWrapper.js","sourceRoot":"","sources":["../../src/TreeTable/rowWrapper.js"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,IAAM,cAAc,GAAG,UAAC,KAAK;IACjB,IAAA,SAAS,GAAK,KAAK,UAAV,CAAW;IACtB,IAAA,KAAyC,KAAK,CAAC,GAAG,IAAI,EAAE,EAAtD,KAAK,WAAA,EAAE,UAAU,gBAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAoB,CAAC;IAC/D,OAAO,oBAAC,UAAU,eACT,KAAK,kBACE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,mBAC/B,QAAQ,kBACT,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EACrC,SAAS,EACL,UAAU,CAAC;YACP,SAAS,WAAA;YACT,iBAAiB,EAAE,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,KAAK;YAC9D,eAAe,EAAE,UAAU,KAAK,IAAI;SACvC,CAAC,IAER,CAAC;AACP,CAAC,CAAC;AAEF,cAAc,CAAC,SAAS,GAAG;IACvB,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC;QACpC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAE,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAE,CAAC;QAClE,UAAU,EAAE,SAAS,CAAC,IAAI;QAC1B,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC;YACnB,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,CAAE,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAE,CAAC;SACpE,CAAC;QACF,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC,CAAE,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAE,CAAC;KACxE,CAAC,CAAC;IACH,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,GAAG,EAAE,SAAS,CAAC,MAAM;CACxB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/esm/TreeTable/styles.css

@@ -0,0 +1,338 @@
+.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;
+  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);
+  text-align: left;
+  vertical-align: baseline;
+}
+.pf-c-treeview tr {
+  border-bottom: 1px solid #ddd;
+}
+.pf-c-treeview tbody tr {
+  display: none;
+  visibility: hidden;
+}
+.pf-c-treeview [aria-level="1"] {
+  display: table-row;
+  visibility: visible;
+  --pf-c-treeview--tr--Display: table-row;
+  --pf-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 {
+  display: none;
+  visibility: hidden;
+}
+.pf-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 {
+  display: table-cell;
+  visibility: visible;
+}
+.pf-c-treeview .pf-c-treeview__check,
+.pf-c-treeview .pf-c-treeview__action {
+  width: 1px;
+}
+.pf-c-treeview th.pf-c-treeview__title-cell {
+  padding-left: 0;
+}
+.pf-c-treeview tbody .pf-c-treeview__check + .pf-c-treeview__title-cell {
+  padding-left: 0;
+}
+.pf-c-treeview .pf-c-treeview__toggle-icon {
+  transition: 0.2s;
+}
+.pf-c-treeview .pf-c-treeview__action {
+  text-align: right;
+}
+.pf-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-c-treeview tr[aria-level="2"] .pf-c-treeview__title-cell {
+  padding-left: calc(var(--pf-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-c-treeview tr[aria-level="4"] .pf-c-treeview__title-cell {
+  padding-left: calc(var(--pf-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-c-treeview tr[aria-level="6"] .pf-c-treeview__title-cell {
+  padding-left: calc(var(--pf-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-c-treeview tr[aria-level="8"] .pf-c-treeview__title-cell {
+  padding-left: calc(var(--pf-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-c-treeview tr[aria-level="10"] .pf-c-treeview__title-cell {
+  padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * 9);
+}
+.pf-c-treeview tbody tr {
+  display: none;
+}
+.pf-c-treeview [aria-level="1"] {
+  display: table-row;
+}
+.pf-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"] {
+  display: table-row;
+}
+.pf-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"] {
+  display: table-row;
+}
+.pf-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"] {
+  display: table-row;
+}
+.pf-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"] {
+  display: table-row;
+}
+.pf-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"] {
+  display: table-row;
+}
+.pf-c-treeview tr.pf-m-expanded .pf-c-treeview__toggle-icon {
+  transform: rotate(90deg);
+}
+
+.pf-c-treeview__control {
+  display: grid;
+  align-items: baseline;
+}
+
+.pf-c-treeview__control-toggle {
+  grid-area: 1/toggle;
+}
+
+.pf-c-treeview__control-text {
+  grid-area: 1/text;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.pf-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;
+}
+
+@media (max-width: 2000px) {
+  .pf-c-treeview.pf-m-grid {
+    width: 480px;
+    background: lightgray;
+    padding: 12px;
+  }
+  .pf-c-treeview.pf-m-grid,
+.pf-c-treeview.pf-m-grid tr {
+    display: grid;
+  }
+  .pf-c-treeview.pf-m-grid thead {
+    display: none;
+  }
+  .pf-c-treeview.pf-m-grid tbody {
+    display: grid;
+  }
+  .pf-c-treeview.pf-m-grid td,
+.pf-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 {
+    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);
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .pf-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 {
+    display: inline-block;
+    width: auto;
+    grid-row: 1;
+    align-self: baseline;
+    padding: 0;
+  }
+  .pf-c-treeview.pf-m-grid .pf-c-treeview__check {
+    grid-column: 3;
+  }
+  .pf-c-treeview.pf-m-grid .pf-c-treeview__action {
+    grid-column: 4;
+  }
+  .pf-c-treeview.pf-m-grid .pf-c-treeview__control {
+    display: block;
+  }
+  .pf-c-treeview.pf-m-grid .pf-c-treeview__control .pf-c-treeview__toggle {
+    display: none;
+  }
+  .pf-c-treeview.pf-m-grid [aria-level] .pf-c-treeview__title-cell {
+    padding-left: 0;
+  }
+  .pf-c-treeview.pf-m-grid tr {
+    grid-template-columns: 1fr;
+    grid-auto-columns: max-content;
+    padding: var(--pf-global--spacer--md);
+    background: rgba(255, 255, 255, 0.5);
+    display: none;
+    visibility: hidden;
+  }
+}
+
+.pf-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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    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"] {
+    display: none;
+    visibility: hidden;
+  }
+}

package/esm/TreeTable/styles.scss

@@ -0,0 +1,278 @@
+$pf-c-treeview--MaxDepth: 10;
+
+.pf-c-treeview {
+  // Th
+  --pf-c-treeview--th--Padding: var(--pf-global--spacer--md);
+
+  // Td
+  --pf-c-treeview--td--Padding: var(--pf-global--spacer--md);
+
+  // cell
+  --pf-c-treeview--cell--Padding: var(--pf-global--spacer--md);
+  
+  // Toggle button
+  --pf-c-treeview__toggle-button--Padding: var(--pf-c-treeview--td--Padding);
+
+  // Control cell  
+  --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;
+  
+  width: 100%;
+  border-collapse: collapse;
+ 
+  th,
+  td {
+    padding: var(--pf-c-treeview--cell--Padding);
+    text-align: left;
+    vertical-align: baseline;
+  }
+  
+  tr {
+    border-bottom: 1px solid #ddd;
+  }
+
+  tbody tr {
+    display: none;
+    visibility: hidden;
+  }
+  
+  // hide rows by default
+  [aria-level="1"] {
+    display: table-row;
+    visibility: visible;
+
+    --pf-c-treeview--tr--Display: table-row;
+    --pf-c-treeview--tr--Visibility: visible;
+  }
+  
+  .pf-m-hidden,
+  tr.pf-m-hidden, 
+  td.pf-m-hidden,
+  th.pf-m-hidden {
+    display: none;
+    visibility: hidden;
+  }
+
+  tr.pf-m-visible {
+    display: table-row;  
+    visibility: visible;
+  }
+  
+  td.pf-m-visible,
+  th.pf-m-visible {
+    display: table-cell;
+    visibility: visible;
+  }
+    
+  .pf-c-treeview__check,
+  .pf-c-treeview__action {
+    width: 1px;
+  }
+  
+  
+  th.pf-c-treeview__title-cell {
+    padding-left: 0;
+  }
+  
+  tbody .pf-c-treeview__check + .pf-c-treeview__title-cell {
+    padding-left: 0;
+  }
+  
+  .pf-c-treeview__toggle-icon {
+    transition: .2s;
+  }
+  
+  .pf-c-treeview__action {
+    text-align: right;
+  }
+  
+  --background: #fff;
+  --background-base: #ddd;
+  
+  tr {
+    background: var(--background);
+  }
+}
+
+.pf-c-treeview {
+  @for $i from 1 through $pf-c-treeview--MaxDepth {
+    tr[aria-level="#{$i}"] {
+      .pf-c-treeview__title-cell {
+        padding-left: calc(var(--pf-c-treeview--level--PaddingLeft) * #{$i - 1});
+      }
+    }
+  }
+
+  tbody tr {
+    display: none;
+  }
+
+  [aria-level="1"] {
+    display: table-row;
+  }
+
+  
+  @for $i from 1 through $pf-c-treeview--MaxDepth {
+    [aria-level="#{$i}"].pf-m-expanded ~ [aria-level="#{$i + 1}"] {
+      display: table-row;
+    }
+  }
+
+  tr.pf-m-expanded .pf-c-treeview__toggle-icon {
+    transform: rotate(90deg);
+  }
+}
+
+.pf-c-treeview__control {
+  display: grid;
+  align-items: baseline;
+}
+
+.pf-c-treeview__control-toggle {
+  grid-area: 1 / toggle;
+}
+
+.pf-c-treeview__control-text {
+  grid-area: 1 / text;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.pf-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;
+  }
+}
+
+// Mobile layout
+.pf-c-treeview.pf-m-grid {
+  @media (max-width: 2000px) {
+    &,
+    tr {
+      display: grid;
+    }
+
+    width: 480px;
+    background: lightgray;
+    padding: 12px;
+
+    thead {
+      display: none;
+    }
+
+    tbody {
+      display: grid;
+    }
+
+    td,
+    th {
+      display: grid;
+      grid-template-columns: 1fr 1.5fr;
+      grid-column: 1;
+      padding-left: 0;
+      font-weight: normal;
+    }
+
+    [data-label]::before {
+      content: attr(data-label);
+      grid-column: 1;
+      font-weight: bold;
+    }
+
+    [data-label] {
+      grid-column-gap: var(--pf-global--spacer--md);
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    [data-label] * {
+      grid-column: 2;
+    }  
+
+    .pf-c-treeview__check,
+    .pf-c-treeview__action {
+      display: inline-block;
+      width: auto;
+      grid-row: 1;
+      align-self: baseline;
+      padding: 0;
+    }
+
+    .pf-c-treeview__check {
+      grid-column: 3;
+    }
+
+    .pf-c-treeview__action {
+      grid-column: 4;
+    }
+
+    .pf-c-treeview__control {
+      display: block;
+
+      .pf-c-treeview__toggle {
+        display: none;
+      }
+    }
+
+    [aria-level] .pf-c-treeview__title-cell {
+      padding-left: 0;
+    }
+
+    tr {
+      grid-template-columns: 1fr;
+      grid-auto-columns: max-content;
+      padding: var(--pf-global--spacer--md);
+      background: rgba(255,255,255,.5);    
+      display: none;
+      visibility: hidden;    
+    }    
+  }
+}
+
+// loop through 
+.pf-c-treeview.pf-m-grid {
+  tr {
+    display: none;
+  }
+  
+  @media (max-width: 2000px) {
+    .pf-m-level-1 [aria-level="1"] {
+      display: grid;
+      visibility: visible;
+    }
+
+    @for $i from 1 through $pf-c-treeview--MaxDepth {
+      .pf-m-level-#{$i + 1} {
+        tr[aria-level="#{$i}"].pf-m-expanded ~ tr[aria-level="#{$i + 1}"] {
+          background: lightsalmon;
+          display: grid;
+          visibility: visible;
+        }
+
+        tr[aria-level="#{$i}"].pf-m-expanded ~ tr[aria-level="#{$i}"] ~ tr[aria-level="#{$i + 1}"] {
+          display: none;
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}
+
+.pf-c-treeview { @for $i from 1 through $pf-c-treeview--MaxDepth {} }