@atlaskit/progress-indicator 9.0.5 → 9.2.0

package/dist/esm/components/appearances.js

@@ -0,0 +1,42 @@
+import { B100, B400, B75, DN30, DN300A, DN600, DN70, N0, N50, N900, P300, P400, P75 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
+var colorMap = {
+  default: themed({
+    light: "var(--ds-background-neutral, ".concat(N50, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN70, ")")
+  }),
+  help: themed({
+    light: "var(--ds-background-neutral, ".concat(P75, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN70, ")")
+  }),
+  inverted: themed({
+    light: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
+    dark: "var(--ds-icon-subtle, ".concat(DN300A, ")")
+  }),
+  primary: themed({
+    light: "var(--ds-background-neutral, ".concat(B75, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN70, ")")
+  })
+};
+var selectedColorMap = {
+  default: themed({
+    light: "var(--ds-icon, ".concat(N900, ")"),
+    dark: "var(--ds-icon, ".concat(DN600, ")")
+  }),
+  help: themed({
+    light: "var(--ds-icon-discovery, ".concat(P400, ")"),
+    dark: "var(--ds-icon-discovery, ".concat(P300, ")")
+  }),
+  inverted: themed({
+    light: "var(--ds-icon-inverse, ".concat(N0, ")"),
+    dark: "var(--ds-icon-inverse, ".concat(DN30, ")")
+  }),
+  primary: themed({
+    light: "var(--ds-icon-brand, ".concat(B400, ")"),
+    dark: "var(--ds-icon-brand, ".concat(B100, ")")
+  })
+};
+export var getBgColor = function getBgColor(appearance, isSelected) {
+  return isSelected ? selectedColorMap[appearance] : colorMap[appearance];
+};

package/dist/esm/components/constants.js

@@ -0,0 +1,12 @@
+export var sizes = {
+  small: 4,
+  default: 8,
+  large: 12
+};
+export var spacingDivision = {
+  comfortable: 1,
+  cozy: 2,
+  compact: 4
+};
+export var varDotsSize = '--ds-dots-size';
+export var varDotsMargin = '--ds-dots-margin';

package/dist/esm/components/indicator.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import FocusRing from '@atlaskit/focus-ring';
+import { varDotsMargin, varDotsSize } from './constants';
+var commonStyles = css({
+  width: "var(".concat(varDotsSize, ")"),
+  height: "var(".concat(varDotsSize, ")"),
+  position: 'relative',
+  borderRadius: '50%',
+  '&::before': {
+    display: 'block',
+    width: "calc(var(".concat(varDotsSize, ") + var(").concat(varDotsMargin, "))"),
+    height: "calc(var(".concat(varDotsSize, ") + var(").concat(varDotsMargin, "))"),
+    position: 'absolute',
+    top: "calc(-1 * var(".concat(varDotsMargin, ") / 2)"),
+    left: "calc(-1 * var(".concat(varDotsMargin, ") / 2)"),
+    content: '""'
+  }
+});
+var buttonStyles = css({
+  padding: 0,
+  border: 0,
+  cursor: 'pointer',
+  outline: 0
+});
+/**
+ * __Presentational indicator__
+ *
+ * A presentational indicator with no interactivity
+ */
+
+export var PresentationalIndicator = function PresentationalIndicator(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+) {
+  return jsx("div", _extends({}, props, {
+    css: commonStyles,
+    role: "presentation"
+  }));
+};
+/**
+ * __Button indicator__
+ *
+ * An interactive indicator.
+ */
+
+export var ButtonIndicator = function ButtonIndicator(props) {
+  return jsx(FocusRing, null, jsx("button", _extends({}, props, {
+    role: "tab",
+    type: "button",
+    css: [commonStyles, buttonStyles]
+  })));
+};

package/dist/esm/components/progress-dots.js

@@ -0,0 +1,140 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import React, { useCallback, useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import noop from '@atlaskit/ds-lib/noop';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { getBgColor } from './appearances';
+import { sizes, spacingDivision, varDotsMargin, varDotsSize } from './constants';
+import { ButtonIndicator, PresentationalIndicator } from './indicator';
+var packageName = "@atlaskit/progress-indicator";
+var packageVersion = "9.2.0";
+var containerStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  gap: "var(".concat(varDotsMargin, ")")
+});
+/**
+ * __ProgressDots__
+ *
+ * A progress indicator shows the user where they are along the steps of a journey.
+ */
+
+var ProgressDots = function ProgressDots(_ref) {
+  var _ref2;
+
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      _ref$ariaControls = _ref.ariaControls,
+      ariaControls = _ref$ariaControls === void 0 ? 'panel' : _ref$ariaControls,
+      _ref$ariaLabel = _ref.ariaLabel,
+      ariaLabel = _ref$ariaLabel === void 0 ? 'tab' : _ref$ariaLabel,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      _ref$spacing = _ref.spacing,
+      gutter = _ref$spacing === void 0 ? 'comfortable' : _ref$spacing,
+      selectedIndex = _ref.selectedIndex,
+      testId = _ref.testId,
+      values = _ref.values,
+      onSelect = _ref.onSelect;
+  var tablistRef = useRef(null);
+  var onSelectWithAnalytics = usePlatformLeafEventHandler({
+    fn: onSelect || noop,
+    action: 'selected',
+    componentName: 'progressIndicator',
+    packageName: packageName,
+    packageVersion: packageVersion
+  });
+  var handleKeyDown = useCallback(function (event) {
+    var indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
+
+    if (!indicators.includes(event.target)) {
+      return;
+    } // bail if not valid arrow key
+
+
+    var isLeft = event.key === 'ArrowLeft';
+    var isRight = event.key === 'ArrowRight';
+
+    if (!isLeft && !isRight) {
+      return;
+    } // bail if at either end of the values
+
+
+    var isAlpha = isLeft && selectedIndex === 0;
+    var isOmega = isRight && selectedIndex === values.length - 1;
+
+    if (isAlpha || isOmega) {
+      return;
+    }
+
+    var index = isLeft ? selectedIndex - 1 : selectedIndex + 1; // call the consumer's select method and focus the applicable indicator
+
+    if (onSelect) {
+      onSelectWithAnalytics({
+        event: event,
+        index: index
+      });
+    }
+
+    if (typeof indicators[index].focus === 'function') {
+      indicators[index].focus();
+    }
+  }, [onSelectWithAnalytics, selectedIndex, values, onSelect]);
+  useEffect(function () {
+    if (onSelect) {
+      document.addEventListener('keydown', handleKeyDown, false);
+    }
+
+    return function () {
+      if (onSelect) {
+        document.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+  }, [onSelect, handleKeyDown]);
+  var theme = useGlobalTheme();
+  return jsx("div", {
+    "data-testid": testId,
+    css: containerStyles,
+    style: (_ref2 = {}, _defineProperty(_ref2, varDotsSize, "".concat(sizes[size], "px")), _defineProperty(_ref2, varDotsMargin, "".concat(sizes[size] / spacingDivision[gutter], "px")), _ref2),
+    ref: function ref(r) {
+      tablistRef.current = r;
+    },
+    role: "tablist"
+  }, values.map(function (_, index) {
+    var isSelected = selectedIndex === index;
+    var tabId = "".concat(ariaLabel).concat(index);
+    var panelId = "".concat(ariaControls).concat(index);
+    var backgroundColor = getBgColor(appearance, isSelected)({
+      theme: theme
+    });
+    return onSelect ? jsx(ButtonIndicator, {
+      key: index,
+      style: {
+        backgroundColor: backgroundColor
+      },
+      "aria-controls": panelId,
+      "aria-label": tabId,
+      "aria-selected": isSelected,
+      id: tabId,
+      onClick: function onClick(event) {
+        return onSelectWithAnalytics({
+          event: event,
+          index: index
+        });
+      },
+      tabIndex: isSelected ? 0 : -1,
+      "data-testid": testId && "".concat(testId, "-ind-").concat(index)
+    }) : jsx(PresentationalIndicator, {
+      "data-testid": testId && "".concat(testId, "-ind-").concat(index),
+      key: index,
+      style: {
+        backgroundColor: backgroundColor
+      }
+    });
+  }));
+};
+
+export default ProgressDots;

package/dist/esm/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.js

@@ -2,4 +2,4 @@
 // having a single named export will avoid consumers having to update their
 // imports when there's a feature release.
 // eslint-disable-next-line import/prefer-default-export
-export { default as ProgressIndicator } from './components/Dots';
+export { default as ProgressIndicator } from './components/progress-dots';

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "9.0.5",
+	"version": "9.2.0",
 	"sideEffects": false
 }

package/dist/types/components/appearances.d.ts

@@ -0,0 +1,2 @@
+import type { DotsAppearance } from './types';
+export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-discovery)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-brand)">;

