tenjin-ui-kit 0.3.26 → 0.3.28

package/components/select/GroupedSelect.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _fa = require("react-icons/fa");
+var _reactDom = require("react-dom");
 var _text = _interopRequireDefault(require("../text"));
 var _excluded = ["options", "onChange", "value", "defaultValue", "fullWidth"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,13 +24,14 @@ 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,
     defaultValue = _ref.defaultValue,
     fullWidth = _ref.fullWidth,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var triggerRef = React.useRef(null);
   var _React$useState = React.useState(""),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     searchTerm = _React$useState2[0],
@@ -45,18 +47,20 @@ var GroupedSelect = function GroupedSelect(_ref) {
   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;
   };
   var handleSearchChange = function handleSearchChange(event) {
-    setSearchTerm(event.target.value.toLowerCase());
+    setSearchTerm(event.target.value);
   };
   var filteredOptions = options.filter(function (option) {
-    return option.label.toLowerCase().includes(searchTerm) || option.pageTitle.toLowerCase().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() {
@@ -84,7 +88,8 @@ var GroupedSelect = function GroupedSelect(_ref) {
     style: {
       position: "relative",
       width: "100%"
-    }
+    },
+    ref: triggerRef
   }, /*#__PURE__*/React.createElement("div", {
     onClick: toggleDropdown,
     style: {
@@ -100,20 +105,21 @@ var GroupedSelect = function GroupedSelect(_ref) {
     style: {
       flexGrow: 1
     }
-  }, value ? (_options$find = options.find(function (opt) {
-    return 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__*/React.createElement("div", {
+  }, 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",
-      top: "100%",
-      left: 0,
-      right: 0,
+      top: "".concat(triggerRef.current.getBoundingClientRect().bottom + 8, "px"),
+      left: "".concat(triggerRef.current.getBoundingClientRect().left, "px"),
+      width: "".concat(triggerRef.current.offsetWidth, "px"),
       backgroundColor: "#fff",
       border: "1px solid #ccc",
       borderRadius: "4px",
+      boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
       maxHeight: "200px",
       overflowY: "auto",
-      zIndex: 1000
+      zIndex: 2000
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -129,17 +135,13 @@ var GroupedSelect = function GroupedSelect(_ref) {
       background: 'white url("https://static.thenounproject.com/png/101791-200.png") no-repeat left',
       backgroundPosition: "0.875rem center",
       backgroundSize: "1.125rem",
-      position: "sticky",
-      top: 0,
-      zIndex: 9999,
-      backgroundColor: "white",
       height: "2.188rem",
       margin: 0,
       width: "100%",
       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];
@@ -151,7 +153,7 @@ var GroupedSelect = function GroupedSelect(_ref) {
         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() {
@@ -164,7 +166,7 @@ var GroupedSelect = function GroupedSelect(_ref) {
         }
       }, option.label);
     }));
-  })))));
+  }))), document.body));
 };
 var _default = GroupedSelect;
 exports.default = _default;

package/package.json

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