@atlaskit/progress-bar 0.5.9 → 0.5.11

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/progress-bar
 
+## 0.5.11
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 0.5.10
+
+### Patch Changes
+
+- [`8eb92195540`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8eb92195540) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+- Updated dependencies
+
 ## 0.5.9
 
 ### Patch Changes

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

@@ -11,7 +11,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 
@@ -22,7 +22,7 @@ var _theme = require("../theme");
 /** @jsx jsx */
 var MIN_VALUE = 0;
 var MAX_VALUE = 1;
-var increasingBarAnimation = (0, _core.keyframes)({
+var increasingBarAnimation = (0, _react2.keyframes)({
   from: {
     left: '-5%',
     width: '5%'
@@ -32,7 +32,7 @@ var increasingBarAnimation = (0, _core.keyframes)({
     width: ' 100%'
   }
 });
-var decreasingBarAnimation = (0, _core.keyframes)({
+var decreasingBarAnimation = (0, _react2.keyframes)({
   from: {
     left: '-80%',
     width: '80%'
@@ -42,7 +42,7 @@ var decreasingBarAnimation = (0, _core.keyframes)({
     width: '10%'
   }
 });
-var containerStyles = (0, _core.css)({
+var containerStyles = (0, _react2.css)({
   width: "100%",
   height: 6,
   position: 'relative',
@@ -51,40 +51,40 @@ var containerStyles = (0, _core.css)({
   overflow: 'hidden'
 });
 var containerAppearance = {
-  default: (0, _core.css)({
+  default: (0, _react2.css)({
     background: "var(--ds-background-neutral, ".concat(_colors.N40A, ")")
   }),
-  success: (0, _core.css)({
+  success: (0, _react2.css)({
     background: "var(--ds-background-neutral, ".concat(_colors.N40A, ")")
   }),
-  inverse: (0, _core.css)({
+  inverse: (0, _react2.css)({
     background: "var(--ds-background-inverse-subtle, rgba(255, 255, 255, 0.5))"
   })
 };
 var barAppearance = {
-  default: (0, _core.css)({
+  default: (0, _react2.css)({
     background: "var(--ds-background-neutral-bold, ".concat(_colors.N500, ")")
   }),
-  success: (0, _core.css)({
+  success: (0, _react2.css)({
     background: "var(--ds-background-success-bold, ".concat(_colors.G300, ")")
   }),
-  inverse: (0, _core.css)({
+  inverse: (0, _react2.css)({
     background: "var(--ds-surface, white)"
   })
 };
-var barStyles = (0, _core.css)({
+var barStyles = (0, _react2.css)({
   display: 'block',
   height: 6,
   position: 'absolute',
   borderRadius: 3
 });
-var determinateBarStyles = (0, _core.css)({
+var determinateBarStyles = (0, _react2.css)({
   transition: 'width 0.2s'
 });
-var increasingBarStyles = (0, _core.css)({
+var increasingBarStyles = (0, _react2.css)({
   animation: "".concat(increasingBarAnimation, " 2s infinite")
 });
-var decreasingBarStyles = (0, _core.css)({
+var decreasingBarStyles = (0, _react2.css)({
   animation: "".concat(decreasingBarAnimation, " 2s 0.5s infinite")
 });
 /**
@@ -110,12 +110,12 @@ var ProgressBar = function ProgressBar(_ref) {
       value = _ref$value === void 0 ? 0 : _ref$value;
   var valueParsed = isIndeterminate ? MIN_VALUE : Math.max(MIN_VALUE, Math.min(value, MAX_VALUE));
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/progress-bar", 'theme', (0, _typeof2.default)(theme) !== undefined, 'https://community.developer.atlassian.com/t/theme-prop-in-atlaskit-progress-bar-is-being-deprecated/56198');
-  return (0, _core.jsx)(_theme.Theme.Provider, {
+  return (0, _react2.jsx)(_theme.Theme.Provider, {
     value: theme
-  }, (0, _core.jsx)(_theme.Theme.Consumer, {
+  }, (0, _react2.jsx)(_theme.Theme.Consumer, {
     value: value
   }, function (tokens) {
-    return (0, _core.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       css: [containerStyles, containerAppearance[appearance], tokens.container],
       role: "progressbar",
       "aria-label": ariaLabel,
@@ -124,11 +124,11 @@ var ProgressBar = function ProgressBar(_ref) {
       "aria-valuemax": MAX_VALUE,
       tabIndex: 0,
       "data-testid": testId
-    }, isIndeterminate ? (0, _core.jsx)(_react.default.Fragment, null, (0, _core.jsx)("span", {
+    }, isIndeterminate ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
       css: [barStyles, barAppearance[appearance], increasingBarStyles, tokens.bar, tokens.increasingBar]
-    }), (0, _core.jsx)("span", {
+    }), (0, _react2.jsx)("span", {
       css: [barStyles, barAppearance[appearance], decreasingBarStyles, tokens.bar, tokens.decreasingBar]
-    })) : (0, _core.jsx)("span", {
+    })) : (0, _react2.jsx)("span", {
       style: {
         width: "".concat(Number(value) * 100, "%")
       },

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-bar",
-	"version": "0.5.9",
+	"version": "0.5.11",
 	"sideEffects": false
 }

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx, keyframes } from '@emotion/core';
+import { css, jsx, keyframes } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import { G300, N40A, N500 } from '@atlaskit/theme/colors';
 import { Theme } from '../theme';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-bar",
-	"version": "0.5.9",
+	"version": "0.5.11",
 	"sideEffects": false
 }

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

@@ -2,7 +2,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx, keyframes } from '@emotion/core';
+import { css, jsx, keyframes } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import { G300, N40A, N500 } from '@atlaskit/theme/colors';
 import { Theme } from '../theme';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-bar",
-	"version": "0.5.9",
+	"version": "0.5.11",
 	"sideEffects": false
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { DefaultProgressBarProps } from '../types';
 /**
  * __Progress bar__
@@ -9,5 +9,5 @@ import { DefaultProgressBarProps } from '../types';
  * - [Code](https://atlassian.design/components/progress-bar/code)
  * - [Usage](https://atlassian.design/components/progress-bar/usage)
  */
-declare const ProgressBar: ({ appearance, ariaLabel, isIndeterminate, testId, theme, value, }: DefaultProgressBarProps) => JSX.Element;
+declare const ProgressBar: ({ appearance, ariaLabel, isIndeterminate, testId, theme, value, }: DefaultProgressBarProps) => jsx.JSX.Element;
 export default ProgressBar;

package/dist/types-ts4.0/components/progress-bar.d.ts

@@ -0,0 +1,13 @@
+import { jsx } from '@emotion/react';
+import { DefaultProgressBarProps } from '../types';
+/**
+ * __Progress bar__
+ *
+ * A progress bar displays the status of a given process.
+ *
+ * - [Examples](https://atlassian.design/components/progress-bar/examples)
+ * - [Code](https://atlassian.design/components/progress-bar/code)
+ * - [Usage](https://atlassian.design/components/progress-bar/usage)
+ */
+declare const ProgressBar: ({ appearance, ariaLabel, isIndeterminate, testId, theme, value, }: DefaultProgressBarProps) => jsx.JSX.Element;
+export default ProgressBar;

package/dist/types-ts4.0/components/success-progress-bar.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CustomProgressBarProps } from '../types';
+/**
+ * __Success progress bar__
+ *
+ * A success progress bar indicates the completion of a process.
+ *
+ * - [Examples](https://atlassian.design/components/progress-bar/success-progress-bar/examples)
+ * - [Code](https://atlassian.design/components/progress-bar/success-progress-bar/code)
+ */
+declare const SuccessProgressBar: ({ ariaLabel, isIndeterminate, testId, value, }: CustomProgressBarProps) => JSX.Element;
+export default SuccessProgressBar;

package/dist/types-ts4.0/components/transparent-progress-bar.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CustomProgressBarProps } from '../types';
+/**
+ * __Transparent progress bar__
+ *
+ * A transparent progress bar is used on bold backgrounds to maintain suitable contrast.
+ *
+ * - [Examples](https://atlassian.design/components/progress-bar/transparent-progress-bar/examples)
+ * - [Code](https://atlassian.design/components/progress-bar/transparent-progress-bar/code)
+ */
+declare const TransparentProgressBar: ({ ariaLabel, isIndeterminate, testId, value, }: CustomProgressBarProps) => JSX.Element;
+export default TransparentProgressBar;

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './components/progress-bar';
+export { default as SuccessProgressBar } from './components/success-progress-bar';
+export { default as TransparentProgressBar } from './components/transparent-progress-bar';

package/dist/types-ts4.0/theme.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ThemeProps, ThemeTokens } from './types';
+/**
+ * Creates the default theme, which can be customised using the `theme` prop
+ *
+ * @deprecated
+ */
+export declare const Theme: {
+    Consumer: import("react").ComponentType<{
+        children: (tokens: ThemeTokens) => import("react").ReactNode;
+    } & ThemeProps>;
+    Provider: import("react").ComponentType<{
+        children?: import("react").ReactNode;
+        value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;
+    }>;
+    useTheme: (props: ThemeProps) => ThemeTokens;
+};

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,49 @@
+import { ThemeProp } from '@atlaskit/theme/components';
+/**
+ * @deprecated
+ */
+export declare type ThemeProps = {
+    value: string | number;
+};
+/**
+ * @deprecated This allows for users to customize the theme. This is being deprecated, please consider
+ * migrating to one of progress bar's variants.
+ */
+export declare type ThemeTokens = {
+    container: any;
+    bar: any;
+    determinateBar: any;
+    increasingBar: any;
+    decreasingBar: any;
+};
+export interface CustomProgressBarProps {
+    /**
+     * Sets the value of the progress bar, between `0` and `1` inclusive.
+     */
+    value?: number;
+    /**
+     * Shows the progress bar in an indeterminate state when `true`.
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Label associated with the progress bar,
+     * read by screen readers.
+     */
+    ariaLabel?: string;
+    /**
+     * A `testId` prop 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;
+}
+export interface DefaultProgressBarProps extends CustomProgressBarProps {
+    /**
+     * @deprecated
+     * Theme prop is deprecated and will be removed in the future.
+     */
+    theme?: ThemeProp<ThemeTokens, ThemeProps>;
+    /**
+     * Visual style of the progress bar.
+     */
+    appearance?: 'default' | 'success' | 'inverse';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-bar",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "description": "A progress bar displays the status of a given process.",
   "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",
   "homepage": "https://atlassian.design/components/progress-bar/",
@@ -26,10 +33,10 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.1.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"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -37,12 +44,12 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@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",
     "react-dom": "^16.8.0",
-    "typescript": "4.3.5"
+    "typescript": "4.5.5"
   },
   "keywords": [
     "atlaskit",

package/theme/package.json

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

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"
+      ]
+    }
+  }
 }