@copart/ops-tool-kit 1.13.0-beta.14 → 1.13.0-beta.16

package/dist/ops-tool-kit.js

@@ -6,7 +6,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var frontEndUtils = require('@copart/front-end-utils');
 var coreComponents = require('@copart/core-components');
-var reactRouterDom = require('react-router-dom');
+var ReactRouterDOM = require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,9 +46,10 @@ function _mergeNamespaces(n, m) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var ReactRouterDOM__namespace = /*#__PURE__*/_interopNamespace(ReactRouterDOM);
 
 const name$1 = "@copart/ops-tool-kit";
-const version$3 = "1.13.0-beta.14";
+const version$3 = "1.13.0-beta.16";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -109,7 +110,7 @@ const devDependencies$1 = {
 const peerDependencies = {
   "@copart/core-components": "2.3.0-alpha.filters.6",
   react: "*",
-  "react-router-dom": "^5.0.0"
+  "react-router-dom": "^5.0.0 || ^6.0.0"
 };
 const dependencies$1 = {
   "@reacting/purist": "0.1.0",
@@ -63586,6 +63587,7 @@ var formatNumber = function formatNumber(number) {
 /**
  * Default badge color thresholds used by many portal apps (e.g. MiOrg open tasks).
  * Matches legacy getStatus(count) logic: >1000 → 1, >500 → 2, >0 → 3.
+ * Optional declarative fallback when apps prefer not to pre-resolve status in iframe mode.
  */
 var STANDARD_NAV_COUNT_THRESHOLDS = [{
   above: 1000,
@@ -63598,6 +63600,38 @@ var STANDARD_NAV_COUNT_THRESHOLDS = [{
   status: 3
 }];
 
+/**
+ * @typedef {number|string} NavCountValue
+ * @typedef {{ count?: NavCountValue, status?: number }} NavCountEntryObject
+ * @typedef {NavCountValue|NavCountEntryObject} NavCountEntry
+ */
+
+/**
+ * Normalize a nav count payload entry to { count, status }.
+ * Accepts a plain number/string or { count, status } from iframe UPDATE_NAV_COUNTS.
+ *
+ * @param {NavCountEntry|null|undefined} entry
+ * @returns {{ count: NavCountValue|undefined, status: number|undefined }}
+ */
+function normalizeNavCountEntry(entry) {
+  if (entry == null) {
+    return {
+      count: undefined,
+      status: undefined
+    };
+  }
+  if (_typeof$1(entry) === 'object' && !Array.isArray(entry)) {
+    return {
+      count: entry.count,
+      status: entry.status != null ? entry.status : undefined
+    };
+  }
+  return {
+    count: entry,
+    status: undefined
+  };
+}
+
 /**
  * Resolve badge status from a count using getStatus (in-app) or countStatusThresholds (iframe shell).
  *
@@ -63624,6 +63658,67 @@ function resolveCountStatus(count) {
   return undefined;
 }
 
+/**
+ * Resolve count display value and badge status for NavigationBar.
+ * Pre-resolved status from iframe payloads takes priority over local navItem rules.
+ *
+ * @param {NavCountEntry|null|undefined} entry
+ * @param {{ getStatus?: (n: number) => number, countStatusThresholds?: Array<{ above?: number, min?: number, status: number }> }} navItem
+ * @returns {{ count: number|undefined, status: number|undefined }}
+ */
+function resolveNavCountDisplay(entry) {
+  var navItem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _normalizeNavCountEnt = normalizeNavCountEntry(entry),
+    rawCount = _normalizeNavCountEnt.count,
+    preResolvedStatus = _normalizeNavCountEnt.status;
+  if (rawCount == null || rawCount === '') {
+    return {
+      count: undefined,
+      status: undefined
+    };
+  }
+  var num = Number(rawCount);
+  if (Number.isNaN(num)) {
+    return {
+      count: undefined,
+      status: undefined
+    };
+  }
+  var status = preResolvedStatus;
+  if (status == null) {
+    status = resolveCountStatus(num, navItem);
+  }
+  return {
+    count: num,
+    status: status
+  };
+}
+
+/**
+ * Build a nav count payload entry from a count and optional nav item getStatus callback.
+ * Use inside iframe apps before posting UPDATE_NAV_COUNTS so arbitrary getStatus logic
+ * runs in the app while only serializable data crosses postMessage.
+ *
+ * @param {NavCountValue|null|undefined} count
+ * @param {{ getStatus?: (n: number) => number|null|undefined }} [navItem]
+ * @returns {NavCountEntry|undefined}
+ */
+function buildNavCountEntry(count, navItem) {
+  if (count == null || count === '') return undefined;
+  var num = Number(count);
+  if (Number.isNaN(num)) return undefined;
+  if (typeof (navItem === null || navItem === void 0 ? void 0 : navItem.getStatus) === 'function') {
+    var status = navItem.getStatus(num);
+    if (status != null) {
+      return {
+        count: num,
+        status: status
+      };
+    }
+  }
+  return num;
+}
+
 var css_248z$2 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: absolute;\r\n  background: #3A4454;\r\n  min-width: 50px;\r\n  max-width: 50px;\r\n  height: 100%;\r\n  color: #ffffff;\r\n  font-size: 14px;\r\n  z-index: 101;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu {\r\n  min-width: 70px;\r\n  max-width: 70px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts {\r\n  min-width: 100px;\r\n  max-width: 100px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader {\r\n  min-width: 0px;\r\n  max-width: 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:not(.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader):hover, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen {\r\n  max-width: 500px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons{\r\n  min-width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:not(.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader):hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton{\r\n  min-width: auto;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \r\n  display: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  display: flex;\r\n  width: 100%;\r\n  padding: 6px 12px 6px 12px;\r\n  border-radius: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled {\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected {\r\n  color: #323130;\r\n  background-color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelectedStatus {\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-left: auto;\r\n  margin-right: 10px;\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts:not(.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader):hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px;\r\n  text-align: right;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable:not(:hover) .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: auto;\r\n  text-align: auto;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px !important;\r\n  text-align: right !important;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\r\n  background-color: #73A6FF;\r\n  transition: background-color 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  margin-left: auto;\r\n  font-size: 12px;\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\r\n  margin: 0 10px 0 auto;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  min-width: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  font-size: 14px;\r\n  /* width: 20px; */\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelectedStatus .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelectedStatus .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1NoHover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-right: 6px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 0px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons i, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:not(.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader):hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 0;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  margin-top: 2px;\r\n  font-weight: 100;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:not(.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader):hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 2px 10px 0 10px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 0 5px 0 0;\r\n  font-weight: 600;\r\n  margin-left: 0px;\r\n  cursor: auto;\r\n  cursor: initial;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:not(.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader):hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  margin: 0;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  margin-right: 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding-left: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-left: auto;\r\n  margin-right: 10px;\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts:not(.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader):hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px;\r\n  text-align: right;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable:not(:hover) .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: auto;\r\n  text-align: auto;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px !important;\r\n  text-align: right !important;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  margin-left: auto;\r\n  font-size: 12px;\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu:not(.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader):hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--level3Menu .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  margin-right: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\r\n  display: flex;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--statusColor {\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 95%;\r\n  left: -13px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 13px;\r\n  margin-left: 1px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:not(.utilities_ops-app-frame_NavigationBar_NavigationBar--showNavIconInHeader):hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--navBarOpen .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 100%;\r\n  margin-left: 1px;\r\n  transition-delay: 0.25s;\r\n}";
 styleInject(css_248z$2);
 
@@ -64338,7 +64433,7 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
       isHover: isHover,
       showNavIconInHeader: showNavIconInHeader,
       navItem: subItem,
-      count: counts && counts[subItem.route],
+      countEntry: counts && counts[subItem.route],
       countsLoading: countsLoading,
       selected: selected,
       navigateToItem: navigateToItem,
@@ -64353,7 +64448,7 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
 };
 var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref6) {
   var navItem = _ref6.navItem,
-    count = _ref6.count,
+    countEntry = _ref6.countEntry,
     countsLoading = _ref6.countsLoading,
     isHover = _ref6.isHover,
     showNavIconInHeader = _ref6.showNavIconInHeader,
@@ -64368,12 +64463,15 @@ var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref6) {
     _ref6$showLevel3Navig = _ref6.showLevel3Navigation,
     showLevel3Navigation = _ref6$showLevel3Navig === void 0 ? false : _ref6$showLevel3Navig;
   var isHoverEnabled = showNavIconInHeader || isHover;
-  var countText = !isHoverEnabled ? formatNumber(count) : count;
-  var status, statusColor;
-  if (countText != null && countText !== '') {
-    status = resolveCountStatus(count, navItem);
-    if (status != null) statusColor = statusColors[status];
-  }
+  var _resolveNavCountDispl = resolveNavCountDisplay(countEntry, navItem),
+    count = _resolveNavCountDispl.count,
+    status = _resolveNavCountDispl.status;
+  var countText;
+  if (count != null && count !== '') {
+    countText = !isHoverEnabled ? formatNumber(count) : count;
+  }
+  var statusColor;
+  if (status != null) statusColor = statusColors[status];
   var position = (navItem === null || navItem === void 0 ? void 0 : navItem.statusColorPosition) || '';
   var isDisabled = typeof navItem.disabled === 'function' ? navItem.disabled() : navItem.disabled;
 
@@ -68379,9 +68477,12 @@ function postNavConfig(navItems) {
 
 /**
  * Push nav badge counts to the shell.
- * @param {Record<string, Record<string, number>>} countsByMenu
- *   Top-level menu route/name → sub-route counts, e.g.
- *   { tasks: { 'open-tasks': 5 }, admin: { 'staged-users': 2 } }
+ * @param {Record<string, Record<string, import('../utilities/navCountStatus').NavCountEntry>>} countsByMenu
+ *   Top-level menu route → sub-route counts. Each value may be:
+ *   - a plain number (count only, no badge color), or
+ *   - `{ count, status }` where status is pre-resolved in the iframe (1|2|3).
+ *   Example:
+ *   { tasks: { 'open-tasks': { count: 750, status: 2 } }, admin: { 'staged-users': 12 } }
  */
 function postNavCounts(countsByMenu) {
   if (!countsByMenu || _typeof$1(countsByMenu) !== 'object') return;
@@ -69725,13 +69826,68 @@ function serializeNavItems(items) {
   });
 }
 
+/**
+ * True when the host app uses react-router-dom v6+ (`useNavigate` present, `useHistory` removed).
+ */
+var IS_REACT_ROUTER_V6 = typeof ReactRouterDOM__namespace.useNavigate === 'function' && typeof ReactRouterDOM__namespace.useHistory !== 'function';
+function normalizeNavigateTarget(to) {
+  if (typeof to === 'string') return normalizeIframePath(to);
+  return to;
+}
+function useRouterNavigationV5() {
+  var history = ReactRouterDOM__namespace.useHistory();
+  var location = ReactRouterDOM__namespace.useLocation();
+  var navigate = React.useCallback(function (to, options) {
+    if (typeof to === 'number') {
+      history.go(to);
+      return;
+    }
+    var target = normalizeNavigateTarget(to);
+    if ((options === null || options === void 0 ? void 0 : options.state) != null) history.push(target, options.state);else if (options !== null && options !== void 0 && options.replace) history.replace(target);else history.push(target);
+  }, [history]);
+  return {
+    navigate: navigate,
+    location: location
+  };
+}
+function useRouterNavigationV6() {
+  var navigateFn = ReactRouterDOM__namespace.useNavigate();
+  var location = ReactRouterDOM__namespace.useLocation();
+  var navigate = React.useCallback(function (to, options) {
+    if (typeof to === 'number') {
+      navigateFn(to);
+      return;
+    }
+    var target = normalizeNavigateTarget(to);
+    if ((options === null || options === void 0 ? void 0 : options.state) != null || options !== null && options !== void 0 && options.replace) {
+      navigateFn(target, {
+        state: options === null || options === void 0 ? void 0 : options.state,
+        replace: options === null || options === void 0 ? void 0 : options.replace
+      });
+    } else {
+      navigateFn(target);
+    }
+  }, [navigateFn]);
+  return {
+    navigate: navigate,
+    location: location
+  };
+}
+
+/**
+ * Router-agnostic navigation for iframe shell components.
+ * Uses `useHistory` on react-router-dom v5 and `useNavigate` on v6.
+ */
+var useRouterNavigation = IS_REACT_ROUTER_V6 ? useRouterNavigationV6 : useRouterNavigationV5;
+
 function IframeRouteSync(_ref) {
   var _ref$updateUriIsPath = _ref.updateUriIsPath,
     updateUriIsPath = _ref$updateUriIsPath === void 0 ? false : _ref$updateUriIsPath,
     _ref$suppressEcho = _ref.suppressEcho,
     suppressEcho = _ref$suppressEcho === void 0 ? true : _ref$suppressEcho;
-  var history = reactRouterDom.useHistory();
-  var location = reactRouterDom.useLocation();
+  var _useRouterNavigation = useRouterNavigation(),
+    navigate = _useRouterNavigation.navigate,
+    location = _useRouterNavigation.location;
   var initialRef = React.useRef(true);
   var suppressUpdateUriRef = React.useRef(false);
   React.useEffect(function () {
@@ -69739,11 +69895,11 @@ function IframeRouteSync(_ref) {
       if (data.eventType === 'LOAD_URI' && data.eventProps) {
         var path = normalizeIframePath(data.eventProps.uri);
         if (suppressEcho) suppressUpdateUriRef.current = true;
-        history.push(path);
+        navigate(path);
       }
     });
     return remove;
-  }, [history, suppressEcho]);
+  }, [navigate, suppressEcho]);
   React.useEffect(function () {
     if (initialRef.current) {
       initialRef.current = false;
@@ -69816,7 +69972,8 @@ function resolveCountsLoader(mod) {
  * @param {Object} props
  * @param {() => Promise<{ default?: Function, getNavCounts?: Function } | Function>} props.countsLoader
  *   Dynamic import returning a function that resolves to countsByMenu, e.g.
- *   { tasks: { 'open-tasks': 5 }, admin: { 'staged-users': 2 } }
+ *   { tasks: { 'open-tasks': { count: 750, status: 2 } }, admin: { 'staged-users': 12 } }
+ *   Use buildNavCountEntry() in the loader to run navItem.getStatus in the iframe before posting.
  * @param {number} [props.pollIntervalMs=60000] Set to 0 to post once on mount only.
  * @param {(err: Error) => void} [props.onError]
  */
@@ -69883,11 +70040,10 @@ function IframeAppRootInner(_ref) {
     navCountsOnError = _ref.navCountsOnError,
     updateUriIsPath = _ref.updateUriIsPath,
     suppressRouteSyncEcho = _ref.suppressRouteSyncEcho;
-  var history = reactRouterDom.useHistory();
+  var _useRouterNavigation = useRouterNavigation(),
+    navigate = _useRouterNavigation.navigate;
   return /*#__PURE__*/React__default["default"].createElement(CrumbProvider, {
-    navigate: function navigate(path) {
-      return history.push(path);
-    }
+    navigate: navigate
   }, /*#__PURE__*/React__default["default"].createElement(AppEnvSender, {
     toolkitEnv: toolkitEnv,
     mihelpAgentProps: mihelpAgentProps
@@ -69923,7 +70079,7 @@ function IframeAppRoot(_ref2) {
     _ref2$suppressRouteSy = _ref2.suppressRouteSyncEcho,
     suppressRouteSyncEcho = _ref2$suppressRouteSy === void 0 ? true : _ref2$suppressRouteSy;
   var initialPath = normalizeIframePath(initialUri);
-  return /*#__PURE__*/React__default["default"].createElement(reactRouterDom.MemoryRouter, {
+  return /*#__PURE__*/React__default["default"].createElement(ReactRouterDOM.MemoryRouter, {
     initialEntries: [initialPath],
     initialIndex: 0
   }, /*#__PURE__*/React__default["default"].createElement(IframeAppRootInner, {
@@ -81779,6 +81935,7 @@ exports.AutoRefresh = AutoRefresh;
 exports.CallLogger = CallLogger;
 exports.ContextualHelp = ContextualHelp;
 exports.Crumb = Crumb$1;
+exports.IS_REACT_ROUTER_V6 = IS_REACT_ROUTER_V6;
 exports.IframeAppRoot = IframeAppRoot;
 exports.IframeRouteSync = IframeRouteSync;
 exports.NavConfigSender = NavConfigSender;
@@ -81786,11 +81943,15 @@ exports.NavCountsSender = NavCountsSender;
 exports.STANDARD_NAV_COUNT_THRESHOLDS = STANDARD_NAV_COUNT_THRESHOLDS;
 exports.accessHelpers = accessHelpers$1;
 exports.bootstrapIframeApp = bootstrapIframeApp;
+exports.buildNavCountEntry = buildNavCountEntry;
 exports.fetcher = fetcher$1;
 exports.iframeFacade = iframeFacade;
 exports.normalizeIframePath = normalizeIframePath;
+exports.normalizeNavCountEntry = normalizeNavCountEntry;
 exports.registerEarlyLoadUriListener = registerEarlyLoadUriListener;
 exports.resolveCountStatus = resolveCountStatus;
+exports.resolveNavCountDisplay = resolveNavCountDisplay;
 exports.serializeNavItems = serializeNavItems;
 exports.storage = storage$2;
+exports.useRouterNavigation = useRouterNavigation;
 //# sourceMappingURL=ops-tool-kit.js.map