@atlaskit/progress-tracker 8.9.1 → 8.9.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/progress-tracker
 
+## 8.9.3
+
+### Patch Changes
+
+- [#145688](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145688)
+  [`8b5cef4cf858b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b5cef4cf858b) -
+  Removal of FF platform-progress-tracker-functional-facade which was added during the functional
+  component conversion
+
+## 8.9.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.9.1
 
 ### Patch Changes

package/dist/cjs/index.js

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

package/dist/cjs/progress-tracker.js

@@ -5,12 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -19,16 +13,13 @@ var _constants2 = require("./internal/constants");
 var _link = _interopRequireDefault(require("./internal/link"));
 var _stage = _interopRequireDefault(require("./internal/stage"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /**
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /**
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var containerStyles = (0, _react2.css)({
   display: 'grid',
   width: '100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   margin: '0 auto',
   padding: "var(--ds-space-0, 0px)",
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -39,113 +30,100 @@ var containerStyles = (0, _react2.css)({
     marginBlockStart: "var(--ds-space-500, 40px)"
   }
 });
-var ProgressTracker = exports.default = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(ProgressTracker, _PureComponent);
-  var _super = _createSuper(ProgressTracker);
-  function ProgressTracker() {
-    var _this;
-    (0, _classCallCheck2.default)(this, ProgressTracker);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      prevStages: _this.props.items.map(function (stage) {
-        return _objectSpread(_objectSpread({}, stage), {}, {
-          percentageComplete: 0
-        });
-      })
+/**
+ * __Progress tracker__
+ *
+ * A progress tracker displays the steps and progress through a journey.
+ *
+ * - [Examples](https://atlassian.design/components/progress-tracker/examples)
+ * - [Code](https://atlassian.design/components/progress-tracker/code)
+ * - [Usage](https://atlassian.design/components/progress-tracker/usage)
+ */
+var ProgressTracker = function ProgressTracker(_ref) {
+  var _listInlineStyles;
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'cosy' : _ref$spacing,
+    _ref$render = _ref.render,
+    render = _ref$render === void 0 ? {
+      // Anchor content is coming from another location
+      // eslint-disable-next-line jsx-a11y/anchor-has-content
+      link: function link(_ref2) {
+        var item = _ref2.item;
+        return (0, _react2.jsx)(_link.default, item);
+      }
+    } : _ref$render,
+    _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? true : _ref$animated,
+    testId = _ref.testId,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Progress' : _ref$label;
+  var prevItems = (0, _react.useRef)(items.map(function (stage) {
+    return _objectSpread(_objectSpread({}, stage), {}, {
+      percentageComplete: 0
     });
-    return _this;
-  }
-  (0, _createClass2.default)(ProgressTracker, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var _this2 = this;
-      var prevStages = nextProps.items.map(function (stage) {
-        var oldStage = _this2.props.items.find(function (st) {
-          return st.id === stage.id;
-        });
-        return oldStage !== undefined ? oldStage : stage;
-      });
-      this.setState({
-        prevStages: prevStages
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this,
-        _listInlineStyles;
-      var _this$props = this.props,
-        testId = _this$props.testId,
-        label = _this$props.label;
-      var progressChanges = this.props.items.filter(function (stage, index) {
-        return stage.percentageComplete !== _this3.state.prevStages[index].percentageComplete;
-      }).length;
-      var totalStepsForward = this.props.items.filter(function (stage, index) {
-        return stage.percentageComplete > _this3.state.prevStages[index].percentageComplete;
-      }).length;
-      var totalStepsBack = this.props.items.filter(function (stage, index) {
-        return stage.percentageComplete < _this3.state.prevStages[index].percentageComplete;
-      }).length;
-      var stepsForward = totalStepsForward;
-      var stepsBack = totalStepsBack;
-      var items = this.props.items.map(function (stage, index) {
-        var transitionSpeed = 0;
-        var transitionDelay = 0;
-        var transitionEasing = progressChanges > 1 ? 'linear' : _constants2.ANIMATION_EASE_OUT;
-        if (_this3.props.animated) {
-          transitionSpeed = progressChanges > 1 ? _constants2.LINEAR_TRANSITION_SPEED : _constants2.TRANSITION_SPEED;
-          if (stage.percentageComplete < _this3.state.prevStages[index].percentageComplete) {
-            /**
-             * Load each transition sequentially in reverse.
-             */
-            transitionDelay = (stepsBack - 1) * transitionSpeed;
-            stepsBack -= 1;
-          } else if (stage.percentageComplete > _this3.state.prevStages[index].percentageComplete) {
-            /**
-             * Load each transition sequentially.
-             */
-            transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
-            stepsForward -= 1;
-          }
-        }
-        return (0, _react2.jsx)(_stage.default, {
-          transitionSpeed: transitionSpeed,
-          transitionDelay: transitionDelay,
-          transitionEasing: transitionEasing,
-          key: stage.id,
-          item: stage,
-          render: _this3.props.render
-        });
-      });
-      var listInlineStyles = (_listInlineStyles = {
-        gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
-      }, (0, _defineProperty2.default)(_listInlineStyles, _constants2.varSpacing, _constants.spacing[this.props.spacing]), (0, _defineProperty2.default)(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
-      return (0, _react2.jsx)("ul", {
-        "data-testid": testId
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ,
-        style: listInlineStyles,
-        css: containerStyles,
-        "aria-label": label
-      }, items);
-    }
-  }]);
-  return ProgressTracker;
-}(_react.PureComponent);
-(0, _defineProperty2.default)(ProgressTracker, "defaultProps", {
-  items: [],
-  spacing: 'cosy',
-  render: {
-    // Anchor content is coming from another location
-    // eslint-disable-next-line jsx-a11y/anchor-has-content
-    link: function link(_ref) {
-      var item = _ref.item;
-      return (0, _react2.jsx)(_link.default, item);
+  }));
+  var previousStages = items.map(function (stage) {
+    var _prevItems$current;
+    var oldStage = (_prevItems$current = prevItems.current) === null || _prevItems$current === void 0 ? void 0 : _prevItems$current.find(function (st) {
+      return st.id === stage.id;
+    });
+    return !!oldStage ? oldStage : stage;
+  });
+  (0, _react.useEffect)(function () {
+    prevItems.current = items;
+  }, [items]);
+  var progressChanges = items.filter(function (stage, index) {
+    return stage.percentageComplete !== previousStages[index].percentageComplete;
+  }).length;
+  var totalStepsForward = items.filter(function (stage, index) {
+    return stage.percentageComplete > previousStages[index].percentageComplete;
+  }).length;
+  var totalStepsBack = items.filter(function (stage, index) {
+    return stage.percentageComplete < previousStages[index].percentageComplete;
+  }).length;
+  var stepsForward = totalStepsForward;
+  var stepsBack = totalStepsBack;
+  var progressItems = items.map(function (stage, index) {
+    var transitionSpeed = 0;
+    var transitionDelay = 0;
+    var transitionEasing = progressChanges > 1 ? 'linear' : _constants2.ANIMATION_EASE_OUT;
+    if (animated) {
+      transitionSpeed = progressChanges > 1 ? _constants2.LINEAR_TRANSITION_SPEED : _constants2.TRANSITION_SPEED;
+      if (stage.percentageComplete < previousStages[index].percentageComplete) {
+        /**
+         * Load each transition sequentially in reverse.
+         */
+        transitionDelay = (stepsBack - 1) * transitionSpeed;
+        stepsBack -= 1;
+      } else if (stage.percentageComplete > previousStages[index].percentageComplete) {
+        /**
+         * Load each transition sequentially.
+         */
+        transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
+        stepsForward -= 1;
+      }
     }
-  },
-  animated: true,
-  label: 'Progress'
-});
+    return (0, _react2.jsx)(_stage.default, {
+      transitionSpeed: transitionSpeed,
+      transitionDelay: transitionDelay,
+      transitionEasing: transitionEasing,
+      key: stage.id,
+      item: stage,
+      render: render
+    });
+  });
+  var listInlineStyles = (_listInlineStyles = {
+    gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
+  }, (0, _defineProperty2.default)(_listInlineStyles, _constants2.varSpacing, _constants.spacing[spacing]), (0, _defineProperty2.default)(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
+  return (0, _react2.jsx)("ul", {
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: listInlineStyles,
+    css: containerStyles,
+    "aria-label": label
+  }, progressItems);
+};
+var _default = exports.default = ProgressTracker;

package/dist/es2019/index.js

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

package/dist/es2019/progress-tracker.js

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

package/dist/esm/index.js

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