@atlaskit/progress-tracker 10.4.3 → 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 +7 -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 +39 -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 +34 -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 +40 -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 +2 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
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
+
3
10
  ## 10.4.3
4
11
 
5
12
  ### 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,27 +41,10 @@ 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;
68
49
 
69
50
  // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -72,43 +53,47 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
72
53
  var _this;
73
54
  (0, _classCallCheck2.default)(this, ProgressTrackerStage);
74
55
  _this = _callSuper(this, ProgressTrackerStage, [props]);
75
- (0, _defineProperty2.default)(_this, "nodeRefMarker", /*#__PURE__*/(0, _react.createRef)());
76
- (0, _defineProperty2.default)(_this, "nodeRefBar", /*#__PURE__*/(0, _react.createRef)());
77
- (0, _defineProperty2.default)(_this, "nodeRefTitle", /*#__PURE__*/(0, _react.createRef)());
78
56
  (0, _defineProperty2.default)(_this, "onEntered", function () {
79
57
  _this.setState({
80
58
  transitioning: false,
81
- oldMarkerColor: getMarkerColor({
82
- status: _this.props.item.status,
83
- percentageCompleted: _this.props.item.percentageComplete
84
- }),
85
59
  oldPercentageComplete: _this.props.item.percentageComplete
86
60
  });
87
61
  });
88
62
  _this.state = {
89
63
  transitioning: false,
90
- oldMarkerColor: getMarkerColor({
91
- status: _this.props.item.status,
92
- percentageCompleted: _this.props.item.percentageComplete
93
- }),
94
64
  oldPercentageComplete: 0
95
65
  };
96
66
  return _this;
97
67
  }
98
68
  (0, _inherits2.default)(ProgressTrackerStage, _PureComponent);
99
69
  return (0, _createClass2.default)(ProgressTrackerStage, [{
100
- key: "UNSAFE_componentWillMount",
101
- value: function UNSAFE_componentWillMount() {
102
- this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
103
- transitioning: true
104
- }));
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
+ }
105
75
  }
106
76
  }, {
107
- key: "UNSAFE_componentWillReceiveProps",
108
- value: function UNSAFE_componentWillReceiveProps() {
77
+ key: "componentWillUnmount",
78
+ value: function componentWillUnmount() {
79
+ if (this.animationTimeoutId) {
80
+ clearTimeout(this.animationTimeoutId);
81
+ }
82
+ }
83
+ }, {
84
+ key: "startTransition",
85
+ value: function startTransition() {
86
+ var _this2 = this;
87
+ if (this.animationTimeoutId) {
88
+ clearTimeout(this.animationTimeoutId);
89
+ }
109
90
  this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
110
91
  transitioning: true
111
92
  }));
93
+ var timeout = this.props.transitionDelay + this.props.transitionSpeed;
94
+ this.animationTimeoutId = setTimeout(function () {
95
+ _this2.onEntered();
96
+ }, timeout);
112
97
  }
113
98
  }, {
114
99
  key: "shouldShowLink",
@@ -128,51 +113,35 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
128
113
  transitionEasing = _this$props.transitionEasing,
129
114
  testId = _this$props.testId;
130
115
  var ariaCurrent = item.status === 'current' ? 'step' : 'false';
131
- 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({
132
- status: item.status,
133
- percentageCompleted: item.percentageComplete
134
- })), "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);
135
117
  return /*#__PURE__*/React.createElement("li", {
136
118
  "data-testid": testId
137
119
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
138
120
  ,
139
121
  style: listInlineStyles,
140
122
  "aria-current": ariaCurrent,
141
- className: (0, _runtime.ax)(["_6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
123
+ className: (0, _runtime.ax)(["_2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
142
124
  }, /*#__PURE__*/React.createElement(_compiled.Box, {
143
125
  xcss: styles.listItemContent
144
- }, /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, {
145
- appear: true,
146
- in: this.state.transitioning,
147
- onEntered: this.onEntered,
148
- timeout: transitionDelay + transitionSpeed,
149
- classNames: "fade",
150
- nodeRef: this.nodeRefMarker
151
126
  }, /*#__PURE__*/React.createElement(_marker.default, {
152
- testId: testId && "".concat(testId, "-marker")
153
- })), /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, {
154
- appear: true,
155
- in: this.state.transitioning,
156
- onEntered: this.onEntered,
157
- timeout: transitionDelay + transitionSpeed,
158
- classNames: "fade",
159
- 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
+ }
160
136
  }, /*#__PURE__*/React.createElement(_bar.default, {
161
137
  testId: testId && "".concat(testId, "-bar"),
162
138
  percentageComplete: item.percentageComplete
163
- })), /*#__PURE__*/React.createElement(_reactTransitionGroup.CSSTransition, {
164
- appear: true,
165
- in: this.state.transitioning,
166
- onEntered: this.onEntered,
167
- timeout: transitionDelay + transitionSpeed,
168
- classNames: "fade",
169
- nodeRef: this.nodeRefTitle
170
- }, /*#__PURE__*/React.createElement("div", {
139
+ })), /*#__PURE__*/React.createElement("div", {
171
140
  "data-testid": testId && "".concat(testId, "-title"),
172
- 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]])
173
142
  }, this.shouldShowLink() ? render.link({
174
143
  item: item
175
- }) : item.label))));
144
+ }) : item.label)));
176
145
  }
