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

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

@@ -87,7 +87,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,8 +126,8 @@ 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 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 renderItems = function renderItems(items, type) {
     var groupKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';

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/groupFilterConstants.js

@@ -106,7 +106,7 @@ exports.getGroupMenuItems = getGroupMenuItems;
 
 var calculateSelected = function calculateSelected(selectedTags) {
   return function (type, groupKey, itemKey) {
-    var activeGroup = selectedTags[groupKey];
+    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]))) {

package/Inventory/InventoryLoadError.js

@@ -23,7 +23,7 @@ var InventoryLoadError = function InventoryLoadError(_ref) {
   var component = _ref.component,
       props = (0, _objectWithoutProperties2["default"])(_ref, ["component"]);
   (0, _react.useEffect)(function () {
-    console.error("Unable to load iventory component. Failed to load ".concat(component, "."), props);
+    console.error("Unable to load inventory component. Failed to load ".concat(component, "."), props);
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h1", null, "Unable to load inventory component"), /*#__PURE__*/_react["default"].createElement("h2", null, "Failed to load ", component), /*#__PURE__*/_react["default"].createElement("code", null, "More info can be found in browser console output."));
 };

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";
@@ -54,7 +54,6 @@ var Group = function Group(_ref) {
   useEffect(function () {
     setStateSelected(selected);
   }, [selected]);
-  var calculateSelection = useCallback(calculateSelected, [stateSelected]);
   useEffect(function () {
     setSearchString(filterBy);
   }, [filterBy]);
@@ -94,8 +93,8 @@ 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 groupMenuItems = getGroupMenuItems(groups, onChange, calculateSelected(selected));
+  var menuItems = getMenuItems(items, onChange, calculateSelected(selected)); // eslint-disable-next-line react/prop-types
 
   var renderItems = function renderItems(items, type) {
     var groupKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';

package/esm/ConditionalFilter/groupFilterConstants.js

@@ -87,7 +87,7 @@ export var getGroupMenuItems = function getGroupMenuItems(groups, onChange, calc
 };
 export var calculateSelected = function calculateSelected(selectedTags) {
   return function (type, groupKey, itemKey) {
-    var activeGroup = selectedTags[groupKey];
+    var activeGroup = selectedTags === null || selectedTags === void 0 ? void 0 : selectedTags[groupKey];
 
     if (activeGroup) {
       if (type !== groupType.radio && (activeGroup[itemKey] instanceof Object ? activeGroup[itemKey].isSelected : Boolean(activeGroup[itemKey]))) {

package/esm/Inventory/InventoryLoadError.js

@@ -7,7 +7,7 @@ var InventoryLoadError = function InventoryLoadError(_ref) {
       props = _objectWithoutProperties(_ref, ["component"]);
 
   useEffect(function () {
-    console.error("Unable to load iventory component. Failed to load ".concat(component, "."), props);
+    console.error("Unable to load inventory component. Failed to load ".concat(component, "."), props);
   }, []);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Unable to load inventory component"), /*#__PURE__*/React.createElement("h2", null, "Failed to load ", component), /*#__PURE__*/React.createElement("code", null, "More info can be found in browser console output."));
 };

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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components",
-    "version": "3.4.9",
+    "version": "3.4.13",
     "description": "Common components for RedHat Cloud Services project.",
     "main": "index.js",
     "module": "esm/index.js",
@@ -43,8 +43,8 @@
     "dependencies": {
         "@redhat-cloud-services/frontend-components-utilities": ">=3.0.0",
         "sanitize-html": "^2.3.2",
-        "@scalprum/core": "^0.1.0",
-        "@scalprum/react-core": "^0.1.6"
+        "@scalprum/core": "^0.1.1",
+        "@scalprum/react-core": "^0.1.7"
     },
     "devDependencies": {
         "@patternfly/patternfly": ">=4.102.2",