@atlaskit/progress-indicator 9.2.5 → 9.2.8

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/progress-indicator
 
+## 9.2.8
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 9.2.7
+
+### Patch Changes
+
+- [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
+
+## 9.2.6
+
+### Patch Changes
+
+- [`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal migration to bind-event-listener for safer DOM Event cleanup
+- Updated dependencies
+
 ## 9.2.5
 
 ### Patch Changes

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

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
+var _bindEventListener = require("bind-event-listener");
+
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
@@ -33,7 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.2.5";
+var packageVersion = "9.2.8";
 var containerStyles = (0, _core.css)({
   display: 'flex',
   justifyContent: 'center',
@@ -107,15 +109,17 @@ var ProgressDots = function ProgressDots(_ref) {
     }
   }, [onSelectWithAnalytics, selectedIndex, values, onSelect]);
   (0, _react.useEffect)(function () {
-    if (onSelect) {
-      document.addEventListener('keydown', handleKeyDown, false);
+    if (!onSelect) {
+      return _noop.default;
     }
 
-    return function () {
-      if (onSelect) {
-        document.removeEventListener('keydown', handleKeyDown);
+    return (0, _bindEventListener.bind)(document, {
+      type: 'keydown',
+      listener: handleKeyDown,
+      options: {
+        capture: false
       }
-    };
+    });
   }, [onSelect, handleKeyDown]);
   var theme = (0, _components.useGlobalTheme)();
   return (0, _core.jsx)("div", {

package/dist/cjs/version.json

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

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
+import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import { useGlobalTheme } from '@atlaskit/theme/components';
@@ -8,7 +9,7 @@ import { getBgColor } from './appearances';
 import { sizes, spacingDivision, varDotsMargin, varDotsSize } from './constants';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 const packageName = "@atlaskit/progress-indicator";
-const packageVersion = "9.2.5";
+const packageVersion = "9.2.8";
 const containerStyles = css({
   display: 'flex',
   justifyContent: 'center',
@@ -78,15 +79,17 @@ const ProgressDots = ({
     }
   }, [onSelectWithAnalytics, selectedIndex, values, onSelect]);
   useEffect(() => {
-    if (onSelect) {
-      document.addEventListener('keydown', handleKeyDown, false);
+    if (!onSelect) {
+      return noop;
     }
 
-    return () => {
-      if (onSelect) {
-        document.removeEventListener('keydown', handleKeyDown);
+    return bind(document, {
+      type: 'keydown',
+      listener: handleKeyDown,
+      options: {
+        capture: false
       }
-    };
+    });
   }, [onSelect, handleKeyDown]);
   const theme = useGlobalTheme();
   return jsx("div", {

package/dist/es2019/version.json

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

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

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
+import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import { useGlobalTheme } from '@atlaskit/theme/components';
@@ -10,7 +11,7 @@ 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.5";
+var packageVersion = "9.2.8";
 var containerStyles = css({
   display: 'flex',
   justifyContent: 'center',
@@ -84,15 +85,17 @@ var ProgressDots = function ProgressDots(_ref) {
     }
   }, [onSelectWithAnalytics, selectedIndex, values, onSelect]);
   useEffect(function () {
-    if (onSelect) {
-      document.addEventListener('keydown', handleKeyDown, false);
+    if (!onSelect) {
+      return noop;
     }
 
-    return function () {
-      if (onSelect) {
-        document.removeEventListener('keydown', handleKeyDown);
+    return bind(document, {
+      type: 'keydown',
+      listener: handleKeyDown,
+      options: {
+        capture: false
       }
-    };
+    });
   }, [onSelect, handleKeyDown]);
   var theme = useGlobalTheme();
   return jsx("div", {

package/dist/esm/version.json

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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/progress-indicator",
-  "version": "9.2.5",
+  "version": "9.2.8",
   "description": "A progress indicator shows the user where they are along the steps of 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,17 +18,19 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Progress indicator"
+      "name": "Progress indicator",
+      "category": "Components"
     }
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/core": "^10.0.9",
+    "bind-event-listener": "^2.1.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -47,13 +49,14 @@
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
     "styled-components": "^3.2.6",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "design-system": "v1",
       "styling": [

package/report.api.md

@@ -0,0 +1,70 @@
+## API Report File for "@atlaskit/progress-indicator"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { FC } from 'react';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+declare type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
+
+export declare 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[];
+}
+
+/**
+ * __ProgressDots__
+ *
+ * A progress indicator shows the user where they are along the steps of a journey.
+ */
+export declare const ProgressIndicator: FC<ProgressDotsProps>;
+
+declare type Size = 'small' | 'default' | 'large';
+
+declare type Spacing = 'comfortable' | 'cozy' | 'compact';
+
+export {};
+```