@atlaskit/progress-tracker 10.4.2 → 10.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/internal/marker.compiled.css +4 -7
  3. package/dist/cjs/internal/marker.js +10 -2
  4. package/dist/cjs/internal/stage.compiled.css +5 -4
  5. package/dist/cjs/internal/stage.js +41 -70
  6. package/dist/es2019/internal/marker.compiled.css +4 -7
  7. package/dist/es2019/internal/marker.js +9 -2
  8. package/dist/es2019/internal/stage.compiled.css +7 -5
  9. package/dist/es2019/internal/stage.js +36 -74
  10. package/dist/esm/internal/marker.compiled.css +4 -7
  11. package/dist/esm/internal/marker.js +10 -2
  12. package/dist/esm/internal/stage.compiled.css +5 -4
  13. package/dist/esm/internal/stage.js +42 -71
  14. package/dist/types/internal/marker.d.ts +2 -0
  15. package/dist/types/internal/stage.d.ts +4 -5
  16. package/dist/types-ts4.5/internal/marker.d.ts +2 -0
  17. package/dist/types-ts4.5/internal/stage.d.ts +4 -5
  18. package/package.json +5 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/progress-tracker
2
2
 
3
+ ## 10.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`3c54fe08d7bd3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3c54fe08d7bd3) -
8
+ Removes react-transition-group to unblock React 19 upgrade. Uses css-animations directly.
9
+
10
+ ## 10.4.3
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 10.4.2
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/internal/marker.compiled.css CHANGED
@@ -1,13 +1,10 @@
1
1
 
2
2
  ._2rkou2gc{border-radius:var(--ds-space-100,8px)}
3
- ._v5645rui{transition:opacity var(--ds--pt--ts) var(--ds--pt--te),background-color var(--ds--pt--ts) var(--ds--pt--te)}._1190pbrw.fade-enter{background-color:var(--ds--pt--mc)}
4
- ._1bsbu2gc{width:var(--ds-space-100,8px)}
3
+ ._v564vc7x{transition:background-color var(--ds--pt--ts) var(--ds--pt--te)}._1bsbu2gc{width:var(--ds-space-100,8px)}
5
4
  ._1e021ssb{inset-inline-start:50%}
6
- ._1ez2kb7n.fade-appear.fade-appear-active{opacity:1}
7
- ._1ia8r3ku.fade-enter.fade-enter-active{background-color:var(--ds--pt--bg)}
8
- ._1lww1oqq{transition-delay:var(--ds--pt--td)}
9
- ._1uuw17dr.fade-appear{opacity:.01}
10
5
  ._4t3iu2gc{height:var(--ds-space-100,8px)}
