@redhat-cloud-services/frontend-components 3.4.1 → 3.4.5

package/BulkSelect/BulkSelect.js

@@ -124,7 +124,7 @@ visible unless you update it.');
         ouiaSafe: ouiaSafe,
         toggle: /*#__PURE__*/_react["default"].createElement(_DropdownToggle.DropdownToggle, (0, _extends2["default"])({}, toggleProps, {
           isDisabled: isDisabled,
-          ouiaId: "".concat(ouiaFinalId, "-toggle"),
+          ouiaId: ouiaFinalId,
           splitButtonItems: [/*#__PURE__*/_react["default"].createElement(_react.Fragment, {
             key: "split-checkbox"
           }, hasError ? /*#__PURE__*/_react["default"].createElement(_DropdownToggleCheckbox.DropdownToggleCheckbox, {
@@ -132,13 +132,13 @@ visible unless you update it.');
             "aria-label": "Select all",
             onChange: onSelect,
             checked: checked,
-            ouiaId: "".concat(ouiaFinalId, "-toggle-checkbox")
+            ouiaId: ouiaFinalId
           }) : /*#__PURE__*/_react["default"].createElement(_DropdownToggleCheckbox.DropdownToggleCheckbox, {
             id: id ? "".concat(id, "-toggle-checkbox") : 'toggle-checkbox',
             "aria-label": "Select all",
             onChange: onSelect,
             isChecked: checked,
-            ouiaId: "".concat(ouiaFinalId, "-toggle-checkbox")
+            ouiaId: ouiaFinalId
           }, count ? "".concat(count, " selected") : ''))],
           onToggle: this.onToggle
         })),

package/ConditionalFilter/CheckboxFilter.js

@@ -144,7 +144,8 @@ var CheckboxFilter = /*#__PURE__*/function (_Component) {
         onSelect: this.onSelect,
         selections: this.calculateSelected(),
         isOpen: isExpanded,
-        placeholderText: placeholder
+        placeholderText: placeholder,
+        ouiaId: placeholder
       }, items.map(function (_ref2, key) {
         var value = _ref2.value,
             _onClick = _ref2.onClick,

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"]);
+          containerRef = _this$props.containerRef,
+          props = (0, _objectWithoutProperties2["default"])(_this$props, ["items", "value", "onChange", "placeholder", "hideLabel", "isDisabled", "containerRef"]);
       var _this$state = this.state,
           isOpen = _this$state.isOpen,
           stateValue = _this$state.stateValue,
@@ -197,10 +198,12 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
           return _this3.dropdownToggle(false);
         },
         isOpen: isOpen,
+        ouiaId: "ConditionalFilter",
         toggle: /*#__PURE__*/_react["default"].createElement(_DropdownToggle.DropdownToggle, {
           onToggle: this.dropdownToggle,
           isDisabled: isDisabled,
-          className: hideLabel ? 'ins-c-conditional-filter__no-label' : ''
+          className: hideLabel ? 'ins-c-conditional-filter__no-label' : '',
+          ouiaId: "ConditionalFilter"
         }, /*#__PURE__*/_react["default"].createElement(_filterIcon["default"], {
           size: "sm"
         }), !hideLabel && /*#__PURE__*/_react["default"].createElement("span", {
@@ -210,6 +213,7 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/_react["default"].createElement(_DropdownItem.DropdownItem, {
             key: item.id ? "".concat(item.id, "-dropdown") : key,
             component: "button",
+            ouiaId: item.label,
             onClick: function onClick(e) {
               return onChangeCallback(e, item.value || key, item);
             },
@@ -221,7 +225,9 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(ActiveComponent, (0, _extends2["default"])({}, activeItem.type !== _conditionalFilterConstants.conditionalFilterType.custom && {
         placeholder: placeholder || activeItem.placeholder || "Filter by ".concat(activeItem.label),
         id: activeItem.filterValues && activeItem.filterValues.id || currentValue
-      }, activeItem.filterValues))))));
+      }, activeItem.filterValues, {
+        containerRef: containerRef
+      }))))));
     }
   }]);
   return ConditionalFilter;

package/ConditionalFilter/GroupFilter.js

