@atlaskit/progress-indicator 9.2.8 → 9.3.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/progress-indicator
 
+## 9.3.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 9.3.0
+
+### Minor Changes
+
+- [`b85b29dd351`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b85b29dd351) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.2.8
 
 ### Patch Changes

package/dist/cjs/components/indicator.js

@@ -9,14 +9,14 @@ exports.PresentationalIndicator = exports.ButtonIndicator = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 
 var _constants = require("./constants");
 
 /** @jsx jsx */
-var commonStyles = (0, _core.css)({
+var commonStyles = (0, _react.css)({
   width: "var(".concat(_constants.varDotsSize, ")"),
   height: "var(".concat(_constants.varDotsSize, ")"),
   position: 'relative',
@@ -31,7 +31,7 @@ var commonStyles = (0, _core.css)({
     content: '""'
   }
 });
-var buttonStyles = (0, _core.css)({
+var buttonStyles = (0, _react.css)({
   padding: 0,
   border: 0,
   cursor: 'pointer',
@@ -45,7 +45,7 @@ var buttonStyles = (0, _core.css)({
 
 var PresentationalIndicator = function PresentationalIndicator(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 ) {
-  return (0, _core.jsx)("div", (0, _extends2.default)({}, props, {
+  return (0, _react.jsx)("div", (0, _extends2.default)({}, props, {
     css: commonStyles,
     role: "presentation"
   }));
@@ -60,7 +60,7 @@ var PresentationalIndicator = function PresentationalIndicator(props // eslint-d
 exports.PresentationalIndicator = PresentationalIndicator;
 
 var ButtonIndicator = function ButtonIndicator(props) {
-  return (0, _core.jsx)(_focusRing.default, null, (0, _core.jsx)("button", (0, _extends2.default)({}, props, {
+  return (0, _react.jsx)(_focusRing.default, null, (0, _react.jsx)("button", (0, _extends2.default)({}, props, {
     role: "tab",
     type: "button",
     css: [commonStyles, buttonStyles]

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

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _bindEventListener = require("bind-event-listener");
 
@@ -35,8 +35,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.2.8";
-var containerStyles = (0, _core.css)({
+var packageVersion = "9.3.1";
+var containerStyles = (0, _react2.css)({
   display: 'flex',
   justifyContent: 'center',
   gap: "var(".concat(_constants.varDotsMargin, ")")
@@ -122,7 +122,7 @@ var ProgressDots = function ProgressDots(_ref) {
     });
   }, [onSelect, handleKeyDown]);
   var theme = (0, _components.useGlobalTheme)();
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     "data-testid": testId,
     css: containerStyles,
     style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varDotsSize, "".concat(_constants.sizes[size], "px")), (0, _defineProperty2.default)(_ref2, _constants.varDotsMargin, "".concat(_constants.sizes[size] / _constants.spacingDivision[gutter], "px")), _ref2),
@@ -137,7 +137,7 @@ var ProgressDots = function ProgressDots(_ref) {
     var backgroundColor = (0, _appearances.getBgColor)(appearance, isSelected)({
       theme: theme
     });
-    return onSelect ? (0, _core.jsx)(_indicator.ButtonIndicator, {
+    return onSelect ? (0, _react2.jsx)(_indicator.ButtonIndicator, {
       key: index,
       style: {
         backgroundColor: backgroundColor
@@ -154,7 +154,7 @@ var ProgressDots = function ProgressDots(_ref) {
       },
       tabIndex: isSelected ? 0 : -1,
       "data-testid": testId && "".concat(testId, "-ind-").concat(index)
-    }) : (0, _core.jsx)(_indicator.PresentationalIndicator, {
+    }) : (0, _react2.jsx)(_indicator.PresentationalIndicator, {
       "data-testid": testId && "".concat(testId, "-ind-").concat(index),
       key: index,
       style: {

package/dist/cjs/version.json

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

package/dist/es2019/components/indicator.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import { varDotsMargin, varDotsSize } from './constants';
 const commonStyles = css({

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -9,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.8";
+const packageVersion = "9.3.1";
 const containerStyles = css({
   display: 'flex',
   justifyContent: 'center',

package/dist/es2019/version.json

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

package/dist/esm/components/indicator.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import { varDotsMargin, varDotsSize } from './constants';
 var commonStyles = css({

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -11,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.8";
+var packageVersion = "9.3.1";
 var containerStyles = css({
   display: 'flex',
   justifyContent: 'center',

package/dist/esm/version.json

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

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

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

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/components/indicator.d.ts

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

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/index.d.ts

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

package/dist/types-ts4.0/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.2.8",
+  "version": "9.3.1",
   "description": "A progress indicator shows the user where they are along the steps of a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -26,10 +33,10 @@
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.0.0",
-    "@atlaskit/theme": "^12.1.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",
     "bind-event-listener": "^2.1.1"
   },
   "peerDependencies": {
@@ -38,18 +45,18 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@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",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "@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": "4.3.5"
+    "typescript": "4.5.5"
   },
   "techstack": {
     "@atlassian/frontend": {

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
   "sideEffects": false,
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }