@itilite/iui-user-management 1.0.1 → 1.0.2

package/dist/index.css

@@ -684,6 +684,18 @@
 ._3WNHx {
   background-color: #ffffff;
 }
+._3WNHx ._2_WEg {
+  position: sticky;
+  background: white;
+  z-index: 2;
+  right: 0;
+  left: 0;
+  top: 60px;
+  box-shadow: 14px 14px 32px 1px #f9f9f9;
+}
+._3WNHx ._2_WEg ._1Pbhb {
+  width: 400px;
+}
 ._3WNHx ._1WLpc {
   padding: 24px 40px;
 }
@@ -765,7 +777,7 @@
 ._3WNHx ._1-RPw ._151u_ {
   width: 55px;
   height: 24px;
-  background: #F9FAFB;
+  background: #f9fafb;
   border-radius: 8px;
   display: flex;
   justify-content: center;
@@ -777,7 +789,7 @@
 }
 
 ._-LQNH {
-  background: #1F2937;
+  background: #1f2937;
   font-size: 14px;
   color: #ffffff;
   padding: 12px 16px;
@@ -848,7 +860,7 @@
 
 ._1ky1x {
   z-index: 9999 !important;
-  color: #EB5C24 !important;
+  color: #eb5c24 !important;
   background-color: rgba(0, 0, 0, 0.2) !important;
 }
 
@@ -869,15 +881,15 @@
   font-size: 12px !important;
   text-align: center;
   letter-spacing: 0.01em !important;
-  color: #6B7280 !important;
+  color: #6b7280 !important;
 }
 ._xWE7K *[aria-selected=true] ._13pXn {
-  background: #FFF1E1 !important;
+  background: #fff1e1 !important;
   color: #893404 !important;
 }
 ._xWE7K *[aria-selected=false] ._13pXn {
-  color: #6B7280;
-  background: #F9FAFB;
+  color: #6b7280;
+  background: #f9fafb;
 }
 ._tdVCY {
   background-color: #ffffff;

package/dist/index.js

@@ -18,6 +18,7 @@ var Switch = _interopDefault(require('@material-ui/core/Switch'));
 var MoreHorizIcon = _interopDefault(require('@material-ui/icons/MoreHoriz'));
 var Button = _interopDefault(require('@material-ui/core/Button'));
 var core = require('@material-ui/core');
+var useScrollPosition = require('@n8tb1t/use-scroll-position');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -6701,7 +6702,7 @@ var fetchBulkactionHistory = function fetchBulkactionHistory(url) {
   };
 };
 
