@redhat-cloud-services/frontend-components 3.4.3 → 3.4.7

package/ConditionalFilter/ConditionalFilter.js

@@ -108,6 +108,7 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
       return width <= _this.breakpointConstant;
     });
     _this.breakpointConstant = parseInt(_global_breakpoint_md["default"].value.replace('px', ''));
+    _this.containerRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
       isOpen: false,
       stateValue: undefined,
@@ -221,10 +222,14 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
         })
       })), ActiveComponent && /*#__PURE__*/_react["default"].createElement(_SplitItem.SplitItem, {
         isFilled: true
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        ref: this.containerRef
       }, /*#__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, activeItem.type === _conditionalFilterConstants.conditionalFilterType.group && {
+        containerRef: this.containerRef.current
+      })))))));
     }
   }]);
   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));
@@ -177,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,
@@ -195,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) {
@@ -208,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,
@@ -245,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/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/esm/ConditionalFilter/ConditionalFilter.js

@@ -76,6 +76,7 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
     });
 
     _this.breakpointConstant = parseInt(globalBreakpointMd.value.replace('px', ''));
+    _this.containerRef = /*#__PURE__*/React.createRef();
     _this.state = {
       isOpen: false,
       stateValue: undefined,
@@ -190,10 +191,14 @@ var ConditionalFilter = /*#__PURE__*/function (_Component) {
         })
       })), ActiveComponent && /*#__PURE__*/React.createElement(SplitItem, {
         isFilled: true
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: this.containerRef
       }, /*#__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, activeItem.type === conditionalFilterType.group && {
+        containerRef: this.containerRef.current
+      })))))));
     }
   }]);
 

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));
@@ -144,6 +142,7 @@ var Group = function Group(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(Popper, {
+    appendTo: containerRef,
     trigger: /*#__PURE__*/React.createElement(MenuToggle, {
       ref: toggleRef,
       onClick: onToggleClick,
@@ -162,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) {
@@ -175,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,
@@ -212,6 +210,7 @@ Group.propTypes = {
     }))
   })),
   onChange: PropTypes.func.isRequired,
-  selectedTags: PropTypes.shape({})
+  selectedTags: PropTypes.shape({}),
+  containerRef: PropTypes.element
 };
 export default Group;

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.3",
+    "version": "3.4.7",
     "description": "Common components for RedHat Cloud Services project.",
     "main": "index.js",
     "module": "esm/index.js",