package/dist/types/components/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const sizes: {
+    small: number;
+    default: number;
+    large: number;
+};
+export declare const spacingDivision: {
+    comfortable: number;
+    cozy: number;
+    compact: number;
+};
+export declare const varDotsSize = "--ds-dots-size";
+export declare const varDotsMargin = "--ds-dots-margin";

package/dist/types/components/indicator.d.ts

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import type { HTMLAttributes } from 'react';
+/**
+ * __Presentational indicator__
+ *
+ * A presentational indicator with no interactivity
+ */
+export declare const PresentationalIndicator: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+/**
+ * __Button indicator__
+ *
+ * An interactive indicator.
+ */
+export declare const ButtonIndicator: (props: HTMLAttributes<HTMLButtonElement>) => JSX.Element;

package/dist/types/components/progress-dots.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import type { ProgressDotsProps } from '../types';
+/**
+ * __ProgressDots__
+ *
+ * A progress indicator shows the user where they are along the steps of a journey.
+ */
+declare const ProgressDots: FC<ProgressDotsProps>;
+export default ProgressDots;

package/dist/types/components/types.d.ts

@@ -0,0 +1,3 @@
+export declare type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
+export declare type Spacing = 'comfortable' | 'cozy' | 'compact';
+export declare type Size = 'small' | 'default' | 'large';