177
146
  }]);
178
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,67 +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;
50
30
 
51
31
  // eslint-disable-next-line @repo/internal/react/no-class-components
52
32
  export default class ProgressTrackerStage extends PureComponent {
53
33
  constructor(props) {
54
34
  super(props);
55
- _defineProperty(this, "nodeRefMarker", /*#__PURE__*/createRef());
56
- _defineProperty(this, "nodeRefBar", /*#__PURE__*/createRef());
57
- _defineProperty(this, "nodeRefTitle", /*#__PURE__*/createRef());
58
35
  _defineProperty(this, "onEntered", () => {
59
36
  this.setState({
60
37
  transitioning: false,
61
- oldMarkerColor: getMarkerColor({
62
- status: this.props.item.status,
63
- percentageCompleted: this.props.item.percentageComplete
64
- }),
65
38
  oldPercentageComplete: this.props.item.percentageComplete
66
39
  });
67
40
  });
68
41
  this.state = {
69
42
  transitioning: false,
70
- oldMarkerColor: getMarkerColor({
71
- status: this.props.item.status,
72
- percentageCompleted: this.props.item.percentageComplete
73
- }),
74
43
  oldPercentageComplete: 0
75
44
  };
76
45
  }
77
- UNSAFE_componentWillMount() {
78
- this.setState({
79
- ...this.state,
80
- transitioning: true
81
- });
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
+ }
82
55
  }
83
- UNSAFE_componentWillReceiveProps() {
56
+ startTransition() {
57
+ if (this.animationTimeoutId) {
58
+ clearTimeout(this.animationTimeoutId);
59
+ }
84
60
  this.setState({
85
61
  ...this.state,
86
62
  transitioning: true
87
63
  });
64
+ const timeout = this.props.transitionDelay + this.props.transitionSpeed;
65
+ this.animationTimeoutId = setTimeout(() => {
66
+ this.onEntered();
67
+ }, timeout);
88
68
  }
89
69
  shouldShowLink() {
90
70
  return this.props.item.status === 'visited' &&
@@ -104,13 +84,7 @@ export default class ProgressTrackerStage extends PureComponent {
104
84
  const listInlineStyles = {
105
85
  ['--ds--pt--ts']: `${transitionSpeed}ms`,
106
86
  ['--ds--pt--td']: `${transitionDelay}ms`,
107
- ['--ds--pt--te']: transitionEasing,
108
- ['--ds--pt--mc']: this.state.oldMarkerColor,
109
- ['--ds--pt--bg']: getMarkerColor({
110
- status: item.status,
111
- percentageCompleted: item.percentageComplete
112
- }),
113
- listStyleType: 'none'
87
+ ['--ds--pt--te']: transitionEasing
114
88
  };
115
89
  return /*#__PURE__*/React.createElement("li", {
116
90
  "data-testid": testId
@@ -118,40 +92,26 @@ export default class ProgressTrackerStage extends PureComponent {
118
92
  ,
119
93
  style: listInlineStyles,
120
94
  "aria-current": ariaCurrent,
121
- className: ax(["_6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
95
+ className: ax(["_2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
122
96
  }, /*#__PURE__*/React.createElement(Box, {
123
97
  xcss: styles.listItemContent
124
- }, /*#__PURE__*/React.createElement(CSSTransition, {
125
- appear: true,
126
- in: this.state.transitioning,
127
- onEntered: this.onEntered,
128
- timeout: transitionDelay + transitionSpeed,
129
- classNames: "fade",
130
- nodeRef: this.nodeRefMarker
131
98
  }, /*#__PURE__*/React.createElement(ProgressMarker, {
132
- testId: testId && `${testId}-marker`
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.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"])
140
107
  }, /*#__PURE__*/React.createElement(ProgressBar, {
141
108
  testId: testId && `${testId}-bar`,
142
109
  percentageComplete: item.percentageComplete
143
- })), /*#__PURE__*/React.createElement(CSSTransition, {
144
- appear: true,
145
- in: this.state.transitioning,
146
- onEntered: this.onEntered,
147
- timeout: transitionDelay + transitionSpeed,
148
- classNames: "fade",
149
- nodeRef: this.nodeRefTitle
150
- }, /*#__PURE__*/React.createElement("div", {
110
+ })), /*#__PURE__*/React.createElement("div", {
151
111
  "data-testid": testId && `${testId}-title`,
152
- 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]])
153
113
  }, this.shouldShowLink() ? render.link({
154
114
  item
155
- }) : item.label))));
115
+ }) : item.label)));
156
116
  }