-var styles$5 = {"UUIUserManagementList":"_3WNHx","pageHeader":"_1WLpc","buttonWrapper":"_2egTG","headingWrapper":"_1He01","headingSignUpWrapper":"_Q8vqd","heading":"_1uPaO","headingLarge":"_2FsLd","headingMedium":"_nGXA9","headingSmall":"_2rpwF","description":"_25vb9","headerText":"_1Ny9J","letterImage":"_2hr3R","tablewrapper":"_1-RPw","rowText":"_1LXyO","textTransform":"_3kFQS","lightColor":"_3Ghgw","avatarClassName":"_2qO_X","tooltipText":"_151u_","tooltip":"_-LQNH","importModalBodyContainer":"_25xUk","dividerColor":"_2HZv9","w100":"_3vGmU","downloadTemplateContainer":"_3-Xu_","downloadTemplateDescContainer":"_tLw43","labelContainer":"_7TYUZ","downlTempHeader":"__CZpe","downlTempDescription":"_19jEe","downloadTemplateButton":"_1qXtq","fileUploaderContainer":"_1YVz2","colGap":"_3vnY5","deActivateModalContainer":"_28H9H","backdrop":"_1ky1x","errorText":"_26_if","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn"};
+var styles$5 = {"UUIUserManagementList":"_3WNHx","scrollOverlayMenu":"_2_WEg","overlaysearch":"_1Pbhb","pageHeader":"_1WLpc","buttonWrapper":"_2egTG","headingWrapper":"_1He01","headingSignUpWrapper":"_Q8vqd","heading":"_1uPaO","headingLarge":"_2FsLd","headingMedium":"_nGXA9","headingSmall":"_2rpwF","description":"_25vb9","headerText":"_1Ny9J","letterImage":"_2hr3R","tablewrapper":"_1-RPw","rowText":"_1LXyO","textTransform":"_3kFQS","lightColor":"_3Ghgw","avatarClassName":"_2qO_X","tooltipText":"_151u_","tooltip":"_-LQNH","importModalBodyContainer":"_25xUk","dividerColor":"_2HZv9","w100":"_3vGmU","downloadTemplateContainer":"_3-Xu_","downloadTemplateDescContainer":"_tLw43","labelContainer":"_7TYUZ","downlTempHeader":"__CZpe","downlTempDescription":"_19jEe","downloadTemplateButton":"_1qXtq","fileUploaderContainer":"_1YVz2","colGap":"_3vnY5","deActivateModalContainer":"_28H9H","backdrop":"_1ky1x","errorText":"_26_if","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn"};
 
 var BulkUploadModal = function BulkUploadModal(props) {
   var isOpenImportUsersModal = props.isOpenImportUsersModal,
@@ -8299,7 +8300,8 @@ var StickyHeadTable = function StickyHeadTable(props) {
     isDataFetching: isDataFetching,
     disableRowCheckbox: disableRowCheckbox,
     searchBoxWidth: "400px",
-    searchValue: searchValue
+    searchValue: searchValue,
+    hideTopPagination: false
   });
 };
 var SingupRequests = function SingupRequests(props) {
@@ -8456,7 +8458,7 @@ var UserList = function UserList(_ref2) {
   var _React$useState = React__default.useState(1),
     page = _React$useState[0],
     setPage = _React$useState[1];
-  var _useState = React.useState(5),
+  var _useState = React.useState(10),
     rowsPerPage = _useState[0],
     setRowsPerPage = _useState[1];
   var _React$useState2 = React__default.useState({}),
@@ -8502,18 +8504,41 @@ var UserList = function UserList(_ref2) {
   var _useState10 = React.useState(false),
     isApiFetching = _useState10[0],
     setisApiFetching = _useState10[1];
-  var _React$useState5 = React__default.useState(1),
-    signup_page = _React$useState5[0],
-    setSignUpPage = _React$useState5[1];
+  var _React$useState5 = React__default.useState(false),
+    overlayMenu = _React$useState5[0],
+    setOverlayMenu = _React$useState5[1];
+  useScrollPosition.useScrollPosition(function (_ref3) {
+    var prevPos = _ref3.prevPos,
+      currPos = _ref3.currPos;
+    if (prevPos.y - currPos.y > 0) {
+      if (currPos.y < -130) {
+        setOverlayMenu(true);
+      }
+    } else {
+      if (currPos.y > -190) {
+        setOverlayMenu(false);
+      }
+    }
+  }, [overlayMenu]);
+  var scrollTo = function scrollTo(id) {
+    var el = document.getElementById(id);
+    window.scrollTo({
+      top: el.offsetTop,
+      behavior: 'smooth'
+    });
+  };
+  var _React$useState6 = React__default.useState(1),
+    signup_page = _React$useState6[0],
+    setSignUpPage = _React$useState6[1];
   var _useState11 = React.useState(5),
     signup_rowsPerPage = _useState11[0],
     setSignUpRowsPerPage = _useState11[1];
-  var _React$useState6 = React__default.useState('asc'),
-    signup_order = _React$useState6[0],
-    setSignUpOrder = _React$useState6[1];
-  var _React$useState7 = React__default.useState('fname'),
-    signup_orderBy = _React$useState7[0],
-    setSignUpOrderBy = _React$useState7[1];
+  var _React$useState7 = React__default.useState('asc'),
+    signup_order = _React$useState7[0],
+    setSignUpOrder = _React$useState7[1];
+  var _React$useState8 = React__default.useState('fname'),
+    signup_orderBy = _React$useState8[0],
+    setSignUpOrderBy = _React$useState8[1];
   var _useState12 = React.useState(''),
     signup_searchValue = _useState12[0],
     set_signup_SearchValue = _useState12[1];
@@ -8738,6 +8763,7 @@ var UserList = function UserList(_ref2) {
           dispatch(fetchUsersList(url)).then(function () {
             setSearchingChange(false);
             setisApiFetching(false);
+            scrollTo('table-root');
           });
         }, 1000);
         return function () {
@@ -8763,6 +8789,7 @@ var UserList = function UserList(_ref2) {
       }
       if (isSortingChange) {
         setisApiFetching(true);
+        scrollTo('table-root');
         dispatch(fetchUsersList(url)).then(function () {
           setisApiFetching(false);
           setSortingChange(false);
@@ -8801,15 +8828,89 @@ var UserList = function UserList(_ref2) {
       }
     }
   }, [isTokenVerified, isSearchingChangeTemp, isSortingChangeTemp, isSignUpSearchingChangeTemp, isSignUpSortingChangeTemp]);
+  var topRightButtons = function topRightButtons() {
+    return /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      component: "div",
+      className: styles$5.buttonWrapper,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      alignSelf: "flex-start"
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      component: "div",
+      className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      buttonText: "Export all users",
+      type: "outlined",
+      startIcon: /*#__PURE__*/React__default.createElement(BulkDownloadIcon, {
+        width: "22",
+        height: "22"
+      }),
+      onClick: handleExportUsers
+    })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      component: "div",
+      className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIDropdownButton, {
+      buttonText: "Bulk actions",
+      type: "outlined",
+      menuListInfo: BulkUploadInfo
+    })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      component: "div",
+      className: "pageHeader--button-single button-right"
+    }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+      buttonText: "Add user",
+      type: "contained",
+      startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
+        width: "9",
+        height: "9",
+        color: "white"
+      }),
+      onClick: handleAddPageNavigation
+    })));
+  };
   return /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     className: styles$5.UUIUserManagementList
