tenjin-ui-kit 0.2.77 → 0.2.79

package/components/input/index.js

@@ -52,7 +52,7 @@ var Input = function Input(_ref) {
     sx: {
       marginTop: label ? theme.spacing(2.5) : 0,
       '& input': {
-        backgroundColor: isDisabled && '#E7E7E7',
+        backgroundColor: isDisabled && '#DDDDDD',
         color: isDisabled && '#000000'
       },
       '& label': {
@@ -77,7 +77,7 @@ var Input = function Input(_ref) {
     disabled: isDisabled,
     sx: {
       '& input': {
-        backgroundColor: isDisabled && '#E7E7E7',
+        backgroundColor: isDisabled && '#DDDDDD',
         color: isDisabled && '#000000'
       },
       marginTop: label ? theme.spacing(2.5) : 0,

package/components/layout/pageContent/index.js

@@ -18,7 +18,10 @@ var PageContent = function PageContent(_ref) {
       height: '100%',
       maxHeight: '100%',
       overflowY: 'auto',
-      width: location.pathname.includes('agent') ? "100vw !important" : 'calc(100vw - 210px)'
+      flex: 1
+      // width: location.pathname.includes('agent')
+      //   ? `100vw !important`
+      //   : 'calc(100vw - 210px)',
     }
   }, children);
 };

package/components/layout/sidebar/ProjectMenu.js

@@ -94,10 +94,10 @@ var ProjectMenu = function ProjectMenu(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", null, !collapsed && /*#__PURE__*/_react.default.createElement(_material.Typography, {
     className: classes.projectMenuHeader,
     fontWeight: 600,
-    marginBottom: "0.5remrem",
+    marginBottom: "0.5rem",
     marginTop: "1rem"
   }, "TENJIN 4.0 Release")), /*#__PURE__*/_react.default.createElement("div", null, groups.map(function (group, index) {
-    var _ref2, _group$items$filter$, _group$items$filter$2, _clsx, _group$groupName, _group$groupName2;
+    var _ref2, _group$items$filter$, _group$items$filter$2, _clsx, _ref3, _group$groupName, _group$groupName2;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: group.groupName
     }, /*#__PURE__*/_react.default.createElement(_material.List, {
@@ -115,9 +115,13 @@ var ProjectMenu = function ProjectMenu(_ref) {
           fontWeight: 600,
           lineHeight: collapsed && 0,
           marginTop: !collapsed && "1rem"
-        }, _defineProperty(_ref2, "padding", !collapsed && "0.8rem 0rem"), _defineProperty(_ref2, "justifyContent", collapsed && "center"), _ref2)
+        }, _defineProperty(_ref2, "padding", !collapsed && "0.8rem 0rem"), _defineProperty(_ref2, "justifyContent", collapsed && "center"), _defineProperty(_ref2, "alignItems", "center"), _ref2)
       }, collapsed ? /*#__PURE__*/_react.default.createElement("div", {
         className: "buttonIcon"
+      }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+        key: index,
+        title: collapsed ? group.groupName : null,
+        placement: "right"
       }, /*#__PURE__*/_react.default.createElement(_material.ListItemButton, {
         id: "account-button",
         selected: (group === null || group === void 0 ? void 0 : (_group$items$filter$ = group.items.filter(function (item) {
@@ -128,23 +132,23 @@ var ProjectMenu = function ProjectMenu(_ref) {
         },
         key: selectedCollapsedSidebar === null || selectedCollapsedSidebar === void 0 ? void 0 : selectedCollapsedSidebar.key,
         onClick: function onClick(e) {
-          handleClick(e, index, group);
+          selectedItem.open ? handleClose() : handleClick(e, index, group);
         }
       }, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
         disableTypography: true,
         className: (0, _clsx3.default)((_clsx = {}, _defineProperty(_clsx, classes.projectListIcon, true), _defineProperty(_clsx, classes.selectedProjectMenuItemIcon, (group === null || group === void 0 ? void 0 : (_group$items$filter$2 = group.items.filter(function (item) {
           return item.key === selectedCollapsedSidebar.key;
         })[0]) === null || _group$items$filter$2 === void 0 ? void 0 : _group$items$filter$2.key) === selectedSidebarKey), _clsx))
-      }, group.icon))) : /*#__PURE__*/_react.default.createElement("span", {
+      }, group.icon)))) : /*#__PURE__*/_react.default.createElement("span", {
         className: classes.subHeaderIcon
       }, group.icon), /*#__PURE__*/_react.default.createElement(_material.Typography, {
-        sx: _defineProperty({
+        sx: (_ref3 = {
           fontWeight: 600,
-          marginLeft: "15px",
+          marginLeft: "20px",
           display: "flex",
           alignItems: "center",
           height: "100%"
-        }, "display", collapsed && "none !important")
+        }, _defineProperty(_ref3, "display", collapsed && "none !important"), _defineProperty(_ref3, "fontSize", "1rem !important"), _ref3)
       }, (_group$groupName = group.groupName) === null || _group$groupName === void 0 ? void 0 : _group$groupName.toUpperCase()))
     }, !collapsed && group.items.map(function (i) {
       var _clsx2;
@@ -194,6 +198,7 @@ var ProjectMenu = function ProjectMenu(_ref) {
           fontWeight: 600,
           p: "0.3rem",
           cursor: "pointer",
+          fontSize: "14px !important",
           backgroundColor: i.key === selectedSidebarKey ? "#f5f6f7" : "none",
           "&:hover": {
             backgroundColor: "#f5f6f7"

package/components/layout/sidebar/style.js

@@ -69,7 +69,7 @@ var _default = (0, _styles.makeStyles)(function (theme) {
     projectMenuHeader: {
       color: "#44409A",
       fontFamily: "sans-serif",
-      fontSize: "20px !important",
+      fontSize: "18px !important",
       lineHeight: "24px",
       display: "flex",
       justifyContent: "center",
@@ -85,15 +85,16 @@ var _default = (0, _styles.makeStyles)(function (theme) {
     projectListText: {
       color: "".concat(theme.palette.primary.main, " !important"),
       marginLeft: "24px",
-      fontSize: "16px !important",
+      fontSize: "14px !important",
       fontWeight: 600
     },
     projectListIcon: {
-      color: "".concat(theme.palette.primary.main, " !important")
+      color: "".concat(theme.palette.primary.main, " !important"),
+      fontSize: "1rem"
     },
     selectedProjectMenuItemText: {
-      color: "#fff !important"
-      // fontSize: "16px !important",
+      color: "#fff !important",
+      fontSize: "14px !important"
       // fontWeight: 600,
     },
 
@@ -103,7 +104,9 @@ var _default = (0, _styles.makeStyles)(function (theme) {
     subHeaderIcon: {
       color: "#44409A",
       display: "flex",
-      alignItems: "center"
+      alignItems: "center",
+      width: "18px",
+      height: "18px"
     },
     sidebar: {
       display: "inline-block",

package/components/layout/topBar/ProjectTopbar.js

@@ -71,7 +71,7 @@ var ProjectTopbar = function ProjectTopbar(_ref) {
     sx: {
       boxShadow: "0px 3px 10px rgba(102, 124, 188, 0.25) !important",
       background: "#FFFFFF",
-      height: "56px !important",
+      height: "48px !important",
       justifyContent: "center"
     }
   }, /*#__PURE__*/_react.default.createElement(_material.Toolbar, null, /*#__PURE__*/_react.default.createElement(_system.Box, {
@@ -79,7 +79,8 @@ var ProjectTopbar = function ProjectTopbar(_ref) {
       display: "flex",
       justifyContent: "space-between",
       width: "100%",
-      alignItems: "center"
+      alignItems: "center",
+      alignContent: "center"
     }
   }, /*#__PURE__*/_react.default.createElement(_system.Box, {
     className: "Left",
@@ -200,7 +201,7 @@ var ProjectTopbar = function ProjectTopbar(_ref) {
     open: open,
     handleClose: handleClose,
     onClose: handleClose,
-    width: "xl"
+    width: "sm"
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, "Are you sure you want to log out?"), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     direction: "row",
@@ -209,16 +210,13 @@ var ProjectTopbar = function ProjectTopbar(_ref) {
     style: {
       padding: "3rem 0rem 0rem 4rem"
     }
-  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true,
-    xs: 6
+  }, /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    direction: "row",
+    spacing: 2
   }, /*#__PURE__*/_react.default.createElement(_button.default, {
     variant: "outlined",
     onClick: handleClose
-  }, "Cancel")), /*#__PURE__*/_react.default.createElement(_material.Grid, {
-    item: true,
-    xs: 6
-  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_button.default, {
     color: "error",
     onClick: logout
   }, "Log out")))));

package/components/layout/topBar/index.js

@@ -54,6 +54,7 @@ var TopBar = function TopBar(_ref) {
       margin: "0rem !important",
       padding: " 0rem !important",
       height: "48px !important",
+      maxHeight: "48px !important",
       borderBottom: "1px solid #D6D9E0"
     }
   }, /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
@@ -102,7 +103,7 @@ var TopBar = function TopBar(_ref) {
     open: open,
     handleClose: handleClose,
     onClose: handleClose,
-    width: "xl"
+    width: "sm"
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, null, "Are you sure you want to log out?"), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     direction: "row",

package/components/select/index.js

@@ -33,7 +33,7 @@ var ReactSelect = function ReactSelect(props) {
     isRequired = props.isRequired,
     isDisabled = props.isDisabled,
     rest = _objectWithoutProperties(props, _excluded);
-  console.log(defaultValue, 'hsgdsahgd', options[1]);
+  console.log(defaultValue, "hsgdsahgd", options[1]);
   var icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
     fontSize: "small"
   });
@@ -42,17 +42,18 @@ var ReactSelect = function ReactSelect(props) {
   });
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.FormControl, {
     fullWidth: true
-  }, /*#__PURE__*/_react.default.createElement(_material.FormLabel, {
+  }, label && /*#__PURE__*/_react.default.createElement(_material.FormLabel, {
     htmlFor: "my-input",
     sx: {
-      fontSize: '0.8rem',
-      fontWeight: 500
+      fontSize: "0.8rem",
+      fontWeight: 500,
+      paddingBottom: "0.2rem"
     }
   }, label, isRequired ? /*#__PURE__*/_react.default.createElement("span", {
     style: {
-      color: 'red'
+      color: "red"
     }
-  }, " *") : ''), checkBox && /*#__PURE__*/_react.default.createElement(_material.Autocomplete, _extends({}, rest, {
+  }, " *") : ""), checkBox && /*#__PURE__*/_react.default.createElement(_material.Autocomplete, _extends({}, rest, {
     disabled: isDisabled,
     multiple: isMulti,
     options: options
@@ -88,11 +89,17 @@ var ReactSelect = function ReactSelect(props) {
     // disableCloseOnSelect
     ,
     getOptionLabel: function getOptionLabel(option) {
-      return option.label;
+      return option.label ? option.label : "";
     },
     value: value,
     defaultValue: [defaultValue],
     onChange: onChange,
+    sx: {
+      "& .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root']": {
+        background: isDisabled && "#DDDDDD",
+        color: isDisabled && "#000000"
+      }
+    },
     renderInput: function renderInput(params) {
       return /*#__PURE__*/_react.default.createElement(_material.TextField, _extends({
         error: error
@@ -106,29 +113,29 @@ var ReactSelect = function ReactSelect(props) {
   })), blueTheme && /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
     sx: {
-      height: '200px',
-      backgroundColor: '#3D3981',
-      borderRadius: '7px',
-      padding: '16px',
-      width: '50%'
+      height: "200px",
+      backgroundColor: "#3D3981",
+      borderRadius: "7px",
+      padding: "16px",
+      width: "50%"
       //   background: "red",
     }
   }, /*#__PURE__*/_react.default.createElement(_material.Autocomplete, _extends({
     sx: {
-      width: '100%',
+      width: "100%",
       "& .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root']": {
-        background: '#6e6ba1',
-        color: '#F4F7FC'
+        background: "#6e6ba1",
+        color: "#F4F7FC"
       }
     },
     PaperComponent: function PaperComponent(_ref2) {
       var children = _ref2.children;
       return /*#__PURE__*/_react.default.createElement(_material.Paper, {
         style: {
-          background: '#6e6ba1',
-          color: '#F4F7FC',
-          '&:hover': {
-            background: '#fff'
+          background: "#6e6ba1",
+          color: "#F4F7FC",
+          "&:hover": {
+            background: "#fff"
           }
         }
       }, children);
@@ -173,13 +180,13 @@ ReactSelect.propTypes = {
 };
 ReactSelect.defaultProps = {
   value: {},
-  label: '',
-  className: '',
+  label: "",
+  className: "",
   defaultValue: [{}],
   isMulti: false,
   isDisabled: false,
   options: [],
-  placeholder: '',
+  placeholder: "",
   isRequired: false,
   simulateNativeSelect: true
 };

package/package.json

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