@redhat-cloud-services/frontend-components 3.4.11 → 3.5.0

package/ConditionalFilter/ConditionalFilter.js

@@ -148,7 +148,8 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
           placeholder = _this$props.placeholder,
           hideLabel = _this$props.hideLabel,
           isDisabled = _this$props.isDisabled,
-          props = (0, _objectWithoutProperties2["default"])(_this$props, ["items", "value", "onChange", "placeholder", "hideLabel", "isDisabled"]);
+          useMobileLayout = _this$props.useMobileLayout,
+          props = (0, _objectWithoutProperties2["default"])(_this$props, ["items", "value", "onChange", "placeholder", "hideLabel", "isDisabled", "useMobileLayout"]);
       var _this$state = this.state,
           isOpen = _this$state.isOpen,
           stateValue = _this$state.stateValue,
@@ -164,9 +165,9 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
         return string[0].toUpperCase() + string.substring(1);
       };
 
-      var shouldRenderNewLayout = this.props.useMobileLayout && isMobile;
+      var shouldRenderNewLayout = useMobileLayout && isMobile;
       var Wrapper = this.getWrapper();
-      return /*#__PURE__*/_react["default"].createElement(Wrapper, null, this.props.useMobileLayout && isMobile && /*#__PURE__*/_react["default"].createElement(_ToolbarGroup.ToolbarGroup, {
+      return /*#__PURE__*/_react["default"].createElement(Wrapper, null, useMobileLayout && isMobile && /*#__PURE__*/_react["default"].createElement(_ToolbarGroup.ToolbarGroup, {
         className: "ins-c-conditional-filter mobile"
       }, items.map(function (activeItem, key) {
         var ActiveComponent = activeItem && (_conditionalFilterConstants.typeMapper[activeItem.type] || _conditionalFilterConstants.typeMapper.text);
@@ -178,7 +179,7 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
         }, activeItem.filterValues)));
       })), !shouldRenderNewLayout && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, !items || items && items.length <= 0 ? /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])('ins-c-conditional-filter', {
-          desktop: this.props.useMobileLayout
+          desktop: useMobileLayout
         })
       }, /*#__PURE__*/_react["default"].createElement(_TextFilter["default"], (0, _extends2["default"])({}, props, {
         value: currentValue,
@@ -189,7 +190,7 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
         "widget-type": "InsightsInput"
       }))) : /*#__PURE__*/_react["default"].createElement(_Split.Split, {
         className: (0, _classnames["default"])('ins-c-conditional-filter', {
-          desktop: this.props.useMobileLayout
+          desktop: useMobileLayout
         })
       }, items.length > 1 && /*#__PURE__*/_react["default"].createElement(_SplitItem.SplitItem, null, /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
         className: "ins-c-conditional-filter__group",

package/ConditionalFilter/GroupFilter.js

@@ -43,10 +43,14 @@ var _Popper = require("@patternfly/react-core/dist/js/helpers/Popper/Popper.js")
 
 var _Radio = require("@patternfly/react-core/dist/js/components/Radio/Radio.js");
 
+var _TreeView = require("@patternfly/react-core/dist/js/components/TreeView/TreeView.js");
+
 var _groupFilterConstants = require("./groupFilterConstants");
 
 var _groupType = _interopRequireDefault(require("./groupType"));
 
+require("./group-filter.css");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -87,7 +91,6 @@ var Group = function Group(_ref) {
   (0, _react.useEffect)(function () {
     setStateSelected(selected);
   }, [selected]);
-  var calculateSelection = (0, _react.useCallback)(_groupFilterConstants.calculateSelected, [stateSelected]);
   (0, _react.useEffect)(function () {
     setSearchString(filterBy);
   }, [filterBy]);
@@ -127,50 +130,65 @@ var Group = function Group(_ref) {
     setIsOpen(!isOpen);
   };
 
-  var groupMenuItems = (0, _groupFilterConstants.getGroupMenuItems)(groups, onChange, calculateSelection(selected));
-  var menuItems = (0, _groupFilterConstants.getMenuItems)(items, onChange, calculateSelection(selected)); // eslint-disable-next-line react/prop-types
+  var menuItems = (0, _groupFilterConstants.getMenuItems)(items === null || items === void 0 ? void 0 : items.map(function (item) {
+    return item.type === _groupType["default"].treeView ? (0, _groupFilterConstants.convertTreeItem)(item) : item;
+  }), onChange, (0, _groupFilterConstants.calculateSelected)(selected));
+  var groupMenuItems = (0, _groupFilterConstants.getGroupMenuItems)(groups, onChange, (0, _groupFilterConstants.calculateSelected)(selected));
+
+  var renderItem = function renderItem(item, key, type, groupKey) {
+    return /*#__PURE__*/_react["default"].createElement(_MenuItem.MenuItem, {
+      itemId: key,
+      key: "".concat(item.value, "-").concat(key, "-item"),
+      className: item === null || item === void 0 ? void 0 : item.className,
+      onClick: item.onClick && (type || item.type) === _groupType["default"].checkbox ? function (e) {
+        item.onClick();
+        e.preventDefault();
+      } : undefined
+    }, (type || item.type) === _groupType["default"].treeView ? /*#__PURE__*/_react["default"].createElement(_TreeView.TreeView, {
+      data: [(0, _groupFilterConstants.mapTree)(item, groupKey, stateSelected, selected)],
+      onCheck: function onCheck(e, value) {
+        return (0, _groupFilterConstants.onTreeCheck)(e, value, [item]);
+      },
+      hasChecks: true
+    }) : (type || item.type) === _groupType["default"].checkbox ? /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, (0, _extends2["default"])({}, item, {
+      label: item === null || item === void 0 ? void 0 : item.label,
+      isChecked: (item === null || item === void 0 ? void 0 : item.isChecked) || (0, _groupFilterConstants.isChecked)(groupKey, (item === null || item === void 0 ? void 0 : item.value) || key, item === null || item === void 0 ? void 0 : item.id, item === null || item === void 0 ? void 0 : item.tagValue, stateSelected, selected) || false,
+      onChange: function onChange(value, event) {
+        var _item$onChange;
+
+        item === null || item === void 0 ? void 0 : (_item$onChange = item.onChange) === null || _item$onChange === void 0 ? void 0 : _item$onChange.call(item, value, event);
+      },
+      onClick: item.onClick ? function (e) {
+        item.onClick();
+        e.stopPropagation();
+      } : undefined,
+      name: (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key),
+      id: (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key)
+    })) : (type || item.type) === _groupType["default"].radio ? /*#__PURE__*/_react["default"].createElement(_Radio.Radio, (0, _extends2["default"])({}, item, {
+      isChecked: (item === null || item === void 0 ? void 0 : item.isChecked) || (0, _groupFilterConstants.isChecked)((groups === null || groups === void 0 ? void 0 : groups.value) || groupKey, (item === null || item === void 0 ? void 0 : item.value) || key, item === null || item === void 0 ? void 0 : item.id, item === null || item === void 0 ? void 0 : item.tagValue, stateSelected, selected) || false,
+      onChange: function onChange(value, event) {
+        var _item$onChange2;
+
+        item === null || item === void 0 ? void 0 : (_item$onChange2 = item.onChange) === null || _item$onChange2 === void 0 ? void 0 : _item$onChange2.call(item, value, event);
+      },
+      value: (item === null || item === void 0 ? void 0 : item.value) || key,
+      name: (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key),
+      label: (item === null || item === void 0 ? void 0 : item.label) || '',
+      id: (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key)
+    })) : (type || item.type) === _groupType["default"].button ? /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({}, item, {
+      className: "pf-c-select__option-button ".concat((item === null || item === void 0 ? void 0 : item.className) || ''),
+      variant: item === null || item === void 0 ? void 0 : item.variant,
+      onClick: item.onClick
+    }), item === null || item === void 0 ? void 0 : item.label) : (item === null || item === void 0 ? void 0 : item.label) || '');
+  };
 
   var renderItems = function renderItems(items, type) {
     var groupKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
     return items.map(function (item, key) {
-      return /*#__PURE__*/_react["default"].createElement(_MenuItem.MenuItem, {
-        itemId: key,
+      return (type || item.type) === _groupType["default"].treeView ? /*#__PURE__*/_react["default"].createElement("div", {
         key: "".concat(item.value, "-").concat(key, "-item"),
-        className: item === null || item === void 0 ? void 0 : item.className,
-        onClick: item.onClick && (type || item.type) === _groupType["default"].checkbox ? function (e) {
-          item.onClick();
-          e.preventDefault();
-        } : undefined
-      }, (type || item.type) === _groupType["default"].checkbox ? /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, (0, _extends2["default"])({}, item, {
-        label: item === null || item === void 0 ? void 0 : item.label,
-        isChecked: (item === null || item === void 0 ? void 0 : item.isChecked) || (0, _groupFilterConstants.isChecked)(groupKey, (item === null || item === void 0 ? void 0 : item.value) || key, item === null || item === void 0 ? void 0 : item.id, item === null || item === void 0 ? void 0 : item.tagValue, stateSelected, selected) || false,
-        onChange: function onChange(value, event) {
-          var _item$onChange;
-
-          item === null || item === void 0 ? void 0 : (_item$onChange = item.onChange) === null || _item$onChange === void 0 ? void 0 : _item$onChange.call(item, value, event);
-        },
-        onClick: item.onClick ? function (e) {
-          item.onClick();
-          e.stopPropagation();
-        } : undefined,
-        name: (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key),
-        id: (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key)
-      })) : (type || item.type) === _groupType["default"].radio ? /*#__PURE__*/_react["default"].createElement(_Radio.Radio, (0, _extends2["default"])({}, item, {
-        isChecked: (item === null || item === void 0 ? void 0 : item.isChecked) || (0, _groupFilterConstants.isChecked)((groups === null || groups === void 0 ? void 0 : groups.value) || groupKey, (item === null || item === void 0 ? void 0 : item.value) || key, item === null || item === void 0 ? void 0 : item.id, item === null || item === void 0 ? void 0 : item.tagValue, stateSelected, selected) || false,
-        onChange: function onChange(value, event) {
-          var _item$onChange2;
-
-          item === null || item === void 0 ? void 0 : (_item$onChange2 = item.onChange) === null || _item$onChange2 === void 0 ? void 0 : _item$onChange2.call(item, value, event);
-        },
-        value: (item === null || item === void 0 ? void 0 : item.value) || key,
-        name: (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key),
-        label: (item === null || item === void 0 ? void 0 : item.label) || '',
-        id: (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key)
-      })) : (type || item.type) === _groupType["default"].button ? /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({}, item, {
-        className: "pf-c-select__option-button ".concat((item === null || item === void 0 ? void 0 : item.className) || ''),
-        variant: item === null || item === void 0 ? void 0 : item.variant,
-        onClick: item.onClick
-      }), item === null || item === void 0 ? void 0 : item.label) : (item === null || item === void 0 ? void 0 : item.label) || '');
+        className: "ins-c-tree-view"
+      }, renderItem(item, key, type, groupKey)) : renderItem(item, key, type, groupKey);
     });
   };
 