157
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,27 +32,10 @@ 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;
59
40
 
60
41
  // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -63,43 +44,47 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
63
44
  var _this;
64
45
  _classCallCheck(this, ProgressTrackerStage);
65
46
  _this = _callSuper(this, ProgressTrackerStage, [props]);
66
- _defineProperty(_this, "nodeRefMarker", /*#__PURE__*/createRef());
67
- _defineProperty(_this, "nodeRefBar", /*#__PURE__*/createRef());
68
- _defineProperty(_this, "nodeRefTitle", /*#__PURE__*/createRef());
69
47
  _defineProperty(_this, "onEntered", function () {
70
48
  _this.setState({
71
49
  transitioning: false,
72
- oldMarkerColor: getMarkerColor({
73
- status: _this.props.item.status,
74
- percentageCompleted: _this.props.item.percentageComplete
75
- }),
76
50
  oldPercentageComplete: _this.props.item.percentageComplete
77
51
  });
78
52
  });
79
53
  _this.state = {
80
54
  transitioning: false,
81
- oldMarkerColor: getMarkerColor({
82
- status: _this.props.item.status,
83
- percentageCompleted: _this.props.item.percentageComplete
84
- }),
85
55
  oldPercentageComplete: 0
86
56
  };
87
57
  return _this;
88
58
  }
89
59
  _inherits(ProgressTrackerStage, _PureComponent);
90
60
  return _createClass(ProgressTrackerStage, [{
91
- key: "UNSAFE_componentWillMount",
92
- value: function UNSAFE_componentWillMount() {
93
- this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
94
- transitioning: true
95
- }));
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
+ }
96
66
  }
97
67
  }, {
98
- key: "UNSAFE_componentWillReceiveProps",
99
- 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
+ }
100
81
  this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
101
82
  transitioning: true
102
83
  }));
84
+ var timeout = this.props.transitionDelay + this.props.transitionSpeed;
85
+ this.animationTimeoutId = setTimeout(function () {
86
+ _this2.onEntered();
87
+ }, timeout);
103
88
  }
104
89
  }, {
105
90
  key: "shouldShowLink",
@@ -119,51 +104,35 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
119
104
  transitionEasing = _this$props.transitionEasing,
120
105
  testId = _this$props.testId;
121
106
  var ariaCurrent = item.status === 'current' ? 'step' : 'false';
122
- 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({
123
- status: item.status,
124
- percentageCompleted: item.percentageComplete
125
- })), "listStyleType", 'none');
107
+ var listInlineStyles = _defineProperty(_defineProperty(_defineProperty({}, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), '--ds--pt--td', "".concat(transitionDelay, "ms")), '--ds--pt--te', transitionEasing);
126
108
  return /*#__PURE__*/React.createElement("li", {
127
109
  "data-testid": testId
128
110
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
129
111
  ,
130
112
  style: listInlineStyles,
131
113
  "aria-current": ariaCurrent,
132
- className: ax(["_6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
114
+ className: ax(["_2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
133
115
  }, /*#__PURE__*/React.createElement(Box, {
134
116
  xcss: styles.listItemContent
135
- }, /*#__PURE__*/React.createElement(CSSTransition, {
136
- appear: true,
137
- in: this.state.transitioning,
138
- onEntered: this.onEntered,
139
- timeout: transitionDelay + transitionSpeed,
140
- classNames: "fade",
141
- nodeRef: this.nodeRefMarker
142
117
  }, /*#__PURE__*/React.createElement(ProgressMarker, {
143
- testId: testId && "".concat(testId, "-marker")
144
- })), /*#__PURE__*/React.createElement(CSSTransition, {
145
- appear: true,
146
- in: this.state.transitioning,
147
- onEntered: this.onEntered,
148
- timeout: transitionDelay + transitionSpeed,
149
- classNames: "fade",
150
- 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
+ }
151
127
  }, /*#__PURE__*/React.createElement(ProgressBar, {
152
128
  testId: testId && "".concat(testId, "-bar"),
153
129
  percentageComplete: item.percentageComplete
154
- })), /*#__PURE__*/React.createElement(CSSTransition, {
155
- appear: true,
156
- in: this.state.transitioning,
157
- onEntered: this.onEntered,
158
- timeout: transitionDelay + transitionSpeed,
159
- classNames: "fade",
160
- nodeRef: this.nodeRefTitle
161
- }, /*#__PURE__*/React.createElement("div", {
130
+ })), /*#__PURE__*/React.createElement("div", {
162
131
  "data-testid": testId && "".concat(testId, "-title"),
163
- 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]])
164
133
  }, this.shouldShowLink() ? render.link({
165
134
  item: item
166
- }) : item.label))));
135
+ }) : item.label)));
167
136
  }
168
137
  }]);
169
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.3",
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/"
@@ -29,8 +29,7 @@
29
29
  "@atlaskit/theme": "^21.0.0",
30
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"
@@ -47,7 +46,6 @@
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
  },