11
- ._bfhkr3ku{background-color:var(--ds--pt--bg)}
6
+ ._bfhk1856{background-color:var(--ds-background-brand-bold,#1868db)}
7
+ ._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
8
+ ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
12
9
  ._kqswstnw{position:absolute}
13
10
  ._t9ec157a{transform:translate(-50%,calc(var(--ds-space-250, 20px)*-1))}
package/dist/cjs/internal/marker.js CHANGED
@@ -12,6 +12,12 @@ var React = _interopRequireWildcard(require("react"));
12
12
  var _runtime = require("@compiled/react/runtime");
13
13
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
14
14
  var progressMarkerStyles = null;
15
+ var markerColor = {
16
+ unvisited: "_bfhk1aqn",
17
+ current: "_bfhk1856",
18
+ visited: "_bfhk1856",
19
+ disabled: "_bfhkby5v"
20
+ };
15
21
 
16
22
  /**
17
23
  * __Progress marker__
@@ -19,10 +25,12 @@ var progressMarkerStyles = null;
19
25
  * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
20
26
  */
21
27
  var ProgressMarker = function ProgressMarker(_ref) {
22
- var testId = _ref.testId;
28
+ var testId = _ref.testId,
29
+ _ref$status = _ref.status,
30
+ status = _ref$status === void 0 ? 'unvisited' : _ref$status;
23
31
  return /*#__PURE__*/React.createElement("div", {
24
32
  "data-testid": testId,
25
- className: (0, _runtime.ax)(["_2rkou2gc _v5645rui _1bsbu2gc _4t3iu2gc _kqswstnw _bfhkr3ku _1e021ssb _t9ec157a _1lww1oqq _1uuw17dr _1ez2kb7n _1190pbrw _1ia8r3ku"])
33
+ className: (0, _runtime.ax)(["_2rkou2gc _v564vc7x _1bsbu2gc _4t3iu2gc _kqswstnw _1e021ssb _t9ec157a", markerColor[status]])
26
34
  });
27
35
  };
28
36
  var _default = exports.default = ProgressMarker;
package/dist/cjs/internal/stage.compiled.css CHANGED
@@ -1,15 +1,15 @@
1
1
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._1t9yph28.fade-appear.fade-appear-active{transition:opacity var(--ds--pt--ts) cubic-bezier(.2,0,0,1)}
3
- ._v564ph28{transition:opacity var(--ds--pt--ts) cubic-bezier(.2,0,0,1)}
2
+ ._y44vp021{animation:var(--_1j189zp)}
4
3
  ._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
5
4
  ._1bsb1osq{width:100%}
6
- ._1ez2kb7n.fade-appear.fade-appear-active{opacity:1}
7
5
  ._1i4q1hna{overflow-wrap:break-word}
8
6
  ._1pfhv47k{margin-block-start:var(--ds-space-250,20px)}
9
7
  ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
10
- ._1uuw17dr.fade-appear{opacity:.01}
8
+ ._1y0ctrqk{animation-play-state:paused}
9
+ ._2mzuglyw{list-style-type:none}
11
10
  ._6rthze3t{margin-block-end:var(--ds-space-0,0)}
12
11
  ._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
12
+ ._ju251oqq{animation-delay:var(--ds--pt--td)}
13
13
  ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
14
14
  ._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
15
15
  ._kqswh2mm{position:relative}
@@ -17,4 +17,5 @@
17
17
  ._syaz1oa5{color:var(--ds-text-brand,#1868db)}
18
18
  ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
19
19
  ._syazi7uo{color:var(--ds-text,#292a2e)}
20
+ ._tzy4kb7n{opacity:1}
20
21
  ._y3gn1h6o{text-align:center}
package/dist/cjs/internal/stage.js CHANGED
@@ -18,9 +18,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
18
18
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
19
19
  var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
20
20
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
21
- var _reactTransitionGroup = require("react-transition-group");
22
21
  var _compiled = require("@atlaskit/primitives/compiled");
23
- var _colors = require("@atlaskit/theme/colors");
24
22
  var _bar = _interopRequireDefault(require("./bar"));
25
23
  var _marker = _interopRequireDefault(require("./marker"));
26
24
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -43,70 +41,59 @@ var fontWeight = {
43
41
  visited: "_k48pwu06",
44
42
  disabled: "_k48pwu06"
45
43
  };
46
- var getMarkerColor = function getMarkerColor(_ref) {
47
- var status = _ref.status,
48
- percentageCompleted = _ref.percentageCompleted;
49
- switch (status) {
50
- case 'unvisited':
51
- return "var(--ds-icon-subtle, ".concat(_colors.N70, ")");
52
- case 'current':
53
- case 'visited':
54
- return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
55
- case 'disabled':
56
- if (percentageCompleted === 0) {
57
- return "var(--ds-icon-disabled, ".concat(_colors.N70, ")");
58
- }
59
- // If the percentage completed is greater than 0, we show the brand colour, so that the marker (circle) blends in with the progress bar.
60
- // Otherwise, the grey marker would be visible within the progress bar.
61
- return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
62
- default:
63
- return;
64
- }
65
- };
66
44
  var listItemStyles = null;
45
+ var fadeAnimationBase = null;
46
+ var fadeIn = null;
47
+ var fadeAnimationActive = null;
67
48
  var titleStyles = null;
49
+
50
+ // eslint-disable-next-line @repo/internal/react/no-class-components
68
51
  var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureComponent) {
69
52
  function ProgressTrackerStage(props) {
70
53
  var _this;
71
54
  (0, _classCallCheck2.default)(this, ProgressTrackerStage);
72
55
  _this = _callSuper(this, ProgressTrackerStage, [props]);
73
- (0, _defineProperty2.default)(_this, "nodeRefMarker", /*#__PURE__*/(0, _react.createRef)());
74
- (0, _defineProperty2.default)(_this, "nodeRefBar", /*#__PURE__*/(0, _react.createRef)());
75
- (0, _defineProperty2.default)(_this, "nodeRefTitle", /*#__PURE__*/(0, _react.createRef)());
76
56
  (0, _defineProperty2.default)(_this, "onEntered", function () {
77
57
  _this.setState({
78
58
  transitioning: false,
79
- oldMarkerColor: getMarkerColor({
80
- status: _this.props.item.status,
81
- percentageCompleted: _this.props.item.percentageComplete
82
- }),
83
59
  oldPercentageComplete: _this.props.item.percentageComplete
84
60
  });
85
61
  });
86
62
  _this.state = {
87
63
  transitioning: false,
88
- oldMarkerColor: getMarkerColor({
89
- status: _this.props.item.status,
90
- percentageCompleted: _this.props.item.percentageComplete
91
- }),
92
64
  oldPercentageComplete: 0
93
65
  };
94
66
  return _this;
95
67
  }
96
68
  (0, _inherits2.default)(ProgressTrackerStage, _PureComponent);
97
69
  return (0, _createClass2.default)(ProgressTrackerStage, [{
98
- key: "UNSAFE_componentWillMount",
99
- value: function UNSAFE_componentWillMount() {
100
- this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
101
- transitioning: true
102
- }));
70
+ key: "componentDidUpdate",
71
+ value: function componentDidUpdate(prevProps) {
72
+ if (prevProps.item.status !== this.props.item.status || prevProps.item.percentageComplete !== this.props.item.percentageComplete) {
73
+ this.startTransition();
74
+ }
75
+ }
76
+ }, {
77
+ key: "componentWillUnmount",
78
+ value: function componentWillUnmount() {
79
+ if (this.animationTimeoutId) {
80
+ clearTimeout(this.animationTimeoutId);
81
+ }
103
82
  }
104
83
  }, {
105
- key: "UNSAFE_componentWillReceiveProps",
106
- value: function UNSAFE_componentWillReceiveProps() {
84
+ key: "startTransition",
85
+ value: function startTransition() {
86
+ var _this2 = this;
87
+ if (this.animationTimeoutId) {
88
+ clearTimeout(this.animationTimeoutId);
89
+ }
107
90
  this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
108
91
  transitioning: true
109
92
  }));
93
+ var timeout = this.props.transitionDelay + this.props.transitionSpeed;
94
+ this.animationTimeoutId = setTimeout(function () {
95
+ _this2.onEntered();
96
+ }, timeout);
110
97
  }
111
98
  }, {
112
99
  key: "shouldShowLink",
@@ -126,51 +113,35 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
126
113
  transitionEasing = _this$props.transitionEasing,
127
114
  testId = _this$props.testId;
128
115
  var ariaCurrent = item.status === 'current' ? 'step' : 'false';
129
- var listInlineStyles = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), '--ds--pt--td', "".concat(transitionDelay, "ms")), '--ds--pt--te', transitionEasing), '--ds--pt--mc', this.state.oldMarkerColor), '--ds--pt--bg', getMarkerColor({
130
- status: item.status,
131
- percentageCompleted: item.percentageComplete
132
- })), "listStyleType", 'none');
116
+ var listInlineStyles = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), '--ds--pt--td', "".concat(transitionDelay, "ms")), '--ds--pt--te', transitionEasing);
133
117
  return /*#__PURE__*/React.createElement("li", {
134
118
  "data-testid": testId
135
119
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
136
120
  ,
137
121
  style: listInlineStyles,
138
122
  "aria-current": ariaCurrent,
139
- className: (0, _runtime.ax)(["_6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
123
+ className: (0, _runtime.ax)(["_2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
140
124
  }, /*#__PURE__*/React.createElement(_compiled.Box, {
141
125
  xcss: styles.listItemContent
142
- }, /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, {
143
- appear: true,
144
- in: this.state.transitioning,
145
- onEntered: this.onEntered,
146
- timeout: transitionDelay + transitionSpeed,
147
- classNames: "fade",
148
- nodeRef: this.nodeRefMarker
149
126
  }, /*#__PURE__*/React.createElement(_marker.default, {
150
- testId: testId && "".concat(testId, "-marker")
151
- })), /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, {
152
- appear: true,
153
- in: this.state.transitioning,
154
- onEntered: this.onEntered,
155
- timeout: transitionDelay + transitionSpeed,
156
- classNames: "fade",
157
- nodeRef: this.nodeRefBar
127
+ testId: testId && "".concat(testId, "-marker"),
128
+ status: item.percentageComplete > 0 ? 'visited' : item.status
129
+ }), /*#__PURE__*/React.createElement("div", {
130
+ className: (0, _runtime.ax)(["_tzy4kb7n", "_y44vp021 _ju251oqq _1y0ctrqk"]),
131
+ style: {
132
+ animationPlayState: this.state.transitioning ? 'running' : 'paused',
133
+ animationDuration: ['visited', 'disabled'].includes(this.props.item.status) ? '0ms' : undefined,
134
+ "--_1j189zp": (0, _runtime.ix)("".concat(fadeIn, " var(--ds--pt--ts) var(--ds--pt--te) forwards"))
135
+ }
158
136
  }, /*#__PURE__*/React.createElement(_bar.default, {
159
137
  testId: testId && "".concat(testId, "-bar"),
160
138
  percentageComplete: item.percentageComplete
161
- })), /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, {
162
- appear: true,
163
- in: this.state.transitioning,
164
- onEntered: this.onEntered,
165
- timeout: transitionDelay + transitionSpeed,
166
- classNames: "fade",
167
- nodeRef: this.nodeRefTitle
168
- }, /*#__PURE__*/React.createElement("div", {
139
+ })), /*#__PURE__*/React.createElement("div", {
169
140
  "data-testid": testId && "".concat(testId, "-title"),
170
- className: (0, _runtime.ax)(["_11c8fhey _v564ph28 _1pfhv47k _y3gn1h6o _1t9yph28 _1ez2kb7n _1uuw17dr", textColor[item.status], fontWeight[item.status]])
141
+ className: (0, _runtime.ax)(["_tzy4kb7n", "_11c8fhey _1pfhv47k _y3gn1h6o", textColor[item.status], fontWeight[item.status]])
171
142
  }, this.shouldShowLink() ? render.link({
172
143
  item: item
173
- }) : item.label))));
144
+ }) : item.label)));
174
145
  }
