@atlaskit/progress-indicator 12.0.20 → 13.0.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/progress-indicator
 
+## 13.0.1
+
+### Patch Changes
+
+- [`6fa577ac3e5ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fa577ac3e5ea) -
+  Add descriptive accessible labels for carousel controls and selectable progress indicators.
+
+## 13.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.0.20
 
 ### Patch Changes

package/dist/cjs/components/button-indicator.js

@@ -57,6 +57,7 @@ var ButtonIndicator = exports.ButtonIndicator = function ButtonIndicator(_ref) {
   var appearance = _ref.appearance,
     panelId = _ref.panelId,
     tabId = _ref.tabId,
+    label = _ref.label,
     isSelected = _ref.isSelected,
     onClick = _ref.onClick,
     testId = _ref.testId;
@@ -72,5 +73,5 @@ var ButtonIndicator = exports.ButtonIndicator = function ButtonIndicator(_ref) {
     onClick: onClick,
     tabIndex: isSelected ? -1 : undefined,
     testId: testId
-  }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, tabId));
+  }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, label));
 };

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

@@ -16,7 +16,7 @@ var _buttonIndicator = require("./button-indicator");
 var _presentationalIndicator = require("./presentational-indicator");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "12.0.20";
+var packageVersion = "13.0.0";
 var progressIndicatorGapMap = {
   comfortable: {
     default: 'space.100',
@@ -50,6 +50,7 @@ var ProgressDots = function ProgressDots(_ref) {
     ariaControls = _ref$ariaControls === void 0 ? 'panel' : _ref$ariaControls,
     _ref$ariaLabel = _ref.ariaLabel,
     ariaLabel = _ref$ariaLabel === void 0 ? 'tab' : _ref$ariaLabel,
+    getAriaLabel = _ref.getAriaLabel,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'default' : _ref$size,
     _ref$spacing = _ref.spacing,
@@ -127,6 +128,7 @@ var ProgressDots = function ProgressDots(_ref) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
     var panelId = "".concat(ariaControls).concat(index);
+    var label = getAriaLabel ? getAriaLabel(index) : tabId;
     var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
     return onSelect ? /*#__PURE__*/_react.default.createElement(_buttonIndicator.ButtonIndicator, {
       key: index,
@@ -135,6 +137,7 @@ var ProgressDots = function ProgressDots(_ref) {
       isSelected: isSelected,
       tabId: tabId,
       panelId: panelId,
+      label: label,
       onClick: function onClick(event) {
         return onSelectWithAnalytics({
           event: event,

package/dist/es2019/components/button-indicator.js

@@ -48,6 +48,7 @@ export const ButtonIndicator = ({
   appearance,
   panelId,
   tabId,
+  label,
   isSelected,
   onClick,
   testId
@@ -64,5 +65,5 @@ export const ButtonIndicator = ({
     onClick: onClick,
     tabIndex: isSelected ? -1 : undefined,
     testId: testId
-  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, tabId));
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, label));
 };

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

@@ -6,7 +6,7 @@ import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { ButtonIndicator } from './button-indicator';
 import { PresentationalIndicator } from './presentational-indicator';
 const packageName = "@atlaskit/progress-indicator";
-const packageVersion = "12.0.20";
+const packageVersion = "13.0.0";
 const progressIndicatorGapMap = {
   comfortable: {
     default: 'space.100',
@@ -37,6 +37,7 @@ const ProgressDots = ({
   appearance = 'default',
   ariaControls = 'panel',
   ariaLabel = 'tab',
+  getAriaLabel,
   size = 'default',
   // NOTE: `spacing` is a reserved HTML attribute and will be added to the
   // element, replaced with `gutter`.
@@ -119,6 +120,7 @@ const ProgressDots = ({
     const isSelected = selectedIndex === index;
     const tabId = `${ariaLabel}${index}`;
     const panelId = `${ariaControls}${index}`;
+    const label = getAriaLabel ? getAriaLabel(index) : tabId;
     const indicatorTestId = testId && `${testId}-ind-${index}`;
     return onSelect ? /*#__PURE__*/React.createElement(ButtonIndicator, {
       key: index,
@@ -127,6 +129,7 @@ const ProgressDots = ({
       isSelected: isSelected,
       tabId: tabId,
       panelId: panelId,
+      label: label,
       onClick: event => onSelectWithAnalytics({
         event,
         index

package/dist/esm/components/button-indicator.js

@@ -48,6 +48,7 @@ export var ButtonIndicator = function ButtonIndicator(_ref) {
   var appearance = _ref.appearance,
     panelId = _ref.panelId,
     tabId = _ref.tabId,
+    label = _ref.label,
     isSelected = _ref.isSelected,
     onClick = _ref.onClick,
     testId = _ref.testId;
@@ -63,5 +64,5 @@ export var ButtonIndicator = function ButtonIndicator(_ref) {
     onClick: onClick,
     tabIndex: isSelected ? -1 : undefined,
     testId: testId
-  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, tabId));
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, label));
 };

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

@@ -7,7 +7,7 @@ import { Box, Inline } from '@atlaskit/primitives/compiled';
 import { ButtonIndicator } from './button-indicator';
 import { PresentationalIndicator } from './presentational-indicator';
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "12.0.20";
+var packageVersion = "13.0.0";
 var progressIndicatorGapMap = {
   comfortable: {
     default: 'space.100',
@@ -41,6 +41,7 @@ var ProgressDots = function ProgressDots(_ref) {
     ariaControls = _ref$ariaControls === void 0 ? 'panel' : _ref$ariaControls,
     _ref$ariaLabel = _ref.ariaLabel,
     ariaLabel = _ref$ariaLabel === void 0 ? 'tab' : _ref$ariaLabel,
+    getAriaLabel = _ref.getAriaLabel,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'default' : _ref$size,
     _ref$spacing = _ref.spacing,
@@ -118,6 +119,7 @@ var ProgressDots = function ProgressDots(_ref) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
     var panelId = "".concat(ariaControls).concat(index);
+    var label = getAriaLabel ? getAriaLabel(index) : tabId;
     var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
     return onSelect ? /*#__PURE__*/React.createElement(ButtonIndicator, {
       key: index,
@@ -126,6 +128,7 @@ var ProgressDots = function ProgressDots(_ref) {
       isSelected: isSelected,
       tabId: tabId,
       panelId: panelId,
+      label: label,
       onClick: function onClick(event) {
         return onSelectWithAnalytics({
           event: event,

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

@@ -6,6 +6,7 @@ import type { DotsAppearance } from './types';
 type ButtonIndicatorProps = {
     panelId: string;
     tabId: string;
+    label: string;
     appearance: DotsAppearance;
     isSelected: boolean;
     testId?: string;
@@ -30,5 +31,5 @@ export declare const ButtonIndicator: ({
  * - [Code](https://atlassian.design/components/{packageName}/code)
  * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-appearance, panelId, tabId, isSelected, onClick, testId, }: ButtonIndicatorProps) => JSX.Element;
+appearance, panelId, tabId, label, isSelected, onClick, testId, }: ButtonIndicatorProps) => JSX.Element;
 export {};

package/dist/types/types.d.ts

@@ -17,6 +17,10 @@ export interface ProgressDotsProps {
      * @default 'tab'
      */
     ariaLabel?: string;
+    /**
+     * Returns the accessible label for each selectable indicator.
+     */
+    getAriaLabel?: (index: number) => string;
     /**
      * Function called when an indicator is selected.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "12.0.20",
+	"version": "13.0.1",
 	"description": "A progress indicator shows the user where they are along the steps of a journey.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,11 +31,11 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/visually-hidden": "^3.0.0",
+		"@atlaskit/analytics-next": "^12.0.0",
+		"@atlaskit/ds-lib": "^8.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/tokens": "^14.0.0",
+		"@atlaskit/visually-hidden": "^4.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0"
@@ -47,11 +47,11 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/docs": "^11.7.0",
-		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/section-message": "^8.12.0",
+		"@atlaskit/button": "^24.1.0",
+		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/section-message": "^9.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
@@ -59,6 +59,7 @@
 		"@testing-library/user-event": "^14.4.3",
 		"@types/jscodeshift": "^0.11.0",
 		"jscodeshift": "^17.0.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-lorem-component": "^0.13.0"
 	},
@@ -85,13 +86,5 @@
 			"deprecation": "no-deprecated-imports"
 		}
 	},
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"homepage": "https://atlassian.design/components/progress-indicator/"
 }

package/progress-indicator.docs.tsx

@@ -1,47 +1,49 @@
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'ProgressIndicator',
-		description: 'A component for displaying progress through steps or completion status.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'ProgressIndicator',
-			package: '@atlaskit/progress-indicator',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use for step-by-step processes',
-			'Provide clear progress indicators',
-			'Handle progress updates appropriately',
-			'Consider progress completion states',
-		],
-		contentGuidelines: [
-			'Use clear, descriptive step labels',
-			'Provide meaningful progress descriptions',
-			'Use appropriate progress terminology',
-			'Keep progress information concise',
-		],
-		accessibilityGuidelines: [
-			'Ensure progress is announced by screen readers',
-			'Use appropriate progress indicators',
-			'Provide clear progress context',
-			'Consider progress timing and updates',
-		],
-		examples: [
-			{
-				name: 'Progress Indicator',
-				description: 'Progress Indicator example',
-				source: path.resolve(__dirname, './examples/ai/progress-indicator.tsx'),
+			description: 'A component for displaying progress through steps or completion status.',
+			status: 'general-availability',
+			import: {
+				name: 'ProgressIndicator',
+				package: '@atlaskit/progress-indicator',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['progress', 'indicator', 'steps', 'completion', 'status'],
-		categories: ['feedback'],
-	},
-];
+			usageGuidelines: [
+				'Use for step-by-step processes',
+				'Provide clear progress indicators',
+				'Handle progress updates appropriately',
+				'Consider progress completion states',
+			],
+			contentGuidelines: [
+				'Use clear, descriptive step labels',
+				'Provide meaningful progress descriptions',
+				'Use appropriate progress terminology',
+				'Keep progress information concise',
+			],
+			accessibilityGuidelines: [
+				'Ensure progress is announced by screen readers',
+				'Use appropriate progress indicators',
+				'Provide clear progress context',
+				'Consider progress timing and updates',
+			],
+			examples: [
+				{
+					name: 'Progress Indicator',
+					description: 'Progress Indicator example',
+					source: path.resolve(__dirname, './examples/ai/progress-indicator.tsx'),
+				},
+			],
+			keywords: ['progress', 'indicator', 'steps', 'completion', 'status'],
+			categories: ['feedback'],
+		},
+	],
+};
 
 export default documentation;

package/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/types.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/types.d.ts"
 }

package/dist/types-ts4.5/components/button-indicator.d.ts

@@ -1,34 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import type { DotsAppearance } from './types';
-type ButtonIndicatorProps = {
-    panelId: string;
-    tabId: string;
-    appearance: DotsAppearance;
-    isSelected: boolean;
-    testId?: string;
-    onClick(e: React.MouseEvent<HTMLButtonElement>): void;
-};
-/**
- * __Button indicator__
- *
- * A button indicator {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
-export declare const ButtonIndicator: ({ 
-/**
- * __Button indicator__
- *
- * A button indicator {description}.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
- */
-appearance, panelId, tabId, isSelected, onClick, testId, }: ButtonIndicatorProps) => JSX.Element;
-export {};

package/dist/types-ts4.5/components/presentational-indicator.d.ts

@@ -1,12 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import type { DotsAppearance } from './types';
-type PresentationalIndicatorProps = {
-    appearance: DotsAppearance;
-    isSelected: boolean;
-    testId?: string;
-};
-export declare const PresentationalIndicator: ({ appearance, isSelected, testId, }: PresentationalIndicatorProps) => JSX.Element;
-export {};

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

@@ -1,9 +0,0 @@
-import { type 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.5/components/types.d.ts

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

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

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

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

@@ -1,47 +0,0 @@
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { DotsAppearance, Size, Spacing } from './components/types';
-export interface ProgressDotsProps {
-    /**
-     * Sets the color of the indicators.
-     */
-    appearance?: DotsAppearance;
-    /**
-     * If interaction is enabled, use `ariaControls` to tell assistive technology what elements are controlled by the progress indicator.
-     *
-     * @default 'panel'
-     */
-    ariaControls?: string;
-    /**
-     * Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.
-     *
-     * @default 'tab'
-     */
-    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;
-    /**
-     * Sets the width and height of each indicator.
-     */
-    size?: Size;
-    /**
-     * Specifies how much of a gutter there is between indicators.
-     */
-    spacing?: Spacing;
-    /**
-     * A hook for automated tests.
-     */
-    testId?: string;
-    /**
-     * An array of values mapped over to create the indicators.
-     */
-    values: any[];
-}

package/offerings.json

@@ -1,34 +0,0 @@
-[
-	{
-		"name": "ProgressIndicator",
-		"package": "@atlaskit/progress-indicator",
-		"import": {
-			"name": "ProgressIndicator",
-			"package": "@atlaskit/progress-indicator",
-			"type": "named"
-		},
-		"keywords": ["progress", "indicator", "steps", "completion", "status"],
-		"categories": ["feedback"],
-		"shortDescription": "A component for displaying progress through steps or completion status.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Ensure progress is announced by screen readers",
-			"Use appropriate progress indicators",
-			"Provide clear progress context",
-			"Consider progress timing and updates"
-		],
-		"usageGuidelines": [
-			"Use for step-by-step processes",
-			"Provide clear progress indicators",
-			"Handle progress updates appropriately",
-			"Consider progress completion states"
-		],
-		"contentGuidelines": [
-			"Use clear, descriptive step labels",
-			"Provide meaningful progress descriptions",
-			"Use appropriate progress terminology",
-			"Keep progress information concise"
-		],
-		"examples": ["./examples/ai/progress-indicator.tsx"]
-	}
-]