tenjin-ui-kit 0.3.27 → 0.3.29

package/components/select/GroupedSelect.js

@@ -24,7 +24,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var GroupedSelect = function GroupedSelect(_ref) {
-  var _options$find;
+  var _options$find, _Object$entries;
   var options = _ref.options,
     onChange = _ref.onChange,
     propValue = _ref.value,
@@ -44,13 +44,18 @@ var GroupedSelect = function GroupedSelect(_ref) {
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     value = _React$useState6[0],
     setValue = _React$useState6[1];
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    hoveredOption = _React$useState8[0],
+    setHoveredOption = _React$useState8[1];
   var groupOptionsByPageTitle = function groupOptionsByPageTitle(options) {
     var grouped = {};
     options.forEach(function (option) {
-      if (!grouped[option.pageTitle]) {
-        grouped[option.pageTitle] = [];
+      var _grouped$option$pageT;
+      if (!grouped[option === null || option === void 0 ? void 0 : option.pageTitle]) {
+        grouped[option === null || option === void 0 ? void 0 : option.pageTitle] = [];
       }
-      grouped[option.pageTitle].push(option);
+      (_grouped$option$pageT = grouped[option === null || option === void 0 ? void 0 : option.pageTitle]) === null || _grouped$option$pageT === void 0 ? void 0 : _grouped$option$pageT.push(option);
     });
     return grouped;
   };
@@ -58,7 +63,8 @@ var GroupedSelect = function GroupedSelect(_ref) {
     setSearchTerm(event.target.value);
   };
   var filteredOptions = options.filter(function (option) {
-    return option.label.includes(searchTerm) || option.pageTitle.includes(searchTerm);
+    var _option$label, _option$pageTitle;
+    return (option === null || option === void 0 ? void 0 : (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.includes(searchTerm)) || (option === null || option === void 0 ? void 0 : (_option$pageTitle = option.pageTitle) === null || _option$pageTitle === void 0 ? void 0 : _option$pageTitle.includes(searchTerm));
   });
   var groupedOptions = groupOptionsByPageTitle(filteredOptions);
   var toggleDropdown = function toggleDropdown() {
@@ -103,8 +109,8 @@ var GroupedSelect = function GroupedSelect(_ref) {
     style: {
       flexGrow: 1
     }
-  }, value ? (_options$find = options.find(function (opt) {
-    return opt.value === value;
+  }, value ? options === null || options === void 0 ? void 0 : (_options$find = options.find(function (opt) {
+    return (opt === null || opt === void 0 ? void 0 : opt.value) === value;
   })) === null || _options$find === void 0 ? void 0 : _options$find.label : "Select Option"), /*#__PURE__*/React.createElement("div", null, isDropdownOpen ? /*#__PURE__*/React.createElement(_fa.FaCaretUp, null) : /*#__PURE__*/React.createElement(_fa.FaCaretDown, null)))), isDropdownOpen && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement("div", {
     style: {
       position: "absolute",
@@ -139,7 +145,7 @@ var GroupedSelect = function GroupedSelect(_ref) {
       border: "1px solid #949494",
       borderRadius: "4px"
     }
-  }), Object.entries(groupedOptions).map(function (_ref2) {
+  }), (_Object$entries = Object.entries(groupedOptions)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
       pageTitle = _ref3[0],
       options = _ref3[1];
@@ -147,20 +153,27 @@ var GroupedSelect = function GroupedSelect(_ref) {
       key: pageTitle
     }, /*#__PURE__*/React.createElement(_text.default, {
       style: {
-        padding: "5px 10px",
-        backgroundColor: "#f5f5f5"
+        padding: "5px 10px"
+        // backgroundColor: "#f5f5f5",
       },
+
       semibold: true
-    }, pageTitle), options.map(function (option) {
+    }, pageTitle !== null && pageTitle !== void 0 ? pageTitle : "N/A"), options.map(function (option) {
       return /*#__PURE__*/React.createElement("div", {
         key: option.value,
         onClick: function onClick() {
           return handleOptionClick(option.value);
         },
+        onMouseEnter: function onMouseEnter() {
+          return setHoveredOption(option.value);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return setHoveredOption(null);
+        },
         style: {
           padding: "8px 24px",
           cursor: "pointer",
-          borderBottom: "1px solid #f0f0f0"
+          backgroundColor: value === option.value ? "#f0f0f7" : hoveredOption === option.value ? "#f5f5f5" : "transparent"
         }
       }, option.label);
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tenjin-ui-kit",
-  "version": "0.3.27",
+  "version": "0.3.29",
   "repository": {
     "url": "https://gitlab.com/yethi/react/tenjin-ui-kit.git"
   },