175
146
  }]);
176
147
  }(_react.PureComponent);
package/dist/es2019/internal/marker.compiled.css CHANGED
@@ -1,13 +1,10 @@
1
1
 
2
2
  ._2rkou2gc{border-radius:var(--ds-space-100,8px)}
3
- ._v5645rui{transition:opacity var(--ds--pt--ts) var(--ds--pt--te),background-color var(--ds--pt--ts) var(--ds--pt--te)}._1190pbrw.fade-enter{background-color:var(--ds--pt--mc)}
4
- ._1bsbu2gc{width:var(--ds-space-100,8px)}
3
+ ._v564vc7x{transition:background-color var(--ds--pt--ts) var(--ds--pt--te)}._1bsbu2gc{width:var(--ds-space-100,8px)}
5
4
  ._1e021ssb{inset-inline-start:50%}
6
- ._1ez2kb7n.fade-appear.fade-appear-active{opacity:1}
7
- ._1ia8r3ku.fade-enter.fade-enter-active{background-color:var(--ds--pt--bg)}
8
- ._1lww1oqq{transition-delay:var(--ds--pt--td)}
9
- ._1uuw17dr.fade-appear{opacity:.01}
10
5
  ._4t3iu2gc{height:var(--ds-space-100,8px)}
11
- ._bfhkr3ku{background-color:var(--ds--pt--bg)}
6
+ ._bfhk1856{background-color:var(--ds-background-brand-bold,#1868db)}
7
+ ._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
8
+ ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
12
9
  ._kqswstnw{position:absolute}
13
10
  ._t9ec157a{transform:translate(-50%,calc(var(--ds-space-250, 20px)*-1))}
package/dist/es2019/internal/marker.js CHANGED
@@ -4,6 +4,12 @@ import "./marker.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  const progressMarkerStyles = null;
7
+ const markerColor = {
8
+ unvisited: "_bfhk1aqn",
9
+ current: "_bfhk1856",
10
+ visited: "_bfhk1856",
11
+ disabled: "_bfhkby5v"
12
+ };
7
13
 
8
14
  /**
9
15
  * __Progress marker__
@@ -11,9 +17,10 @@ const progressMarkerStyles = null;
11
17
  * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
12
18
  */
13
19
  const ProgressMarker = ({
14
- testId
20
+ testId,
21
+ status = 'unvisited'
15
22
  }) => /*#__PURE__*/React.createElement("div", {
16
23
  "data-testid": testId,
17
- className: ax(["_2rkou2gc _v5645rui _1bsbu2gc _4t3iu2gc _kqswstnw _bfhkr3ku _1e021ssb _t9ec157a _1lww1oqq _1uuw17dr _1ez2kb7n _1190pbrw _1ia8r3ku"])
24
+ className: ax(["_2rkou2gc _v564vc7x _1bsbu2gc _4t3iu2gc _kqswstnw _1e021ssb _t9ec157a", markerColor[status]])
18
25
  });
19
26
  export default ProgressMarker;
package/dist/es2019/internal/stage.compiled.css CHANGED
@@ -1,15 +1,15 @@
1
1
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._1t9yph28.fade-appear.fade-appear-active{transition:opacity var(--ds--pt--ts) cubic-bezier(.2,0,0,1)}
3
- ._v564ph28{transition:opacity var(--ds--pt--ts) cubic-bezier(.2,0,0,1)}
2
+ ._y44v18do{animation:k6ve39n var(--ds--pt--ts) var(--ds--pt--te) forwards}
4
3
  ._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
5
4
  ._1bsb1osq{width:100%}
6
- ._1ez2kb7n.fade-appear.fade-appear-active{opacity:1}
7
5
  ._1i4q1hna{overflow-wrap:break-word}
8
6
  ._1pfhv47k{margin-block-start:var(--ds-space-250,20px)}
9
7
  ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
10
- ._1uuw17dr.fade-appear{opacity:.01}
8
+ ._1y0ctrqk{animation-play-state:paused}
9
+ ._2mzuglyw{list-style-type:none}
11
10
  ._6rthze3t{margin-block-end:var(--ds-space-0,0)}
12
11
  ._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
12
+ ._ju251oqq{animation-delay:var(--ds--pt--td)}
13
13
  ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
14
14
  ._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
15
15
  ._kqswh2mm{position:relative}
@@ -17,4 +17,6 @@
17
17
  ._syaz1oa5{color:var(--ds-text-brand,#1868db)}
18
18
  ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
19
19
  ._syazi7uo{color:var(--ds-text,#292a2e)}
20
- ._y3gn1h6o{text-align:center}
20
+ ._tzy4kb7n{opacity:1}
21
+ ._y3gn1h6o{text-align:center}
22
+ @keyframes k6ve39n{0%{opacity:.01}to{opacity:1}}
package/dist/es2019/internal/stage.js CHANGED
@@ -3,10 +3,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import "./stage.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
- import { createRef, PureComponent } from 'react';
7
- import { CSSTransition } from 'react-transition-group';
6
+ import { PureComponent } from 'react';
8
7
  import { Box } from '@atlaskit/primitives/compiled';
9
- import { B300, N70 } from '@atlaskit/theme/colors';
10
8
  import ProgressBar from './bar';
11
9
  import ProgressMarker from './marker';
12
10
  const styles = {
@@ -24,65 +22,49 @@ const fontWeight = {
24
22
  visited: "_k48pwu06",
25
23
  disabled: "_k48pwu06"
26
24
  };
27
- const getMarkerColor = ({
28
- status,
29
- percentageCompleted
30
- }) => {
31
- switch (status) {
32
- case 'unvisited':
33
- return `var(--ds-icon-subtle, ${N70})`;
34
- case 'current':
35
- case 'visited':
36
- return `var(--ds-icon-brand, ${B300})`;
37
- case 'disabled':
38
- if (percentageCompleted === 0) {
39
- return `var(--ds-icon-disabled, ${N70})`;
40
- }
41
- // If the percentage completed is greater than 0, we show the brand colour, so that the marker (circle) blends in with the progress bar.
42
- // Otherwise, the grey marker would be visible within the progress bar.
43
- return `var(--ds-icon-brand, ${B300})`;
44
- default:
45
- return;
46
- }
47
- };
48
25
  const listItemStyles = null;
26
+ const fadeAnimationBase = null;
27
+ const fadeIn = null;
28
+ const fadeAnimationActive = null;
49
29
  const titleStyles = null;
30
+
31
+ // eslint-disable-next-line @repo/internal/react/no-class-components
50
32
  export default class ProgressTrackerStage extends PureComponent {
51
33
  constructor(props) {
52
34
  super(props);
53
- _defineProperty(this, "nodeRefMarker", /*#__PURE__*/createRef());
54
- _defineProperty(this, "nodeRefBar", /*#__PURE__*/createRef());
55
- _defineProperty(this, "nodeRefTitle", /*#__PURE__*/createRef());
56
35
  _defineProperty(this, "onEntered", () => {
57
36
  this.setState({
58
37
  transitioning: false,
59
- oldMarkerColor: getMarkerColor({
60
- status: this.props.item.status,
61
- percentageCompleted: this.props.item.percentageComplete
62
- }),
63
38
  oldPercentageComplete: this.props.item.percentageComplete
64
39
  });
65
40
  });
66
41
  this.state = {
67
42
  transitioning: false,
68
- oldMarkerColor: getMarkerColor({
69
- status: this.props.item.status,
70
- percentageCompleted: this.props.item.percentageComplete
71
- }),
72
43
  oldPercentageComplete: 0
73
44
  };
74
45
  }
75
- UNSAFE_componentWillMount() {
76
- this.setState({
77
- ...this.state,
78
- transitioning: true
79
- });
46
+ componentDidUpdate(prevProps) {
47
+ if (prevProps.item.status !== this.props.item.status || prevProps.item.percentageComplete !== this.props.item.percentageComplete) {
48
+ this.startTransition();
49
+ }
50
+ }
51
+ componentWillUnmount() {
52
+ if (this.animationTimeoutId) {
53
+ clearTimeout(this.animationTimeoutId);
54
+ }
80
55
  }
81
- UNSAFE_componentWillReceiveProps() {
56
+ startTransition() {
57
+ if (this.animationTimeoutId) {
58
+ clearTimeout(this.animationTimeoutId);
59
+ }
82
60
  this.setState({
83
61
  ...this.state,
84
62
  transitioning: true
85
63
  });
64
+ const timeout = this.props.transitionDelay + this.props.transitionSpeed;
65
+ this.animationTimeoutId = setTimeout(() => {
66
+ this.onEntered();
67
+ }, timeout);
86
68
  }
87
69
  shouldShowLink() {
88
70
  return this.props.item.status === 'visited' &&
@@ -102,13 +84,7 @@ export default class ProgressTrackerStage extends PureComponent {
102
84
  const listInlineStyles = {
103
85
  ['--ds--pt--ts']: `${transitionSpeed}ms`,
104
86
  ['--ds--pt--td']: `${transitionDelay}ms`,
105
- ['--ds--pt--te']: transitionEasing,
106
- ['--ds--pt--mc']: this.state.oldMarkerColor,
107
- ['--ds--pt--bg']: getMarkerColor({
108
- status: item.status,
109
- percentageCompleted: item.percentageComplete
110
- }),
111
- listStyleType: 'none'
87
+ ['--ds--pt--te']: transitionEasing
112
88
  };
113
89
  return /*#__PURE__*/React.createElement("li", {
114
90
  "data-testid": testId
@@ -116,40 +92,26 @@ export default class ProgressTrackerStage extends PureComponent {
116
92
  ,
117
93
  style: listInlineStyles,
118
94
  "aria-current": ariaCurrent,
119
- className: ax(["_6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
95
+ className: ax(["_2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
120
96
  }, /*#__PURE__*/React.createElement(Box, {
121
97
  xcss: styles.listItemContent
122
- }, /*#__PURE__*/React.createElement(CSSTransition, {
123
- appear: true,
124
- in: this.state.transitioning,
125
- onEntered: this.onEntered,
126
- timeout: transitionDelay + transitionSpeed,
127
- classNames: "fade",
128
- nodeRef: this.nodeRefMarker
129
98
  }, /*#__PURE__*/React.createElement(ProgressMarker, {
130
- testId: testId && `${testId}-marker`
131
- })), /*#__PURE__*/React.createElement(CSSTransition, {
132
- appear: true,
133
- in: this.state.transitioning,
134
- onEntered: this.onEntered,
135
- timeout: transitionDelay + transitionSpeed,
136
- classNames: "fade",
137
- nodeRef: this.nodeRefBar
99
+ testId: testId && `${testId}-marker`,
100
+ status: item.percentageComplete > 0 ? 'visited' : item.status
101
+ }), /*#__PURE__*/React.createElement("div", {
102
+ style: {
103
+ animationPlayState: this.state.transitioning ? 'running' : 'paused',
104
+ animationDuration: ['visited', 'disabled'].includes(this.props.item.status) ? '0ms' : undefined
105
+ },
106
+ className: ax(["_tzy4kb7n", "_y44v18do _ju251oqq _1y0ctrqk"])
138
107
  }, /*#__PURE__*/React.createElement(ProgressBar, {
139
108
  testId: testId && `${testId}-bar`,
140
109
  percentageComplete: item.percentageComplete
141
- })), /*#__PURE__*/React.createElement(CSSTransition, {
142
- appear: true,
143
- in: this.state.transitioning,
144
- onEntered: this.onEntered,
145
- timeout: transitionDelay + transitionSpeed,
146
- classNames: "fade",
147
- nodeRef: this.nodeRefTitle
148
- }, /*#__PURE__*/React.createElement("div", {
110
+ })), /*#__PURE__*/React.createElement("div", {
149
111
  "data-testid": testId && `${testId}-title`,
150
- className: ax(["_11c8fhey _v564ph28 _1pfhv47k _y3gn1h6o _1t9yph28 _1ez2kb7n _1uuw17dr", textColor[item.status], fontWeight[item.status]])
112
+ className: ax(["_tzy4kb7n", "_11c8fhey _1pfhv47k _y3gn1h6o", textColor[item.status], fontWeight[item.status]])
151
113
  }, this.shouldShowLink() ? render.link({
152
114
  item
153
- }) : item.label))));
115
+ }) : item.label)));
154
116
  }
155
117
  }
package/dist/esm/internal/marker.compiled.css CHANGED
@@ -1,13 +1,10 @@
1
1
 
2
2
  ._2rkou2gc{border-radius:var(--ds-space-100,8px)}
3
- ._v5645rui{transition:opacity var(--ds--pt--ts) var(--ds--pt--te),background-color var(--ds--pt--ts) var(--ds--pt--te)}._1190pbrw.fade-enter{background-color:var(--ds--pt--mc)}
4
- ._1bsbu2gc{width:var(--ds-space-100,8px)}
3
+ ._v564vc7x{transition:background-color var(--ds--pt--ts) var(--ds--pt--te)}._1bsbu2gc{width:var(--ds-space-100,8px)}
5
4
  ._1e021ssb{inset-inline-start:50%}
6
- ._1ez2kb7n.fade-appear.fade-appear-active{opacity:1}
7
- ._1ia8r3ku.fade-enter.fade-enter-active{background-color:var(--ds--pt--bg)}
8
- ._1lww1oqq{transition-delay:var(--ds--pt--td)}
9
- ._1uuw17dr.fade-appear{opacity:.01}
10
5
  ._4t3iu2gc{height:var(--ds-space-100,8px)}
11
- ._bfhkr3ku{background-color:var(--ds--pt--bg)}
6
+ ._bfhk1856{background-color:var(--ds-background-brand-bold,#1868db)}
7
+ ._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
8
+ ._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
12
9
  ._kqswstnw{position:absolute}
13
10
  ._t9ec157a{transform:translate(-50%,calc(var(--ds-space-250, 20px)*-1))}
package/dist/esm/internal/marker.js CHANGED
@@ -4,6 +4,12 @@ import "./marker.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  var progressMarkerStyles = null;
7
+ var markerColor = {
8
+ unvisited: "_bfhk1aqn",
9
+ current: "_bfhk1856",
10
+ visited: "_bfhk1856",
11
+ disabled: "_bfhkby5v"
12
+ };
7
13
 
8
14
  /**
9
15
  * __Progress marker__
@@ -11,10 +17,12 @@ var progressMarkerStyles = null;
11
17
  * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
12
18
  */
13
19
  var ProgressMarker = function ProgressMarker(_ref) {
14
- var testId = _ref.testId;
20
+ var testId = _ref.testId,
21
+ _ref$status = _ref.status,
22
+ status = _ref$status === void 0 ? 'unvisited' : _ref$status;
15
23
  return /*#__PURE__*/React.createElement("div", {
16
24
  "data-testid": testId,
17
- className: ax(["_2rkou2gc _v5645rui _1bsbu2gc _4t3iu2gc _kqswstnw _bfhkr3ku _1e021ssb _t9ec157a _1lww1oqq _1uuw17dr _1ez2kb7n _1190pbrw _1ia8r3ku"])
25
+ className: ax(["_2rkou2gc _v564vc7x _1bsbu2gc _4t3iu2gc _kqswstnw _1e021ssb _t9ec157a", markerColor[status]])
18
26
  });
19
27
  };
20
28
  export default ProgressMarker;
package/dist/esm/internal/stage.compiled.css CHANGED
@@ -1,15 +1,15 @@
1
1
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._1t9yph28.fade-appear.fade-appear-active{transition:opacity var(--ds--pt--ts) cubic-bezier(.2,0,0,1)}
3
- ._v564ph28{transition:opacity var(--ds--pt--ts) cubic-bezier(.2,0,0,1)}
2
+ ._y44vp021{animation:var(--_1j189zp)}
4
3
  ._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
5
4
  ._1bsb1osq{width:100%}
6
- ._1ez2kb7n.fade-appear.fade-appear-active{opacity:1}
7
5
  ._1i4q1hna{overflow-wrap:break-word}
8
6
  ._1pfhv47k{margin-block-start:var(--ds-space-250,20px)}
9
7
  ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
10
- ._1uuw17dr.fade-appear{opacity:.01}
8
+ ._1y0ctrqk{animation-play-state:paused}
9
+ ._2mzuglyw{list-style-type:none}
11
10
  ._6rthze3t{margin-block-end:var(--ds-space-0,0)}
12
11
  ._ahbqze3t{margin-inline-start:var(--ds-space-0,0)}
12
+ ._ju251oqq{animation-delay:var(--ds--pt--td)}
13
13
  ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
14
14
  ._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
15
15
  ._kqswh2mm{position:relative}
@@ -17,4 +17,5 @@
17
17
  ._syaz1oa5{color:var(--ds-text-brand,#1868db)}
18
18
  ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
19
19
  ._syazi7uo{color:var(--ds-text,#292a2e)}
20
+ ._tzy4kb7n{opacity:1}
20
21
  ._y3gn1h6o{text-align:center}
package/dist/esm/internal/stage.js CHANGED
@@ -13,10 +13,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
13
13
  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; }
14
14
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
15
15
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
16
- import { createRef, PureComponent } from 'react';
17
- import { CSSTransition } from 'react-transition-group';
16
+ import { PureComponent } from 'react';
18
17
  import { Box } from '@atlaskit/primitives/compiled';
19
- import { B300, N70 } from '@atlaskit/theme/colors';
20
18
  import ProgressBar from './bar';
21
19
  import ProgressMarker from './marker';
22
20
  var styles = {
@@ -34,70 +32,59 @@ var fontWeight = {
34
32
  visited: "_k48pwu06",
35
33
  disabled: "_k48pwu06"
36
34
  };
37
- var getMarkerColor = function getMarkerColor(_ref) {
38
- var status = _ref.status,
39
- percentageCompleted = _ref.percentageCompleted;
40
- switch (status) {
41
- case 'unvisited':
42
- return "var(--ds-icon-subtle, ".concat(N70, ")");
43
- case 'current':
44
- case 'visited':
45
- return "var(--ds-icon-brand, ".concat(B300, ")");
46
- case 'disabled':
47
- if (percentageCompleted === 0) {
48
- return "var(--ds-icon-disabled, ".concat(N70, ")");
49
- }
50
- // If the percentage completed is greater than 0, we show the brand colour, so that the marker (circle) blends in with the progress bar.
51
- // Otherwise, the grey marker would be visible within the progress bar.
52
- return "var(--ds-icon-brand, ".concat(B300, ")");
53
- default:
54
- return;
55
- }
56
- };
57
35
  var listItemStyles = null;
36
+ var fadeAnimationBase = null;
37
+ var fadeIn = null;
38
+ var fadeAnimationActive = null;
58
39
  var titleStyles = null;
40
+
41
+ // eslint-disable-next-line @repo/internal/react/no-class-components
59
42
  var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
60
43
  function ProgressTrackerStage(props) {
61
44
  var _this;
62
45
  _classCallCheck(this, ProgressTrackerStage);
63
46
  _this = _callSuper(this, ProgressTrackerStage, [props]);
64
- _defineProperty(_this, "nodeRefMarker", /*#__PURE__*/createRef());
65
- _defineProperty(_this, "nodeRefBar", /*#__PURE__*/createRef());
66
- _defineProperty(_this, "nodeRefTitle", /*#__PURE__*/createRef());
67
47
  _defineProperty(_this, "onEntered", function () {
68
48
  _this.setState({
69
49
  transitioning: false,
70
- oldMarkerColor: getMarkerColor({
71
- status: _this.props.item.status,
72
- percentageCompleted: _this.props.item.percentageComplete
73
- }),
74
50
  oldPercentageComplete: _this.props.item.percentageComplete
75
51
  });
76
52
  });
77
53
  _this.state = {
78
54
  transitioning: false,
79
- oldMarkerColor: getMarkerColor({
80
- status: _this.props.item.status,
81
- percentageCompleted: _this.props.item.percentageComplete
82
- }),
83
55
  oldPercentageComplete: 0
84
56
  };
85
57
  return _this;
86
58
  }
87
59
  _inherits(ProgressTrackerStage, _PureComponent);
88
60
  return _createClass(ProgressTrackerStage, [{
89
- key: "UNSAFE_componentWillMount",
90
- value: function UNSAFE_componentWillMount() {
91
- this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
92
- transitioning: true
93
- }));
61
+ key: "componentDidUpdate",
62
+ value: function componentDidUpdate(prevProps) {
63
+ if (prevProps.item.status !== this.props.item.status || prevProps.item.percentageComplete !== this.props.item.percentageComplete) {
64
+ this.startTransition();
65
+ }
94
66
  }
95
67
  }, {
96
- key: "UNSAFE_componentWillReceiveProps",
97
- value: function UNSAFE_componentWillReceiveProps() {
68
+ key: "componentWillUnmount",
69
+ value: function componentWillUnmount() {
70
+ if (this.animationTimeoutId) {
71
+ clearTimeout(this.animationTimeoutId);
72
+ }
73
+ }
74
+ }, {
75
+ key: "startTransition",
76
+ value: function startTransition() {
77
+ var _this2 = this;
78
+ if (this.animationTimeoutId) {
79
+ clearTimeout(this.animationTimeoutId);
80
+ }
98
81
  this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
99
82
  transitioning: true
100
83
  }));
84
+ var timeout = this.props.transitionDelay + this.props.transitionSpeed;
85
+ this.animationTimeoutId = setTimeout(function () {
86
+ _this2.onEntered();
87
+ }, timeout);
101
88
  }
102
89
  }, {
103
90
  key: "shouldShowLink",
@@ -117,51 +104,35 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
117
104
  transitionEasing = _this$props.transitionEasing,
118
105
  testId = _this$props.testId;
119
106
  var ariaCurrent = item.status === 'current' ? 'step' : 'false';
120
- var listInlineStyles = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), '--ds--pt--td', "".concat(transitionDelay, "ms")), '--ds--pt--te', transitionEasing), '--ds--pt--mc', this.state.oldMarkerColor), '--ds--pt--bg', getMarkerColor({
121
- status: item.status,
122
- percentageCompleted: item.percentageComplete
123
- })), "listStyleType", 'none');
107
+ var listInlineStyles = _defineProperty(_defineProperty(_defineProperty({}, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), '--ds--pt--td', "".concat(transitionDelay, "ms")), '--ds--pt--te', transitionEasing);
124
108
  return /*#__PURE__*/React.createElement("li", {
125
109
  "data-testid": testId
126
110
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
127
111
  ,
128
112
  style: listInlineStyles,
129
113
  "aria-current": ariaCurrent,
130
- className: ax(["_6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
114
+ className: ax(["_2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
131
115
  }, /*#__PURE__*/React.createElement(Box, {
132
116
  xcss: styles.listItemContent
133
- }, /*#__PURE__*/React.createElement(CSSTransition, {
134
- appear: true,
135
- in: this.state.transitioning,
136
- onEntered: this.onEntered,
137
- timeout: transitionDelay + transitionSpeed,
138
- classNames: "fade",
139
- nodeRef: this.nodeRefMarker
140
117
  }, /*#__PURE__*/React.createElement(ProgressMarker, {
141
- testId: testId && "".concat(testId, "-marker")
142
- })), /*#__PURE__*/React.createElement(CSSTransition, {
143
- appear: true,
144
- in: this.state.transitioning,
145
- onEntered: this.onEntered,
146
- timeout: transitionDelay + transitionSpeed,
147
- classNames: "fade",
148
- nodeRef: this.nodeRefBar
118
+ testId: testId && "".concat(testId, "-marker"),
119
+ status: item.percentageComplete > 0 ? 'visited' : item.status
120
+ }), /*#__PURE__*/React.createElement("div", {
121
+ className: ax(["_tzy4kb7n", "_y44vp021 _ju251oqq _1y0ctrqk"]),
122
+ style: {
123
+ animationPlayState: this.state.transitioning ? 'running' : 'paused',
124
+ animationDuration: ['visited', 'disabled'].includes(this.props.item.status) ? '0ms' : undefined,
125
+ "--_1j189zp": ix("".concat(fadeIn, " var(--ds--pt--ts) var(--ds--pt--te) forwards"))
126
+ }
149
127
  }, /*#__PURE__*/React.createElement(ProgressBar, {
150
128
  testId: testId && "".concat(testId, "-bar"),
151
129
  percentageComplete: item.percentageComplete
152
- })), /*#__PURE__*/React.createElement(CSSTransition, {
153
- appear: true,
154
- in: this.state.transitioning,
155
- onEntered: this.onEntered,
156
- timeout: transitionDelay + transitionSpeed,
157
- classNames: "fade",
158
- nodeRef: this.nodeRefTitle
159
- }, /*#__PURE__*/React.createElement("div", {
130
+ })), /*#__PURE__*/React.createElement("div", {
160
131
  "data-testid": testId && "".concat(testId, "-title"),
161
- className: ax(["_11c8fhey _v564ph28 _1pfhv47k _y3gn1h6o _1t9yph28 _1ez2kb7n _1uuw17dr", textColor[item.status], fontWeight[item.status]])
132
+ className: ax(["_tzy4kb7n", "_11c8fhey _1pfhv47k _y3gn1h6o", textColor[item.status], fontWeight[item.status]])
162
133
  }, this.shouldShowLink() ? render.link({
163
134
  item: item
164
- }) : item.label))));
135
+ }) : item.label)));
165
136
  }
166
137
  }]);
167
138
  }(PureComponent);
package/dist/types/internal/marker.d.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type FC } from 'react';
6
+ import type { Status } from '../types';
6
7
  /**
7
8
  * __Progress marker__
8
9
  *
@@ -10,5 +11,6 @@ import { type FC } from 'react';
10
11
  */
