@atlaskit/progress-indicator 9.1.0 → 9.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/progress-indicator
 
+## 9.1.1
+
+### Patch Changes
+
+- [`7d89d624097`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d89d624097) - Fix for focus being incorrectly retained when indicators were not interactive.
+
 ## 9.1.0
 
 ### Minor Changes

package/dist/cjs/components/indicator.js

@@ -11,9 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _core = require("@emotion/core");
 
-var _colors = require("@atlaskit/theme/colors");
-
-var _tokens = require("@atlaskit/tokens");
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 
 var _constants = require("./constants");
 
@@ -37,10 +35,7 @@ var buttonStyles = (0, _core.css)({
   padding: 0,
   border: 0,
   cursor: 'pointer',
-  outline: 0,
-  '&:focus': {
-    boxShadow: "0 0 0 2px ".concat((0, _tokens.token)('color.border.focus', _colors.B100))
-  }
+  outline: 0
 });
 /**
  * __Presentational indicator__
@@ -64,11 +59,11 @@ var PresentationalIndicator = function PresentationalIndicator(props) {
 exports.PresentationalIndicator = PresentationalIndicator;
 
 var ButtonIndicator = function ButtonIndicator(props) {
-  return (0, _core.jsx)("button", (0, _extends2.default)({}, props, {
+  return (0, _core.jsx)(_focusRing.default, null, (0, _core.jsx)("button", (0, _extends2.default)({}, props, {
     role: "tab",
     type: "button",
     css: [commonStyles, buttonStyles]
-  }));
+  })));
 };
 
 exports.ButtonIndicator = ButtonIndicator;

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ProgressDotsWithoutAnalytics = void 0;
+exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -17,6 +17,8 @@ var _core = require("@emotion/core");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
 var _components = require("@atlaskit/theme/components");
 
 var _appearances = require("./appearances");
@@ -31,7 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.1.0";
+var packageVersion = "9.1.1";
 var containerStyles = (0, _core.css)({
   display: 'flex',
   justifyContent: 'center',
@@ -61,6 +63,13 @@ var ProgressDots = function ProgressDots(_ref) {
       values = _ref.values,
       onSelect = _ref.onSelect;
   var tablistRef = (0, _react.useRef)(null);
+  var onSelectWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: onSelect || _noop.default,
+    action: 'selected',
+    componentName: 'progressIndicator',
+    packageName: packageName,
+    packageVersion: packageVersion
+  });
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
 
@@ -87,7 +96,7 @@ var ProgressDots = function ProgressDots(_ref) {
     var index = isLeft ? selectedIndex - 1 : selectedIndex + 1; // call the consumer's select method and focus the applicable indicator
 
     if (onSelect) {
-      onSelect({
+      onSelectWithAnalytics({
         event: event,
         index: index
       });
@@ -96,7 +105,7 @@ var ProgressDots = function ProgressDots(_ref) {
     if (typeof indicators[index].focus === 'function') {
       indicators[index].focus();
     }
-  }, [onSelect, selectedIndex, values]);
+  }, [onSelectWithAnalytics, selectedIndex, values, onSelect]);
   (0, _react.useEffect)(function () {
     if (onSelect) {
       document.addEventListener('keydown', handleKeyDown, false);
@@ -134,7 +143,7 @@ var ProgressDots = function ProgressDots(_ref) {
       "aria-selected": isSelected,
       id: tabId,
       onClick: function onClick(event) {
-        return onSelect({
+        return onSelectWithAnalytics({
           event: event,
           index: index
         });
@@ -151,23 +160,5 @@ var ProgressDots = function ProgressDots(_ref) {
   }));
 };
 
-exports.ProgressDotsWithoutAnalytics = ProgressDots;
-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));
-
+var _default = ProgressDots;
 exports.default = _default;

package/dist/cjs/version.json

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

package/dist/es2019/components/indicator.js

@@ -2,8 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { B100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
+import FocusRing from '@atlaskit/focus-ring';
 import { varDotsMargin, varDotsSize } from './constants';
 const commonStyles = css({
   width: `var(${varDotsSize})`,
@@ -24,10 +23,7 @@ const buttonStyles = css({
   padding: 0,
   border: 0,
   cursor: 'pointer',
-  outline: 0,
-  '&:focus': {
-    boxShadow: `0 0 0 2px ${token('color.border.focus', B100)}`
-  }
+  outline: 0
 });
 /**
  * __Presentational indicator__
@@ -46,9 +42,9 @@ export const PresentationalIndicator = props => jsx("div", _extends({}, props, {
  */
 
 export const ButtonIndicator = props => {
-  return jsx("button", _extends({}, props, {
+  return jsx(FocusRing, null, jsx("button", _extends({}, props, {
     role: "tab",
     type: "button",
     css: [commonStyles, buttonStyles]
-  }));
+  })));
 };

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

