@itilite/iui-user-management 0.0.6 → 0.0.7

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckBox, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUITable, IUISkeleton, IUIFormGroup, IUIDropdownButton } from '@itilite/iuistyles';
+import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUICheckBox, IUITable, IUISkeleton, IUIFormGroup, IUIDropdownButton } from '@itilite/iuistyles';
 import React, { useState, useEffect, Fragment as Fragment$1 } from 'react';
 import { configs, services, utilUrls } from '@itilite/utils';
 import moment from 'moment';
@@ -1179,7 +1179,7 @@ function GetInputType(_ref) {
       }));
 
     case 'checkbox':
-      return /*#__PURE__*/React.createElement(IUICheckBox, {
+      return /*#__PURE__*/React.createElement(IUICheckboxButton, {
         label: _p.label,
         isCheckbox: true,
         customHandler: customHandler,
@@ -2896,12 +2896,12 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
   }), !isProfile && fieldsInfo.length > 0 && /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Edit approver labels",
     type: "text",
-    iconComponent: /*#__PURE__*/React.createElement(PencilIcon, {
+    startIcon: /*#__PURE__*/React.createElement(PencilIcon, {
       width: "13.59",
       height: "13.59",
       color: "#EC5D25"
     }),
-    onClickHandler: openEditAproverModal
+    onClick: openEditAproverModal
   })), /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
     sm: 12,
@@ -2946,12 +2946,12 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: fieldsInfo.length ? 'Add another approver' : 'Add an approver',
     type: "text",
-    iconComponent: /*#__PURE__*/React.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
-    onClickHandler: addFields
+    onClick: addFields
   })) : null, type === 'travel' && /*#__PURE__*/React.createElement(React.Fragment, null, fieldsInfo.length || !isProfile ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
     sm: 6,
@@ -3234,13 +3234,13 @@ var CustomFields = function CustomFields(_ref) {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Add custom field",
     type: "text",
-    iconComponent: /*#__PURE__*/React.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: openCustomFieldModal
+    onClick: openCustomFieldModal
   }))), customFields.length > 0 && customFields.map(function (p, i) {
     if (i >= maxCustomAttributes) {
       return null;
@@ -3268,13 +3268,13 @@ var CustomFields = function CustomFields(_ref) {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Add custom field",
     type: "text",
-    iconComponent: /*#__PURE__*/React.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: openCustomFieldModal
+    onClick: openCustomFieldModal
   }))))), /*#__PURE__*/React.createElement(AddCustomFieldModal, {
     isOpenModal: isOpenModal,
     closeModalHandler: function closeModalHandler() {
@@ -4237,25 +4237,25 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Add airline",
     type: "text",
-    iconComponent: /*#__PURE__*/React.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: function onClickHandler(e) {
+    onClick: function onClick(e) {
       return addMemInfoInput('flight');
     }
   }), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Add hotel",
     type: "text",
-    iconComponent: /*#__PURE__*/React.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: function onClickHandler(e) {
+    onClick: function onClick(e) {
       return addMemInfoInput('hotel');
     }
   }))), membershipInfoInput.length > 0 && membershipInfoInput.map(function (val, index) {
@@ -4318,25 +4318,25 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Add airline",
     type: "text",
-    iconComponent: /*#__PURE__*/React.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: function onClickHandler(e) {
+    onClick: function onClick(e) {
       return addMemInfoInput('flight');
     }
   }), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Add hotel",
     type: "text",
-    iconComponent: /*#__PURE__*/React.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
       width: "10",
       height: "10",
       color: "#EC5D25"
     }),
     className: styles.paddingTop,
-    onClickHandler: function onClickHandler(e) {
+    onClick: function onClick(e) {
       return addMemInfoInput('hotel');
     }
   })))))), /*#__PURE__*/React.createElement(IUIDivider, {
@@ -4425,7 +4425,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }))))));
 };
 
