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

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; }
@@ -126,50 +130,65 @@ var Group = function Group(_ref) {
     setIsOpen(!isOpen);
   };
 
+  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 menuItems = (0, _groupFilterConstants.getMenuItems)(items, onChange, (0, _groupFilterConstants.calculateSelected)(selected)); // eslint-disable-next-line react/prop-types
+
+  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);
     });
   };
 
@@ -198,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/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) {
+  return function (type, groupKey, value, checked) {
     var activeGroup = selectedTags === null || selectedTags === void 0 ? void 0 : 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))));
+    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/esm/ConditionalFilter/GroupFilter.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,
@@ -93,50 +95,65 @@ var Group = function Group(_ref) {
     setIsOpen(!isOpen);
   };
 
+  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 menuItems = getMenuItems(items, onChange, calculateSelected(selected)); // eslint-disable-next-line react/prop-types
+
+  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);
     });
   };
 
@@ -165,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) {
+  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/package.json

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