@@ -199,7 +217,7 @@ var Group = function Group(_ref) {
       className: (0, _classnames["default"])('ins-c-menu__scrollable', className, {
         'pf-m-expanded': isOpen
       })
-    }, /*#__PURE__*/_react["default"].createElement(_MenuContent.MenuContent, null, /*#__PURE__*/_react["default"].createElement(_MenuList.MenuList, null, menuItems.length > 0 && /*#__PURE__*/_react["default"].createElement(_MenuGroup.MenuGroup, null, renderItems(items)), groupMenuItems.map(function (group, groupKey) {
+    }, /*#__PURE__*/_react["default"].createElement(_MenuContent.MenuContent, null, /*#__PURE__*/_react["default"].createElement(_MenuList.MenuList, null, menuItems.length > 0 && /*#__PURE__*/_react["default"].createElement(_MenuGroup.MenuGroup, null, renderItems(menuItems)), groupMenuItems.map(function (group, groupKey) {
       return /*#__PURE__*/_react["default"].createElement(_MenuGroup.MenuGroup, {
         label: group.label,
         key: "".concat(group.label, "-").concat(groupKey, "-group")

package/ConditionalFilter/conditional-filter.css

@@ -51,9 +51,6 @@
 .ins-c-conditional-filter .pf-c-select__toggle-badge {
   display: none;
 }
-.ins-c-conditional-filter .pf-c-menu-toggle {
-  padding: 0;
-}
 .ins-c-conditional-filter .pf-c-menu-toggle .pf-c-menu-toggle__text {
   flex: 1;
 }
@@ -64,6 +61,7 @@
 .pf-c-menu.ins-c-menu__scrollable {
   max-height: 416px;
   overflow-y: auto;
+  min-width: initial;
 }
 .pf-c-menu .ins-c-menu__show--more {
   background: none;

package/ConditionalFilter/conditional-filter.scss

@@ -61,7 +61,6 @@
     }
 
     .pf-c-menu-toggle {
-        padding: 0;
         .pf-c-menu-toggle__text {
             flex: 1;
             input { border: none; }
@@ -73,6 +72,7 @@
     &.ins-c-menu__scrollable {
         max-height: 416px;
         overflow-y: auto;
+        min-width: initial;
     }
     .ins-c-menu__show--more {
         background: none;

package/ConditionalFilter/group-filter.css

@@ -0,0 +1,19 @@
+:root {
+  --ins-color--orange: #ec7a08;
+}
+
+.ins-c-tree-view .pf-c-tree-view {
+  padding: 0;
+}
+.ins-c-tree-view .pf-c-menu__list-item {
+  background: none;
+}
+.ins-c-tree-view .pf-c-menu__list-item .pf-c-menu__item {
+  padding: 0;
+}
+.ins-c-tree-view .pf-c-menu__list-item .pf-c-menu__item .pf-c-tree-view__content {
+  background: none;
+}
+.ins-c-tree-view .pf-c-menu__list-item .pf-c-menu__item .pf-c-tree-view__node {
+  background: none;
+}

package/ConditionalFilter/group-filter.scss

@@ -0,0 +1,23 @@
+@import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
+
+.ins-c-tree-view {
+    .pf-c-tree-view {
+        padding: 0;
+    }
+
+    .pf-c-menu__list-item {
+        background: none;
+
+        .pf-c-menu__item {
+            padding: 0;
+
+            .pf-c-tree-view__content {
+                background: none;
+            }
+            
+            .pf-c-tree-view__node {
+                background: none;
+            }
+        }
+    }
+}

package/ConditionalFilter/groupFilterConstants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.calculateSelected = exports.getGroupMenuItems = exports.getMenuItems = exports.isChecked = void 0;
+exports.onTreeCheck = exports.mapTree = exports.calculateSelected = exports.getGroupMenuItems = exports.convertTreeItem = exports.getMenuItems = exports.isChecked = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -56,10 +56,10 @@ var getMenuItems = function getMenuItems(items, onChange, calculateSelected, gro
     return _objectSpread(_objectSpread({}, item), {}, {
       key: item.id || item.value || index,
       value: String(item.value || item.id || index),
-      onClick: function onClick(event) {
+      onClick: function onClick(event, treeViewItem, checked) {
         var _item$onClick;
 
-        var params = [event, calculateSelected(groupType || item.type, groupValue, item.value), _objectSpread({
+        var params = [event, calculateSelected(groupType || item.type, groupValue, (groupType || item.type) === _groupType["default"].treeView ? treeViewItem : item.value, checked), _objectSpread({
           value: groupValue,
           label: groupLabel || item.label,
           id: groupId || item.id,
@@ -79,6 +79,20 @@ var getMenuItems = function getMenuItems(items, onChange, calculateSelected, gro
 
 exports.getMenuItems = getMenuItems;
 
+var convertTreeItem = function convertTreeItem(item) {
+  item.id = item.id || item.value;
+  item.name = item.label || item.name;
+  item.value = item.id;
+  item.label = item.name;
+  return item.children ? _objectSpread(_objectSpread({}, item), {}, {
+    children: item.children.map(function (child) {
+      return convertTreeItem(child);
+    })
+  }) : item;
+};
+
+exports.convertTreeItem = convertTreeItem;
+
 var getGroupMenuItems = function getGroupMenuItems(groups, onChange, calculateSelected) {
   var result = groups.map(function (_ref2) {
     var value = _ref2.value,
@@ -87,11 +101,14 @@ var getGroupMenuItems = function getGroupMenuItems(groups, onChange, calculateSe
         type = _ref2.type,
         items = _ref2.items,
         group = (0, _objectWithoutProperties2["default"])(_ref2, ["value", "label", "id", "type", "items"]);
+    var converted = type === _groupType["default"].treeView ? items.map(function (item) {
+      return convertTreeItem(item);
+    }) : items;
     return {
       label: label,
       value: value,
       type: type,
-      items: getMenuItems(items, onChange, calculateSelected, type, value, label, id, group)
+      items: getMenuItems(converted, onChange, calculateSelected, type, value, label, id, group)
     };
   });
   return result.filter(function (_ref3) {
@@ -105,19 +122,89 @@ var getGroupMenuItems = function getGroupMenuItems(groups, onChange, calculateSe
 exports.getGroupMenuItems = getGroupMenuItems;
 
 var calculateSelected = function calculateSelected(selectedTags) {
-  return function (type, groupKey, itemKey) {
-    var activeGroup = selectedTags[groupKey];
-
-    if (activeGroup) {
-      if (type !== _groupType["default"].radio && (activeGroup[itemKey] instanceof Object ? activeGroup[itemKey].isSelected : Boolean(activeGroup[itemKey]))) {
-        return _objectSpread(_objectSpread({}, selectedTags), {}, (0, _defineProperty2["default"])({}, groupKey, _objectSpread(_objectSpread({}, activeGroup || {}), {}, (0, _defineProperty2["default"])({}, itemKey, false))));
+  return function (type, groupKey, value, checked) {
+    var activeGroup = selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags[groupKey];
+    var children = type === _groupType["default"].treeView && [value].reduce(function iter(r, a) {
+      if (Array.isArray(a.children)) {
+        return a.children.reduce(iter, r);
       }
 
-      return _objectSpread(_objectSpread({}, selectedTags), {}, (0, _defineProperty2["default"])({}, groupKey, _objectSpread(_objectSpread({}, type !== _groupType["default"].radio ? activeGroup || {} : {}), {}, (0, _defineProperty2["default"])({}, itemKey, true))));
+      r.push(a);
+      return r;
+    }, []);
+    var itemKeys = type === _groupType["default"].treeView ? children.map(function (item) {
+      return item.id;
+    }) : [value];
+
+    if (activeGroup) {
+      var result = selectedTags;
+      itemKeys.map(function (itemKey) {
+        var activeGroup = result[groupKey];
+
+        if (type !== _groupType["default"].radio && (activeGroup[itemKey] instanceof Object ? activeGroup[itemKey].isSelected : Boolean(activeGroup[itemKey]))) {
+          result = _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2["default"])({}, groupKey, _objectSpread(_objectSpread({}, activeGroup || {}), {}, (0, _defineProperty2["default"])({}, itemKey, type === _groupType["default"].treeView && checked))));
+        } else {
+          result = _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2["default"])({}, groupKey, _objectSpread(_objectSpread({}, type !== _groupType["default"].radio ? activeGroup || {} : {}), {}, (0, _defineProperty2["default"])({}, itemKey, true))));
+        }
+      });
+      return result;
     }
 
-    return _objectSpread(_objectSpread({}, selectedTags), {}, (0, _defineProperty2["default"])({}, groupKey, (0, _defineProperty2["default"])({}, itemKey, true)));
+    return itemKeys.reduce(function (acc, curr) {
+      return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, groupKey, _objectSpread(_objectSpread({}, acc === null || acc === void 0 ? void 0 : acc[groupKey]), {}, (0, _defineProperty2["default"])({}, curr, true))));
+    }, selectedTags);
+  };
+};
+
+exports.calculateSelected = calculateSelected;
+
+var areAllChildrenChecked = function areAllChildrenChecked(dataItem, groupKey, stateSelected, selected) {
+  return dataItem.children ? dataItem.children.every(function (child) {
+    return areAllChildrenChecked(child, groupKey, stateSelected, selected);
+  }) : isChecked(groupKey, dataItem.id, undefined, undefined, stateSelected, selected);
+};
+
+var areSomeChildrenChecked = function areSomeChildrenChecked(dataItem, groupKey, stateSelected, selected) {
+  return dataItem.children ? dataItem.children.some(function (child) {
+    return areSomeChildrenChecked(child, groupKey, stateSelected, selected);
+  }) : isChecked(groupKey, dataItem.id, undefined, undefined, stateSelected, selected);
+};
+
+var mapTree = function mapTree(item, groupKey, stateSelected, selected) {
+  var hasCheck = areAllChildrenChecked(item, groupKey, stateSelected, selected);
+  item.checkProps = {
+    checked: false
   };
+
+  if (hasCheck) {
+    item.checkProps.checked = true;
+  } else {
+    var hasPartialCheck = areSomeChildrenChecked(item, groupKey, stateSelected, selected);
+
+    if (hasPartialCheck) {
+      item.checkProps = {
+        checked: null
+      };
+    }
+  }
+
+  if (item.children) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      children: item.children.map(function (child) {
+        return mapTree(child, groupKey, stateSelected, selected);
+      })
+    });
+  }
+
+  return item;
+};
+
+exports.mapTree = mapTree;
+
+var onTreeCheck = function onTreeCheck(e, treeViewItem, tree) {
+  var _e$target;
+
+  return tree[0].onClick(e, treeViewItem, e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.checked);
 };
 
-exports.calculateSelected = calculateSelected;
+exports.onTreeCheck = onTreeCheck;

package/ConditionalFilter/groupType.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var groupType = {
+  treeView: 'treeView',
   checkbox: 'checkbox',
   radio: 'radio',
   button: 'button',

package/Skeleton/Skeleton.js

@@ -17,6 +17,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Skeleton = require("@patternfly/react-core/dist/js/components/Skeleton/Skeleton.js");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./skeleton.css");
@@ -34,10 +36,9 @@ var Skeleton = function Skeleton(_ref) {
       isDark = _ref.isDark,
       className = _ref.className,
       props = (0, _objectWithoutProperties2["default"])(_ref, ["size", "isDark", "className"]);
-  var skeletonClasses = (0, _classnames["default"])('ins-c-skeleton', "ins-c-skeleton__".concat(size), (0, _defineProperty2["default"])({}, "ins-m-dark", isDark), className);
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: skeletonClasses
-  }, props), "\xA0");
+  return /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('ins-c-skeleton', "ins-c-skeleton__".concat(size), (0, _defineProperty2["default"])({}, "ins-m-dark", isDark), className)
+  }, props));
 };
 
 var _default = Skeleton;

package/Skeleton/skeleton.css

@@ -1,45 +1,24 @@
-:root {
-  --ins-color--orange: #ec7a08;
-}
-
-.ins-c-skeleton {
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-name: skeletonGradient;
-  animation-timing-function: linear;
-  background: var(--pf-global--disabled-color--200);
-  background: linear-gradient(to right, #f5f5f5 10%, #e8e8e8 18%, #f5f5f5 33%);
-  background-size: 1000px 50px;
-  background-size: 62.5rem 3.125rem;
-  border-radius: 5px;
-  border-radius: 0.3125rem;
-}
 .ins-c-skeleton__xs {
-  width: 16%;
+  width: 16% !important;
 }
 .ins-c-skeleton__sm {
-  width: 33%;
+  width: 33% !important;
 }
 .ins-c-skeleton__md {
-  width: 66%;
+  width: 66% !important;
 }
 .ins-c-skeleton__lg {
-  width: 100%;
+  width: 100% !important;
 }
 .ins-c-skeleton.ins-m-dark {
-  background: #3c3c3c;
-  background: linear-gradient(to right, #3c3c3c 10%, #484848 18%, #3c3c3c 33%);
-  background-size: 1000px 50px;
-  background-size: 62.5rem 3.125rem;
-}
-
-@keyframes skeletonGradient {
-  0% {
-    background-position: -500px 0px;
-    background-position: -31.25rem 0rem;
-  }
-  100% {
-    background-position: 500px 0px;
-    background-position: 31.25rem 0rem;
-  }
+  --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-skeleton--after--LinearGradientColorStop1: var(
+    --pf-global--palette--black-600
+  );
+  --pf-c-skeleton--after--LinearGradientColorStop2: var(
+    --pf-global--palette--black-500
+  );
+  --pf-c-skeleton--after--LinearGradientColorStop3: var(
+    --pf-global--palette--black-600
+  );
 }

package/Skeleton/skeleton.scss

@@ -1,34 +1,18 @@
-@import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
-
-$skeleton-base-color: #f5f5f5;
-$skeleton-dark-color: #e8e8e8;
-
-$ins-color--dark: #3c3c3c;
-$invert-skeleton-base-color: #3c3c3c;
-$invert-skeleton-dark-color: #484848;
-
-
 .ins-c-skeleton {
-    &__xs { width: 16%; }
-    &__sm { width: 33%; }
-    &__md { width: 66%; }
-    &__lg { width: 100%; }
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-    animation-name: skeletonGradient;
-    animation-timing-function: linear;
-    background: $ins-color--gray;
-    background: linear-gradient(to right, $skeleton-base-color 10%, $skeleton-dark-color 18%, $skeleton-base-color 33%);
-    @include rem('background-size', 1000px 50px);
-    @include rem('border-radius', 5px);
+    &__xs { width: 16% !important; }
+    &__sm { width: 33% !important; }
+    &__md { width: 66% !important; }
+    &__lg { width: 100% !important; }
     &.ins-m-dark {
-        background: $ins-color--dark;
-        background: linear-gradient(to right, $invert-skeleton-base-color 10%, $invert-skeleton-dark-color 18%, $invert-skeleton-base-color 33%);
-        @include rem('background-size', 1000px 50px);
+        --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
+        --pf-c-skeleton--after--LinearGradientColorStop1: var(
+          --pf-global--palette--black-600
+        );
+        --pf-c-skeleton--after--LinearGradientColorStop2: var(
+          --pf-global--palette--black-500
+        );
+        --pf-c-skeleton--after--LinearGradientColorStop3: var(
+          --pf-global--palette--black-600
+        );
     }
 }
-
-@keyframes skeletonGradient{
-    0% { @include rem('background-position', -500px 0); }
-    100%{ @include rem('background-position', 500px 0); }
-}

package/SkeletonTable/SkeletonTable.css

@@ -0,0 +1,3 @@
+.ins-c-skeleton-table__dark {
+  background-color: #1b1d21 !important;
+}

package/SkeletonTable/SkeletonTable.js

@@ -29,8 +29,12 @@ var _reactTable = require("@patternfly/react-table");
 
 var _Skeleton = require("../Skeleton");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+require("./SkeletonTable.css");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -51,29 +55,33 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createColumns", function () {
-      var colSize = _this.props.colSize;
+      var _this$props = _this.props,
+          colSize = _this$props.colSize,
+          isDark = _this$props.isDark;
       return (0, _toConsumableArray2["default"])(Array(colSize)).map(function () {
         return {
           title: /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, {
+            isDark: isDark,
             size: _Skeleton.SkeletonSize.sm
           })
         };
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getColumns", function () {
-      var _this$props = _this.props,
-          paddingColumnSize = _this$props.paddingColumnSize,
-          columns = _this$props.columns;
+      var _this$props2 = _this.props,
+          paddingColumnSize = _this$props2.paddingColumnSize,
+          columns = _this$props2.columns;
       return _this.newArray(paddingColumnSize).map(function () {
         return '';
       }).concat(columns || _this.createColumns());
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createRows", function () {
-      var _this$props2 = _this.props,
-          colSize = _this$props2.colSize,
-          rowSize = _this$props2.rowSize,
-          columns = _this$props2.columns,
-          paddingColumnSize = _this$props2.paddingColumnSize;
+      var _this$props3 = _this.props,
+          colSize = _this$props3.colSize,
+          rowSize = _this$props3.rowSize,
+          columns = _this$props3.columns,
+          paddingColumnSize = _this$props3.paddingColumnSize,
+          isDark = _this$props3.isDark;
       var numberOfCols = columns ? columns.length : colSize;
       return _this.newArray(rowSize).map(function () {
         return {
@@ -83,6 +91,7 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
           }).concat(_this.newArray(numberOfCols).map(function () {
             return {
               title: /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, {
+                isDark: isDark,
                 size: _Skeleton.SkeletonSize.md
               })
             };
@@ -103,12 +112,16 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(SkeletonTable, [{
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          canSelectAll = _this$props3.canSelectAll,
-          isSelectable = _this$props3.isSelectable,
-          sortBy = _this$props3.sortBy,
-          variant = _this$props3.variant;
+      var _this$props4 = this.props,
+          canSelectAll = _this$props4.canSelectAll,
+          isSelectable = _this$props4.isSelectable,
+          sortBy = _this$props4.sortBy,
+          variant = _this$props4.variant,
+          isDark = _this$props4.isDark;
       return /*#__PURE__*/_react["default"].createElement(_reactTable.Table, {
+        className: (0, _classnames["default"])({
+          'ins-c-skeleton-table__dark': isDark
+        }),
         cells: this.getColumns(),
         rows: this.createRows(),
         sortBy: sortBy,
@@ -135,7 +148,8 @@ SkeletonTable.propTypes = {
   isSelectable: _propTypes["default"].bool,
   canSelectAll: _propTypes["default"].bool,
   hasRadio: _propTypes["default"].bool,
-  variant: _propTypes["default"].string
+  variant: _propTypes["default"].string,
+  isDark: _propTypes["default"].bool
 };
 SkeletonTable.defaultProps = {
   rowSize: 0,
@@ -143,7 +157,8 @@ SkeletonTable.defaultProps = {
   canSelectAll: false,
   isSelectable: false,
   hasRadio: false,
-  variant: null
+  variant: null,
+  isDark: false
 };
 var _default = SkeletonTable;
 exports["default"] = _default;

package/SkeletonTable/SkeletonTable.scss

@@ -0,0 +1,3 @@
+.ins-c-skeleton-table__dark {
+    background-color: #1b1d21 !important;
+}

package/esm/ConditionalFilter/ConditionalFilter.js

@@ -116,7 +116,8 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
           placeholder = _this$props.placeholder,
           hideLabel = _this$props.hideLabel,
           isDisabled = _this$props.isDisabled,
-          props = _objectWithoutProperties(_this$props, ["items", "value", "onChange", "placeholder", "hideLabel", "isDisabled"]);
+          useMobileLayout = _this$props.useMobileLayout,
+          props = _objectWithoutProperties(_this$props, ["items", "value", "onChange", "placeholder", "hideLabel", "isDisabled", "useMobileLayout"]);
 
       var _this$state = this.state,
           isOpen = _this$state.isOpen,
@@ -133,9 +134,9 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
         return string[0].toUpperCase() + string.substring(1);
       };
 
-      var shouldRenderNewLayout = this.props.useMobileLayout && isMobile;
+      var shouldRenderNewLayout = useMobileLayout && isMobile;
       var Wrapper = this.getWrapper();
-      return /*#__PURE__*/React.createElement(Wrapper, null, this.props.useMobileLayout && isMobile && /*#__PURE__*/React.createElement(ToolbarGroup, {
+      return /*#__PURE__*/React.createElement(Wrapper, null, useMobileLayout && isMobile && /*#__PURE__*/React.createElement(ToolbarGroup, {
         className: "ins-c-conditional-filter mobile"
       }, items.map(function (activeItem, key) {
         var ActiveComponent = activeItem && (typeMapper[activeItem.type] || typeMapper.text);
@@ -147,7 +148,7 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
         }, activeItem.filterValues)));
       })), !shouldRenderNewLayout && /*#__PURE__*/React.createElement(Fragment, null, !items || items && items.length <= 0 ? /*#__PURE__*/React.createElement("div", {
         className: classNames('ins-c-conditional-filter', {
-          desktop: this.props.useMobileLayout
+          desktop: useMobileLayout
         })
       }, /*#__PURE__*/React.createElement(Text, _extends({}, props, {
         value: currentValue,
@@ -158,7 +159,7 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
         "widget-type": "InsightsInput"
       }))) : /*#__PURE__*/React.createElement(Split, {
         className: classNames('ins-c-conditional-filter', {
-          desktop: this.props.useMobileLayout
+          desktop: useMobileLayout
         })
       }, items.length > 1 && /*#__PURE__*/React.createElement(SplitItem, null, /*#__PURE__*/React.createElement(Dropdown, {
         className: "ins-c-conditional-filter__group",

package/esm/ConditionalFilter/GroupFilter.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput/TextInput.js";
@@ -15,8 +15,10 @@ import { Menu } from "@patternfly/react-core/dist/esm/components/Menu/Menu.js";
 import { MenuContent } from "@patternfly/react-core/dist/esm/components/Menu/MenuContent.js";
 import { Popper } from "@patternfly/react-core/dist/esm/helpers/Popper/Popper.js";
 import { Radio } from "@patternfly/react-core/dist/esm/components/Radio/Radio.js";
-import { isChecked, calculateSelected, getGroupMenuItems, getMenuItems } from './groupFilterConstants';
+import { TreeView } from "@patternfly/react-core/dist/esm/components/TreeView/TreeView.js";
+import { isChecked, calculateSelected, getGroupMenuItems, getMenuItems, convertTreeItem, mapTree, onTreeCheck } from './groupFilterConstants';
 import groupType from './groupType';
+import "../../ConditionalFilter/./group-filter.css";
 
 var Group = function Group(_ref) {
   var placeholder = _ref.placeholder,
@@ -54,7 +56,6 @@ var Group = function Group(_ref) {
   useEffect(function () {
     setStateSelected(selected);
   }, [selected]);
-  var calculateSelection = useCallback(calculateSelected, [stateSelected]);
   useEffect(function () {
     setSearchString(filterBy);
   }, [filterBy]);
@@ -94,50 +95,65 @@ var Group = function Group(_ref) {
     setIsOpen(!isOpen);
   };
 
-  var groupMenuItems = getGroupMenuItems(groups, onChange, calculateSelection(selected));
-  var menuItems = getMenuItems(items, onChange, calculateSelection(selected)); // eslint-disable-next-line react/prop-types
+  var menuItems = getMenuItems(items === null || items === void 0 ? void 0 : items.map(function (item) {
+    return item.type === groupType.treeView ? convertTreeItem(item) : item;
+  }), onChange, calculateSelected(selected));
+  var groupMenuItems = getGroupMenuItems(groups, onChange, calculateSelected(selected));
+
+  var renderItem = function renderItem(item, key, type, groupKey) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      itemId: key,
+      key: "".concat(item.value, "-").concat(key, "-item"),
+      className: item === null || item === void 0 ? void 0 : item.className,
+      onClick: item.onClick && (type || item.type) === groupType.checkbox ? function (e) {
+        item.onClick();
+        e.preventDefault();
+      } : undefined
+    }, (type || item.type) === groupType.treeView ? /*#__PURE__*/React.createElement(TreeView, {
+      data: [mapTree(item, groupKey, stateSelected, selected)],
+      onCheck: function onCheck(e, value) {
+        return onTreeCheck(e, value, [item]);
+      },
+      hasChecks: true
+    }) : (type || item.type) === groupType.checkbox ? /*#__PURE__*/React.createElement(Checkbox, _extends({}, item, {
+      label: item === null || item === void 0 ? void 0 : item.label,
+      isChecked: (item === null || item === void 0 ? void 0 : item.isChecked) || isChecked(groupKey, (item === null || item === void 0 ? void 0 : item.value) || key, item === null || item === void 0 ? void 0 : item.id, item === null || item === void 0 ? void 0 : item.tagValue, stateSelected, selected) || false,
+      onChange: function onChange(value, event) {
+        var _item$onChange;
+
+        item === null || item === void 0 ? void 0 : (_item$onChange = item.onChange) === null || _item$onChange === void 0 ? void 0 : _item$onChange.call(item, value, event);
+      },
+      onClick: item.onClick ? function (e) {
+        item.onClick();
+        e.stopPropagation();
+      } : undefined,
+      name: (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key),
+      id: (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key)
+    })) : (type || item.type) === groupType.radio ? /*#__PURE__*/React.createElement(Radio, _extends({}, item, {
+      isChecked: (item === null || item === void 0 ? void 0 : item.isChecked) || isChecked((groups === null || groups === void 0 ? void 0 : groups.value) || groupKey, (item === null || item === void 0 ? void 0 : item.value) || key, item === null || item === void 0 ? void 0 : item.id, item === null || item === void 0 ? void 0 : item.tagValue, stateSelected, selected) || false,
+      onChange: function onChange(value, event) {
+        var _item$onChange2;
+
+        item === null || item === void 0 ? void 0 : (_item$onChange2 = item.onChange) === null || _item$onChange2 === void 0 ? void 0 : _item$onChange2.call(item, value, event);
+      },
+      value: (item === null || item === void 0 ? void 0 : item.value) || key,
+      name: (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key),
+      label: (item === null || item === void 0 ? void 0 : item.label) || '',
+      id: (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key)
+    })) : (type || item.type) === groupType.button ? /*#__PURE__*/React.createElement(Button, _extends({}, item, {
+      className: "pf-c-select__option-button ".concat((item === null || item === void 0 ? void 0 : item.className) || ''),
+      variant: item === null || item === void 0 ? void 0 : item.variant,
+      onClick: item.onClick
+    }), item === null || item === void 0 ? void 0 : item.label) : (item === null || item === void 0 ? void 0 : item.label) || '');
+  };
 
   var renderItems = function renderItems(items, type) {
     var groupKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
     return items.map(function (item, key) {
-      return /*#__PURE__*/React.createElement(MenuItem, {
-        itemId: key,
+      return (type || item.type) === groupType.treeView ? /*#__PURE__*/React.createElement("div", {
         key: "".concat(item.value, "-").concat(key, "-item"),
-        className: item === null || item === void 0 ? void 0 : item.className,
-        onClick: item.onClick && (type || item.type) === groupType.checkbox ? function (e) {
-          item.onClick();
-          e.preventDefault();
-        } : undefined
-      }, (type || item.type) === groupType.checkbox ? /*#__PURE__*/React.createElement(Checkbox, _extends({}, item, {
-        label: item === null || item === void 0 ? void 0 : item.label,
-        isChecked: (item === null || item === void 0 ? void 0 : item.isChecked) || isChecked(groupKey, (item === null || item === void 0 ? void 0 : item.value) || key, item === null || item === void 0 ? void 0 : item.id, item === null || item === void 0 ? void 0 : item.tagValue, stateSelected, selected) || false,
-        onChange: function onChange(value, event) {
-          var _item$onChange;
-
-          item === null || item === void 0 ? void 0 : (_item$onChange = item.onChange) === null || _item$onChange === void 0 ? void 0 : _item$onChange.call(item, value, event);
-        },
-        onClick: item.onClick ? function (e) {
-          item.onClick();
-          e.stopPropagation();
-        } : undefined,
-        name: (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key),
-        id: (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key)
-      })) : (type || item.type) === groupType.radio ? /*#__PURE__*/React.createElement(Radio, _extends({}, item, {
-        isChecked: (item === null || item === void 0 ? void 0 : item.isChecked) || isChecked((groups === null || groups === void 0 ? void 0 : groups.value) || groupKey, (item === null || item === void 0 ? void 0 : item.value) || key, item === null || item === void 0 ? void 0 : item.id, item === null || item === void 0 ? void 0 : item.tagValue, stateSelected, selected) || false,
-        onChange: function onChange(value, event) {
-          var _item$onChange2;
-
-          item === null || item === void 0 ? void 0 : (_item$onChange2 = item.onChange) === null || _item$onChange2 === void 0 ? void 0 : _item$onChange2.call(item, value, event);
-        },
-        value: (item === null || item === void 0 ? void 0 : item.value) || key,
-        name: (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key),
-        label: (item === null || item === void 0 ? void 0 : item.label) || '',
-        id: (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.value) || "".concat(groupKey, "-").concat(key)
-      })) : (type || item.type) === groupType.button ? /*#__PURE__*/React.createElement(Button, _extends({}, item, {
-        className: "pf-c-select__option-button ".concat((item === null || item === void 0 ? void 0 : item.className) || ''),
-        variant: item === null || item === void 0 ? void 0 : item.variant,
-        onClick: item.onClick
-      }), item === null || item === void 0 ? void 0 : item.label) : (item === null || item === void 0 ? void 0 : item.label) || '');
+        className: "ins-c-tree-view"
+      }, renderItem(item, key, type, groupKey)) : renderItem(item, key, type, groupKey);
     });
   };
 
@@ -166,7 +182,7 @@ var Group = function Group(_ref) {
       className: classNames('ins-c-menu__scrollable', className, {
         'pf-m-expanded': isOpen
       })
-    }, /*#__PURE__*/React.createElement(MenuContent, null, /*#__PURE__*/React.createElement(MenuList, null, menuItems.length > 0 && /*#__PURE__*/React.createElement(MenuGroup, null, renderItems(items)), groupMenuItems.map(function (group, groupKey) {
+    }, /*#__PURE__*/React.createElement(MenuContent, null, /*#__PURE__*/React.createElement(MenuList, null, menuItems.length > 0 && /*#__PURE__*/React.createElement(MenuGroup, null, renderItems(menuItems)), groupMenuItems.map(function (group, groupKey) {
       return /*#__PURE__*/React.createElement(MenuGroup, {
         label: group.label,
         key: "".concat(group.label, "-").concat(groupKey, "-group")

package/esm/ConditionalFilter/groupFilterConstants.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import groupType from './groupType';
+import groupTypes from './groupType';
 export var isChecked = function isChecked(groupValue, itemValue, id, tagValue, stateSelected, propSelected) {
   var selected = _objectSpread(_objectSpread({}, propSelected), stateSelected);
 
@@ -42,10 +42,10 @@ export var getMenuItems = function getMenuItems(items, onChange, calculateSelect
     return _objectSpread(_objectSpread({}, item), {}, {
       key: item.id || item.value || index,
       value: String(item.value || item.id || index),
-      onClick: function onClick(event) {
+      onClick: function onClick(event, treeViewItem, checked) {
         var _item$onClick;
 
-        var params = [event, calculateSelected(groupType || item.type, groupValue, item.value), _objectSpread({
+        var params = [event, calculateSelected(groupType || item.type, groupValue, (groupType || item.type) === groupTypes.treeView ? treeViewItem : item.value, checked), _objectSpread({
           value: groupValue,
           label: groupLabel || item.label,
           id: groupId || item.id,
@@ -62,6 +62,17 @@ export var getMenuItems = function getMenuItems(items, onChange, calculateSelect
     return !noFilter;
   });
 };
+export var convertTreeItem = function convertTreeItem(item) {
+  item.id = item.id || item.value;
+  item.name = item.label || item.name;
+  item.value = item.id;
+  item.label = item.name;
+  return item.children ? _objectSpread(_objectSpread({}, item), {}, {
+    children: item.children.map(function (child) {
+      return convertTreeItem(child);
+    })
+  }) : item;
+};
 export var getGroupMenuItems = function getGroupMenuItems(groups, onChange, calculateSelected) {
   var result = groups.map(function (_ref2) {
     var value = _ref2.value,
@@ -71,11 +82,14 @@ export var getGroupMenuItems = function getGroupMenuItems(groups, onChange, calc
         items = _ref2.items,
         group = _objectWithoutProperties(_ref2, ["value", "label", "id", "type", "items"]);
 
+    var converted = type === groupTypes.treeView ? items.map(function (item) {
+      return convertTreeItem(item);
+    }) : items;
     return {
       label: label,
       value: value,
       type: type,
-      items: getMenuItems(items, onChange, calculateSelected, type, value, label, id, group)
+      items: getMenuItems(converted, onChange, calculateSelected, type, value, label, id, group)
     };
   });
   return result.filter(function (_ref3) {
@@ -86,17 +100,82 @@ export var getGroupMenuItems = function getGroupMenuItems(groups, onChange, calc
   });
 };
 export var calculateSelected = function calculateSelected(selectedTags) {
-  return function (type, groupKey, itemKey) {
-    var activeGroup = selectedTags[groupKey];
+  return function (type, groupKey, value, checked) {
+    var activeGroup = selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags[groupKey];
+    var children = type === groupTypes.treeView && [value].reduce(function iter(r, a) {
+      if (Array.isArray(a.children)) {
+        return a.children.reduce(iter, r);
+      }
+
+      r.push(a);
+      return r;
+    }, []);
+    var itemKeys = type === groupTypes.treeView ? children.map(function (item) {
+      return item.id;
+    }) : [value];
 
     if (activeGroup) {
-      if (type !== groupType.radio && (activeGroup[itemKey] instanceof Object ? activeGroup[itemKey].isSelected : Boolean(activeGroup[itemKey]))) {
-        return _objectSpread(_objectSpread({}, selectedTags), {}, _defineProperty({}, groupKey, _objectSpread(_objectSpread({}, activeGroup || {}), {}, _defineProperty({}, itemKey, false))));
-      }
+      var result = selectedTags;
+      itemKeys.map(function (itemKey) {
+        var activeGroup = result[groupKey];
 
-      return _objectSpread(_objectSpread({}, selectedTags), {}, _defineProperty({}, groupKey, _objectSpread(_objectSpread({}, type !== groupType.radio ? activeGroup || {} : {}), {}, _defineProperty({}, itemKey, true))));
+        if (type !== groupTypes.radio && (activeGroup[itemKey] instanceof Object ? activeGroup[itemKey].isSelected : Boolean(activeGroup[itemKey]))) {
+          result = _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, groupKey, _objectSpread(_objectSpread({}, activeGroup || {}), {}, _defineProperty({}, itemKey, type === groupTypes.treeView && checked))));
+        } else {
+          result = _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, groupKey, _objectSpread(_objectSpread({}, type !== groupTypes.radio ? activeGroup || {} : {}), {}, _defineProperty({}, itemKey, true))));
+        }
+      });
+      return result;
     }
 
-    return _objectSpread(_objectSpread({}, selectedTags), {}, _defineProperty({}, groupKey, _defineProperty({}, itemKey, true)));
+    return itemKeys.reduce(function (acc, curr) {
+      return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, groupKey, _objectSpread(_objectSpread({}, acc === null || acc === void 0 ? void 0 : acc[groupKey]), {}, _defineProperty({}, curr, true))));
+    }, selectedTags);
+  };
+};
+
+var areAllChildrenChecked = function areAllChildrenChecked(dataItem, groupKey, stateSelected, selected) {
+  return dataItem.children ? dataItem.children.every(function (child) {
+    return areAllChildrenChecked(child, groupKey, stateSelected, selected);
+  }) : isChecked(groupKey, dataItem.id, undefined, undefined, stateSelected, selected);
+};
+
+var areSomeChildrenChecked = function areSomeChildrenChecked(dataItem, groupKey, stateSelected, selected) {
+  return dataItem.children ? dataItem.children.some(function (child) {
+    return areSomeChildrenChecked(child, groupKey, stateSelected, selected);
+  }) : isChecked(groupKey, dataItem.id, undefined, undefined, stateSelected, selected);
+};
+
+export var mapTree = function mapTree(item, groupKey, stateSelected, selected) {
+  var hasCheck = areAllChildrenChecked(item, groupKey, stateSelected, selected);
+  item.checkProps = {
+    checked: false
   };
+
+  if (hasCheck) {
+    item.checkProps.checked = true;
+  } else {
+    var hasPartialCheck = areSomeChildrenChecked(item, groupKey, stateSelected, selected);
+
+    if (hasPartialCheck) {
+      item.checkProps = {
+        checked: null
+      };
+    }
+  }
+
+  if (item.children) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      children: item.children.map(function (child) {
+        return mapTree(child, groupKey, stateSelected, selected);
+      })
+    });
+  }
+
+  return item;
+};
+export var onTreeCheck = function onTreeCheck(e, treeViewItem, tree) {
+  var _e$target;
+
+  return tree[0].onClick(e, treeViewItem, e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.checked);
 };

package/esm/ConditionalFilter/groupType.js

@@ -1,4 +1,5 @@
 var groupType = {
+  treeView: 'treeView',
   checkbox: 'checkbox',
   radio: 'radio',
   button: 'button',

package/esm/Skeleton/Skeleton.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from 'react';
 import propTypes from 'prop-types';
+import { Skeleton as PFSkeleton } from "@patternfly/react-core/dist/esm/components/Skeleton/Skeleton.js";
 import classNames from 'classnames';
 export var SkeletonSize = {
   xs: 'xs',
@@ -18,10 +19,9 @@ var Skeleton = function Skeleton(_ref) {
       className = _ref.className,
       props = _objectWithoutProperties(_ref, ["size", "isDark", "className"]);
 
-  var skeletonClasses = classNames('ins-c-skeleton', "ins-c-skeleton__".concat(size), _defineProperty({}, "ins-m-dark", isDark), className);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: skeletonClasses
-  }, props), "\xA0");
+  return /*#__PURE__*/React.createElement(PFSkeleton, _extends({
+    className: classNames('ins-c-skeleton', "ins-c-skeleton__".concat(size), _defineProperty({}, "ins-m-dark", isDark), className)
+  }, props));
 };
 
 export default Skeleton;

package/esm/SkeletonTable/SkeletonTable.js

@@ -14,7 +14,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { RowSelectVariant, Table, TableHeader, TableBody } from '@patternfly/react-table';
 import { Skeleton, SkeletonSize } from '../Skeleton';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import "../../SkeletonTable/./SkeletonTable.css";
 
 var SkeletonTable = /*#__PURE__*/function (_React$Component) {
   _inherits(SkeletonTable, _React$Component);
@@ -33,10 +35,13 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "createColumns", function () {
-      var colSize = _this.props.colSize;
+      var _this$props = _this.props,
+          colSize = _this$props.colSize,
+          isDark = _this$props.isDark;
       return _toConsumableArray(Array(colSize)).map(function () {
         return {
           title: /*#__PURE__*/React.createElement(Skeleton, {
+            isDark: isDark,
             size: SkeletonSize.sm
           })
         };
@@ -44,20 +49,21 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "getColumns", function () {
-      var _this$props = _this.props,
-          paddingColumnSize = _this$props.paddingColumnSize,
-          columns = _this$props.columns;
+      var _this$props2 = _this.props,
+          paddingColumnSize = _this$props2.paddingColumnSize,
+          columns = _this$props2.columns;
       return _this.newArray(paddingColumnSize).map(function () {
         return '';
       }).concat(columns || _this.createColumns());
     });
 
     _defineProperty(_assertThisInitialized(_this), "createRows", function () {
-      var _this$props2 = _this.props,
-          colSize = _this$props2.colSize,
-          rowSize = _this$props2.rowSize,
-          columns = _this$props2.columns,
-          paddingColumnSize = _this$props2.paddingColumnSize;
+      var _this$props3 = _this.props,
+          colSize = _this$props3.colSize,
+          rowSize = _this$props3.rowSize,
+          columns = _this$props3.columns,
+          paddingColumnSize = _this$props3.paddingColumnSize,
+          isDark = _this$props3.isDark;
       var numberOfCols = columns ? columns.length : colSize;
       return _this.newArray(rowSize).map(function () {
         return {
@@ -67,6 +73,7 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
           }).concat(_this.newArray(numberOfCols).map(function () {
             return {
               title: /*#__PURE__*/React.createElement(Skeleton, {
+                isDark: isDark,
                 size: SkeletonSize.md
               })
             };
@@ -90,12 +97,16 @@ var SkeletonTable = /*#__PURE__*/function (_React$Component) {
   _createClass(SkeletonTable, [{
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          canSelectAll = _this$props3.canSelectAll,
-          isSelectable = _this$props3.isSelectable,
-          sortBy = _this$props3.sortBy,
-          variant = _this$props3.variant;
+      var _this$props4 = this.props,
+          canSelectAll = _this$props4.canSelectAll,
+          isSelectable = _this$props4.isSelectable,
+          sortBy = _this$props4.sortBy,
+          variant = _this$props4.variant,
+          isDark = _this$props4.isDark;
       return /*#__PURE__*/React.createElement(Table, {
+        className: classNames({
+          'ins-c-skeleton-table__dark': isDark
+        }),
         cells: this.getColumns(),
         rows: this.createRows(),
         sortBy: sortBy,
@@ -123,7 +134,8 @@ SkeletonTable.propTypes = {
   isSelectable: PropTypes.bool,
   canSelectAll: PropTypes.bool,
   hasRadio: PropTypes.bool,
-  variant: PropTypes.string
+  variant: PropTypes.string,
+  isDark: PropTypes.bool
 };
 SkeletonTable.defaultProps = {
   rowSize: 0,
@@ -131,6 +143,7 @@ SkeletonTable.defaultProps = {
   canSelectAll: false,
   isSelectable: false,
   hasRadio: false,
-  variant: null
+  variant: null,
+  isDark: false
 };
 export default SkeletonTable;

package/index.css

@@ -122,9 +122,6 @@ i.ins-battery svg {
 .ins-c-conditional-filter .pf-c-select__toggle-badge {
   display: none;
 }
-.ins-c-conditional-filter .pf-c-menu-toggle {
-  padding: 0;
-}
 .ins-c-conditional-filter .pf-c-menu-toggle .pf-c-menu-toggle__text {
   flex: 1;
 }
@@ -135,6 +132,7 @@ i.ins-battery svg {
 .pf-c-menu.ins-c-menu__scrollable {
   max-height: 416px;
   overflow-y: auto;
+  min-width: initial;
 }
 .pf-c-menu .ins-c-menu__show--more {
   background: none;
@@ -1421,51 +1419,31 @@ textarea.pf-c-form-control {
   top: 0.5rem;
 }
 
-:root {
-  --ins-color--orange: #ec7a08;
-}
-
-.ins-c-skeleton {
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-name: skeletonGradient;
-  animation-timing-function: linear;
-  background: var(--pf-global--disabled-color--200);
-  background: linear-gradient(to right, #f5f5f5 10%, #e8e8e8 18%, #f5f5f5 33%);
-  background-size: 1000px 50px;
-  background-size: 62.5rem 3.125rem;
-  border-radius: 5px;
-  border-radius: 0.3125rem;
-}
 .ins-c-skeleton__xs {
-  width: 16%;
+  width: 16% !important;
 }
 .ins-c-skeleton__sm {
-  width: 33%;
+  width: 33% !important;
 }
 .ins-c-skeleton__md {
-  width: 66%;
+  width: 66% !important;
 }
 .ins-c-skeleton__lg {
-  width: 100%;
+  width: 100% !important;
 }
 .ins-c-skeleton.ins-m-dark {
-  background: #3c3c3c;
-  background: linear-gradient(to right, #3c3c3c 10%, #484848 18%, #3c3c3c 33%);
-  background-size: 1000px 50px;
-  background-size: 62.5rem 3.125rem;
+  --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-skeleton--after--LinearGradientColorStop1: var(
+    --pf-global--palette--black-600
+  );
+  --pf-c-skeleton--after--LinearGradientColorStop2: var(
+    --pf-global--palette--black-500
+  );
+  --pf-c-skeleton--after--LinearGradientColorStop3: var(
+    --pf-global--palette--black-600
+  );
 }
 
-@keyframes skeletonGradient {
-  0% {
-    background-position: -500px 0px;
-    background-position: -31.25rem 0rem;
-  }
-  100% {
-    background-position: 500px 0px;
-    background-position: 31.25rem 0rem;
-  }
-}
 :root {
   --ins-color--orange: #ec7a08;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components",
-    "version": "3.4.11",
+    "version": "3.5.0",
     "description": "Common components for RedHat Cloud Services project.",
     "main": "index.js",
     "module": "esm/index.js",