-var styles$3 = {"root":"_b_muK","minWidth":"_3OQXs","bullet":"_1Q5vL","pos":"_6wGWA","cardHeader":"_SWCfJ"};
+var styles$3 = {"root":"_b_muK","minWidth":"_3OQXs","bullet":"_1Q5vL","pos":"_6wGWA","cardHeader":"_SWCfJ","pageHeader":"_2ZeWp","buttonHover":"_2Iuy1","cardHeaderBackground":"_3NJWF"};
 
 var VerificationError = function VerificationError(_ref) {
   var config = _ref.config,
@@ -4435,8 +4435,11 @@ var VerificationError = function VerificationError(_ref) {
       errMsg = _ref$errMsg === void 0 ? "You don't have valid role or Permission to access this page" : _ref$errMsg;
   var history = useHistory();
   return /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div"
+    component: "div",
+    className: styles$3.pageHeader
   }, /*#__PURE__*/React.createElement(IUICard, {
+    headerComponentTitle: title,
+    cardHeaderClassName: styles$3.cardHeaderBackground,
     headerComponent: /*#__PURE__*/React.createElement(IUITypography, {
       gutterBottom: true,
       variant: "h4",
@@ -4444,11 +4447,13 @@ var VerificationError = function VerificationError(_ref) {
     }, title),
     description: errMsg,
     actionComponent: /*#__PURE__*/React.createElement(IUIButton, {
+      className: styles$3.buttonHover,
+      buttonText: "Back to Homepage",
       size: "small",
       onClick: function onClick() {
         return history.push(config.routes.fallbackUrl);
       }
-    }, "Back to Homepage")
+    })
   }));
 };
 
@@ -5888,14 +5893,14 @@ var UserAddEdit = function UserAddEdit(props) {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Cancel",
     type: "outlined",
-    onClickHandler: handleCancelNavigation
+    onClick: handleCancelNavigation
   })), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     className: "pageHeader--button-single button-right"
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Save",
     type: "contained",
-    onClickHandler: formSubmitHandler,
+    onClick: formSubmitHandler,
     disabled: isPageLoading || productAccess.travel === false && productAccess.expense === false || !!doesFormHasError()
   }))))), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
@@ -6583,7 +6588,7 @@ var BulkUploadModal = function BulkUploadModal(props) {
   }, "Use this template with predefined columns and add users to your team")), /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUIButton, {
     type: "text",
     buttonText: "Download template",
-    onClickHandler: downloadTemplate,
+    onClick: downloadTemplate,
     isLink: true
   })))), /*#__PURE__*/React.createElement(IUIDivider, {
     className: clsx(styles$5.dividerColor, styles$5.w100)
@@ -7102,13 +7107,13 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Download invalid records",
     type: "text",
-    onClickHandler: function onClickHandler() {
+    onClick: function onClick() {
       return handleDownloadRecords('failure');
     }
   }), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Upload again",
     type: "text",
-    onClickHandler: importUserHandler
+    onClick: importUserHandler
   }))), (+userBulkImportInfo.success > 0 || +userBulkImportInfo.exist_users > 0) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIDivider, {
     className: styles$4.divider
   }), /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUITypography, {
@@ -7147,7 +7152,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: importStatus !== 1 ? 'Import ' + handleImportNumbers() : 'Importing ' + handleImportNumbers(),
     type: "contained",
-    onClickHandler: handleImportUploadRecords,
+    onClick: handleImportUploadRecords,
     disabled: importStatus === 1
   }))))), importStatus === 3 && /*#__PURE__*/React.createElement(IUIBox, {
     className: styles$4.completedContainer
@@ -7164,7 +7169,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, userBulkImportInfo.total_records, /*#__PURE__*/React.createElement("span", null, ' ', +userBulkImportInfo.total_records === 1 ? 'total record' : 'total records', ' ')), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Download records",
     type: "text",
-    onClickHandler: function onClickHandler() {
+    onClick: function onClick() {
       return handleDownloadRecords('total');
     }
   })), /*#__PURE__*/React.createElement(IUIDivider, null), +userBulkImportInfo.success > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBox, {
@@ -7176,7 +7181,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, userBulkImportInfo.success, ' ', /*#__PURE__*/React.createElement("span", null, ' ', +userBulkImportInfo.success === 1 ? 'new user added ' : 'new users added ', ' ')), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Download records",
     type: "text",
-    onClickHandler: function onClickHandler() {
+    onClick: function onClick() {
       return handleDownloadRecords('success');
     }
   })), /*#__PURE__*/React.createElement(IUIDivider, null)), +userBulkImportInfo.exist_users > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBox, {
@@ -7188,7 +7193,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, userBulkImportInfo.exist_users, ' ', /*#__PURE__*/React.createElement("span", null, ' ', +userBulkImportInfo.exist_users === 1 ? 'existing user updated' : 'existing users updated', ' ')), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Download records",
     type: "text",