11
12
  declare const ProgressMarker: FC<{
12
13
  testId?: string;
14
+ status: Status;
13
15
  }>;
14
16
  export default ProgressMarker;
package/dist/types/internal/stage.d.ts CHANGED
@@ -10,12 +10,11 @@ interface State {
10
10
  oldPercentageComplete: number;
11
11
  }
12
12
  export default class ProgressTrackerStage extends PureComponent<ProgressTrackerStageProps, State> {
13
- nodeRefMarker: import("react").RefObject<HTMLElement>;
14
- nodeRefBar: import("react").RefObject<HTMLElement>;
15
- nodeRefTitle: import("react").RefObject<HTMLElement>;
13
+ private animationTimeoutId?;
16
14
  constructor(props: ProgressTrackerStageProps);
17
- UNSAFE_componentWillMount(): void;
18
- UNSAFE_componentWillReceiveProps(): void;
15
+ componentDidUpdate(prevProps: ProgressTrackerStageProps): void;
16
+ componentWillUnmount(): void;
17
+ startTransition(): void;
19
18
  shouldShowLink(): boolean;
20
19
  onEntered: () => void;
21
20
  render(): JSX.Element;
package/dist/types-ts4.5/internal/marker.d.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import { type FC } from 'react';
6
+ import type { Status } from '../types';
6
7
  /**
7
8
  * __Progress marker__
8
9
  *
@@ -10,5 +11,6 @@ import { type FC } from 'react';
10
11
  */
11
12
  declare const ProgressMarker: FC<{
12
13
  testId?: string;
14
+ status: Status;
13
15
  }>;
14
16
  export default ProgressMarker;
package/dist/types-ts4.5/internal/stage.d.ts CHANGED
@@ -10,12 +10,11 @@ interface State {
10
10
  oldPercentageComplete: number;
11
11
  }
12
12
  export default class ProgressTrackerStage extends PureComponent<ProgressTrackerStageProps, State> {
13
- nodeRefMarker: import("react").RefObject<HTMLElement>;
14
- nodeRefBar: import("react").RefObject<HTMLElement>;
15
- nodeRefTitle: import("react").RefObject<HTMLElement>;
13
+ private animationTimeoutId?;
16
14
  constructor(props: ProgressTrackerStageProps);
17
- UNSAFE_componentWillMount(): void;
18
- UNSAFE_componentWillReceiveProps(): void;
15
+ componentDidUpdate(prevProps: ProgressTrackerStageProps): void;
16
+ componentWillUnmount(): void;
17
+ startTransition(): void;
19
18
  shouldShowLink(): boolean;
20
19
  onEntered: () => void;
21
20
  render(): JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/progress-tracker",
3
- "version": "10.4.2",
3
+ "version": "10.5.0",
4
4
  "description": "A progress tracker displays the steps and progress through a journey.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -25,12 +25,11 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@atlaskit/css": "^0.19.0",
28
- "@atlaskit/primitives": "^17.1.0",
28
+ "@atlaskit/primitives": "^18.0.0",
29
29
  "@atlaskit/theme": "^21.0.0",
30
- "@atlaskit/tokens": "^10.0.0",
30
+ "@atlaskit/tokens": "^11.0.0",
31
31
  "@babel/runtime": "^7.0.0",
32
- "@compiled/react": "^0.18.6",
33
- "react-transition-group": "^4.4.1"
32
+ "@compiled/react": "^0.18.6"
34
33
  },
35
34
  "peerDependencies": {
36
35
  "react": "^18.2.0"
@@ -41,13 +40,12 @@
41
40
  "@af/visual-regression": "workspace:^",
42
41
  "@atlaskit/button": "^23.9.0",
43
42
  "@atlaskit/docs": "^11.3.0",
44
- "@atlaskit/icon": "^29.4.0",
43
+ "@atlaskit/icon": "^30.0.0",
45
44
  "@atlaskit/link": "^3.3.0",
46
45
  "@atlaskit/section-message": "^8.12.0",
47
46
  "@atlassian/ssr-tests": "workspace:^",
48
47
  "@testing-library/react": "^16.3.0",
49
48
  "@testing-library/user-event": "^14.4.3",
50
- "@types/react-transition-group": "^2.0.6",
51
49
  "jest-in-case": "^1.0.2",
52
50
  "react-dom": "^18.2.0"
53
51
  },