@@ -1,13 +1,14 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
-import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+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';
 const packageName = "@atlaskit/progress-indicator";
-const packageVersion = "9.1.0";
+const packageVersion = "9.1.1";
 const containerStyles = css({
   display: 'flex',
   justifyContent: 'center',
@@ -33,6 +34,13 @@ const ProgressDots = ({
   onSelect
 }) => {
   const tablistRef = useRef(null);
+  const onSelectWithAnalytics = usePlatformLeafEventHandler({
+    fn: onSelect || noop,
+    action: 'selected',
+    componentName: 'progressIndicator',
+    packageName,
+    packageVersion
+  });
   const handleKeyDown = useCallback(event => {
     const indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
 
@@ -59,7 +67,7 @@ const ProgressDots = ({
     const index = isLeft ? selectedIndex - 1 : selectedIndex + 1; // call the consumer's select method and focus the applicable indicator
 
     if (onSelect) {
-      onSelect({
+      onSelectWithAnalytics({
         event: event,
         index
       });
@@ -68,7 +76,7 @@ const ProgressDots = ({
     if (typeof indicators[index].focus === 'function') {
       indicators[index].focus();
     }
-  }, [onSelect, selectedIndex, values]);
+  }, [onSelectWithAnalytics, selectedIndex, values, onSelect]);
   useEffect(() => {
     if (onSelect) {
       document.addEventListener('keydown', handleKeyDown, false);
@@ -108,7 +116,7 @@ const ProgressDots = ({
       "aria-label": tabId,
       "aria-selected": isSelected,
       id: tabId,
-      onClick: event => onSelect({
+      onClick: event => onSelectWithAnalytics({
         event,
         index
       }),
@@ -124,20 +132,4 @@ const ProgressDots = ({
   }));
 };
 
-export { ProgressDots as ProgressDotsWithoutAnalytics };
-const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-export default withAnalyticsContext({
-  componentName: 'progressIndicator',
-  packageName,
-  packageVersion
-})(withAnalyticsEvents({
-  onSelect: createAndFireEventOnAtlaskit({
-    action: 'selected',
-    actionSubject: 'progressIndicator',
-    attributes: {
-      componentName: 'progressIndicator',
-      packageName,
-      packageVersion
-    }
-  })
-})(ProgressDots));
+export default ProgressDots;

package/dist/es2019/version.json

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

package/dist/esm/components/indicator.js

@@ -2,8 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { B100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
+import FocusRing from '@atlaskit/focus-ring';
 import { varDotsMargin, varDotsSize } from './constants';
 var commonStyles = css({
   width: "var(".concat(varDotsSize, ")"),
@@ -24,10 +23,7 @@ var buttonStyles = css({
   padding: 0,
   border: 0,
   cursor: 'pointer',
-  outline: 0,
-  '&:focus': {
-    boxShadow: "0 0 0 2px ".concat(token('color.border.focus', B100))
-  }
+  outline: 0
 });
 /**
  * __Presentational indicator__
@@ -48,9 +44,9 @@ export var PresentationalIndicator = function PresentationalIndicator(props) {
  */
 
 export var ButtonIndicator = function ButtonIndicator(props) {
-  return jsx("button", _extends({}, props, {
+  return jsx(FocusRing, null, jsx("button", _extends({}, props, {
     role: "tab",
     type: "button",
     css: [commonStyles, buttonStyles]
-  }));
+  })));
 };

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

@@ -3,13 +3,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
-import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+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.1.0";
+var packageVersion = "9.1.1";
 var containerStyles = css({
   display: 'flex',
   justifyContent: 'center',
@@ -39,6 +40,13 @@ var ProgressDots = function ProgressDots(_ref) {
       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
 
@@ -65,7 +73,7 @@ var ProgressDots = function ProgressDots(_ref) {
     var index = isLeft ? selectedIndex - 1 : selectedIndex + 1; // call the consumer's select method and focus the applicable indicator
 
     if (onSelect) {
-      onSelect({
+      onSelectWithAnalytics({
         event: event,
         index: index
       });
@@ -74,7 +82,7 @@ var ProgressDots = function ProgressDots(_ref) {
     if (typeof indicators[index].focus === 'function') {
       indicators[index].focus();
     }
-  }, [onSelect, selectedIndex, values]);
+  }, [onSelectWithAnalytics, selectedIndex, values, onSelect]);
   useEffect(function () {
     if (onSelect) {
       document.addEventListener('keydown', handleKeyDown, false);
@@ -112,7 +120,7 @@ var ProgressDots = function ProgressDots(_ref) {
       "aria-selected": isSelected,
       id: tabId,
       onClick: function onClick(event) {
-        return onSelect({
+        return onSelectWithAnalytics({
           event: event,
           index: index
         });
@@ -129,20 +137,4 @@ var ProgressDots = function ProgressDots(_ref) {
   }));
 };
 
-export { ProgressDots as ProgressDotsWithoutAnalytics };
-var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-export default withAnalyticsContext({
-  componentName: 'progressIndicator',
-  packageName: packageName,
-  packageVersion: packageVersion
-})(withAnalyticsEvents({
-  onSelect: createAndFireEventOnAtlaskit({
-    action: 'selected',
-    actionSubject: 'progressIndicator',
-    attributes: {
-      componentName: 'progressIndicator',
-      packageName: packageName,
-      packageVersion: packageVersion
-    }
-  })
-})(ProgressDots));
+export default ProgressDots;

package/dist/esm/version.json

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

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { FC } from 'react';
+import { FC } from 'react';
 import type { ProgressDotsProps } from '../types';
 /**
  * __ProgressDots__
@@ -7,6 +7,4 @@ import type { ProgressDotsProps } from '../types';
  * A progress indicator shows the user where they are along the steps of a journey.
  */
 declare const ProgressDots: FC<ProgressDotsProps>;
-export { ProgressDots as ProgressDotsWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<React.PropsWithChildren<ProgressDotsProps>, "appearance" | "children" | "ariaControls" | "ariaLabel" | "size" | "spacing" | "selectedIndex" | "testId" | "values" | "onSelect"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "appearance" | "children" | "ariaControls" | "ariaLabel" | "size" | "spacing" | "selectedIndex" | "testId" | "values" | "onSelect" | "key" | "analyticsContext"> & React.RefAttributes<any>>;
-export default _default;
+export default ProgressDots;

package/dist/types/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { DotsAppearance, Size, Spacing } from './components/types';
-export interface ProgressDotsProps extends WithAnalyticsEventsProps {
+export interface ProgressDotsProps {
     /**
      * The color of the indicators
      */
@@ -20,7 +20,7 @@ export interface ProgressDotsProps extends WithAnalyticsEventsProps {
     onSelect?: (eventData: {
         event: React.MouseEvent<HTMLButtonElement>;
         index: number;
-    }) => void;
+    }, analyticsEvent: UIAnalyticsEvent) => void;
     /**
      * Which indicator is currently selected
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-indicator",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "description": "A progress indicator shows the user where they are along the steps of a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,8 +24,9 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
+    "@atlaskit/ds-lib": "^1.3.0",
+    "@atlaskit/focus-ring": "^0.2.1",
     "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },