tenjin-ui-kit 0.3.26 → 0.3.27

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 }; }
@@ -30,6 +31,7 @@ var GroupedSelect = function GroupedSelect(_ref) {
     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],
@@ -53,10 +55,10 @@ var GroupedSelect = function GroupedSelect(_ref) {
     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);
+    return option.label.includes(searchTerm) || option.pageTitle.includes(searchTerm);
   });
   var groupedOptions = groupOptionsByPageTitle(filteredOptions);
   var toggleDropdown = function toggleDropdown() {
@@ -84,7 +86,8 @@ var GroupedSelect = function GroupedSelect(_ref) {
     style: {
       position: "relative",
       width: "100%"
-    }
+    },
+    ref: triggerRef
   }, /*#__PURE__*/React.createElement("div", {
     onClick: toggleDropdown,
     style: {
@@ -102,18 +105,19 @@ var GroupedSelect = function GroupedSelect(_ref) {
     }
   }, 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", {
+  })) === 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,10 +133,6 @@ 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%",
@@ -164,7 +164,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.27",
   "repository": {
     "url": "https://gitlab.com/yethi/react/tenjin-ui-kit.git"
   },