@vitrosoftware/common-ui-ts 1.1.261 → 1.1.263

package/css/std/controls/workflow-route/workflow-route.css

@@ -54,4 +54,10 @@
 .vitro-dropdown-button-container {
     width: 24px;
     height: 24px;
+}
+
+.vitro-expand-collapse-button-empty {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
 }

package/css/std/controls/workflow-route-step/workflow-route-step.css

@@ -60,6 +60,12 @@
     margin-bottom: auto;
 }
 
+.vitro-expand-collapse-button-empty {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
 .vitro-dropdown-button-container {
     width: 24px;
     height: 24px;

package/css/std/controls/workflow-route-task/img/collapse-bottom-small.svg

@@ -0,0 +1,5 @@
+<svg viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'>
+	<g id='chevron-right' filter='url(#filter0_dd_2119_119831)'>
+		<path id='Vector' d='M7 10.5L12 15.5L17 10.5' stroke='#4A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>
+	</g>
+</svg>

package/css/std/controls/workflow-route-task/img/collapse-right-small.svg

@@ -0,0 +1 @@
+<svg viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'><g id='chevron-right' filter='url(#filter0_dd_2119_118517)'><path id='Vector' d='M10.5 17L15.5 12L10.5 7' stroke='#4A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></g></svg>

package/css/std/controls/workflow-route-task/workflow-route-task.css

@@ -1,12 +1,12 @@
-.vitro-workflow-route-task,
-.vitro-workflow-route-task-mobile {
+.vitro-workflow-route-task-content,
+.vitro-workflow-route-task-content-mobile {
     padding: 0 4px 0 24px;
     position: relative;
     min-height: 32px;
 }
 
-.vitro-workflow-route-task::after,
-.vitro-workflow-route-task-mobile::after {
+.vitro-workflow-route-task-content::after,
+.vitro-workflow-route-task-content-mobile::after {
     content: '';
     height: 1px;
     background-color: #E4E6EC;
@@ -14,22 +14,24 @@
     top: 100%;
 }
 
-.vitro-workflow-route-task::after {
+.vitro-workflow-route-task-content::after {
     width: calc(100% - 24px);
 }
 
-.vitro-workflow-route-task-mobile::after {
+.vitro-workflow-route-task-content-mobile::after {
     width: 100%;
     left: 0;
 }
 
-.vitro-workflow-route-task div,
-.vitro-workflow-route-task-mobile div {
+.vitro-workflow-route-task-content div,
+.vitro-workflow-route-task-content-mobile div {
     white-space: nowrap;
 }
 
-.vitro-link {
+.vitro-link,
+.vitro-link:visited {
     padding: 0 4px;
+    font-size: 14px;
 }
 
 .vitro-right {
@@ -168,4 +170,24 @@
 
 .vitro-date-container {
     padding: 4px;
+}
+
+.vitro-workflow-route-task:global(.vitro-expanded) .vitro-expand-collapse-button > div,
+.vitro-workflow-route-task:global(.vitro-expanded) .vitro-expand-collapse-button-mobile > div {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/collapse-bottom-small.svg');
+}
+
+.vitro-workflow-route-task:global(.vitro-collapsed) .vitro-expand-collapse-button > div,
+.vitro-workflow-route-task:global(.vitro-collapsed) .vitro-expand-collapse-button-mobile > div {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/collapse-right-small.svg');
+}
+
+.vitro-expand-collapse-button-empty {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+.vitro-workflow-route-task > :global(.vitro-content) {
+    padding-left: 48px;
 }

package/dist/index.css

@@ -9550,15 +9550,15 @@ div._component-loader_vitro-component-loader_3J3a2or {
     width: 8px;
     height: 8px;
 }
-._workflow-route-task_vitro-workflow-route-task_s9KlfUa,
-._workflow-route-task_vitro-workflow-route-task-mobile_1sahTAH {
+._workflow-route-task_vitro-workflow-route-task-content_3ZW4dAP,
+._workflow-route-task_vitro-workflow-route-task-content-mobile_2dWs1Ye {
     padding: 0 4px 0 24px;
     position: relative;
     min-height: 32px;
 }
 
-._workflow-route-task_vitro-workflow-route-task_s9KlfUa::after,
-._workflow-route-task_vitro-workflow-route-task-mobile_1sahTAH::after {
+._workflow-route-task_vitro-workflow-route-task-content_3ZW4dAP::after,
+._workflow-route-task_vitro-workflow-route-task-content-mobile_2dWs1Ye::after {
     content: '';
     height: 1px;
     background-color: #E4E6EC;
@@ -9566,22 +9566,24 @@ div._component-loader_vitro-component-loader_3J3a2or {
     top: 100%;
 }
 
-._workflow-route-task_vitro-workflow-route-task_s9KlfUa::after {
+._workflow-route-task_vitro-workflow-route-task-content_3ZW4dAP::after {
     width: calc(100% - 24px);
 }
 
-._workflow-route-task_vitro-workflow-route-task-mobile_1sahTAH::after {
+._workflow-route-task_vitro-workflow-route-task-content-mobile_2dWs1Ye::after {
     width: 100%;
     left: 0;
 }
 
-._workflow-route-task_vitro-workflow-route-task_s9KlfUa div,
-._workflow-route-task_vitro-workflow-route-task-mobile_1sahTAH div {
+._workflow-route-task_vitro-workflow-route-task-content_3ZW4dAP div,
+._workflow-route-task_vitro-workflow-route-task-content-mobile_2dWs1Ye div {
     white-space: nowrap;
 }
 
-._workflow-route-task_vitro-link_2tS5zX0 {
+._workflow-route-task_vitro-link_2tS5zX0,
+._workflow-route-task_vitro-link_2tS5zX0:visited {
     padding: 0 4px;
+    font-size: 14px;
 }
 
 ._workflow-route-task_vitro-right_iJRgs4i {
@@ -9720,6 +9722,26 @@ div._component-loader_vitro-component-loader_3J3a2or {
 
 ._workflow-route-task_vitro-date-container_hSQMuDR {
     padding: 4px;
+}
+
+._workflow-route-task_vitro-workflow-route-task_s9KlfUa.vitro-expanded ._workflow-route-task_vitro-expand-collapse-button_1OqxCow > div,
+._workflow-route-task_vitro-workflow-route-task_s9KlfUa.vitro-expanded ._workflow-route-task_vitro-expand-collapse-button-mobile_3UhtY_W > div {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/collapse-bottom-small.svg');
+}
+
+._workflow-route-task_vitro-workflow-route-task_s9KlfUa.vitro-collapsed ._workflow-route-task_vitro-expand-collapse-button_1OqxCow > div,
+._workflow-route-task_vitro-workflow-route-task_s9KlfUa.vitro-collapsed ._workflow-route-task_vitro-expand-collapse-button-mobile_3UhtY_W > div {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/collapse-right-small.svg');
+}
+
+._workflow-route-task_vitro-expand-collapse-button-empty_28_AquD {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+._workflow-route-task_vitro-workflow-route-task_s9KlfUa > .vitro-content {
+    padding-left: 48px;
 }
 ._workflow-route-step_vitro-disabled_3fS250E {
     opacity: 0.7;
@@ -9783,6 +9805,12 @@ div._component-loader_vitro-component-loader_3J3a2or {
     margin-bottom: auto;
 }
 
+._workflow-route-step_vitro-expand-collapse-button-empty_1QmpQlW {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
 ._workflow-route-step_vitro-dropdown-button-container_3jZhGMp {
     width: 24px;
     height: 24px;
@@ -9856,4 +9884,10 @@ div._component-loader_vitro-component-loader_3J3a2or {
 ._workflow-route_vitro-dropdown-button-container_1YxXjBP {
     width: 24px;
     height: 24px;
+}
+
+._workflow-route_vitro-expand-collapse-button-empty_2dD9Q24 {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
 }

package/dist/index.js

@@ -61599,7 +61599,7 @@ var ValueTooltip = React.forwardRef(function (props, ref) {
     var style = getComputedStyle(element);
     var paddingX = getNumber(style.paddingLeft) + getNumber(style.paddingRight);
     var borderX = getNumber(style.borderLeftWidth) + getNumber(style.borderRightWidth);
-    return element.offsetWidth - paddingX - borderX;
+    return element.getBoundingClientRect().width - paddingX - borderX;
   };
   var getNumber = function getNumber(value) {
     return parseFloat(value) || 0;
@@ -67758,7 +67758,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.261";
+var version$1 = "1.1.263";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -86884,15 +86884,18 @@ var Icon = function Icon(props) {
   });
 };
 
-var styles$23 = {"vitro-workflow-route-task":"_workflow-route-task_vitro-workflow-route-task_s9KlfUa","vitro-workflow-route-task-mobile":"_workflow-route-task_vitro-workflow-route-task-mobile_1sahTAH","vitro-link":"_workflow-route-task_vitro-link_2tS5zX0","vitro-right":"_workflow-route-task_vitro-right_iJRgs4i","vitro-user-container":"_workflow-route-task_vitro-user-container_1gdonRr","vitro-user-list-container":"_workflow-route-task_vitro-user-list-container_33ry81_","vitro-end-date-fact-container":"_workflow-route-task_vitro-end-date-fact-container_2Lgf_dN","vitro-end-date-plan":"_workflow-route-task_vitro-end-date-plan_-UEwN9v","vitro-end-date-fact":"_workflow-route-task_vitro-end-date-fact_1ZRyVGc","vitro-expired":"_workflow-route-task_vitro-expired_8V5Pjkv","vitro-dropdown-button-container":"_workflow-route-task_vitro-dropdown-button-container_YymV91e","vitro-toggle-comment":"_workflow-route-task_vitro-toggle-comment_1RUySd9","vitro-toggle-comment-active":"_workflow-route-task_vitro-toggle-comment-active_27jENPe","vitro-assigned-to":"_workflow-route-task_vitro-assigned-to_11Ds0v5","vitro-assigned-to-fact":"_workflow-route-task_vitro-assigned-to-fact_2VHoXwX","vitro-assigned-to-list":"_workflow-route-task_vitro-assigned-to-list_2Wk_aFi","vitro-issue":"_workflow-route-task_vitro-issue_2h-dEkP","vitro-icon-container":"_workflow-route-task_vitro-icon-container_2_0Mn4f","vitro-status-icon":"_workflow-route-task_vitro-status-icon_2eFxk15","vitro-status-container":"_workflow-route-task_vitro-status-container_2mg3Tnc","vitro-comment":"_workflow-route-task_vitro-comment_QFyCoao","vitro-comment-container":"_workflow-route-task_vitro-comment-container_346FY3k","vitro-data-container":"_workflow-route-task_vitro-data-container_1xfMmR3","vitro-data-container-mobile":"_workflow-route-task_vitro-data-container-mobile_3ehoX9t","vitro-date-container":"_workflow-route-task_vitro-date-container_hSQMuDR"};
+var styles$23 = {"vitro-workflow-route-task-content":"_workflow-route-task_vitro-workflow-route-task-content_3ZW4dAP","vitro-workflow-route-task-content-mobile":"_workflow-route-task_vitro-workflow-route-task-content-mobile_2dWs1Ye","vitro-link":"_workflow-route-task_vitro-link_2tS5zX0","vitro-right":"_workflow-route-task_vitro-right_iJRgs4i","vitro-user-container":"_workflow-route-task_vitro-user-container_1gdonRr","vitro-user-list-container":"_workflow-route-task_vitro-user-list-container_33ry81_","vitro-end-date-fact-container":"_workflow-route-task_vitro-end-date-fact-container_2Lgf_dN","vitro-end-date-plan":"_workflow-route-task_vitro-end-date-plan_-UEwN9v","vitro-end-date-fact":"_workflow-route-task_vitro-end-date-fact_1ZRyVGc","vitro-expired":"_workflow-route-task_vitro-expired_8V5Pjkv","vitro-dropdown-button-container":"_workflow-route-task_vitro-dropdown-button-container_YymV91e","vitro-toggle-comment":"_workflow-route-task_vitro-toggle-comment_1RUySd9","vitro-toggle-comment-active":"_workflow-route-task_vitro-toggle-comment-active_27jENPe","vitro-assigned-to":"_workflow-route-task_vitro-assigned-to_11Ds0v5","vitro-assigned-to-fact":"_workflow-route-task_vitro-assigned-to-fact_2VHoXwX","vitro-assigned-to-list":"_workflow-route-task_vitro-assigned-to-list_2Wk_aFi","vitro-issue":"_workflow-route-task_vitro-issue_2h-dEkP","vitro-icon-container":"_workflow-route-task_vitro-icon-container_2_0Mn4f","vitro-status-icon":"_workflow-route-task_vitro-status-icon_2eFxk15","vitro-status-container":"_workflow-route-task_vitro-status-container_2mg3Tnc","vitro-comment":"_workflow-route-task_vitro-comment_QFyCoao","vitro-comment-container":"_workflow-route-task_vitro-comment-container_346FY3k","vitro-data-container":"_workflow-route-task_vitro-data-container_1xfMmR3","vitro-data-container-mobile":"_workflow-route-task_vitro-data-container-mobile_3ehoX9t","vitro-date-container":"_workflow-route-task_vitro-date-container_hSQMuDR","vitro-workflow-route-task":"_workflow-route-task_vitro-workflow-route-task_s9KlfUa","vitro-expand-collapse-button":"_workflow-route-task_vitro-expand-collapse-button_1OqxCow","vitro-expand-collapse-button-mobile":"_workflow-route-task_vitro-expand-collapse-button-mobile_3UhtY_W","vitro-expand-collapse-button-empty":"_workflow-route-task_vitro-expand-collapse-button-empty_28_AquD"};
 
-var WorkflowRouteTask = function WorkflowRouteTask(props) {
+var WorkflowRouteTaskContent = function WorkflowRouteTaskContent(props) {
   var _useState = React.useState(false),
     isCommentVisible = _useState[0],
     setIsCommentVisible = _useState[1];
   var _useState2 = React.useState(props.idWidth || 0),
     idWidth = _useState2[0],
     setIdWidth = _useState2[1];
+  var userContainerRef = React.useRef(null);
+  var assignedToFact = props.assignedToFact && (props.createUserShortFullName && props.assignedToFact.isUser !== false ? props.createUserShortFullName(props.assignedToFact.name) : props.assignedToFact.name);
+  var assignedTo = props.assignedTo && (props.createUserShortFullName && props.assignedTo.isUser !== false ? props.createUserShortFullName(props.assignedTo.name) : props.assignedTo.name);
   var date = React__default.createElement(React__default.Fragment, null, props.endDatePlan && React__default.createElement(FlexBox, {
     className: styles$23['vitro-end-date-plan'],
     gap: 4
@@ -86905,7 +86908,7 @@ var WorkflowRouteTask = function WorkflowRouteTask(props) {
   }, props.endDateFact)));
   return React__default.createElement(FlexBox, {
     gap: 8,
-    className: props.isMobileView ? styles$23['vitro-workflow-route-task-mobile'] : styles$23['vitro-workflow-route-task'],
+    className: props.isMobileView ? styles$23['vitro-workflow-route-task-content-mobile'] : styles$23['vitro-workflow-route-task-content'],
     isFullWidth: true
   }, React__default.createElement(FlexBox, {
     isColumn: true,
@@ -86913,8 +86916,14 @@ var WorkflowRouteTask = function WorkflowRouteTask(props) {
   }, React__default.createElement(FlexBox, {
     className: props.isMobileView ? styles$23['vitro-data-container-mobile'] : styles$23['vitro-data-container'],
     isFullWidth: true
-  }, React__default.createElement(Link, {
-    text: props.id,
+  }, props.isExpandEnabled ? props.children ? React__default.createElement(ExpandCollapseButton, {
+    onClick: props.onExpandClick,
+    isExpanded: props.isExpanded,
+    className: props.isMobileView ? styles$23['vitro-expand-collapse-button-mobile'] : styles$23['vitro-expand-collapse-button']
+  }) : React__default.createElement("div", {
+    className: styles$23['vitro-expand-collapse-button-empty']
+  }) : null, React__default.createElement(Link, {
+    text: props.itemId || props.id,
     href: props.url,
     className: styles$23['vitro-link'],
     ref: function ref(_ref) {
@@ -86937,7 +86946,12 @@ var WorkflowRouteTask = function WorkflowRouteTask(props) {
   }, React__default.createElement(Avatar, {
     userName: props.assignedToFact.name,
     image: props.assignedToFact.imageUrl
-  }), React__default.createElement("span", null, props.createUserShortFullName ? props.createUserShortFullName(props.assignedToFact.name) : props.assignedToFact.name))), !props.assignedToFact && props.assignedTo && React__default.createElement(FlexBox, {
+  }), React__default.createElement(ValueTooltip, {
+    containerRef: userContainerRef,
+    text: assignedToFact
+  }, React__default.createElement("span", {
+    ref: userContainerRef
+  }, assignedToFact)))), !props.assignedToFact && props.assignedTo && React__default.createElement(FlexBox, {
     className: styles$23['vitro-user-container'],
     gap: 4
   }, props.assignedToLabel ? props.assignedToLabel + CTRL.COLON : React__default.createElement(FlexBox, {
@@ -86950,7 +86964,12 @@ var WorkflowRouteTask = function WorkflowRouteTask(props) {
   }, React__default.createElement(Avatar, {
     userName: props.assignedTo.name,
     image: props.assignedTo.imageUrl
-  }), React__default.createElement("span", null, props.createUserShortFullName ? props.createUserShortFullName(props.assignedTo.name) : props.assignedTo.name))), React__default.createElement(FlexBox, {
+  }), React__default.createElement(ValueTooltip, {
+    containerRef: userContainerRef,
+    text: assignedTo
+  }, React__default.createElement("span", {
+    ref: userContainerRef
+  }, assignedTo)))), React__default.createElement(FlexBox, {
     className: styles$23['vitro-right']
   }, !props.isMobileView && date, props.isIssueButtonContainerVisible && React__default.createElement(FlexBox, {
     className: styles$23['vitro-icon-container'],
@@ -86990,7 +87009,7 @@ var WorkflowRouteTask = function WorkflowRouteTask(props) {
     },
     className: styles$23['vitro-date-container'],
     isFullWidth: true
-  }, date), props.assignedToList && props.assignedToList.length !== 0 && React__default.createElement(FlexBox, {
+  }, date), !props.assignedToFact && props.assignedToList && props.assignedToList.length !== 0 && React__default.createElement(FlexBox, {
     className: styles$23['vitro-user-list-container'],
     gap: 4,
     style: {
@@ -87013,7 +87032,7 @@ var WorkflowRouteTask = function WorkflowRouteTask(props) {
     }, React__default.createElement(Avatar, {
       userName: item.name,
       image: item.imageUrl
-    }), props.createUserShortFullName ? props.createUserShortFullName(item.name) : item.name);
+    }), props.createUserShortFullName && item.isUser !== false ? props.createUserShortFullName(item.name) : item.name);
   }))), props.comment && isCommentVisible && React__default.createElement(FlexBox, {
     className: styles$23['vitro-comment-container'],
     isFullWidth: true
@@ -87025,9 +87044,34 @@ var WorkflowRouteTask = function WorkflowRouteTask(props) {
   }))));
 };
 
-var styles$24 = {"vitro-disabled":"_workflow-route-step_vitro-disabled_3fS250E","vitro-right":"_workflow-route-step_vitro-right_g0dPprY","vitro-workflow-route-step-header":"_workflow-route-step_vitro-workflow-route-step-header_1p1OJgZ","vitro-workflow-route-step-header-mobile":"_workflow-route-step_vitro-workflow-route-step-header-mobile_1NqMXva","vitro-active":"_workflow-route-step_vitro-active_2Fa8NqQ","vitro-workflow-route-step":"_workflow-route-step_vitro-workflow-route-step_38f87gr","vitro-expand-collapse-button":"_workflow-route-step_vitro-expand-collapse-button_2SzZ9Iu","vitro-expand-collapse-button-mobile":"_workflow-route-step_vitro-expand-collapse-button-mobile_2y0xNA8","vitro-dropdown-button-container":"_workflow-route-step_vitro-dropdown-button-container_3jZhGMp","vitro-status-icon":"_workflow-route-step_vitro-status-icon_2vRq55-","vitro-name":"_workflow-route-step_vitro-name_1aPgc9j"};
+var WorkflowRouteTask = function WorkflowRouteTask(props) {
+  var _useState = React.useState(props.isExpanded || false),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  var onExpandClick = function onExpandClick(isExpanded) {
+    setIsExpanded(isExpanded);
+  };
+  if (!props.children && !props.isExpandEnabled) {
+    return React__default.createElement(WorkflowRouteTaskContent, Object.assign({}, props, {
+      isExpanded: isExpanded,
+      onExpandClick: onExpandClick
+    }));
+  }
+  return React__default.createElement(ExpandControlGroup, {
+    className: styles$23['vitro-workflow-route-task'],
+    isExpanded: isExpanded,
+    button: React__default.createElement(WorkflowRouteTaskContent, Object.assign({}, props, {
+      isExpanded: isExpanded,
+      onExpandClick: onExpandClick
+    }))
+  }, props.children);
+};
+
+var styles$24 = {"vitro-disabled":"_workflow-route-step_vitro-disabled_3fS250E","vitro-right":"_workflow-route-step_vitro-right_g0dPprY","vitro-workflow-route-step-header":"_workflow-route-step_vitro-workflow-route-step-header_1p1OJgZ","vitro-workflow-route-step-header-mobile":"_workflow-route-step_vitro-workflow-route-step-header-mobile_1NqMXva","vitro-active":"_workflow-route-step_vitro-active_2Fa8NqQ","vitro-workflow-route-step":"_workflow-route-step_vitro-workflow-route-step_38f87gr","vitro-expand-collapse-button":"_workflow-route-step_vitro-expand-collapse-button_2SzZ9Iu","vitro-expand-collapse-button-mobile":"_workflow-route-step_vitro-expand-collapse-button-mobile_2y0xNA8","vitro-expand-collapse-button-empty":"_workflow-route-step_vitro-expand-collapse-button-empty_1QmpQlW","vitro-dropdown-button-container":"_workflow-route-step_vitro-dropdown-button-container_3jZhGMp","vitro-status-icon":"_workflow-route-step_vitro-status-icon_2vRq55-","vitro-name":"_workflow-route-step_vitro-name_1aPgc9j"};
 
 var WorkflowRouteStepContent = function WorkflowRouteStepContent(props) {
+  var nameContainerRef = React.useRef(null);
+  var name = (props.index !== undefined ? props.index + CTRL.DOT + "\xA0" : CTRL.EMPTY) + props.name;
   if (props.isMobileView) {
     return React__default.createElement(FlexBox, {
       className: styles$24['vitro-workflow-route-step-content'],
@@ -87037,9 +87081,13 @@ var WorkflowRouteStepContent = function WorkflowRouteStepContent(props) {
     }, React__default.createElement(FlexBox, {
       gap: 4,
       isFullWidth: true
+    }, React__default.createElement(ValueTooltip, {
+      containerRef: nameContainerRef,
+      text: name
     }, React__default.createElement("span", {
-      className: styles$24['vitro-name']
-    }, props.index !== undefined && props.index + CTRL.DOT + "\xA0", props.name), React__default.createElement(FlexBox, {
+      className: styles$24['vitro-name'],
+      ref: nameContainerRef
+    }, name)), React__default.createElement(FlexBox, {
       className: styles$24['vitro-dropdown-button-container'] + CTRL.SPACE + styles$24['vitro-right']
     }, props.getDropdownItemList && !props.isDisabled && React__default.createElement(DropdownButton, {
       getItemList: props.getDropdownItemList,
@@ -87064,9 +87112,13 @@ var WorkflowRouteStepContent = function WorkflowRouteStepContent(props) {
   return React__default.createElement(FlexBox, {
     className: styles$24['vitro-workflow-route-step-content'],
     isFullWidth: true
+  }, React__default.createElement(ValueTooltip, {
+    containerRef: nameContainerRef,
+    text: name
   }, React__default.createElement("span", {
-    className: styles$24['vitro-name']
-  }, props.index !== undefined && props.index + CTRL.DOT + "\xA0", props.name), React__default.createElement(FlexBox, {
+    className: styles$24['vitro-name'],
+    ref: nameContainerRef
+  }, name)), React__default.createElement(FlexBox, {
     className: styles$24['vitro-right'],
     gap: 4
   }, props.status && (props.status.color ? React__default.createElement(Tooltip$1, {
@@ -87101,17 +87153,20 @@ var WorkflowRouteStep = function WorkflowRouteStep(props) {
     button: React__default.createElement(FlexBox, {
       className: (props.isMobileView ? styles$24['vitro-workflow-route-step-header-mobile'] : styles$24['vitro-workflow-route-step-header']) + (props.isActive ? CTRL.SPACE + styles$24['vitro-active'] : CTRL.EMPTY),
       gap: 4
-    }, React__default.createElement(ExpandCollapseButton, {
+    }, props.children ? React__default.createElement(ExpandCollapseButton, {
       onClick: onExpandClick,
       isExpanded: isExpanded,
       className: props.isMobileView ? styles$24['vitro-expand-collapse-button-mobile'] : styles$24['vitro-expand-collapse-button']
+    }) : React__default.createElement("div", {
+      className: styles$24['vitro-expand-collapse-button-empty']
     }), React__default.createElement(WorkflowRouteStepContent, Object.assign({}, props)))
   }, props.children);
 };
 
-var styles$25 = {"vitro-workflow-route":"_workflow-route_vitro-workflow-route_3dG_len","vitro-resolved":"_workflow-route_vitro-resolved_kJ_qzSx","vitro-right":"_workflow-route_vitro-right_2M1Zu0u","vitro-workflow-route-header":"_workflow-route_vitro-workflow-route-header_35BWBU5","vitro-workflow-route-header-mobile":"_workflow-route_vitro-workflow-route-header-mobile_2AvvUfH","vitro-active":"_workflow-route_vitro-active_1_97-zX","vitro-workflow-route-content":"_workflow-route_vitro-workflow-route-content_32GXb3u","vitro-name":"_workflow-route_vitro-name_28vFhFk","vitro-expand-collapse-button":"_workflow-route_vitro-expand-collapse-button_fnksjDH","vitro-expand-collapse-button-mobile":"_workflow-route_vitro-expand-collapse-button-mobile_2FBiUgU","vitro-dropdown-button-container":"_workflow-route_vitro-dropdown-button-container_1YxXjBP"};
+var styles$25 = {"vitro-workflow-route":"_workflow-route_vitro-workflow-route_3dG_len","vitro-resolved":"_workflow-route_vitro-resolved_kJ_qzSx","vitro-right":"_workflow-route_vitro-right_2M1Zu0u","vitro-workflow-route-header":"_workflow-route_vitro-workflow-route-header_35BWBU5","vitro-workflow-route-header-mobile":"_workflow-route_vitro-workflow-route-header-mobile_2AvvUfH","vitro-active":"_workflow-route_vitro-active_1_97-zX","vitro-workflow-route-content":"_workflow-route_vitro-workflow-route-content_32GXb3u","vitro-name":"_workflow-route_vitro-name_28vFhFk","vitro-expand-collapse-button":"_workflow-route_vitro-expand-collapse-button_fnksjDH","vitro-expand-collapse-button-mobile":"_workflow-route_vitro-expand-collapse-button-mobile_2FBiUgU","vitro-dropdown-button-container":"_workflow-route_vitro-dropdown-button-container_1YxXjBP","vitro-expand-collapse-button-empty":"_workflow-route_vitro-expand-collapse-button-empty_2dD9Q24"};
 
 var WorkflowRouteContent = function WorkflowRouteContent(props) {
+  var nameContainerRef = React.useRef(null);
   if (props.isMobileView) {
     var _props$status, _props$status2, _props$status3;
     return React__default.createElement(FlexBox, {
@@ -87122,9 +87177,13 @@ var WorkflowRouteContent = function WorkflowRouteContent(props) {
     }, React__default.createElement(FlexBox, {
       gap: 4,
       isFullWidth: true
+    }, React__default.createElement(ValueTooltip, {
+      text: props.name,
+      containerRef: nameContainerRef
     }, React__default.createElement("span", {
-      className: styles$25['vitro-name'] + (props.isResolved ? CTRL.SPACE + styles$25['vitro-resolved'] : CTRL.EMPTY)
-    }, props.name), React__default.createElement(FlexBox, {
+      className: styles$25['vitro-name'] + (props.isResolved ? CTRL.SPACE + styles$25['vitro-resolved'] : CTRL.EMPTY),
+      ref: nameContainerRef
+    }, props.name)), React__default.createElement(FlexBox, {
       className: styles$25['vitro-dropdown-button-container'] + CTRL.SPACE + styles$25['vitro-right']
     }, props.getDropdownItemList && !props.isResolved && React__default.createElement(DropdownButton, {
       getItemList: props.getDropdownItemList,
@@ -87141,10 +87200,14 @@ var WorkflowRouteContent = function WorkflowRouteContent(props) {
     className: styles$25['vitro-workflow-route-content'],
     gap: 6,
     isFullWidth: true
+  }, React__default.createElement(ValueTooltip, {
+    text: props.name,
+    containerRef: nameContainerRef
   }, React__default.createElement(Label, {
     text: props.name,
-    className: props.isResolved ? styles$25['vitro-resolved'] : CTRL.EMPTY
-  }), React__default.createElement(FlexBox, {
+    className: props.isResolved ? styles$25['vitro-resolved'] : CTRL.EMPTY,
+    ref: nameContainerRef
+  })), React__default.createElement(FlexBox, {
     className: styles$25['vitro-right'],
     gap: 4
   }, props.isResolved && props.status ? React__default.createElement(FlexBox, {
@@ -87173,10 +87236,12 @@ var WorkflowRoute = function WorkflowRoute(props) {
     button: React__default.createElement(FlexBox, {
       className: (props.isMobileView ? styles$25['vitro-workflow-route-header-mobile'] : styles$25['vitro-workflow-route-header']) + (props.isActive ? CTRL.SPACE + styles$25['vitro-active'] : CTRL.EMPTY),
       gap: 4
-    }, React__default.createElement(ExpandCollapseButton, {
+    }, props.children ? React__default.createElement(ExpandCollapseButton, {
       onClick: onExpandClick,
       isExpanded: isExpanded,
       className: props.isMobileView ? styles$25['vitro-expand-collapse-button-mobile'] : styles$25['vitro-expand-collapse-button']
+    }) : React__default.createElement("div", {
+      className: styles$25['vitro-expand-collapse-button-empty']
     }), React__default.createElement(WorkflowRouteContent, Object.assign({}, props)))
   }, props.children);
 };