@atlaskit/progress-tracker 8.2.3 → 8.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/progress-tracker
 
+## 8.3.0
+
+### Minor Changes
+
+- [`099a8b4949e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/099a8b4949e) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.2.5
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 8.2.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.2.3
 
 ### Patch Changes

package/constants/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/constants.js",
   "module": "../dist/esm/constants.js",
   "module:es2019": "../dist/es2019/constants.js",
+  "sideEffects": false,
   "types": "../dist/types/constants.d.ts"
 }

package/dist/cjs/internal/bar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -14,7 +14,7 @@ var _constants = require("../constants");
 var _constants2 = require("./constants");
 
 /** @jsx jsx */
-var progressBarStyles = (0, _core.css)({
+var progressBarStyles = (0, _react.css)({
   height: _constants2.PROGRESS_BAR_HEIGHT,
   position: 'absolute',
   left: '50%',
@@ -35,7 +35,7 @@ var progressBarStyles = (0, _core.css)({
 var ProgressBar = function ProgressBar(_ref) {
   var percentageComplete = _ref.percentageComplete,
       testId = _ref.testId;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "data-testid": testId,
     style: {
       width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100, " * calc(var(").concat(_constants2.varSpacing, ", ").concat(_constants.spacing.cosy, "px) + ").concat(_constants2.HALF_GRID_SIZE, "px))")

package/dist/cjs/internal/link.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 /** @jsx jsx */
-var linkStyles = (0, _core.css)({
+var linkStyles = (0, _react.css)({
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
   cursor: 'pointer'
 });
@@ -23,7 +23,7 @@ var Link = function Link(_ref) {
       onClick = _ref.onClick,
       label = _ref.label,
       testId = _ref.testId;
-  return (0, _core.jsx)("a", {
+  return (0, _react.jsx)("a", {
     css: linkStyles,
     href: href,
     onClick: onClick,

package/dist/cjs/internal/marker.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("./constants");
 
 /* eslint-disable @repo/internal/styles/no-nested-styles */
 
 /** @jsx jsx */
-var progressMarkerStyles = (0, _core.css)({
+var progressMarkerStyles = (0, _react.css)({
   width: _constants.PROGRESS_BAR_HEIGHT,
   height: _constants.PROGRESS_BAR_HEIGHT,
   position: 'absolute',
@@ -43,7 +43,7 @@ var progressMarkerStyles = (0, _core.css)({
 
 var ProgressMarker = function ProgressMarker(_ref) {
   var testId = _ref.testId;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "data-testid": testId,
     css: progressMarkerStyles
   });

package/dist/cjs/internal/stage.js

@@ -23,7 +23,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _reactTransitionGroup = require("react-transition-group");
 
@@ -45,15 +45,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var containerStyles = (0, _core.css)({
+var containerStyles = (0, _react2.css)({
   width: '100%',
   position: 'relative'
 });
-var listItemStyles = (0, _core.css)({
+var listItemStyles = (0, _react2.css)({
   margin: 0,
   overflowWrap: 'break-word'
 });
-var titleStyles = (0, _core.css)({
+var titleStyles = (0, _react2.css)({
   marginTop: _constants2.LABEL_TOP_SPACING,
   marginRight: 'auto',
   marginLeft: 'auto',
@@ -126,37 +126,37 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
           transitionEasing = _this$props.transitionEasing,
           testId = _this$props.testId;
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
-      return (0, _core.jsx)("li", {
+      return (0, _react2.jsx)("li", {
         "data-testid": testId,
         style: (_ref = {}, (0, _defineProperty2.default)(_ref, _constants2.varTransitionSpeed, "".concat(transitionSpeed, "ms")), (0, _defineProperty2.default)(_ref, _constants2.varTransitionDelay, "".concat(transitionDelay, "ms")), (0, _defineProperty2.default)(_ref, _constants2.varTransitionEasing, transitionEasing), (0, _defineProperty2.default)(_ref, _constants2.varMarkerColor, this.state.oldMarkerColor), (0, _defineProperty2.default)(_ref, _constants2.varBackgroundColor, (0, _utils.getMarkerColor)(item.status)), _ref),
         css: listItemStyles,
         "aria-current": ariaCurrent
-      }, (0, _core.jsx)("div", {
+      }, (0, _react2.jsx)("div", {
         css: containerStyles
-      }, (0, _core.jsx)(_reactTransitionGroup.CSSTransition, {
+      }, (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, (0, _core.jsx)(_marker.default, {
+      }, (0, _react2.jsx)(_marker.default, {
         testId: testId && "".concat(testId, "-marker")
-      })), (0, _core.jsx)(_reactTransitionGroup.CSSTransition, {
+      })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, (0, _core.jsx)(_bar.default, {
+      }, (0, _react2.jsx)(_bar.default, {
         testId: testId && "".concat(testId, "-bar"),
         percentageComplete: item.percentageComplete
-      })), (0, _core.jsx)(_reactTransitionGroup.CSSTransition, {
+      })), (0, _react2.jsx)(_reactTransitionGroup.CSSTransition, {
         appear: true,
         in: this.state.transitioning,
         onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, (0, _core.jsx)("div", {
+      }, (0, _react2.jsx)("div", {
         css: titleStyles,
         "data-testid": testId && "".concat(testId, "-title"),
         style: {

package/dist/cjs/progress-tracker.js

@@ -23,7 +23,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("./constants");
 
@@ -41,7 +41,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var containerStyles = (0, _core.css)({
+var containerStyles = (0, _react2.css)({
   display: 'grid',
   width: '100%',
   margin: '0 auto',
@@ -137,7 +137,7 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
           }
         }
 
-        return (0, _core.jsx)(_stage.default, {
+        return (0, _react2.jsx)(_stage.default, {
           transitionSpeed: transitionSpeed,
           transitionDelay: transitionDelay,
           transitionEasing: transitionEasing,
@@ -146,7 +146,7 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
           render: _this3.props.render
         });
       });
-      return (0, _core.jsx)("ul", {
+      return (0, _react2.jsx)("ul", {
         "data-testid": testId,
         style: (_ref = {
           gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
@@ -166,7 +166,7 @@ exports.default = ProgressTracker;
   render: {
     link: function link(_ref2) {
       var item = _ref2.item;
-      return (0, _core.jsx)(_link.default, item);
+      return (0, _react2.jsx)(_link.default, item);
     }
   },
   animated: true,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.2.3",
+	"version": "8.3.0",
 	"sideEffects": false
 }

package/dist/es2019/internal/bar.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B300 } from '@atlaskit/theme/colors';
 import { spacing } from '../constants';
 import { HALF_GRID_SIZE, LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varSpacing, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';

package/dist/es2019/internal/link.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 const linkStyles = css({
   color: `var(--ds-text, ${N800})`,

package/dist/es2019/internal/marker.js

@@ -1,7 +1,7 @@
 /* eslint-disable @repo/internal/styles/no-nested-styles */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
 const progressMarkerStyles = css({
   width: PROGRESS_BAR_HEIGHT,

package/dist/es2019/internal/stage.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { PureComponent } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
 import { fontSize } from '@atlaskit/theme/constants';
 import ProgressBar from './bar';

package/dist/es2019/progress-tracker.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import { PureComponent } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { defaultGridSize, spacing } from './constants';
 import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
 import Link from './internal/link';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.2.3",
+	"version": "8.3.0",
 	"sideEffects": false
 }

package/dist/esm/internal/bar.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B300 } from '@atlaskit/theme/colors';
 import { spacing } from '../constants';
 import { HALF_GRID_SIZE, LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varSpacing, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';

package/dist/esm/internal/link.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 var linkStyles = css({
   color: "var(--ds-text, ".concat(N800, ")"),

package/dist/esm/internal/marker.js

@@ -1,7 +1,7 @@
 /* eslint-disable @repo/internal/styles/no-nested-styles */
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
 var progressMarkerStyles = css({
   width: PROGRESS_BAR_HEIGHT,

package/dist/esm/internal/stage.js

@@ -18,7 +18,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import { PureComponent } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
 import { fontSize } from '@atlaskit/theme/constants';
 import ProgressBar from './bar';

package/dist/esm/progress-tracker.js

@@ -18,7 +18,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import { PureComponent } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { defaultGridSize, spacing } from './constants';
 import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
 import Link from './internal/link';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.2.3",
+	"version": "8.3.0",
 	"sideEffects": false
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 interface StageBarProps {
     testId?: string;
     percentageComplete: number;
@@ -9,5 +9,5 @@ interface StageBarProps {
  * A progress bar describes the horizontal tracking bar that traverses each individual step.
  *
  */
-declare const ProgressBar: ({ percentageComplete, testId }: StageBarProps) => JSX.Element;
+declare const ProgressBar: ({ percentageComplete, testId }: StageBarProps) => jsx.JSX.Element;
 export default ProgressBar;

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import type { ProgressTrackerStageProps } from './types';
 interface State {
     transitioning: boolean;
@@ -13,5 +14,5 @@ export default class ProgressTrackerStage extends PureComponent<ProgressTrackerS
     UNSAFE_componentWillReceiveProps(): void;
     shouldShowLink(): boolean;
     onEntered: () => void;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import type { LinkComponentProps, ProgressTrackerStageRenderProp, Spacing, Stages } from './types';
 export interface ProgressTrackerProps {
     /**
@@ -35,7 +36,7 @@ export default class ProgressTracker extends PureComponent<ProgressTrackerProps,
         items: never[];
         spacing: string;
         render: {
-            link: ({ item }: LinkComponentProps) => JSX.Element;
+            link: ({ item }: LinkComponentProps) => jsx.JSX.Element;
         };
         animated: boolean;
         label: string;
@@ -52,6 +53,6 @@ export default class ProgressTracker extends PureComponent<ProgressTrackerProps,
         }[];
     };
     UNSAFE_componentWillReceiveProps(nextProps: ProgressTrackerProps): void;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }
 export {};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/progress-tracker",
-  "version": "8.2.3",
+  "version": "8.3.0",
   "description": "A progress tracker displays the steps and progress through a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -18,14 +18,15 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Progress tracker"
+      "name": "Progress tracker",
+      "category": "Components"
     }
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "react-transition-group": "^4.4.1"
   },
   "peerDependencies": {
@@ -34,8 +35,9 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.0.1",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -44,13 +46,14 @@
     "react-dom": "^16.8.0",
     "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.8.0",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "theming": "tokens",
       "styling": [

package/report.api.md

@@ -0,0 +1,103 @@
+## API Report File for "@atlaskit/progress-tracker"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { PureComponent } from 'react';
+
+declare interface LinkComponentProps {
+  item: Stage;
+}
+
+export declare class ProgressTracker extends PureComponent<
+  ProgressTrackerProps,
+  State
+> {
+  static defaultProps: {
+    items: never[];
+    spacing: string;
+    render: {
+      link: ({ item }: LinkComponentProps) => JSX.Element;
+    };
+    animated: boolean;
+    label: string;
+  };
+  state: {
+    prevStages: {
+      percentageComplete: number;
+      id: string;
+      label: string;
+      status: Status;
+      noLink?: boolean | undefined;
+      href?: string | undefined;
+      onClick?: (() => void) | undefined;
+    }[];
+  };
+  UNSAFE_componentWillReceiveProps(nextProps: ProgressTrackerProps): void;
+  render(): JSX.Element;
+}
+
+export declare interface ProgressTrackerProps {
+  /**
+   * Ordered list of stage data
+   */
+  items: Stages;
+  /**
+   * Margin spacing type between steps
+   */
+  spacing: Spacing;
+  /**
+   * Render prop to specify custom implementations of components
+   */
+  render: ProgressTrackerStageRenderProp;
+  /**
+   * Turns off transition animations if set to false
+   */
+  animated: boolean;
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+   */
+  testId?: string;
+  /**
+   * Text to be used as an aria-label of progress tracker
+   */
+  label?: string;
+}
+
+declare interface ProgressTrackerStageRenderProp {
+  link: (props: LinkComponentProps) => JSX.Element;
+}
+
+declare type Spacing = keyof typeof spacing;
+
+/**
+ * Ideally these are exported by @atlaskit/page
+ */
+declare const spacing: {
+  readonly comfortable: number;
+  readonly cosy: number;
+  readonly compact: number;
+};
+
+export declare interface Stage {
+  id: string;
+  label: string;
+  percentageComplete: number;
+  status: Status;
+  noLink?: boolean;
+  href?: string;
+  onClick?: () => void;
+}
+
+export declare type Stages = Stage[];
+
+declare interface State {
+  prevStages: Stages;
+}
+
+declare type Status = 'unvisited' | 'visited' | 'current' | 'disabled';
+
+export {};
+```

package/types/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/types.js",
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
+  "sideEffects": false,
   "types": "../dist/types/types.d.ts"
 }