@atlaskit/progress-tracker 8.8.1 → 8.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/progress-tracker
 
+## 8.9.0
+
+### Minor Changes
+
+- [`2d1da097bd763`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2d1da097bd763) -
+  DSP-20687 removing usage of findDOMNode in react-transition-group behind ff
+
+## 8.8.2
+
+### Patch Changes
+
+- [#134667](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134667)
+  [`7e834d0456744`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7e834d0456744) -
+  Converting ProgressTracker component from class component to functional component
+
 ## 8.8.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "ProgressTracker", {
   enumerable: true,
   get: function get() {
-    return _progressTracker.default;
+    return _progressTrackerFacade.default;
   }
 });
-var _progressTracker = _interopRequireDefault(require("./progress-tracker"));
+var _progressTrackerFacade = _interopRequireDefault(require("./progress-tracker-facade"));

package/dist/cjs/internal/stage.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -15,6 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactTransitionGroup = require("react-transition-group");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _bar = _interopRequireDefault(require("./bar"));
 var _constants = require("./constants");
@@ -58,6 +60,9 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
     var _this;
     (0, _classCallCheck2.default)(this, ProgressTrackerStage);
     _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nodeRefMarker", /*#__PURE__*/(0, _react.createRef)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nodeRefBar", /*#__PURE__*/(0, _react.createRef)());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nodeRefTitle", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEntered", function () {
       _this.setState({
         transitioning: false,
@@ -113,30 +118,36 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
         "aria-current": ariaCurrent
       }, (0, _react2.jsx)(_primitives.Box, {
         xcss: listItemContentStyles
-      }, (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
+      }, (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, (0, _react2.jsx)(_marker.default, {
+      }, (0, _platformFeatureFlags.fg)('platform-design-system-dsp-20687-transition-group') && {
+        nodeRef: this.nodeRefMarker
+      }), (0, _react2.jsx)(_marker.default, {
         testId: testId && "".concat(testId, "-marker")
-      })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
+      })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, (0, _react2.jsx)(_bar.default, {
+      }, (0, _platformFeatureFlags.fg)('platform-design-system-dsp-20687-transition-group') && {
+        nodeRef: this.nodeRefBar
+      }), (0, _react2.jsx)(_bar.default, {
         testId: testId && "".concat(testId, "-bar"),
         percentageComplete: item.percentageComplete
-      })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
+      })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, (0, _react2.jsx)("div", {
+      }, (0, _platformFeatureFlags.fg)('platform-design-system-dsp-20687-transition-group') && {
+        nodeRef: this.nodeRefTitle
+      }), (0, _react2.jsx)("div", {
         css: titleStyles,
         style: {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/cjs/progress-tracker-facade.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProgressTrackerFacade = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _progressTracker = _interopRequireDefault(require("./progress-tracker"));
+var _progressTrackerNew = _interopRequireDefault(require("./progress-tracker-new"));
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+/**
+ * `ProgressTrackerFacade` is a component that conditionally renders either a new functional ProgressTracker component or
+ *  class based ProgressTracker component based on a feature flag.
+ *
+ */
+var ProgressTrackerFacade = exports.ProgressTrackerFacade = function ProgressTrackerFacade(_ref) {
+  var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
+  var useNewProgressTracker = (0, _platformFeatureFlags.fg)('platform-progress-tracker-functional-facade');
+  return useNewProgressTracker ? (0, _react.jsx)(_progressTrackerNew.default, props) : (0, _react.jsx)(_progressTracker.default, props);
+};
+var _default = exports.default = ProgressTrackerFacade;

package/dist/cjs/progress-tracker-new.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _constants = require("./constants");
+var _constants2 = require("./internal/constants");
+var _link = _interopRequireDefault(require("./internal/link"));
+var _stage = _interopRequireDefault(require("./internal/stage"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var containerStyles = (0, _react2.css)({
+  display: 'grid',
+  width: '100%',
+  margin: '0 auto',
+  padding: "var(--ds-space-0, 0px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  gap: "var(".concat(_constants2.varSpacing, ")"),
+  listStyleType: 'none',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&&': {
+    marginBlockStart: "var(--ds-space-500, 40px)"
+  }
+});
+/**
+ * __Progress tracker__
+ *
+ * A progress tracker displays the steps and progress through a journey.
+ *
+ * - [Examples](https://atlassian.design/components/progress-tracker/examples)
+ * - [Code](https://atlassian.design/components/progress-tracker/code)
+ * - [Usage](https://atlassian.design/components/progress-tracker/usage)
+ */
+var ProgressTracker = function ProgressTracker(_ref) {
+  var _listInlineStyles;
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'cosy' : _ref$spacing,
+    _ref$render = _ref.render,
+    render = _ref$render === void 0 ? {
+      // Anchor content is coming from another location
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      link: function link(_ref2) {
+        var item = _ref2.item;
+        return (0, _react2.jsx)(_link.default, item);
+      }
+    } : _ref$render,
+    _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? true : _ref$animated,
+    testId = _ref.testId,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Progress' : _ref$label;
+  var prevItems = (0, _react.useRef)(items.map(function (stage) {
+    return _objectSpread(_objectSpread({}, stage), {}, {
+      percentageComplete: 0
+    });
+  }));
+  var previousStages = items.map(function (stage) {
+    var _prevItems$current;
+    var oldStage = (_prevItems$current = prevItems.current) === null || _prevItems$current === void 0 ? void 0 : _prevItems$current.find(function (st) {
+      return st.id === stage.id;
+    });
+    return !!oldStage ? oldStage : stage;
+  });
+  (0, _react.useEffect)(function () {
+    prevItems.current = items;
+  }, [items]);
+  var progressChanges = items.filter(function (stage, index) {
+    return stage.percentageComplete !== previousStages[index].percentageComplete;
+  }).length;
+  var totalStepsForward = items.filter(function (stage, index) {
+    return stage.percentageComplete > previousStages[index].percentageComplete;
+  }).length;
+  var totalStepsBack = items.filter(function (stage, index) {
+    return stage.percentageComplete < previousStages[index].percentageComplete;
+  }).length;
+  var stepsForward = totalStepsForward;
+  var stepsBack = totalStepsBack;
+  var progressItems = items.map(function (stage, index) {
+    var transitionSpeed = 0;
+    var transitionDelay = 0;
+    var transitionEasing = progressChanges > 1 ? 'linear' : _constants2.ANIMATION_EASE_OUT;
+    if (animated) {
+      transitionSpeed = progressChanges > 1 ? _constants2.LINEAR_TRANSITION_SPEED : _constants2.TRANSITION_SPEED;
+      if (stage.percentageComplete < previousStages[index].percentageComplete) {
+        /**
+         * Load each transition sequentially in reverse.
+         */
+        transitionDelay = (stepsBack - 1) * transitionSpeed;
+        stepsBack -= 1;
+      } else if (stage.percentageComplete > previousStages[index].percentageComplete) {
+        /**
+         * Load each transition sequentially.
+         */
+        transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
+        stepsForward -= 1;
+      }
+    }
+    return (0, _react2.jsx)(_stage.default, {
+      transitionSpeed: transitionSpeed,
+      transitionDelay: transitionDelay,
+      transitionEasing: transitionEasing,
+      key: stage.id,
+      item: stage,
+      render: render
+    });
+  });
+  var listInlineStyles = (_listInlineStyles = {
+    gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
+  }, (0, _defineProperty2.default)(_listInlineStyles, _constants2.varSpacing, _constants.spacing[spacing]), (0, _defineProperty2.default)(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
+  return (0, _react2.jsx)("ul", {
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: listInlineStyles,
+    css: containerStyles,
+    "aria-label": label
+  }, progressItems);
+};
+var _default = exports.default = ProgressTracker;

package/dist/es2019/index.js

@@ -1 +1 @@
-export { default as ProgressTracker } from './progress-tracker';
+export { default as ProgressTracker } from './progress-tracker-facade';

package/dist/es2019/internal/stage.js

@@ -1,14 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { PureComponent } from 'react';
+import { createRef, PureComponent } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import ProgressBar from './bar';
 import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
@@ -41,6 +43,9 @@ const titleStyles = css({
 export default class ProgressTrackerStage extends PureComponent {
   constructor(props) {
     super(props);
+    _defineProperty(this, "nodeRefMarker", /*#__PURE__*/createRef());
+    _defineProperty(this, "nodeRefBar", /*#__PURE__*/createRef());
+    _defineProperty(this, "nodeRefTitle", /*#__PURE__*/createRef());
     _defineProperty(this, "onEntered", () => {
       this.setState({
         transitioning: false,
@@ -96,30 +101,36 @@ export default class ProgressTrackerStage extends PureComponent {
       "aria-current": ariaCurrent
     }, jsx(Box, {
       xcss: listItemContentStyles
-    }, jsx(CSSTransition, {
+    }, jsx(CSSTransition, _extends({
       appear: true,
       in: this.state.transitioning,
       onEntered: this.onEntered,
       timeout: transitionDelay + transitionSpeed,
       classNames: "fade"
-    }, jsx(ProgressMarker, {
+    }, fg('platform-design-system-dsp-20687-transition-group') && {
+      nodeRef: this.nodeRefMarker
+    }), jsx(ProgressMarker, {
       testId: testId && `${testId}-marker`
-    })), jsx(CSSTransition, {
+    })), jsx(CSSTransition, _extends({
       appear: true,
       in: this.state.transitioning,
       onEntered: this.onEntered,
       timeout: transitionDelay + transitionSpeed,
       classNames: "fade"
-    }, jsx(ProgressBar, {
+    }, fg('platform-design-system-dsp-20687-transition-group') && {
+      nodeRef: this.nodeRefBar
+    }), jsx(ProgressBar, {
       testId: testId && `${testId}-bar`,
       percentageComplete: item.percentageComplete
-    })), jsx(CSSTransition, {
+    })), jsx(CSSTransition, _extends({
       appear: true,
       in: this.state.transitioning,
       onEntered: this.onEntered,
       timeout: transitionDelay + transitionSpeed,
       classNames: "fade"
-    }, jsx("div", {
+    }, fg('platform-design-system-dsp-20687-transition-group') && {
+      nodeRef: this.nodeRefTitle
+    }), jsx("div", {
       css: titleStyles,
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/es2019/progress-tracker-facade.js

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import OldProgressTracker from './progress-tracker';
+import NewProgressTracker from './progress-tracker-new';
+/**
+ * `ProgressTrackerFacade` is a component that conditionally renders either a new functional ProgressTracker component or
+ *  class based ProgressTracker component based on a feature flag.
+ *
+ */
+export const ProgressTrackerFacade = ({
+  ...props
+}) => {
+  const useNewProgressTracker = fg('platform-progress-tracker-functional-facade');
+  return useNewProgressTracker ? jsx(NewProgressTracker, props) : jsx(OldProgressTracker, props);
+};
+export default ProgressTrackerFacade;

package/dist/es2019/progress-tracker-new.js

@@ -0,0 +1,110 @@
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { spacing as spacingOptions } from './constants';
+import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
+import Link from './internal/link';
+import Stage from './internal/stage';
+const containerStyles = css({
+  display: 'grid',
+  width: '100%',
+  margin: '0 auto',
+  padding: "var(--ds-space-0, 0px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  gap: `var(${varSpacing})`,
+  listStyleType: 'none',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&&': {
+    marginBlockStart: "var(--ds-space-500, 40px)"
+  }
+});
+/**
+ * __Progress tracker__
+ *
+ * A progress tracker displays the steps and progress through a journey.
+ *
+ * - [Examples](https://atlassian.design/components/progress-tracker/examples)
+ * - [Code](https://atlassian.design/components/progress-tracker/code)
+ * - [Usage](https://atlassian.design/components/progress-tracker/usage)
+ */
+const ProgressTracker = ({
+  items = [],
+  spacing = 'cosy',
+  render = {
+    // Anchor content is coming from another location
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
+    link: ({
+      item
+    }) => jsx(Link, item)
+  },
+  animated = true,
+  testId,
+  label = 'Progress'
+}) => {
+  const prevItems = useRef(items.map(stage => ({
+    ...stage,
+    percentageComplete: 0
+  })));
+  const previousStages = items.map(stage => {
+    var _prevItems$current;
+    const oldStage = (_prevItems$current = prevItems.current) === null || _prevItems$current === void 0 ? void 0 : _prevItems$current.find(st => st.id === stage.id);
+    return !!oldStage ? oldStage : stage;
+  });
+  useEffect(() => {
+    prevItems.current = items;
+  }, [items]);
+  const progressChanges = items.filter((stage, index) => stage.percentageComplete !== previousStages[index].percentageComplete).length;
+  const totalStepsForward = items.filter((stage, index) => stage.percentageComplete > previousStages[index].percentageComplete).length;
+  const totalStepsBack = items.filter((stage, index) => stage.percentageComplete < previousStages[index].percentageComplete).length;
+  let stepsForward = totalStepsForward;
+  let stepsBack = totalStepsBack;
+  const progressItems = items.map((stage, index) => {
+    let transitionSpeed = 0;
+    let transitionDelay = 0;
+    const transitionEasing = progressChanges > 1 ? 'linear' : ANIMATION_EASE_OUT;
+    if (animated) {
+      transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
+      if (stage.percentageComplete < previousStages[index].percentageComplete) {
+        /**
+         * Load each transition sequentially in reverse.
+         */
+        transitionDelay = (stepsBack - 1) * transitionSpeed;
+        stepsBack -= 1;
+      } else if (stage.percentageComplete > previousStages[index].percentageComplete) {
+        /**
+         * Load each transition sequentially.
+         */
+        transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
+        stepsForward -= 1;
+      }
+    }
+    return jsx(Stage, {
+      transitionSpeed: transitionSpeed,
+      transitionDelay: transitionDelay,
+      transitionEasing: transitionEasing,
+      key: stage.id,
+      item: stage,
+      render: render
+    });
+  });
+  const listInlineStyles = {
+    gridTemplateColumns: `repeat(${items.length}, 1fr)`,
+    [varSpacing]: spacingOptions[spacing],
+    maxWidth: 8 * 10 * items.length * 2
+  };
+  return jsx("ul", {
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: listInlineStyles,
+    css: containerStyles,
+    "aria-label": label
+  }, progressItems);
+};
+export default ProgressTracker;

package/dist/esm/index.js

@@ -1 +1 @@
-export { default as ProgressTracker } from './progress-tracker';
+export { default as ProgressTracker } from './progress-tracker-facade';

package/dist/esm/internal/stage.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -14,11 +15,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { PureComponent } from 'react';
+import { createRef, PureComponent } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import ProgressBar from './bar';
 import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
@@ -55,6 +57,9 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
     var _this;
     _classCallCheck(this, ProgressTrackerStage);
     _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "nodeRefMarker", /*#__PURE__*/createRef());
+    _defineProperty(_assertThisInitialized(_this), "nodeRefBar", /*#__PURE__*/createRef());
+    _defineProperty(_assertThisInitialized(_this), "nodeRefTitle", /*#__PURE__*/createRef());
     _defineProperty(_assertThisInitialized(_this), "onEntered", function () {
       _this.setState({
         transitioning: false,
@@ -110,30 +115,36 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
         "aria-current": ariaCurrent
       }, jsx(Box, {
         xcss: listItemContentStyles
-      }, jsx(CSSTransition, {
+      }, jsx(CSSTransition, _extends({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, jsx(ProgressMarker, {
+      }, fg('platform-design-system-dsp-20687-transition-group') && {
+        nodeRef: this.nodeRefMarker
+      }), jsx(ProgressMarker, {
         testId: testId && "".concat(testId, "-marker")
-      })), jsx(CSSTransition, {
+      })), jsx(CSSTransition, _extends({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, jsx(ProgressBar, {
+      }, fg('platform-design-system-dsp-20687-transition-group') && {
+        nodeRef: this.nodeRefBar
+      }), jsx(ProgressBar, {
         testId: testId && "".concat(testId, "-bar"),
         percentageComplete: item.percentageComplete
-      })), jsx(CSSTransition, {
+      })), jsx(CSSTransition, _extends({
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, jsx("div", {
+      }, fg('platform-design-system-dsp-20687-transition-group') && {
+        nodeRef: this.nodeRefTitle
+      }), jsx("div", {
         css: titleStyles,
         style: {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/esm/progress-tracker-facade.js

@@ -0,0 +1,22 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import OldProgressTracker from './progress-tracker';
+import NewProgressTracker from './progress-tracker-new';
+/**
+ * `ProgressTrackerFacade` is a component that conditionally renders either a new functional ProgressTracker component or
+ *  class based ProgressTracker component based on a feature flag.
+ *
+ */
+export var ProgressTrackerFacade = function ProgressTrackerFacade(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  var useNewProgressTracker = fg('platform-progress-tracker-functional-facade');
+  return useNewProgressTracker ? jsx(NewProgressTracker, props) : jsx(OldProgressTracker, props);
+};
+export default ProgressTrackerFacade;

package/dist/esm/progress-tracker-new.js

@@ -0,0 +1,126 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { spacing as spacingOptions } from './constants';
+import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
+import Link from './internal/link';
+import Stage from './internal/stage';
+var containerStyles = css({
+  display: 'grid',
+  width: '100%',
+  margin: '0 auto',
+  padding: "var(--ds-space-0, 0px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  gap: "var(".concat(varSpacing, ")"),
+  listStyleType: 'none',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&&': {
+    marginBlockStart: "var(--ds-space-500, 40px)"
+  }
+});
+/**
+ * __Progress tracker__
+ *
+ * A progress tracker displays the steps and progress through a journey.
+ *
+ * - [Examples](https://atlassian.design/components/progress-tracker/examples)
+ * - [Code](https://atlassian.design/components/progress-tracker/code)
+ * - [Usage](https://atlassian.design/components/progress-tracker/usage)
+ */
+var ProgressTracker = function ProgressTracker(_ref) {
+  var _listInlineStyles;
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'cosy' : _ref$spacing,
+    _ref$render = _ref.render,
+    render = _ref$render === void 0 ? {
+      // Anchor content is coming from another location
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      link: function link(_ref2) {
+        var item = _ref2.item;
+        return jsx(Link, item);
+      }
+    } : _ref$render,
+    _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? true : _ref$animated,
+    testId = _ref.testId,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Progress' : _ref$label;
+  var prevItems = useRef(items.map(function (stage) {
+    return _objectSpread(_objectSpread({}, stage), {}, {
+      percentageComplete: 0
+    });
+  }));
+  var previousStages = items.map(function (stage) {
+    var _prevItems$current;
+    var oldStage = (_prevItems$current = prevItems.current) === null || _prevItems$current === void 0 ? void 0 : _prevItems$current.find(function (st) {
+      return st.id === stage.id;
+    });
+    return !!oldStage ? oldStage : stage;
+  });
+  useEffect(function () {
+    prevItems.current = items;
+  }, [items]);
+  var progressChanges = items.filter(function (stage, index) {
+    return stage.percentageComplete !== previousStages[index].percentageComplete;
+  }).length;
+  var totalStepsForward = items.filter(function (stage, index) {
+    return stage.percentageComplete > previousStages[index].percentageComplete;
+  }).length;
+  var totalStepsBack = items.filter(function (stage, index) {
+    return stage.percentageComplete < previousStages[index].percentageComplete;
+  }).length;
+  var stepsForward = totalStepsForward;
+  var stepsBack = totalStepsBack;
+  var progressItems = items.map(function (stage, index) {
+    var transitionSpeed = 0;
+    var transitionDelay = 0;
+    var transitionEasing = progressChanges > 1 ? 'linear' : ANIMATION_EASE_OUT;
+    if (animated) {
+      transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
+      if (stage.percentageComplete < previousStages[index].percentageComplete) {
+        /**
+         * Load each transition sequentially in reverse.
+         */
+        transitionDelay = (stepsBack - 1) * transitionSpeed;
+        stepsBack -= 1;
+      } else if (stage.percentageComplete > previousStages[index].percentageComplete) {
+        /**
+         * Load each transition sequentially.
+         */
+        transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
+        stepsForward -= 1;
+      }
+    }
+    return jsx(Stage, {
+      transitionSpeed: transitionSpeed,
+      transitionDelay: transitionDelay,
+      transitionEasing: transitionEasing,
+      key: stage.id,
+      item: stage,
+      render: render
+    });
+  });
+  var listInlineStyles = (_listInlineStyles = {
+    gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
+  }, _defineProperty(_listInlineStyles, varSpacing, spacingOptions[spacing]), _defineProperty(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
+  return jsx("ul", {
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: listInlineStyles,
+    css: containerStyles,
+    "aria-label": label
+  }, progressItems);
+};
+export default ProgressTracker;

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export { default as ProgressTracker } from './progress-tracker';
+export { default as ProgressTracker } from './progress-tracker-facade';
 export type { ProgressTrackerProps } from './progress-tracker';
 export type { Stages, Stage } from './types';

package/dist/types/internal/stage.d.ts

@@ -12,6 +12,9 @@ interface State {
 }
 export type { ProgressTrackerStageProps };
 export default class ProgressTrackerStage extends PureComponent<ProgressTrackerStageProps, State> {
+    nodeRefMarker: import("react").RefObject<HTMLElement>;
+    nodeRefBar: import("react").RefObject<HTMLElement>;
+    nodeRefTitle: import("react").RefObject<HTMLElement>;
     constructor(props: ProgressTrackerStageProps);
     UNSAFE_componentWillMount(): void;
     UNSAFE_componentWillReceiveProps(): void;

package/dist/types/progress-tracker-facade.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { type ProgressTrackerProps as OldProgressTrackerProps } from './progress-tracker';
+import { type ProgressTrackerProps as NewProgressTrackerProps } from './progress-tracker-new';
+type ProgressTrackerProps = NewProgressTrackerProps | OldProgressTrackerProps;
+/**
+ * `ProgressTrackerFacade` is a component that conditionally renders either a new functional ProgressTracker component or
+ *  class based ProgressTracker component based on a feature flag.
+ *
+ */
+export declare const ProgressTrackerFacade: ({ ...props }: ProgressTrackerProps) => jsx.JSX.Element;
+export default ProgressTrackerFacade;

package/dist/types/progress-tracker-new.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type FC } from 'react';
+import type { ProgressTrackerStageRenderProp, Spacing, Stages } from './types';
+export interface ProgressTrackerProps {
+    /**
+     * Ordered list of stage data.
+     */
+    items: Stages;
+    /**
+     * Sets the amount of spacing between the steps.
+     */
+    spacing?: Spacing;
+    /**
+     * Render prop to specify custom implementations of components.
+     */
+    render?: ProgressTrackerStageRenderProp;
+    /**
+     * Turns off transition animations if set to false.
+     */
+    animated?: boolean;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Use this to provide an aria-label for the overall progress tracker, so that people who use assistive technology get an overview of the tracker's purpose. For example, "Sign up progress".
+     */
+    label?: string;
+}
+/**
+ * __Progress tracker__
+ *
+ * A progress tracker displays the steps and progress through a journey.
+ *
+ * - [Examples](https://atlassian.design/components/progress-tracker/examples)
+ * - [Code](https://atlassian.design/components/progress-tracker/code)
+ * - [Usage](https://atlassian.design/components/progress-tracker/usage)
+ */
+declare const ProgressTracker: FC<ProgressTrackerProps>;
+export default ProgressTracker;

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,3 @@
-export { default as ProgressTracker } from './progress-tracker';
+export { default as ProgressTracker } from './progress-tracker-facade';
 export type { ProgressTrackerProps } from './progress-tracker';
 export type { Stages, Stage } from './types';

package/dist/types-ts4.5/internal/stage.d.ts

@@ -12,6 +12,9 @@ interface State {
 }
 export type { ProgressTrackerStageProps };
 export default class ProgressTrackerStage extends PureComponent<ProgressTrackerStageProps, State> {
+    nodeRefMarker: import("react").RefObject<HTMLElement>;
+    nodeRefBar: import("react").RefObject<HTMLElement>;
+    nodeRefTitle: import("react").RefObject<HTMLElement>;
     constructor(props: ProgressTrackerStageProps);
     UNSAFE_componentWillMount(): void;
     UNSAFE_componentWillReceiveProps(): void;

package/dist/types-ts4.5/progress-tracker-facade.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { type ProgressTrackerProps as OldProgressTrackerProps } from './progress-tracker';
+import { type ProgressTrackerProps as NewProgressTrackerProps } from './progress-tracker-new';
+type ProgressTrackerProps = NewProgressTrackerProps | OldProgressTrackerProps;
+/**
+ * `ProgressTrackerFacade` is a component that conditionally renders either a new functional ProgressTracker component or
+ *  class based ProgressTracker component based on a feature flag.
+ *
+ */
+export declare const ProgressTrackerFacade: ({ ...props }: ProgressTrackerProps) => jsx.JSX.Element;
+export default ProgressTrackerFacade;

package/dist/types-ts4.5/progress-tracker-new.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type FC } from 'react';
+import type { ProgressTrackerStageRenderProp, Spacing, Stages } from './types';
+export interface ProgressTrackerProps {
+    /**
+     * Ordered list of stage data.
+     */
+    items: Stages;
+    /**
+     * Sets the amount of spacing between the steps.
+     */
+    spacing?: Spacing;
+    /**
+     * Render prop to specify custom implementations of components.
+     */
+    render?: ProgressTrackerStageRenderProp;
+    /**
+     * Turns off transition animations if set to false.
+     */
+    animated?: boolean;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Use this to provide an aria-label for the overall progress tracker, so that people who use assistive technology get an overview of the tracker's purpose. For example, "Sign up progress".
+     */
+    label?: string;
+}
+/**
+ * __Progress tracker__
+ *
+ * A progress tracker displays the steps and progress through a journey.
+ *
+ * - [Examples](https://atlassian.design/components/progress-tracker/examples)
+ * - [Code](https://atlassian.design/components/progress-tracker/code)
+ * - [Usage](https://atlassian.design/components/progress-tracker/usage)
+ */
+declare const ProgressTracker: FC<ProgressTrackerProps>;
+export default ProgressTracker;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.8.1",
+	"version": "8.9.0",
 	"description": "A progress tracker displays the steps and progress through a journey.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -16,20 +16,17 @@
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
-		"releaseModel": "continuous",
 		"runReact18": true,
-		"productPushConsumption": [
-			"jira"
-		],
 		"website": {
 			"name": "Progress tracker",
 			"category": "Components"
 		}
 	},
 	"dependencies": {
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-transition-group": "^4.4.1"
@@ -40,7 +37,7 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",
@@ -49,7 +46,6 @@
 		"jest-in-case": "^1.0.2",
 		"react-dom": "^16.8.0",
 		"react-router-dom": "^4.2.2",
-		"react-test-renderer": "^16.8.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {
@@ -85,5 +81,13 @@
 		"./types": "./src/types.tsx",
 		".": "./src/index.tsx"
 	},
-	"homepage": "https://atlassian.design/components/progress-tracker/"
+	"homepage": "https://atlassian.design/components/progress-tracker/",
+	"platform-feature-flags": {
+		"platform-progress-tracker-functional-facade": {
+			"type": "boolean"
+		},
+		"platform-design-system-dsp-20687-transition-group": {
+			"type": "boolean"
+		}
+	}
 }