@atlaskit/progress-tracker 8.8.2 → 8.9.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 (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/internal/stage.js +17 -6
  3. package/dist/es2019/internal/stage.js +18 -7
  4. package/dist/esm/internal/stage.js +18 -7
  5. package/dist/types/internal/stage.d.ts +3 -0
  6. package/dist/types-ts4.5/internal/stage.d.ts +3 -0
  7. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/progress-tracker
2
2
 
3
+ ## 8.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`2d1da097bd763`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2d1da097bd763) -
8
+ DSP-20687 removing usage of findDOMNode in react-transition-group behind ff
9
+
3
10
  ## 8.8.2
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/internal/stage.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
9
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
9
10
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
11
  var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -15,6 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
15
16
  var _react = require("react");
16
17
  var _react2 = require("@emotion/react");
17
18
  var _reactTransitionGroup = require("react-transition-group");
19
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
20
  var _primitives = require("@atlaskit/primitives");
19
21
  var _bar = _interopRequireDefault(require("./bar"));
20
22
  var _constants = require("./constants");
@@ -58,6 +60,9 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
58
60
  var _this;
59
61
  (0, _classCallCheck2.default)(this, ProgressTrackerStage);
60
62
  _this = _super.call(this, props);
63
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nodeRefMarker", /*#__PURE__*/(0, _react.createRef)());
64
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nodeRefBar", /*#__PURE__*/(0, _react.createRef)());
65
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "nodeRefTitle", /*#__PURE__*/(0, _react.createRef)());
61
66
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEntered", function () {
62
67
  _this.setState({
63
68
  transitioning: false,
@@ -113,30 +118,36 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
113
118
  "aria-current": ariaCurrent
114
119
  }, (0, _react2.jsx)(_primitives.Box, {
115
120
  xcss: listItemContentStyles
116
- }, (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
121
+ }, (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
117
122
  appear: true,
118
123
  in: this.state.transitioning,
119
124
  onEntered: this.onEntered,
120
125
  timeout: transitionDelay + transitionSpeed,
121
126
  classNames: "fade"
122
- }, (0, _react2.jsx)(_marker.default, {
127
+ }, (0, _platformFeatureFlags.fg)('platform-design-system-dsp-20687-transition-group') && {
128
+ nodeRef: this.nodeRefMarker
129
+ }), (0, _react2.jsx)(_marker.default, {
123
130
  testId: testId && "".concat(testId, "-marker")
124
- })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
131
+ })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
125
132
  appear: true,
126
133
  in: this.state.transitioning,
127
134
  onEntered: this.onEntered,
128
135
  timeout: transitionDelay + transitionSpeed,
129
136
  classNames: "fade"