-    onClickHandler: function onClickHandler() {
+    onClick: function onClick() {
       return handleDownloadRecords('exist');
     }
   })), /*#__PURE__*/React.createElement(IUIDivider, null)), +userBulkImportInfo.failure > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBox, {
@@ -7200,7 +7205,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, userBulkImportInfo.failure, ' ', /*#__PURE__*/React.createElement("span", null, ' ', +userBulkImportInfo.failure === 1 ? 'invalid record' : 'invalid records', ' ')), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Download records",
     type: "text",
-    onClickHandler: function onClickHandler() {
+    onClick: function onClick() {
       return handleDownloadRecords('failure');
     }
   })), /*#__PURE__*/React.createElement(IUIDivider, null))))), /*#__PURE__*/React.createElement(IUIGrid, {
@@ -7792,8 +7797,8 @@ var StickyHeadTable = function StickyHeadTable(props) {
       _props$handleSelectAl = props.handleSelectAllClick,
       handleSelectAllClick = _props$handleSelectAl === void 0 ? function () {} : _props$handleSelectAl,
       selected = props.selected,
-      _props$handleSingleCh = props.handleSingleCheckIUIBoxClick,
-      handleSingleCheckIUIBoxClick = _props$handleSingleCh === void 0 ? function () {} : _props$handleSingleCh,
+      _props$handleSingleCh = props.handleSingleCheckBoxClick,
+      handleSingleCheckBoxClick = _props$handleSingleCh === void 0 ? function () {} : _props$handleSingleCh,
       orderBy = props.orderBy,
       order = props.order,
       _props$onRequestSort = props.onRequestSort,
@@ -7921,7 +7926,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
     cell: function cell(row) {
       return /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Edit",
-        onClickHandler: function onClickHandler() {
+        onClick: function onClick() {
           return onEditHandler(row.id);
         }
       });
@@ -7942,7 +7947,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
     rowsPerPage: rowsPerPage,
     handleSelectAllClick: handleSelectAllClick,
     selected: selected,
-    handleSingleCheckIUIBoxClick: handleSingleCheckIUIBoxClick,
+    handleSingleCheckBoxClick: handleSingleCheckBoxClick,
     orderBy: orderBy,
     order: order,
     searchHide: false,
@@ -7950,7 +7955,8 @@ var StickyHeadTable = function StickyHeadTable(props) {
     onRequestSort: onRequestSort,
     onSearchHandler: onSearchHandler,
     isDataFetching: isDataFetching,
-    disableRowCheckbox: disableRowCheckbox
+    disableRowCheckbox: disableRowCheckbox,
+    searchBoxWidth: "400px"
   });
 };
 
@@ -8105,9 +8111,11 @@ var UserList = function UserList(_ref) {
     setSearchingChangeTemp(!isSearchingChangeTemp);
   };
 
-  var handleSingleCheckIUIBoxClick = function handleSingleCheckIUIBoxClick(event, id, page) {
+  var handleSingleCheckBoxClick = function handleSingleCheckBoxClick(event, id, page) {
     var _extends4;
 
+    console.log('test');
+
     var selectedTemp = _extends({}, selected);
 
     if (!(page in selectedTemp)) {
@@ -8310,11 +8318,11 @@ var UserList = function UserList(_ref) {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Export all users",
     type: "outlined",
-    iconComponent: /*#__PURE__*/React.createElement(ExportIcon, {
+    startIcon: /*#__PURE__*/React.createElement(ExportIcon, {
       width: "12",
       height: "12"
     }),
-    onClickHandler: handleExportUsers
+    onClick: handleExportUsers
   })), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
@@ -8328,12 +8336,12 @@ var UserList = function UserList(_ref) {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Add user",
     type: "contained",
-    iconComponent: /*#__PURE__*/React.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
       width: "9",
       height: "9",
       color: "white"
     }),
-    onClickHandler: handleAddPageNavigation
+    onClick: handleAddPageNavigation
   })))), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