@@ -64,7 +64,8 @@ var Group = function Group(_ref) {
       groups = _ref$groups === void 0 ? [] : _ref$groups,
       onChange = _ref.onChange,
       selected = _ref.selected,
-      isFilterable = _ref.isFilterable;
+      isFilterable = _ref.isFilterable,
+      containerRef = _ref.containerRef;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -123,10 +124,7 @@ var Group = function Group(_ref) {
     ev.stopPropagation(); // Stop handleClickOutside from handling
 
     ev.persist();
-
-    if (!(isOpen && toggleRef.current.contains(ev.target))) {
-      setIsOpen(!isOpen);
-    }
+    setIsOpen(!isOpen);
   };
 
   var groupMenuItems = (0, _groupFilterConstants.getGroupMenuItems)(groups, onChange, calculateSelection(selected));
@@ -138,7 +136,11 @@ var Group = function Group(_ref) {
       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
+        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,
@@ -147,12 +149,18 @@ var Group = function Group(_ref) {
 
           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) {
-          item.onChange && item.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),
@@ -167,6 +175,7 @@ var Group = function Group(_ref) {
   };
 
   return /*#__PURE__*/_react["default"].createElement(_Popper.Popper, {
+    appendTo: containerRef,
     trigger: /*#__PURE__*/_react["default"].createElement(_MenuToggle.MenuToggle, {
       ref: toggleRef,
       onClick: onToggleClick,
@@ -185,7 +194,7 @@ var Group = function Group(_ref) {
     }) : placeholder),
     popper: /*#__PURE__*/_react["default"].createElement(_Menu.Menu, {
       ref: menuRef,
-      className: (0, _classnames["default"])(className, {
+      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) {
@@ -198,8 +207,7 @@ var Group = function Group(_ref) {
       className: "ins-c-menu__show--more"
     }, showMoreOptions, {
       onClick: function onClick(e) {
-        setIsOpen(false);
-        onShowMore(e);
+        return onShowMore(e);
       }
     }), showMoreTitle) : /*#__PURE__*/_react["default"].createElement("span", {
       hidden: true,
@@ -235,7 +243,8 @@ Group.propTypes = {
     }))
   })),
   onChange: _propTypes["default"].func.isRequired,
-  selectedTags: _propTypes["default"].shape({})
+  selectedTags: _propTypes["default"].shape({}),
+  containerRef: _propTypes["default"].element
 };
 var _default = Group;
 exports["default"] = _default;

package/ConditionalFilter/RadioFilter.js

@@ -113,7 +113,8 @@ var Radio = /*#__PURE__*/function (_Component) {
         onToggle: this.onToggle,
         onSelect: this.onSelect,
         isOpen: isExpanded,
-        placeholderText: placeholder
+        placeholderText: placeholder,
+        ouiaId: placeholder
       }, items.map(function (_ref, key) {
         var value = _ref.value,
             isChecked = _ref.isChecked,

package/ConditionalFilter/TextFilter.js

@@ -98,7 +98,8 @@ var Text = /*#__PURE__*/function (_Component) {
         onKeyDown: function onKeyDown(e) {
           return e.key === 'Enter' && onSubmit(e, value || stateValue);
         },
-        "data-ouia-component-type": "PF4/TextInput"
+        "data-ouia-component-type": "PF4/TextInput",
+        ouiaId: "ConditionalFilter"
       })), /*#__PURE__*/_react["default"].createElement(Icon, {
         size: "sm",
         className: "ins-c-search-icon"

package/ConditionalFilter/conditional-filter.css

@@ -61,7 +61,11 @@
   border: none;
 }
 
-.pf-c-menu .ins-c-menu__show--more:hover {
+.pf-c-menu.ins-c-menu__scrollable {
+  max-height: 416px;
+  overflow-y: auto;
+}
+.pf-c-menu .ins-c-menu__show--more {
   background: none;
 }
 .pf-c-menu .ins-c-menu__show--more .pf-c-menu__item-text {

package/ConditionalFilter/conditional-filter.scss

@@ -70,8 +70,12 @@
 }
 
 .pf-c-menu {
+    &.ins-c-menu__scrollable {
+        max-height: 416px;
+        overflow-y: auto;
+    }
     .ins-c-menu__show--more {
-        &:hover { background: none; }
+        background: none;
         .pf-c-menu__item-text{ color: var(--pf-global--active-color--100); }
     }
 }

package/DownloadButton/DownloadButton.js

@@ -105,14 +105,15 @@ var DownloadButton = /*#__PURE__*/function (_Component) {
           toggleIndicator: null,
           onToggle: this.onToggle,
           isDisabled: isDisabled,
-          ouiaId: "toggle"
+          ouiaId: "Export"
         }, /*#__PURE__*/_react["default"].createElement(_exportIcon["default"], {
           size: "sm"
         })),
         isOpen: isOpen,
+        ouiaId: "Export",
         dropdownItems: [/*#__PURE__*/_react["default"].createElement(_DropdownItem.DropdownItem, {
           key: "download-csv",
-          ouiaId: "download-csv",
+          ouiaId: "DownloadCSV",
           component: "button",
           onClick: function onClick(event) {
             return onSelect(event, 'csv');
@@ -120,7 +121,7 @@ var DownloadButton = /*#__PURE__*/function (_Component) {
           isDisabled: isDisabled
         }, "Export to CSV"), /*#__PURE__*/_react["default"].createElement(_DropdownItem.DropdownItem, {
           key: "download-json",
-          ouiaId: "download-json",
+          ouiaId: "DownloadJSON",
           component: "button",
           onClick: function onClick(event) {
             return onSelect(event, 'json');

package/FilterChips/FilterChips.js

@@ -87,6 +87,7 @@ var FilterChips = function FilterChips(_ref) {
     }, chip.count)));
   }), (showDeleteButton === true || showDeleteButton === undefined && filters.length > 0) && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     variant: "link",
+    ouiaId: "ClearFilters",
     onClick: function onClick(event) {
       return onDelete(event, filters, true);
     }

package/PrimaryToolbar/Actions.js

@@ -130,7 +130,9 @@ var Actions = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, firstAction && /*#__PURE__*/_react["default"].createElement(_ToolbarItem.ToolbarItem, {
         className: "ins-c-primary-toolbar__first-action pf-m-spacer-sm"
-      }, firstAction.label ? /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({}, firstAction.props, {
+      }, firstAction.label ? /*#__PURE__*/_react["default"].createElement(_Button.Button, (0, _extends2["default"])({
+        ouiaId: "".concat(firstAction.label)
+      }, firstAction.props, {
         onClick: firstAction.onClick || firstAction.props && firstAction.props.onClick || undefined
       }), firstAction.label) : firstAction), exportConfig && (exportConfig.extraItems || exportConfig.onSelect) && /*#__PURE__*/_react["default"].createElement(_ToolbarItem.ToolbarItem, {
         className: "pf-m-spacer-sm"
@@ -144,6 +146,7 @@ var Actions = /*#__PURE__*/function (_Component) {
 
           _this2.toggleOpen(false);
         },
+        ouiaId: "Actions",
         toggle: /*#__PURE__*/_react["default"].createElement(_KebabToggle.KebabToggle, (0, _extends2["default"])({}, kebabToggleProps, {
           onToggle: function onToggle(isOpen) {
             return _this2.toggleOpen(isOpen);

package/PrimaryToolbar/PrimaryToolbar.js

@@ -120,7 +120,8 @@ var PrimaryToolbar = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react["default"].createElement(_Toolbar.Toolbar, (0, _extends2["default"])({}, props, {
         className: "".concat(className || '', " ins-c-primary-toolbar"),
         toggleIsExpanded: toggleIsExpanded,
-        id: id || 'ins-primary-data-toolbar'
+        id: id || 'ins-primary-data-toolbar',
+        ouiaId: "PrimaryToolbar"
       }), /*#__PURE__*/_react["default"].createElement(_ToolbarContent.ToolbarContent, null, (expandAll || bulkSelect || filterConfig || dedicatedAction) && /*#__PURE__*/_react["default"].createElement(_ToolbarGroup.ToolbarGroup, {
         className: "ins-c-primary-toolbar__group-filter pf-m-spacer-md pf-m-space-items-lg",
         variant: "filter-group"
@@ -129,8 +130,11 @@ var PrimaryToolbar = /*#__PURE__*/function (_Component) {
         "aria-label": "".concat(expandAll.isAllExpanded ? 'Collapse' : 'Expand', " all"),
         onClick: function onClick(e) {
           return expandAll.onClick(e, !expandAll.isAllExpanded);
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_ToolbarExpandIconWrapper.ToolbarExpandIconWrapper, null, expandAll.isAllExpanded ? /*#__PURE__*/_react["default"].createElement(_angleDownIcon["default"], null) : /*#__PURE__*/_react["default"].createElement(_angleRightIcon["default"], null)))), bulkSelect && /*#__PURE__*/_react["default"].createElement(_ToolbarItem.ToolbarItem, null, /*#__PURE__*/_react["default"].isValidElement(bulkSelect) ? bulkSelect : /*#__PURE__*/_react["default"].createElement(_BulkSelect.BulkSelect, bulkSelect)), filterConfig && /*#__PURE__*/_react["default"].createElement(_ToolbarItem.ToolbarItem, {
+        },
+        ouiaId: "ExpandCollapseAll"
+      }, /*#__PURE__*/_react["default"].createElement(_ToolbarExpandIconWrapper.ToolbarExpandIconWrapper, null, expandAll.isAllExpanded ? /*#__PURE__*/_react["default"].createElement(_angleDownIcon["default"], null) : /*#__PURE__*/_react["default"].createElement(_angleRightIcon["default"], null)))), bulkSelect && /*#__PURE__*/_react["default"].createElement(_ToolbarItem.ToolbarItem, null, /*#__PURE__*/_react["default"].isValidElement(bulkSelect) ? bulkSelect : /*#__PURE__*/_react["default"].createElement(_BulkSelect.BulkSelect, (0, _extends2["default"])({
+        ouiaId: "BulkSelect"
+      }, bulkSelect))), filterConfig && /*#__PURE__*/_react["default"].createElement(_ToolbarItem.ToolbarItem, {
         className: "ins-c-primary-toolbar__filter"
       }, /*#__PURE__*/_react["default"].isValidElement(filterConfig) ? filterConfig : /*#__PURE__*/_react["default"].createElement(_ConditionalFilter.ConditionalFilter, (0, _extends2["default"])({
         useMobileLayout: useMobileLayout
@@ -142,7 +146,8 @@ var PrimaryToolbar = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].isValidElement(sortByConfig) ? sortByConfig : /*#__PURE__*/_react["default"].createElement(_SortBy["default"], sortByConfig)), children, pagination && /*#__PURE__*/_react["default"].createElement(_ToolbarItem.ToolbarItem, {
         className: "ins-c-primary-toolbar__pagination"
       }, /*#__PURE__*/_react["default"].isValidElement(pagination) ? pagination : /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination, (0, _extends2["default"])({
-        isCompact: true
+        isCompact: true,
+        ouiaId: "CompactPagination"
       }, pagination)))), activeFiltersConfig && /*#__PURE__*/_react["default"].isValidElement(activeFiltersConfig) ? /*#__PURE__*/_react["default"].createElement(_ToolbarContent.ToolbarContent, null, /*#__PURE__*/_react["default"].createElement(_ToolbarItem.ToolbarItem, null, activeFiltersConfig)) : activeFiltersConfig !== undefined && (activeFiltersConfig.filters.length > 0 || activeFiltersConfig.showDeleteButton === true) && /*#__PURE__*/_react["default"].createElement(_ToolbarContent.ToolbarContent, null, /*#__PURE__*/_react["default"].createElement(_ToolbarItem.ToolbarItem, null, /*#__PURE__*/_react["default"].createElement(_FilterChips.FilterChips, activeFiltersConfig))));
     }
   }]);

package/esm/BulkSelect/BulkSelect.js

@@ -97,7 +97,7 @@ visible unless you update it.');
         ouiaSafe: ouiaSafe,
         toggle: /*#__PURE__*/React.createElement(DropdownToggle, _extends({}, toggleProps, {
           isDisabled: isDisabled,
-          ouiaId: "".concat(ouiaFinalId, "-toggle"),
+          ouiaId: ouiaFinalId,
           splitButtonItems: [/*#__PURE__*/React.createElement(Fragment, {
             key: "split-checkbox"
           }, hasError ? /*#__PURE__*/React.createElement(DropdownToggleCheckbox, {
@@ -105,13 +105,13 @@ visible unless you update it.');
             "aria-label": "Select all",
             onChange: onSelect,
             checked: checked,
-            ouiaId: "".concat(ouiaFinalId, "-toggle-checkbox")
+            ouiaId: ouiaFinalId
           }) : /*#__PURE__*/React.createElement(DropdownToggleCheckbox, {
             id: id ? "".concat(id, "-toggle-checkbox") : 'toggle-checkbox',
             "aria-label": "Select all",
             onChange: onSelect,
             isChecked: checked,
-            ouiaId: "".concat(ouiaFinalId, "-toggle-checkbox")
+            ouiaId: ouiaFinalId
           }, count ? "".concat(count, " selected") : ''))],
           onToggle: this.onToggle
         })),

package/esm/ConditionalFilter/CheckboxFilter.js

@@ -119,7 +119,8 @@ var CheckboxFilter = /*#__PURE__*/function (_Component) {
         onSelect: this.onSelect,
         selections: this.calculateSelected(),
         isOpen: isExpanded,
-        placeholderText: placeholder
+        placeholderText: placeholder,
+        ouiaId: placeholder
       }, items.map(function (_ref2, key) {
         var value = _ref2.value,
             _onClick = _ref2.onClick,

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"]);
+          containerRef = _this$props.containerRef,
+          props = _objectWithoutProperties(_this$props, ["items", "value", "onChange", "placeholder", "hideLabel", "isDisabled", "containerRef"]);
 
       var _this$state = this.state,
           isOpen = _this$state.isOpen,
@@ -166,10 +167,12 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
           return _this3.dropdownToggle(false);
         },
         isOpen: isOpen,
+        ouiaId: "ConditionalFilter",
         toggle: /*#__PURE__*/React.createElement(DropdownToggle, {
           onToggle: this.dropdownToggle,
           isDisabled: isDisabled,
-          className: hideLabel ? 'ins-c-conditional-filter__no-label' : ''
+          className: hideLabel ? 'ins-c-conditional-filter__no-label' : '',
+          ouiaId: "ConditionalFilter"
         }, /*#__PURE__*/React.createElement(FilterIcon, {
           size: "sm"
         }), !hideLabel && /*#__PURE__*/React.createElement("span", {
@@ -179,6 +182,7 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/React.createElement(DropdownItem, {
             key: item.id ? "".concat(item.id, "-dropdown") : key,
             component: "button",
+            ouiaId: item.label,
             onClick: function onClick(e) {
               return onChangeCallback(e, item.value || key, item);
             },
@@ -190,7 +194,9 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(ActiveComponent, _extends({}, activeItem.type !== conditionalFilterType.custom && {
         placeholder: placeholder || activeItem.placeholder || "Filter by ".concat(activeItem.label),
         id: activeItem.filterValues && activeItem.filterValues.id || currentValue
-      }, activeItem.filterValues))))));
+      }, activeItem.filterValues, {
+        containerRef: containerRef
+      }))))));
     }
   }]);
 

