@copart/ops-tool-kit 1.8.1-alpha.35 → 1.8.1-alpha.37

package/dist/ops-tool-kit.js

@@ -33,7 +33,7 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$f = "@copart/ops-tool-kit";
-const version$5 = "1.8.1-alpha.35";
+const version$5 = "1.8.1-alpha.37";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -29079,7 +29079,7 @@ function (_React$Component) {
   return SettingsView;
 }(React__default["default"].Component);
 
-var css_248z$6 = ".utilities_ops-announcements_Banner--appBarContentBox {\r\n  word-break: break-all;\r\n  white-space: pre-wrap;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContent {\r\n  padding: 0px 5px;\r\n  font-size: 13px;\r\n  width: 95%;\r\n  display: flex;\r\n  align-items: end;\r\n  grid-gap: 20px;\r\n  gap: 20px\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  width: 90%;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  font-weight: 600;\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  color: #201F1E;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox a{\r\n  text-decoration: underline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  overflow: hidden;\r\n  width: 95%;\r\n  font-weight: 600;\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  font-size: 12px;\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox i{\r\n  font-size: 16px !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer .utilities_ops-announcements_Banner--notificationLeftBtn i{\r\n  position: relative;\r\n  right: -4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 10px 10px;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  min-height: 40px;\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer i{\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer i{\r\n  font-size: 16px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar {\r\n  flex-direction: column;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--arrowTipContainer {\r\n  width: 0px;\r\n  height: 0px;\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  border-bottom: 13px solid white;\r\n  position: absolute;\r\n  top: 51px;\r\n  right: 50px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding: 0px 5px;\r\n  font-size: 12px;\r\n  flex: 1 1 0%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 4px;\r\n  gap: 4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  color: #1d5ab9;\r\n  left: 2px;\r\n  position: relative;\r\n  top: 2px;\r\n  margin-right: 3px;\r\n}";
+var css_248z$6 = ".utilities_ops-announcements_Banner--appBarContentBox {\r\n  word-break: break-all;\r\n  white-space: pre-wrap;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContent {\r\n  padding: 0px 5px;\r\n  font-size: 13px;\r\n  width: 95%;\r\n  display: flex;\r\n  align-items: end;\r\n  grid-gap: 20px;\r\n  gap: 20px\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  width: 90%;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  font-weight: 600;\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  color: #201F1E;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox a{\r\n  text-decoration: underline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  overflow: hidden;\r\n  width: 95%;\r\n  font-weight: 600;\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  font-size: 12px;\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox i{\r\n  font-size: 16px !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer .utilities_ops-announcements_Banner--notificationLeftBtn i{\r\n  position: relative;\r\n  right: -4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 10px 10px;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  min-height: 40px;\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer i{\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer i{\r\n  font-size: 16px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar {\r\n  flex-direction: column;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--arrowTipContainer {\r\n  width: 0px;\r\n  height: 0px;\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  border-bottom: 13px solid white;\r\n  position: absolute;\r\n  top: 51px;\r\n  right: 50px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding: 0px 5px;\r\n  font-size: 12px;\r\n  flex: 1 1 0%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 4px;\r\n  gap: 4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  color: #1d5ab9;\r\n  left: 2px;\r\n  position: relative;\r\n  top: 2px;\r\n  margin-right: 3px;\r\n}\r\n";
 styleInject(css_248z$6);
 
 var _nodeResolve_empty = {};
@@ -35582,10 +35582,11 @@ var Banner = function Banner(props) {
       content = notification.content,
       sourceApplication = notification.sourceApplication,
       categoryDescription = notification.categoryDescription,
-      feedUrl = notification.feedUrl;
+      feedUrl = notification.feedUrl,
+      notificationId = notification.notificationId;
   var contentBarRef = React__default["default"].useRef(null);
 
-  var _React$useState = React__default["default"].useState('false'),
+  var _React$useState = React__default["default"].useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       isContentOverFlow = _React$useState2[0],
       setIsContentOverFlow = _React$useState2[1];
@@ -35599,11 +35600,12 @@ var Banner = function Banner(props) {
       width = _useWindowSize.width;
 
   React__default["default"].useEffect(function () {
+    setIsContentOverFlow(false);
     setExpanded(false);
     setTimeout(function () {
       contentBarRef.current && setIsContentOverFlow(contentBarRef.current.offsetHeight < contentBarRef.current.scrollHeight);
     }, 30);
-  }, [current]);
+  }, [current, notificationId]);
   var startTime = timeZoneType === "Recipient TimeZone" || timeZoneType === "RPTZ" ? startsAt : moment.utc(startsAt).local().format("YYYY-MM-DD HH:mm:ss");
   var timeDiff = getTimeDiff(startTime);
 
@@ -35641,6 +35643,9 @@ var Banner = function Banner(props) {
         WebkitLineClamp: 'unset'
       })
     }, React__default["default"].createElement("span", {
+      onClick: function onClick() {
+        return isContentOverFlow && setExpanded(!expanded);
+      },
       dangerouslySetInnerHTML: {
         __html: SanitizeNotificationContent(content)
       }
@@ -35793,6 +35798,9 @@ var Banner = function Banner(props) {
         WebkitLineClamp: 'unset'
       })
     }, React__default["default"].createElement("span", {
+      onClick: function onClick() {
+        return isContentOverFlow && setExpanded(!expanded);
+      },
       dangerouslySetInnerHTML: {
         __html: SanitizeNotificationContent(content)
       }