tenjin-ui-kit 0.3.19 → 0.3.20

package/components/select/GroupSimpleSelect.js

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _fa = require("react-icons/fa");
-var _text = _interopRequireDefault(require("../text"));
+var _tenjinUiKit = require("tenjin-ui-kit");
 var _excluded = ["options", "onChange", "value", "defaultValue", "fullWidth"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -32,10 +34,10 @@ var GroupedSelect = function GroupedSelect(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     searchTerm = _React$useState2[0],
     setSearchTerm = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
+  var _React$useState3 = React.useState(null),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    isOpen = _React$useState4[0],
-    setIsOpen = _React$useState4[1];
+    anchorEl = _React$useState4[0],
+    setAnchorEl = _React$useState4[1];
   var _React$useState5 = React.useState(propValue || defaultValue),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     value = _React$useState6[0],
@@ -57,18 +59,22 @@ var GroupedSelect = function GroupedSelect(_ref) {
     return option.label.toLowerCase().includes(searchTerm) || option.pageTitle.toLowerCase().includes(searchTerm);
   });
   var groupedOptions = groupOptionsByPageTitle(filteredOptions);
-  var toggleDropdown = function toggleDropdown() {
-    return setIsOpen(!isOpen);
+  var toggleDropdown = function toggleDropdown(event) {
+    setAnchorEl(event.currentTarget);
   };
   var handleOptionClick = function handleOptionClick(selectedValue) {
     setValue(selectedValue);
-    setIsOpen(false);
+    setAnchorEl(null);
     onChange({
       target: {
         value: selectedValue
       }
     });
   };
+  var handleCloseMenu = function handleCloseMenu() {
+    setAnchorEl(null); // Close Menu
+  };
+
   return /*#__PURE__*/React.createElement(_FormControl.default, {
     sx: {
       m: 1,
@@ -87,7 +93,9 @@ var GroupedSelect = function GroupedSelect(_ref) {
       borderRadius: "4px",
       cursor: "pointer",
       flexDirection: "row",
-      display: "flex"
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -95,17 +103,28 @@ var GroupedSelect = function GroupedSelect(_ref) {
     }
   }, value ? options.find(function (opt) {
     return opt.value === value;
-  }).label : "Select Option"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_fa.FaCaretDown, null))), isOpen && /*#__PURE__*/React.createElement("div", {
+  }).label : "Select Option"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_fa.FaCaretDown, null))), /*#__PURE__*/React.createElement(_Menu.default, {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    onClose: handleCloseMenu,
+    PaperProps: {
+      style: {
+        maxHeight: 200,
+        minHeight: 150,
+        width: anchorEl ? anchorEl.offsetWidth : "26%"
+      }
+    },
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "absolute",
-      top: "100%",
-      left: 0,
-      right: 0,
-      border: "1px solid #ccc",
-      borderTop: "none",
-      borderRadius: "4px",
-      backgroundColor: "#fff",
-      zIndex: 1
+      padding: "10px"
     }
   }, /*#__PURE__*/React.createElement("input", {
     type: "text",
@@ -133,14 +152,14 @@ var GroupedSelect = function GroupedSelect(_ref) {
       options = _ref3[1];
     return /*#__PURE__*/React.createElement("div", {
       key: pageTitle
-    }, /*#__PURE__*/React.createElement(_text.default, {
+    }, /*#__PURE__*/React.createElement(_tenjinUiKit.Text, {
       style: {
         padding: "5px 10px",
         backgroundColor: "#f5f5f5"
       },
       semibold: true
     }, pageTitle), options.map(function (option) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(_MenuItem.default, {
         key: option.value,
         onClick: function onClick() {
           return handleOptionClick(option.value);
@@ -151,7 +170,7 @@ var GroupedSelect = function GroupedSelect(_ref) {
         }
       }, option.label);
     }));
-  }))));
+  })))));
 };
 var _default = GroupedSelect;
 exports.default = _default;

package/package.json

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