@@ -8350,7 +8358,7 @@ var UserList = function UserList(_ref) {
     handleActiveUser: handleActiveUser,
     handleSelectAllClick: handleSelectAllClick,
     selected: selected,
-    handleSingleCheckIUIBoxClick: handleSingleCheckIUIBoxClick,
+    handleSingleCheckBoxClick: handleSingleCheckBoxClick,
     orderBy: orderBy,
     order: order,
     onRequestSort: onRequestSort,
@@ -8414,40 +8422,53 @@ function Header(props) {
     component: "div",
     display: "flex",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    flexWrap: "wrap",
+    style: {
+      gap: '1rem'
+    }
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    display: "flex",
+    flexDirection: "column",
+    style: {
+      gap: '0.5rem'
+    }
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div"
+    component: "div",
+    className: styles$5.headingWrapper
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "h3",
     className: clsx(styles$5.heading, styles$5.headingLarge)
   }, isILadmin === 1 && companyName + " - ", " ", headingName)), /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    className: styles$5.headingWrapper
+  }, /*#__PURE__*/React.createElement(IUITypography, {
+    variant: "body2",
+    className: clsx(styles$5.description)
+  }, subHeading))), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     className: styles$5.buttonWrapper,
     display: "flex",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    alignSelf: "flex-start"
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     className: "pageHeader--button-single button-right"
   }, /*#__PURE__*/React.createElement(IUIButton, {
     type: "contained",
     buttonText: "+ Add " + name.toLowerCase(),
-    onClickHandler: HeaderButton
+    onClick: HeaderButton
   })))), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center"
-  }), /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    className: styles$5.headingWrapper
-  }, /*#__PURE__*/React.createElement(IUITypography, {
-    variant: "body2",
-    className: clsx(styles$5.description)
-  }, subHeading))));
+  })));
 }
 
-var styles$7 = {"sidebar__container":"_1EFxC","sidebar__wrapper":"_3Mk3_","sidebar__navlinks":"_29KVG","sidebar__navlinks-title":"_2Eg7m","MuiListItem-button":"_3yWwI","Mui-selected":"_3Ou88","buttonWidth":"_13tv0","onBoardText":"_HUoW-","iconStyle":"_3k0Fb","iconLayout":"_v3GT2","baseAlert":"_12zY5"};
+var styles$7 = {"sidebar__container":"_1EFxC","sidebar__wrapper":"_3Mk3_","sidebar__navlinks":"_29KVG","sidebar__navlinks-title":"_2Eg7m","MuiListItem-button":"_3yWwI","Mui-selected":"_3Ou88","buttonWidth":"_13tv0","onBoardText":"_HUoW-","iconStyle":"_3k0Fb","iconLayout":"_v3GT2","baseAlert":"_12zY5","headingWrapper":"_20Qv9","pageHeader":"_36au5","description":"_tULrl","headerText":"_3W_ZV"};
 
 function Listview(_ref) {
   var data = _ref.data,
@@ -8506,19 +8527,19 @@ function Listview(_ref) {
       }, /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Edit",
         className: styles$7.buttonWidth,
-        onClickHandler: function onClickHandler() {
+        onClick: function onClick() {
           return handleEditDialog(row);
         }
       }), row.no_of_users > 0 ? /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Delete",
         className: styles$7.buttonWidth,
-        onClickHandler: function onClickHandler() {
+        onClick: function onClick() {
           return handleDeleteDialog(row, true);
         }
       }) : /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Delete",
         className: styles$7.buttonWidth,
-        onClickHandler: function onClickHandler() {
+        onClick: function onClick() {
           return handleDeleteDialog(row, false);
         }
       }));
@@ -9224,12 +9245,12 @@ var PageHeader = function PageHeader() {
   }, /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Add custom field",
     type: "contained",
-    iconComponent: /*#__PURE__*/React.createElement(AddIcon, {
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
       width: "9",
       height: "9",
       color: "white"
     }),
-    onClickHandler: handleAddCustomField
+    onClick: handleAddCustomField
   })))), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
@@ -9296,7 +9317,7 @@ function CustomFieldsTable() {
       className: styles$6.actionButtons
     }, /*#__PURE__*/React.createElement(IUIButton, {
       buttonText: "Edit",
-      onClickHandler: function onClickHandler() {
+      onClick: function onClick() {
         return handleEdit(row);
       }
     })));