130
- }, (0, _react2.jsx)(_bar.default, {
137
+ }, (0, _platformFeatureFlags.fg)('platform-design-system-dsp-20687-transition-group') && {
138
+ nodeRef: this.nodeRefBar
139
+ }), (0, _react2.jsx)(_bar.default, {
131
140
  testId: testId && "".concat(testId, "-bar"),
132
141
  percentageComplete: item.percentageComplete
133
- })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
142
+ })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, (0, _extends2.default)({
134
143
  appear: true,
135
144
  in: this.state.transitioning,
136
145
  onEntered: this.onEntered,
137
146
  timeout: transitionDelay + transitionSpeed,
138
147
  classNames: "fade"
139
- }, (0, _react2.jsx)("div", {
148
+ }, (0, _platformFeatureFlags.fg)('platform-design-system-dsp-20687-transition-group') && {
149
+ nodeRef: this.nodeRefTitle
150
+ }), (0, _react2.jsx)("div", {
140
151
  css: titleStyles,
141
152
  style: {
142
153
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
package/dist/es2019/internal/stage.js CHANGED
@@ -1,14 +1,16 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
3
  /* eslint-disable @atlaskit/design-system/no-nested-styles */
3
4
  /**
4
5
  * @jsxRuntime classic
5
6
  * @jsx jsx
6
7
  */
7
- import { PureComponent } from 'react';
8
+ import { createRef, PureComponent } from 'react';
8
9
 
9
10
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
11
  import { css, jsx } from '@emotion/react';
11
12
  import { CSSTransition } from 'react-transition-group';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
12
14
  import { Box, xcss } from '@atlaskit/primitives';
13
15
  import ProgressBar from './bar';
14
16
  import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
@@ -41,6 +43,9 @@ const titleStyles = css({
41
43
  export default class ProgressTrackerStage extends PureComponent {
42
44
  constructor(props) {
43
45
  super(props);
46
+ _defineProperty(this, "nodeRefMarker", /*#__PURE__*/createRef());
47
+ _defineProperty(this, "nodeRefBar", /*#__PURE__*/createRef());
48
+ _defineProperty(this, "nodeRefTitle", /*#__PURE__*/createRef());
44
49
  _defineProperty(this, "onEntered", () => {
45
50
  this.setState({
46
51
  transitioning: false,
@@ -96,30 +101,36 @@ export default class ProgressTrackerStage extends PureComponent {
96
101
  "aria-current": ariaCurrent
97
102
  }, jsx(Box, {
98
103
  xcss: listItemContentStyles
99
- }, jsx(CSSTransition, {
104
+ }, jsx(CSSTransition, _extends({
100
105
  appear: true,
101
106
  in: this.state.transitioning,
102
107
  onEntered: this.onEntered,
103
108
  timeout: transitionDelay + transitionSpeed,
104
109
  classNames: "fade"
105
- }, jsx(ProgressMarker, {
110
+ }, fg('platform-design-system-dsp-20687-transition-group') && {
111
+ nodeRef: this.nodeRefMarker
112
+ }), jsx(ProgressMarker, {
106
113
  testId: testId && `${testId}-marker`
107
- })), jsx(CSSTransition, {
114
+ })), jsx(CSSTransition, _extends({
108
115
  appear: true,
109
116
  in: this.state.transitioning,
110
117
  onEntered: this.onEntered,
111
118
  timeout: transitionDelay + transitionSpeed,
112
119
  classNames: "fade"
113
- }, jsx(ProgressBar, {
120
+ }, fg('platform-design-system-dsp-20687-transition-group') && {
121
+ nodeRef: this.nodeRefBar
122
+ }), jsx(ProgressBar, {
114
123
  testId: testId && `${testId}-bar`,
115
124
  percentageComplete: item.percentageComplete
116
- })), jsx(CSSTransition, {
125
+ })), jsx(CSSTransition, _extends({
117
126
  appear: true,
118
127
  in: this.state.transitioning,
119
128
  onEntered: this.onEntered,
120
129
  timeout: transitionDelay + transitionSpeed,
121
130
  classNames: "fade"
122
- }, jsx("div", {
131
+ }, fg('platform-design-system-dsp-20687-transition-group') && {
132
+ nodeRef: this.nodeRefTitle
133
+ }), jsx("div", {
123
134
  css: titleStyles,
124
135
  style: {
125
136
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
package/dist/esm/internal/stage.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
3
  import _createClass from "@babel/runtime/helpers/createClass";
3
4
  import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -14,11 +15,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
14
15
  * @jsxRuntime classic
15
16
  * @jsx jsx
16
17
  */
17
- import { PureComponent } from 'react';
18
+ import { createRef, PureComponent } from 'react';
18
19
 
19
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
20
21
  import { css, jsx } from '@emotion/react';
21
22
  import { CSSTransition } from 'react-transition-group';
23
+ import { fg } from '@atlaskit/platform-feature-flags';
22
24
  import { Box, xcss } from '@atlaskit/primitives';
23
25
  import ProgressBar from './bar';
24
26
  import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
@@ -55,6 +57,9 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
55
57
  var _this;
56
58
  _classCallCheck(this, ProgressTrackerStage);
57
59
  _this = _super.call(this, props);
60
+ _defineProperty(_assertThisInitialized(_this), "nodeRefMarker", /*#__PURE__*/createRef());
61
+ _defineProperty(_assertThisInitialized(_this), "nodeRefBar", /*#__PURE__*/createRef());
62
+ _defineProperty(_assertThisInitialized(_this), "nodeRefTitle", /*#__PURE__*/createRef());
58
63
  _defineProperty(_assertThisInitialized(_this), "onEntered", function () {
59
64
  _this.setState({
60
65
  transitioning: false,
@@ -110,30 +115,36 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
110
115
  "aria-current": ariaCurrent
111
116
  }, jsx(Box, {
112
117
  xcss: listItemContentStyles
113
- }, jsx(CSSTransition, {
118
+ }, jsx(CSSTransition, _extends({
114
119
  appear: true,
115
120
  in: this.state.transitioning,
116
121
  onEntered: this.onEntered,
117
122
  timeout: transitionDelay + transitionSpeed,
118
123
  classNames: "fade"
119
- }, jsx(ProgressMarker, {
124
+ }, fg('platform-design-system-dsp-20687-transition-group') && {
125
+ nodeRef: this.nodeRefMarker
126
+ }), jsx(ProgressMarker, {
120
127
  testId: testId && "".concat(testId, "-marker")
121
- })), jsx(CSSTransition, {
128
+ })), jsx(CSSTransition, _extends({
122
129
  appear: true,
123
130
  in: this.state.transitioning,
124
131
  onEntered: this.onEntered,
125
132
  timeout: transitionDelay + transitionSpeed,
126
133
  classNames: "fade"
127
- }, jsx(ProgressBar, {
134
+ }, fg('platform-design-system-dsp-20687-transition-group') && {
135
+ nodeRef: this.nodeRefBar
136
+ }), jsx(ProgressBar, {
128
137
  testId: testId && "".concat(testId, "-bar"),
129
138
  percentageComplete: item.percentageComplete
130
- })), jsx(CSSTransition, {
139
+ })), jsx(CSSTransition, _extends({
131
140
  appear: true,
132
141
  in: this.state.transitioning,
133
142
  onEntered: this.onEntered,
134
143
  timeout: transitionDelay + transitionSpeed,
135
144
  classNames: "fade"
136
- }, jsx("div", {
145
+ }, fg('platform-design-system-dsp-20687-transition-group') && {
146
+ nodeRef: this.nodeRefTitle
147
+ }), jsx("div", {
137
148
  css: titleStyles,
138
149
  style: {
139
150
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
package/dist/types/internal/stage.d.ts CHANGED
@@ -12,6 +12,9 @@ interface State {
12
12
  }
13
13
  export type { ProgressTrackerStageProps };
14
14
  export default class ProgressTrackerStage extends PureComponent<ProgressTrackerStageProps, State> {
15
+ nodeRefMarker: import("react").RefObject<HTMLElement>;
16
+ nodeRefBar: import("react").RefObject<HTMLElement>;
17
+ nodeRefTitle: import("react").RefObject<HTMLElement>;
15
18
  constructor(props: ProgressTrackerStageProps);
16
19
  UNSAFE_componentWillMount(): void;
17
20
  UNSAFE_componentWillReceiveProps(): void;
package/dist/types-ts4.5/internal/stage.d.ts CHANGED
@@ -12,6 +12,9 @@ interface State {
12
12
  }
13
13
  export type { ProgressTrackerStageProps };
14
14
  export default class ProgressTrackerStage extends PureComponent<ProgressTrackerStageProps, State> {
15
+ nodeRefMarker: import("react").RefObject<HTMLElement>;
16
+ nodeRefBar: import("react").RefObject<HTMLElement>;
17
+ nodeRefTitle: import("react").RefObject<HTMLElement>;
15
18
  constructor(props: ProgressTrackerStageProps);
16
19
  UNSAFE_componentWillMount(): void;
17
20
  UNSAFE_componentWillReceiveProps(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/progress-tracker",
3
- "version": "8.8.2",
3
+ "version": "8.9.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/"
@@ -85,6 +85,9 @@
85
85
  "platform-feature-flags": {
86
86
  "platform-progress-tracker-functional-facade": {
87
87
  "type": "boolean"
88
+ },
89
+ "platform-design-system-dsp-20687-transition-group": {
90
+ "type": "boolean"
88
91
  }
89
92
  }
90
93
  }