package/esm/ConditionalFilter/GroupFilter.js

@@ -31,7 +31,8 @@ var Group = function Group(_ref) {
       groups = _ref$groups === void 0 ? [] : _ref$groups,
       onChange = _ref.onChange,
       selected = _ref.selected,
-      isFilterable = _ref.isFilterable;
+      isFilterable = _ref.isFilterable,
+      containerRef = _ref.containerRef;
 
   var _useState = useState({}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -90,10 +91,7 @@ var Group = function Group(_ref) {
     ev.stopPropagation(); // Stop handleClickOutside from handling
 
     ev.persist();
-
-    if (!(isOpen && toggleRef.current.contains(ev.target))) {
-      setIsOpen(!isOpen);
-    }
+    setIsOpen(!isOpen);
   };
 
   var groupMenuItems = getGroupMenuItems(groups, onChange, calculateSelection(selected));
@@ -105,7 +103,11 @@ var Group = function Group(_ref) {
       return /*#__PURE__*/React.createElement(MenuItem, {
         itemId: key,
         key: "".concat(item.value, "-").concat(key, "-item"),
-        className: item === null || item === void 0 ? void 0 : item.className
+        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,
@@ -114,12 +116,18 @@ var Group = function Group(_ref) {
 
           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) {
-          item.onChange && item.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),
@@ -134,6 +142,7 @@ var Group = function Group(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(Popper, {
+    appendTo: containerRef,
     trigger: /*#__PURE__*/React.createElement(MenuToggle, {
       ref: toggleRef,
       onClick: onToggleClick,
@@ -152,7 +161,7 @@ var Group = function Group(_ref) {
     }) : placeholder),
     popper: /*#__PURE__*/React.createElement(Menu, {
       ref: menuRef,
-      className: classNames(className, {
+      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) {
@@ -165,8 +174,7 @@ var Group = function Group(_ref) {
       className: "ins-c-menu__show--more"
     }, showMoreOptions, {
       onClick: function onClick(e) {
-        setIsOpen(false);
-        onShowMore(e);
+        return onShowMore(e);
       }
     }), showMoreTitle) : /*#__PURE__*/React.createElement("span", {
       hidden: true,
@@ -202,6 +210,7 @@ Group.propTypes = {
     }))
   })),
   onChange: PropTypes.func.isRequired,
-  selectedTags: PropTypes.shape({})
+  selectedTags: PropTypes.shape({}),
+  containerRef: PropTypes.element
 };
 export default Group;

package/esm/ConditionalFilter/RadioFilter.js

@@ -89,7 +89,8 @@ var Radio = /*#__PURE__*/function (_Component) {
         onToggle: this.onToggle,
         onSelect: this.onSelect,
         isOpen: isExpanded,
-        placeholderText: placeholder
+        placeholderText: placeholder,
+        ouiaId: placeholder
       }, items.map(function (_ref, key) {
         var value = _ref.value,
             isChecked = _ref.isChecked,

package/esm/ConditionalFilter/TextFilter.js

@@ -75,7 +75,8 @@ var Text = /*#__PURE__*/function (_Component) {
         onKeyDown: function onKeyDown(e) {
           return e.key === 'Enter' && onSubmit(e, value || stateValue);
         },
-        "data-ouia-component-type": "PF4/TextInput"
+        "data-ouia-component-type": "PF4/TextInput",
+        ouiaId: "ConditionalFilter"
       })), /*#__PURE__*/React.createElement(Icon, {
         size: "sm",
         className: "ins-c-search-icon"

package/esm/DownloadButton/DownloadButton.js

@@ -82,14 +82,15 @@ var DownloadButton = /*#__PURE__*/function (_Component) {
           toggleIndicator: null,
           onToggle: this.onToggle,
           isDisabled: isDisabled,
-          ouiaId: "toggle"
+          ouiaId: "Export"
         }, /*#__PURE__*/React.createElement(ExportIcon, {
           size: "sm"
         })),
         isOpen: isOpen,
+        ouiaId: "Export",
         dropdownItems: [/*#__PURE__*/React.createElement(DropdownItem, {
           key: "download-csv",
-          ouiaId: "download-csv",
+          ouiaId: "DownloadCSV",
           component: "button",
           onClick: function onClick(event) {
             return onSelect(event, 'csv');
@@ -97,7 +98,7 @@ var DownloadButton = /*#__PURE__*/function (_Component) {
           isDisabled: isDisabled
         }, "Export to CSV"), /*#__PURE__*/React.createElement(DropdownItem, {
           key: "download-json",
-          ouiaId: "download-json",
+          ouiaId: "DownloadJSON",
           component: "button",
           onClick: function onClick(event) {
             return onSelect(event, 'json');

package/esm/FilterChips/FilterChips.js

@@ -70,6 +70,7 @@ var FilterChips = function FilterChips(_ref) {
     }, chip.count)));
   }), (showDeleteButton === true || showDeleteButton === undefined && filters.length > 0) && /*#__PURE__*/React.createElement(Button, {
     variant: "link",
+    ouiaId: "ClearFilters",
     onClick: function onClick(event) {
       return onDelete(event, filters, true);
     }

package/esm/PrimaryToolbar/Actions.js

@@ -95,7 +95,9 @@ var Actions = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/React.createElement(Fragment, null, firstAction && /*#__PURE__*/React.createElement(ToolbarItem, {
         className: "ins-c-primary-toolbar__first-action pf-m-spacer-sm"
-      }, firstAction.label ? /*#__PURE__*/React.createElement(Button, _extends({}, firstAction.props, {
+      }, firstAction.label ? /*#__PURE__*/React.createElement(Button, _extends({
+        ouiaId: "".concat(firstAction.label)
+      }, firstAction.props, {
         onClick: firstAction.onClick || firstAction.props && firstAction.props.onClick || undefined
       }), firstAction.label) : firstAction), exportConfig && (exportConfig.extraItems || exportConfig.onSelect) && /*#__PURE__*/React.createElement(ToolbarItem, {
         className: "pf-m-spacer-sm"
@@ -109,6 +111,7 @@ var Actions = /*#__PURE__*/function (_Component) {
 
           _this2.toggleOpen(false);
         },
+        ouiaId: "Actions",
         toggle: /*#__PURE__*/React.createElement(KebabToggle, _extends({}, kebabToggleProps, {
           onToggle: function onToggle(isOpen) {
             return _this2.toggleOpen(isOpen);

package/esm/PrimaryToolbar/PrimaryToolbar.js

@@ -83,7 +83,8 @@ var PrimaryToolbar = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(Toolbar, _extends({}, props, {
         className: "".concat(className || '', " ins-c-primary-toolbar"),
         toggleIsExpanded: toggleIsExpanded,
-        id: id || 'ins-primary-data-toolbar'
+        id: id || 'ins-primary-data-toolbar',
+        ouiaId: "PrimaryToolbar"
       }), /*#__PURE__*/React.createElement(ToolbarContent, null, (expandAll || bulkSelect || filterConfig || dedicatedAction) && /*#__PURE__*/React.createElement(ToolbarGroup, {
         className: "ins-c-primary-toolbar__group-filter pf-m-spacer-md pf-m-space-items-lg",
         variant: "filter-group"
@@ -92,8 +93,11 @@ var PrimaryToolbar = /*#__PURE__*/function (_Component) {
         "aria-label": "".concat(expandAll.isAllExpanded ? 'Collapse' : 'Expand', " all"),
         onClick: function onClick(e) {
           return expandAll.onClick(e, !expandAll.isAllExpanded);
-        }
-      }, /*#__PURE__*/React.createElement(ToolbarExpandIconWrapper, null, expandAll.isAllExpanded ? /*#__PURE__*/React.createElement(AngleDownIcon, null) : /*#__PURE__*/React.createElement(AngleRightIcon, null)))), bulkSelect && /*#__PURE__*/React.createElement(ToolbarItem, null, /*#__PURE__*/React.isValidElement(bulkSelect) ? bulkSelect : /*#__PURE__*/React.createElement(BulkSelect, bulkSelect)), filterConfig && /*#__PURE__*/React.createElement(ToolbarItem, {
+        },
+        ouiaId: "ExpandCollapseAll"
+      }, /*#__PURE__*/React.createElement(ToolbarExpandIconWrapper, null, expandAll.isAllExpanded ? /*#__PURE__*/React.createElement(AngleDownIcon, null) : /*#__PURE__*/React.createElement(AngleRightIcon, null)))), bulkSelect && /*#__PURE__*/React.createElement(ToolbarItem, null, /*#__PURE__*/React.isValidElement(bulkSelect) ? bulkSelect : /*#__PURE__*/React.createElement(BulkSelect, _extends({
+        ouiaId: "BulkSelect"
+      }, bulkSelect))), filterConfig && /*#__PURE__*/React.createElement(ToolbarItem, {
         className: "ins-c-primary-toolbar__filter"
       }, /*#__PURE__*/React.isValidElement(filterConfig) ? filterConfig : /*#__PURE__*/React.createElement(ConditionalFilter, _extends({
         useMobileLayout: useMobileLayout
@@ -105,7 +109,8 @@ var PrimaryToolbar = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.isValidElement(sortByConfig) ? sortByConfig : /*#__PURE__*/React.createElement(SortBy, sortByConfig)), children, pagination && /*#__PURE__*/React.createElement(ToolbarItem, {
         className: "ins-c-primary-toolbar__pagination"
       }, /*#__PURE__*/React.isValidElement(pagination) ? pagination : /*#__PURE__*/React.createElement(Pagination, _extends({
-        isCompact: true
+        isCompact: true,
+        ouiaId: "CompactPagination"
       }, pagination)))), activeFiltersConfig && /*#__PURE__*/React.isValidElement(activeFiltersConfig) ? /*#__PURE__*/React.createElement(ToolbarContent, null, /*#__PURE__*/React.createElement(ToolbarItem, null, activeFiltersConfig)) : activeFiltersConfig !== undefined && (activeFiltersConfig.filters.length > 0 || activeFiltersConfig.showDeleteButton === true) && /*#__PURE__*/React.createElement(ToolbarContent, null, /*#__PURE__*/React.createElement(ToolbarItem, null, /*#__PURE__*/React.createElement(FilterChips, activeFiltersConfig))));
     }
   }]);

package/index.css

@@ -132,7 +132,11 @@ i.ins-battery svg {
   border: none;
 }
 
-.pf-c-menu .ins-c-menu__show--more:hover {
+.pf-c-menu.ins-c-menu__scrollable {
+  max-height: 416px;
+  overflow-y: auto;
+}
+.pf-c-menu .ins-c-menu__show--more {
   background: none;
 }
 .pf-c-menu .ins-c-menu__show--more .pf-c-menu__item-text {

package/package.json

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