-  }, !hasVerificationError ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBackdrop, {
+  }, overlayMenu ? /*#__PURE__*/React__default.createElement(core.Box, {
+    className: styles$5.scrollOverlayMenu
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    component: "div",
+    className: clsx(styles$5.pageHeader)
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    component: "div",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "wrap",
+    style: {
+      gap: '1rem'
+    }
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    component: "div",
+    display: "flex",
+    flexDirection: "column",
+    style: {
+      gap: '0.5rem'
+    }
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUISearch, {
+    placeholder: "Search by name, email & department",
+    value: searchValue,
+    onChangeHandler: function onChangeHandler(e) {
+      return onSearchHandler(e.target.value);
+    },
+    className: styles$5.overlaysearch
+  })), topRightButtons()), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    component: "div",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  }))) : '', !hasVerificationError ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBackdrop, {
     open: isFileDownloading || isApiFetching,
     className: styles$5.backdrop
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUICircularProgress, {
     color: "inherit"
   })), isDataFetching ? /*#__PURE__*/React__default.createElement(SkeletonLoader, null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    id: "table-root",
     component: "div",
     className: clsx(styles$5.pageHeader)
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
@@ -8834,44 +8935,7 @@ var UserList = function UserList(_ref2) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
     variant: "h3",
     className: clsx(styles$5.heading, styles$5.headingLarge)
-  }, isILadmin && companyName ? companyName + " - Users" : 'Users'))), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div",
-    className: styles$5.buttonWrapper,
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "flex-start"
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div",
-    className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-    buttonText: "Export all users",
-    type: "outlined",
-    startIcon: /*#__PURE__*/React__default.createElement(BulkDownloadIcon, {
-      width: "22",
-      height: "22"
-    }),
-    onClick: handleExportUsers
-  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div",
-    className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIDropdownButton, {
-    buttonText: "Bulk actions",
-    type: "outlined",
-    menuListInfo: BulkUploadInfo
-  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
-    component: "div",
-    className: "pageHeader--button-single button-right"
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
-    buttonText: "Add user",
-    type: "contained",
-    startIcon: /*#__PURE__*/React__default.createElement(AddIcon, {
-      width: "9",
-      height: "9",
-      color: "white"
-    }),
-    onClick: handleAddPageNavigation
-  })))), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+  }, isILadmin && companyName ? companyName + " - Users" : 'Users'))), topRightButtons()), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     display: "flex",
     justifyContent: "space-between",
@@ -8998,8 +9062,8 @@ var UserList = function UserList(_ref2) {
     errMsg: hasVerificationError
   }));
 };
-var TabLabelCount = function TabLabelCount(_ref3) {
-  var count = _ref3.count;
+var TabLabelCount = function TabLabelCount(_ref4) {
+  var count = _ref4.count;
   return /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     className: styles$5.TabLabelCount
   }, " ", count, " ");