package/dist/types/index.d.ts

@@ -1 +1,2 @@
-export { default as ProgressIndicator } from './components/Dots';
+export { default as ProgressIndicator } from './components/progress-dots';
+export type { ProgressDotsProps } from './types';

package/dist/types/types.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { DotsAppearance, Size, Spacing } from './components/types';
+export interface ProgressDotsProps {
+    /**
+     * The color of the indicators
+     */
+    appearance?: DotsAppearance;
+    /**
+     * The aria-controls text applied to each indicator, appended by the index
+     */
+    ariaControls?: string;
+    /**
+     * The aria-label text applied to each indicator, appended by the index
+     */
+    ariaLabel?: string;
+    /**
+     * Function called when an indicator is selected
+     */
+    onSelect?: (eventData: {
+        event: React.MouseEvent<HTMLButtonElement>;
+        index: number;
+    }, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Which indicator is currently selected
+     */
+    selectedIndex: number;
+    /**
+     * Corresponds to the width & height of each indicator
+     */
+    size?: Size;
+    /**
+     * How much of a gutter is desired between indicators
+     */
+    spacing?: Spacing;
+    /**
+     * A hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * An array of values mapped over to create the indicators
+     */
+    values: any[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-indicator",
-  "version": "9.0.5",
+  "version": "9.2.0",
   "description": "A progress indicator shows the user where they are along the steps of a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,11 +13,9 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Progress indicator"
@@ -25,32 +23,52 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/theme": "^11.3.0",
-    "@babel/runtime": "^7.0.0"
+    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/focus-ring": "^1.0.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "styled-components": "^3.2.6"
+    "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^15.1.0",
+    "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/react": "^8.0.1",
     "@types/jscodeshift": "^0.11.0",
     "enzyme": "^3.10.0",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
+    "styled-components": "^3.2.6",
     "typescript": "3.9.6"
   },
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "ui-components": "lite-mode",
+      "design-system": "v1",
+      "styling": [
+        "static",
+        "emotion"
+      ],
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
     }
   },
+  "af:exports": {
+    "./types": "./src/types.tsx",
+    ".": "./src/index.tsx"
+  },
   "homepage": "https://atlassian.design/components/progress-indicator/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/types/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/progress-indicator/types",
+  "main": "../dist/cjs/types.js",
+  "module": "../dist/esm/types.js",
+  "module:es2019": "../dist/es2019/types.js",
+  "types": "../dist/types/types.d.ts"
+}

package/dist/cjs/components/Dots.js

