carbon-addons-iot-react 5.15.1 → 5.16.0

package/es/components/PageWizard/PageWizard.js

@@ -67,7 +67,9 @@ var PageWizardPropTypes = {
   testId: PropTypes.string,
   /** Specify whether the progress steps should be split equally in size in the div */
   spaceEqually: PropTypes.bool,
-  stepWidth: PropTypes.number
+  stepWidth: PropTypes.number,
+  /** When true, all connector lines are highlighted blue to show progress */
+  highlightConnectorLinesToShowProgress: PropTypes.bool
 };
 var defaultProps = {
   children: [],
@@ -92,7 +94,8 @@ var defaultProps = {
   isClickable: false,
   testId: 'page-wizard',
   spaceEqually: false,
-  stepWidth: null
+  stepWidth: null,
+  highlightConnectorLinesToShowProgress: true
 };
 var PageWizard = function PageWizard(_ref) {
   var ch = _ref.children,
@@ -115,7 +118,8 @@ var PageWizard = function PageWizard(_ref) {
     isClickable = _ref.isClickable,
     testId = _ref.testId,
     spaceEqually = _ref.spaceEqually,
-    stepWidth = _ref.stepWidth;
+    stepWidth = _ref.stepWidth,
+    highlightConnectorLinesToShowProgress = _ref.highlightConnectorLinesToShowProgress;
   var children = ch.length ? ch : [ch];
   var steps = React__default.Children.map(children, function (step) {
     return step.props;
@@ -220,7 +224,8 @@ var PageWizard = function PageWizard(_ref) {
     isVerticalMode: isProgressIndicatorVertical,
     isClickable: isClickable,
     spaceEqually: spaceEqually,
-    stepWidth: stepWidth
+    stepWidth: stepWidth,
+    highlightConnectorLinesToShowProgress: highlightConnectorLinesToShowProgress
     // TODO: pass down the testId in v3 instead of falling back to the
     // default.
     // testId={`${testId}-progress-indicator`}
@@ -451,6 +456,17 @@ PageWizard.__docgenInfo = {
       },
       "required": false
     },
+    "highlightConnectorLinesToShowProgress": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "When true, all connector lines are highlighted blue to show progress",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "onClose": {
       "description": "action if the inline wizard is closed or canceled",
       "type": {

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -42,7 +42,8 @@ var ProgressStep = function ProgressStep(_ref) {
     subStep = _ref.subStep,
     spaceEqually = _ref.spaceEqually,
     pictogramName = _ref.pictogramName,
-    hasPictogram = _ref.hasPictogram;
+    hasPictogram = _ref.hasPictogram,
+    highlightConnectorLinesToShowProgress = _ref.highlightConnectorLinesToShowProgress;
   var accessible = isClickable && !disabled && !current;
   var handleClick = function handleClick() {
     if (onClick) {
@@ -115,7 +116,8 @@ var ProgressStep = function ProgressStep(_ref) {
     }, value);
   };
   var StepLine = function StepLine() {
-    var classes = classnames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--progress-step-line"), !complete && !subStep), "".concat(iotPrefix, "--progress-step-line--sub"), !complete && subStep), "".concat(iotPrefix, "--progress-step-line--complete"), complete && !subStep), "".concat(iotPrefix, "--progress-step-line--sub-complete"), complete && subStep));
+    var showComplete = complete && highlightConnectorLinesToShowProgress;
+    var classes = classnames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--progress-step-line"), !subStep && !showComplete), "".concat(iotPrefix, "--progress-step-line--sub"), subStep && !showComplete), "".concat(iotPrefix, "--progress-step-line--complete"), !subStep && showComplete), "".concat(iotPrefix, "--progress-step-line--sub-complete"), subStep && showComplete));
     return !lastItem ? /*#__PURE__*/React__default.createElement("div", {
       className: classes
     }) : null;
@@ -187,7 +189,9 @@ ProgressStep.propTypes = {
   onClick: PropTypes.func,
   spaceEqually: PropTypes.bool,
   pictogramName: PropTypes.string,
-  hasPictogram: PropTypes.bool
+  hasPictogram: PropTypes.bool,
+  /** When true, all connector lines are highlighted blue to show progress */
+  highlightConnectorLinesToShowProgress: PropTypes.bool
 };
 ProgressStep.defaultProps = {
   label: null,
@@ -209,7 +213,9 @@ ProgressStep.defaultProps = {
   onClick: null,
   spaceEqually: false,
   pictogramName: null,
-  hasPictogram: false
+  hasPictogram: false,
+  /** default false, all connector lines are highlighted grey to show progress */
+  highlightConnectorLinesToShowProgress: true
 };
 var ProgressIndicator = function ProgressIndicator(_ref2) {
   var className = _ref2.className,
@@ -221,7 +227,8 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
     isClickable = _ref2.isClickable,
     onClickItem = _ref2.onClickItem,
     testId = _ref2.testId,
-    spaceEqually = _ref2.spaceEqually;
+    spaceEqually = _ref2.spaceEqually,
+    highlightConnectorLinesToShowProgress = _ref2.highlightConnectorLinesToShowProgress;
   var _useState = useState(currentItemId || items[0].id),
     _useState2 = _slicedToArray(_useState, 2),
     currentStep = _useState2[0],
@@ -320,7 +327,8 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
       isClickable: isClickable,
       spaceEqually: spaceEqually,
       pictogramName: pictogramName,
-      hasPictogram: hasPictogram
+      hasPictogram: hasPictogram,
+      highlightConnectorLinesToShowProgress: highlightConnectorLinesToShowProgress
     });
   })) : null;
 };
@@ -343,7 +351,9 @@ ProgressIndicator.propTypes = {
   onClickItem: PropTypes.func,
   testId: PropTypes.string,
   /** Specify whether the progress steps should be split equally in size in the div */
-  spaceEqually: PropTypes.bool
+  spaceEqually: PropTypes.bool,
+  /** When true, all connector lines are highlighted blue to show progress */
+  highlightConnectorLinesToShowProgress: PropTypes.bool
 };
 ProgressIndicator.defaultProps = {
   className: null,
@@ -355,7 +365,9 @@ ProgressIndicator.defaultProps = {
   isClickable: false,
   onClickItem: null,
   testId: "".concat(iotPrefix, "--progress-indicator-testid"),
-  spaceEqually: false
+  spaceEqually: false,
+  /** default false, all connector lines are highlighted grey to show progress */
+  highlightConnectorLinesToShowProgress: true
 };
 ProgressIndicator.__docgenInfo = {
   "description": "",
@@ -506,6 +518,17 @@ ProgressIndicator.__docgenInfo = {
         "name": "bool"
       },
       "required": false
+    },
+    "highlightConnectorLinesToShowProgress": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "When true, all connector lines are highlighted blue to show progress",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
     }
   }
 };

package/es/components/Table/TableHead/TableHead.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import debounce from '../../../node_modules/lodash-es/debounce.js';
@@ -272,21 +271,27 @@ var TableHead = function TableHead(_ref) {
   };
   var onManualColumnResize = function onManualColumnResize(modifiedColumnWidths) {
     if (percentageMode) {
-      var modifiedColumns = _toConsumableArray(columns);
-      Object.keys(modifiedColumns).forEach(function (key) {
-        if (modifiedColumns[key].hasOwnProperty('width')) {
-          delete modifiedColumns[key].width;
-        }
-      });
+      // Measure current rendered widths BEFORE switching to pixel mode
+      // This prevents unused space by preserving actual column widths
+      var measuredWidths = measureColumnWidths();
 
-      // while Resizing setting all column width to default DEFAULT_COLUMN_WIDTH 150px
-      var columnPropInlcudingWidths = addMissingColumnWidths({
-        ordering: ordering,
-        columns: modifiedColumns,
-        currentColumnWidths: {}
+      // Convert measured widths directly to column format with pixel values
+      // This preserves the actual rendered widths instead of using defaults
+      var columnsWithMeasuredWidths = columns.map(function (col) {
+        var measured = measuredWidths.find(function (m) {
+          return m.id === col.id;
+        });
+        return _objectSpread(_objectSpread({}, col), {}, {
+          width: measured ? "".concat(measured.width, "px") : col.width
+        });
       });
-      var newColumnWidths = createNewWidthsMap(ordering, columnPropInlcudingWidths);
-      setCurrentColumnWidths(newColumnWidths);
+
+      // Create width map from columns with measured values, then apply user's resize
+      var newColumnWidths = createNewWidthsMap(ordering, columnsWithMeasuredWidths, modifiedColumnWidths);
+
+      // Update both state and notify parent component
+      // This ensures horizontal scrollbar appears if total width exceeds container
+      updateColumnWidths(newColumnWidths);
       setPercentageMode(false);
     } else {
       var _newColumnWidths = createNewWidthsMap(ordering, currentColumnWidths, modifiedColumnWidths);

package/lib/components/PageWizard/PageWizard.js

@@ -78,7 +78,9 @@ var PageWizardPropTypes = {
   testId: PropTypes__default.default.string,
   /** Specify whether the progress steps should be split equally in size in the div */
   spaceEqually: PropTypes__default.default.bool,
-  stepWidth: PropTypes__default.default.number
+  stepWidth: PropTypes__default.default.number,
+  /** When true, all connector lines are highlighted blue to show progress */
+  highlightConnectorLinesToShowProgress: PropTypes__default.default.bool
 };
 var defaultProps = {
   children: [],
@@ -103,7 +105,8 @@ var defaultProps = {
   isClickable: false,
   testId: 'page-wizard',
   spaceEqually: false,
-  stepWidth: null
+  stepWidth: null,
+  highlightConnectorLinesToShowProgress: true
 };
 var PageWizard = function PageWizard(_ref) {
   var ch = _ref.children,
@@ -126,7 +129,8 @@ var PageWizard = function PageWizard(_ref) {
     isClickable = _ref.isClickable,
     testId = _ref.testId,
     spaceEqually = _ref.spaceEqually,
-    stepWidth = _ref.stepWidth;
+    stepWidth = _ref.stepWidth,
+    highlightConnectorLinesToShowProgress = _ref.highlightConnectorLinesToShowProgress;
   var children = ch.length ? ch : [ch];
   var steps = React__default.default.Children.map(children, function (step) {
     return step.props;
@@ -231,7 +235,8 @@ var PageWizard = function PageWizard(_ref) {
     isVerticalMode: isProgressIndicatorVertical,
     isClickable: isClickable,
     spaceEqually: spaceEqually,
-    stepWidth: stepWidth
+    stepWidth: stepWidth,
+    highlightConnectorLinesToShowProgress: highlightConnectorLinesToShowProgress
     // TODO: pass down the testId in v3 instead of falling back to the
     // default.
     // testId={`${testId}-progress-indicator`}
@@ -462,6 +467,17 @@ PageWizard.__docgenInfo = {
       },
       "required": false
     },
+    "highlightConnectorLinesToShowProgress": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "When true, all connector lines are highlighted blue to show progress",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "onClose": {
       "description": "action if the inline wizard is closed or canceled",
       "type": {

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -71,7 +71,8 @@ var ProgressStep = function ProgressStep(_ref) {
     subStep = _ref.subStep,
     spaceEqually = _ref.spaceEqually,
     pictogramName = _ref.pictogramName,
-    hasPictogram = _ref.hasPictogram;
+    hasPictogram = _ref.hasPictogram,
+    highlightConnectorLinesToShowProgress = _ref.highlightConnectorLinesToShowProgress;
   var accessible = isClickable && !disabled && !current;
   var handleClick = function handleClick() {
     if (onClick) {
@@ -144,7 +145,8 @@ var ProgressStep = function ProgressStep(_ref) {
     }, value);
   };
   var StepLine = function StepLine() {
-    var classes = classnames__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--progress-step-line"), !complete && !subStep), "".concat(iotPrefix, "--progress-step-line--sub"), !complete && subStep), "".concat(iotPrefix, "--progress-step-line--complete"), complete && !subStep), "".concat(iotPrefix, "--progress-step-line--sub-complete"), complete && subStep));
+    var showComplete = complete && highlightConnectorLinesToShowProgress;
+    var classes = classnames__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--progress-step-line"), !subStep && !showComplete), "".concat(iotPrefix, "--progress-step-line--sub"), subStep && !showComplete), "".concat(iotPrefix, "--progress-step-line--complete"), !subStep && showComplete), "".concat(iotPrefix, "--progress-step-line--sub-complete"), subStep && showComplete));
     return !lastItem ? /*#__PURE__*/React__default.default.createElement("div", {
       className: classes
     }) : null;
@@ -216,7 +218,9 @@ ProgressStep.propTypes = {
   onClick: PropTypes__default.default.func,
   spaceEqually: PropTypes__default.default.bool,
   pictogramName: PropTypes__default.default.string,
-  hasPictogram: PropTypes__default.default.bool
+  hasPictogram: PropTypes__default.default.bool,
+  /** When true, all connector lines are highlighted blue to show progress */
+  highlightConnectorLinesToShowProgress: PropTypes__default.default.bool
 };
 ProgressStep.defaultProps = {
   label: null,
@@ -238,7 +242,9 @@ ProgressStep.defaultProps = {
   onClick: null,
   spaceEqually: false,
   pictogramName: null,
-  hasPictogram: false
+  hasPictogram: false,
+  /** default false, all connector lines are highlighted grey to show progress */
+  highlightConnectorLinesToShowProgress: true
 };
 var ProgressIndicator = function ProgressIndicator(_ref2) {
   var className = _ref2.className,
@@ -250,7 +256,8 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
     isClickable = _ref2.isClickable,
     onClickItem = _ref2.onClickItem,
     testId = _ref2.testId,
-    spaceEqually = _ref2.spaceEqually;
+    spaceEqually = _ref2.spaceEqually,
+    highlightConnectorLinesToShowProgress = _ref2.highlightConnectorLinesToShowProgress;
   var _useState = React.useState(currentItemId || items[0].id),
     _useState2 = _slicedToArray__default.default(_useState, 2),
     currentStep = _useState2[0],
@@ -349,7 +356,8 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
       isClickable: isClickable,
       spaceEqually: spaceEqually,
       pictogramName: pictogramName,
-      hasPictogram: hasPictogram
+      hasPictogram: hasPictogram,
+      highlightConnectorLinesToShowProgress: highlightConnectorLinesToShowProgress
     });
   })) : null;
 };
@@ -372,7 +380,9 @@ ProgressIndicator.propTypes = {
   onClickItem: PropTypes__default.default.func,
   testId: PropTypes__default.default.string,
   /** Specify whether the progress steps should be split equally in size in the div */
-  spaceEqually: PropTypes__default.default.bool
+  spaceEqually: PropTypes__default.default.bool,
+  /** When true, all connector lines are highlighted blue to show progress */
+  highlightConnectorLinesToShowProgress: PropTypes__default.default.bool
 };
 ProgressIndicator.defaultProps = {
   className: null,
@@ -384,7 +394,9 @@ ProgressIndicator.defaultProps = {
   isClickable: false,
   onClickItem: null,
   testId: "".concat(iotPrefix, "--progress-indicator-testid"),
-  spaceEqually: false
+  spaceEqually: false,
+  /** default false, all connector lines are highlighted grey to show progress */
+  highlightConnectorLinesToShowProgress: true
 };
 ProgressIndicator.__docgenInfo = {
   "description": "",
@@ -535,6 +547,17 @@ ProgressIndicator.__docgenInfo = {
         "name": "bool"
       },
       "required": false
+    },
+    "highlightConnectorLinesToShowProgress": {
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      },
+      "description": "When true, all connector lines are highlighted blue to show progress",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
     }
   }
 };

package/lib/components/Table/TableHead/TableHead.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var debounce = require('../../../node_modules/lodash-es/debounce.js');
@@ -49,7 +48,6 @@ var iconsReact = require('@carbon/icons-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
@@ -284,21 +282,27 @@ var TableHead = function TableHead(_ref) {
   };
   var onManualColumnResize = function onManualColumnResize(modifiedColumnWidths) {
     if (percentageMode) {
-      var modifiedColumns = _toConsumableArray__default.default(columns);
-      Object.keys(modifiedColumns).forEach(function (key) {
-        if (modifiedColumns[key].hasOwnProperty('width')) {
-          delete modifiedColumns[key].width;
-        }
-      });
+      // Measure current rendered widths BEFORE switching to pixel mode
+      // This prevents unused space by preserving actual column widths
+      var measuredWidths = measureColumnWidths();
 
-      // while Resizing setting all column width to default DEFAULT_COLUMN_WIDTH 150px
-      var columnPropInlcudingWidths = columnWidthUtilityFunctions.addMissingColumnWidths({
-        ordering: ordering,
-        columns: modifiedColumns,
-        currentColumnWidths: {}
+      // Convert measured widths directly to column format with pixel values
+      // This preserves the actual rendered widths instead of using defaults
+      var columnsWithMeasuredWidths = columns.map(function (col) {
+        var measured = measuredWidths.find(function (m) {
+          return m.id === col.id;
+        });
+        return _objectSpread(_objectSpread({}, col), {}, {
+          width: measured ? "".concat(measured.width, "px") : col.width
+        });
       });
-      var newColumnWidths = columnWidthUtilityFunctions.createNewWidthsMap(ordering, columnPropInlcudingWidths);
-      setCurrentColumnWidths(newColumnWidths);
+
+      // Create width map from columns with measured values, then apply user's resize
+      var newColumnWidths = columnWidthUtilityFunctions.createNewWidthsMap(ordering, columnsWithMeasuredWidths, modifiedColumnWidths);
+
+      // Update both state and notify parent component
+      // This ensures horizontal scrollbar appears if total width exceeds container
+      updateColumnWidths(newColumnWidths);
       setPercentageMode(false);
     } else {
       var _newColumnWidths = columnWidthUtilityFunctions.createNewWidthsMap(ordering, currentColumnWidths, modifiedColumnWidths);

package/package.json

@@ -353,7 +353,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "5.15.1",
+  "version": "5.16.0",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",

package/umd/carbon-addons-iot-react.js

@@ -234295,21 +234295,27 @@ ${formatRule(Codicon.menuSubmenu)}
     };
     var onManualColumnResize = function onManualColumnResize(modifiedColumnWidths) {
       if (percentageMode) {
-        var modifiedColumns = _toConsumableArray$2(columns);
-        Object.keys(modifiedColumns).forEach(function (key) {
-          if (modifiedColumns[key].hasOwnProperty('width')) {
-            delete modifiedColumns[key].width;
-          }
-        });
+        // Measure current rendered widths BEFORE switching to pixel mode
+        // This prevents unused space by preserving actual column widths
+        var measuredWidths = measureColumnWidths();
 
-        // while Resizing setting all column width to default DEFAULT_COLUMN_WIDTH 150px
-        var columnPropInlcudingWidths = addMissingColumnWidths({
-          ordering: ordering,
-          columns: modifiedColumns,
-          currentColumnWidths: {}
+        // Convert measured widths directly to column format with pixel values
+        // This preserves the actual rendered widths instead of using defaults
+        var columnsWithMeasuredWidths = columns.map(function (col) {
+          var measured = measuredWidths.find(function (m) {
+            return m.id === col.id;
+          });
+          return _objectSpread$1R(_objectSpread$1R({}, col), {}, {
+            width: measured ? "".concat(measured.width, "px") : col.width
+          });
         });
-        var newColumnWidths = createNewWidthsMap(ordering, columnPropInlcudingWidths);
-        setCurrentColumnWidths(newColumnWidths);
+
+        // Create width map from columns with measured values, then apply user's resize
+        var newColumnWidths = createNewWidthsMap(ordering, columnsWithMeasuredWidths, modifiedColumnWidths);
+
+        // Update both state and notify parent component
+        // This ensures horizontal scrollbar appears if total width exceeds container
+        updateColumnWidths(newColumnWidths);
         setPercentageMode(false);
       } else {
         var _newColumnWidths = createNewWidthsMap(ordering, currentColumnWidths, modifiedColumnWidths);
@@ -270018,7 +270024,8 @@ ${formatRule(Codicon.menuSubmenu)}
       subStep = _ref.subStep,
       spaceEqually = _ref.spaceEqually,
       pictogramName = _ref.pictogramName,
-      hasPictogram = _ref.hasPictogram;
+      hasPictogram = _ref.hasPictogram,
+      highlightConnectorLinesToShowProgress = _ref.highlightConnectorLinesToShowProgress;
     var accessible = isClickable && !disabled && !current;
     var handleClick = function handleClick() {
       if (onClick) {
@@ -270091,7 +270098,8 @@ ${formatRule(Codicon.menuSubmenu)}
       }, value);
     };
     var StepLine = function StepLine() {
-      var classes = classnames(_defineProperty$d(_defineProperty$d(_defineProperty$d(_defineProperty$d({}, "".concat(iotPrefix$1E, "--progress-step-line"), !complete && !subStep), "".concat(iotPrefix$1E, "--progress-step-line--sub"), !complete && subStep), "".concat(iotPrefix$1E, "--progress-step-line--complete"), complete && !subStep), "".concat(iotPrefix$1E, "--progress-step-line--sub-complete"), complete && subStep));
+      var showComplete = complete && highlightConnectorLinesToShowProgress;
+      var classes = classnames(_defineProperty$d(_defineProperty$d(_defineProperty$d(_defineProperty$d({}, "".concat(iotPrefix$1E, "--progress-step-line"), !subStep && !showComplete), "".concat(iotPrefix$1E, "--progress-step-line--sub"), subStep && !showComplete), "".concat(iotPrefix$1E, "--progress-step-line--complete"), !subStep && showComplete), "".concat(iotPrefix$1E, "--progress-step-line--sub-complete"), subStep && showComplete));
       return !lastItem ? /*#__PURE__*/React$1.createElement("div", {
         className: classes
       }) : null;
@@ -270163,7 +270171,9 @@ ${formatRule(Codicon.menuSubmenu)}
     onClick: PropTypes.func,
     spaceEqually: PropTypes.bool,
     pictogramName: PropTypes.string,
-    hasPictogram: PropTypes.bool
+    hasPictogram: PropTypes.bool,
+    /** When true, all connector lines are highlighted blue to show progress */
+    highlightConnectorLinesToShowProgress: PropTypes.bool
   };
   ProgressStep.defaultProps = {
     label: null,
@@ -270185,7 +270195,9 @@ ${formatRule(Codicon.menuSubmenu)}
     onClick: null,
     spaceEqually: false,
     pictogramName: null,
-    hasPictogram: false
+    hasPictogram: false,
+    /** default false, all connector lines are highlighted grey to show progress */
+    highlightConnectorLinesToShowProgress: true
   };
   var ProgressIndicator = function ProgressIndicator(_ref2) {
     var className = _ref2.className,
@@ -270197,7 +270209,8 @@ ${formatRule(Codicon.menuSubmenu)}
       isClickable = _ref2.isClickable,
       onClickItem = _ref2.onClickItem,
       testId = _ref2.testId,
-      spaceEqually = _ref2.spaceEqually;
+      spaceEqually = _ref2.spaceEqually,
+      highlightConnectorLinesToShowProgress = _ref2.highlightConnectorLinesToShowProgress;
     var _useState = React$1.useState(currentItemId || items[0].id),
       _useState2 = _slicedToArray$9(_useState, 2),
       currentStep = _useState2[0],
@@ -270296,7 +270309,8 @@ ${formatRule(Codicon.menuSubmenu)}
         isClickable: isClickable,
         spaceEqually: spaceEqually,
         pictogramName: pictogramName,
-        hasPictogram: hasPictogram
+        hasPictogram: hasPictogram,
+        highlightConnectorLinesToShowProgress: highlightConnectorLinesToShowProgress
       });
     })) : null;
   };
@@ -270319,7 +270333,9 @@ ${formatRule(Codicon.menuSubmenu)}
     onClickItem: PropTypes.func,
     testId: PropTypes.string,
     /** Specify whether the progress steps should be split equally in size in the div */
-    spaceEqually: PropTypes.bool
+    spaceEqually: PropTypes.bool,
+    /** When true, all connector lines are highlighted blue to show progress */
+    highlightConnectorLinesToShowProgress: PropTypes.bool
   };
   ProgressIndicator.defaultProps = {
     className: null,
@@ -270331,7 +270347,9 @@ ${formatRule(Codicon.menuSubmenu)}
     isClickable: false,
     onClickItem: null,
     testId: "".concat(iotPrefix$1E, "--progress-indicator-testid"),
-    spaceEqually: false
+    spaceEqually: false,
+    /** default false, all connector lines are highlighted grey to show progress */
+    highlightConnectorLinesToShowProgress: true
   };
   ProgressIndicator.__docgenInfo = {
     "description": "",
@@ -270482,6 +270500,17 @@ ${formatRule(Codicon.menuSubmenu)}
           "name": "bool"
         },
         "required": false
+      },
+      "highlightConnectorLinesToShowProgress": {
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        },
+        "description": "When true, all connector lines are highlighted blue to show progress",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
       }
     }
   };
@@ -342786,7 +342815,9 @@ ${formatRule(Codicon.menuSubmenu)}
     testId: PropTypes.string,
     /** Specify whether the progress steps should be split equally in size in the div */
     spaceEqually: PropTypes.bool,
-    stepWidth: PropTypes.number
+    stepWidth: PropTypes.number,
+    /** When true, all connector lines are highlighted blue to show progress */
+    highlightConnectorLinesToShowProgress: PropTypes.bool
   };
   var defaultProps$r = {
     children: [],
@@ -342811,7 +342842,8 @@ ${formatRule(Codicon.menuSubmenu)}
     isClickable: false,
     testId: 'page-wizard',
     spaceEqually: false,
-    stepWidth: null
+    stepWidth: null,
+    highlightConnectorLinesToShowProgress: true
   };
   var PageWizard = function PageWizard(_ref) {
     var ch = _ref.children,
@@ -342834,7 +342866,8 @@ ${formatRule(Codicon.menuSubmenu)}
       isClickable = _ref.isClickable,
       testId = _ref.testId,
       spaceEqually = _ref.spaceEqually,
-      stepWidth = _ref.stepWidth;
+      stepWidth = _ref.stepWidth,
+      highlightConnectorLinesToShowProgress = _ref.highlightConnectorLinesToShowProgress;
     var children = ch.length ? ch : [ch];
     var steps = React$1.Children.map(children, function (step) {
       return step.props;
@@ -342939,7 +342972,8 @@ ${formatRule(Codicon.menuSubmenu)}
       isVerticalMode: isProgressIndicatorVertical,
       isClickable: isClickable,
       spaceEqually: spaceEqually,
-      stepWidth: stepWidth
+      stepWidth: stepWidth,
+      highlightConnectorLinesToShowProgress: highlightConnectorLinesToShowProgress
       // TODO: pass down the testId in v3 instead of falling back to the
       // default.
       // testId={`${testId}-progress-indicator`}
@@ -343170,6 +343204,17 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "highlightConnectorLinesToShowProgress": {
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        },
+        "description": "When true, all connector lines are highlighted blue to show progress",
+        "type": {
+          "name": "bool"
+        },
+        "required": false
+      },
       "onClose": {
         "description": "action if the inline wizard is closed or canceled",
         "type": {