@@ -1,201 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ProgressDotsWithoutAnalytics = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-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 = _interopRequireWildcard(require("react"));
-
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _Dots = require("../styled/Dots");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-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 packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.0.5";
-
-var ProgressDots = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(ProgressDots, _Component);
-
-  var _super = _createSuper(ProgressDots);
-
-  function ProgressDots() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ProgressDots);
-
-    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), "tablist", {
-      children: []
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
-      var _this$props = _this.props,
-          onSelect = _this$props.onSelect,
-          selectedIndex = _this$props.selectedIndex,
-          values = _this$props.values;
-      var indicators = Array.from(_this.tablist.children); // bail if the target isn't an indicator
-
-      if (!indicators.includes(event.target)) {
-        return;
-      } // bail if not valid arrow key
-
-
-      var isLeft = event.key === 'ArrowLeft';
-      var isRight = event.key === 'ArrowRight';
-
-      if (!isLeft && !isRight) {
-        return;
-      } // bail if at either end of the values
-
-
-      var isAlpha = isLeft && selectedIndex === 0;
-      var isOmega = isRight && selectedIndex === values.length - 1;
-
-      if (isAlpha || isOmega) {
-        return;
-      }
-
-      var index = isLeft ? selectedIndex - 1 : selectedIndex + 1; // call the consumer's select method and focus the applicable indicator
-
-      if (onSelect) {
-        onSelect({
-          event: event,
-          index: index
-        });
-      }
-
-      if (typeof indicators[index].focus === 'function') {
-        indicators[index].focus();
-      }
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(ProgressDots, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.onSelect) {
-        document.addEventListener('keydown', this.handleKeyDown, false);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.props.onSelect) {
-        document.removeEventListener('keydown', this.handleKeyDown);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      // NOTE: `spacing` is a reserved HTML attribute and will be added to the
-      // element, replaced with `gutter`.
-      var _this$props2 = this.props,
-          appearance = _this$props2.appearance,
-          ariaControls = _this$props2.ariaControls,
-          ariaLabel = _this$props2.ariaLabel,
-          onSelect = _this$props2.onSelect,
-          selectedIndex = _this$props2.selectedIndex,
-          size = _this$props2.size,
-          gutter = _this$props2.spacing,
-          values = _this$props2.values;
-      return /*#__PURE__*/_react.default.createElement(_Dots.Container, {
-        innerRef: function innerRef(r) {
-          _this2.tablist = r;
-        },
-        role: "tablist"
-      }, values.map(function (val, index) {
-        var selected = selectedIndex === index;
-        var common = {
-          appearance: appearance,
-          key: index,
-          selected: selected,
-          size: size,
-          gutter: gutter
-        };
-        var tabId = "".concat(ariaLabel).concat(index);
-        var panelId = "".concat(ariaControls).concat(index);
-        return onSelect ? /*#__PURE__*/_react.default.createElement(_Dots.IndicatorButton, (0, _extends2.default)({}, common, {
-          "aria-controls": panelId,
-          "aria-label": tabId,
-          "aria-selected": selected,
-          id: tabId,
-          onClick: function onClick(event) {
-            return onSelect({
-              event: event,
-              index: index
-            });
-          },
-          role: "tab",
-          tabIndex: selected ? 0 : -1,
-          type: "button"
-        })) : /*#__PURE__*/_react.default.createElement(_Dots.IndicatorDiv, (0, _extends2.default)({}, common, {
-          role: "presentation"
-        }));
-      }));
-    }
-  }]);
-  return ProgressDots;
-}(_react.Component);
-
-exports.ProgressDotsWithoutAnalytics = ProgressDots;
-(0, _defineProperty2.default)(ProgressDots, "defaultProps", {
-  appearance: 'default',
-  ariaControls: 'panel',
-  ariaLabel: 'tab',
-  size: 'default',
-  spacing: 'comfortable'
-});
-var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
-
-var _default = (0, _analyticsNext.withAnalyticsContext)({
-  componentName: 'progressIndicator',
-  packageName: packageName,
-  packageVersion: packageVersion
-})((0, _analyticsNext.withAnalyticsEvents)({
-  onSelect: createAndFireEventOnAtlaskit({
-    action: 'selected',
-    actionSubject: 'progressIndicator',
-    attributes: {
-      componentName: 'progressIndicator',
-      packageName: packageName,
-      packageVersion: packageVersion
-    }
-  })
-})(ProgressDots));
-
-exports.default = _default;