@atlaskit/teams-public 3.1.3 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/next/ui/team-containers/add-container-card/index.js +7 -3
  3. package/dist/cjs/ui/team-containers/main.js +12 -2
  4. package/dist/es2019/next/ui/team-containers/add-container-card/index.js +7 -3
  5. package/dist/es2019/ui/team-containers/main.js +13 -3
  6. package/dist/esm/next/ui/team-containers/add-container-card/index.js +7 -3
  7. package/dist/esm/ui/team-containers/main.js +13 -3
  8. package/dist/types/next/ui/team-containers/add-container-card/index.d.ts +3 -1
  9. package/package.json +9 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/teams-public
2
2
 
3
+ ## 3.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`3aefcc080d27a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3aefcc080d27a) -
8
+ A11Y-34712: Fix focus loss when closing the "Add where your team works" dialog via the Escape key.
9
+ Focus now returns to the triggering element when the dialog is dismissed, gated behind feature
10
+ flag `teams_a11y_20260928`.
11
+
12
+ This covers both entry points: the web link dialog, and the container linker opened from the "Add
13
+ Jira space" / "Add Confluence space" / "Add Loom space" cards. `AddContainerCard` accepts a new
14
+ optional `buttonRef` prop so the panel can return focus to the card that opened the linker.
15
+
16
+ ## 3.1.4
17
+
18
+ ### Patch Changes
19
+
20
+ - [`6f3ca06c05ce4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f3ca06c05ce4) -
21
+ A11Y: Fix focus management when activating the Show more button in TeamContainers — focus now
22
+ moves to the first newly revealed container item (gated behind `teams_a11y_20261005`)
23
+
3
24
  ## 3.1.3
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/next/ui/team-containers/add-container-card/index.js CHANGED
@@ -20,8 +20,10 @@ var styles = {
20
20
  var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
21
21
  var children = _ref.children,
22
22
  onClick = _ref.onClick,
23
- isDisabled = _ref.isDisabled;
23
+ isDisabled = _ref.isDisabled,
24
+ buttonRef = _ref.buttonRef;
24
25
  return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
26
+ ref: buttonRef,
25
27
  xcss: styles.container,
26
28
  isDisabled: isDisabled,
27
29
  onClick: onClick
@@ -33,7 +35,8 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
33
35
  _ref2$isLoading = _ref2.isLoading,
34
36
  isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
35
37
  _ref2$isDisabled = _ref2.isDisabled,
36
- isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
38
+ isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
39
+ buttonRef = _ref2.buttonRef;
37
40
  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)({
38
41
  containerType: containerType,
39
42
  isEmptyContainer: true
@@ -47,7 +50,8 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
47
50
  }
48
51
  return /*#__PURE__*/_react.default.createElement(AddContainerCardWrapper, {
49
52
  onClick: onAddAContainerClick,
50
- isDisabled: isDisabled
53
+ isDisabled: isDisabled,
54
+ buttonRef: buttonRef
51
55
  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
52
56
  space: "space.100",
53
57
  xcss: styles.card
package/dist/cjs/ui/team-containers/main.js CHANGED
@@ -71,6 +71,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
71
71
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
72
72
  showMore = _useState2[0],
73
73
  setShowMore = _useState2[1];
74
+ var firstShowMoreItemRef = (0, _react.useRef)(null);
74
75
  var _useState3 = (0, _react.useState)(false),
75
76
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
76
77
  isDisconnectDialogOpen = _useState4[0],
@@ -179,6 +180,13 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
179
180
  }
180
181
  }
181
182
  }, [hasError, unlinkError, onError]);
183
+ (0, _react.useEffect)(function () {
184
+ if ((0, _fg.fg)('teams_a11y_20261005') && showMore && firstShowMoreItemRef.current) {
185
+ firstShowMoreItemRef.current.focus({
186
+ preventScroll: false
187
+ });
188
+ }
189
+ }, [showMore]);
182
190
  var handleShowMore = function handleShowMore() {
183
191
  setShowMore(!showMore);
184
192
  };
@@ -339,7 +347,7 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
339
347
  onAddAContainerClick: onAddAContainerClick,
340
348
  CustomAddContainerCard: components === null || components === void 0 ? void 0 : components.AddContainerCard,
341
349
  canCreateContainers: hasPermissionToCreateContainer
342
- }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container) {
350
+ }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container, index) {
343
351
  var card = /*#__PURE__*/_react.default.createElement(LinkedContainerCardComponent, {
344
352
  key: container.id,
345
353
  containerType: container.type,
@@ -363,7 +371,9 @@ var TeamContainers = exports.TeamContainers = function TeamContainers(_ref) {
363
371
  });
364
372
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
365
373
  key: container.id,
366
- role: "listitem"
374
+ role: "listitem",
375
+ ref: index === 0 ? firstShowMoreItemRef : undefined,
376
+ tabIndex: index === 0 && (0, _fg.fg)('teams_a11y_20261005') ? -1 : undefined
367
377
  }, card);
368
378
  }));
369
379
  }(), filteredTeamLinks.length > maxNumberOfContainersToShow && /*#__PURE__*/_react.default.createElement(_compiled.Inline, null, /*#__PURE__*/_react.default.createElement(_button.default, {
package/dist/es2019/next/ui/team-containers/add-container-card/index.js CHANGED
@@ -13,9 +13,11 @@ const styles = {
13
13
  const AddContainerCardWrapper = ({
14
14
  children,
15
15
  onClick,
16
- isDisabled
16
+ isDisabled,
17
+ buttonRef
17
18
  }) => {
18
19
  return /*#__PURE__*/React.createElement(Pressable, {
20
+ ref: buttonRef,
19
21
  xcss: styles.container,
20
22
  isDisabled: isDisabled,
21
23
  onClick: onClick
@@ -25,7 +27,8 @@ export const AddContainerCard = ({
25
27
  containerType,
26
28
  onAddAContainerClick,
27
29
  isLoading = false,
28
- isDisabled = false
30
+ isDisabled = false,
31
+ buttonRef
29
32
  }) => {
30
33
  const {
31
34
  icon,
@@ -41,7 +44,8 @@ export const AddContainerCard = ({
41
44
  }
42
45
  return /*#__PURE__*/React.createElement(AddContainerCardWrapper, {
43
46
  onClick: onAddAContainerClick,
44
- isDisabled: isDisabled
47
+ isDisabled: isDisabled,
48
+ buttonRef: buttonRef
45
49
  }, /*#__PURE__*/React.createElement(Inline, {
46
50
  space: "space.100",
47
51
  xcss: styles.card
package/dist/es2019/ui/team-containers/main.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* main.tsx generated by @compiled/babel-plugin v3.0.2 */
2
2
  import "./main.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
- import React, { useCallback, useEffect, useMemo, useState } from 'react';
4
+ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
5
5
  import { defineMessages, FormattedMessage } from 'react-intl';
6
6
  import Button from '@atlaskit/button/default/button';
7
7
  import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
@@ -55,6 +55,7 @@ export const TeamContainers = ({
55
55
  } = useTeamLinksAndContainers(teamId, true);
56
56
  const [_, actions] = useTeamContainersHook();
57
57
  const [showMore, setShowMore] = useState(false);
58
+ const firstShowMoreItemRef = useRef(null);
58
59
  const [isDisconnectDialogOpen, setIsDisconnectDialogOpen] = useState(false);
59
60
  const [selectedContainerDetails, setSelectedContainerDetails] = useState();
60
61
  const [filteredTeamLinks, setFilteredTeamLinks] = useState(teamLinks);
@@ -146,6 +147,13 @@ export const TeamContainers = ({
146
147
  }
147
148
  }
148
149
  }, [hasError, unlinkError, onError]);
150
+ useEffect(() => {
151
+ if (fg('teams_a11y_20261005') && showMore && firstShowMoreItemRef.current) {
152
+ firstShowMoreItemRef.current.focus({
153
+ preventScroll: false
154
+ });
155
+ }
156
+ }, [showMore]);
149
157
  const handleShowMore = () => {
150
158
  setShowMore(!showMore);
151
159
  };
@@ -278,7 +286,7 @@ export const TeamContainers = ({
278
286
  onAddAContainerClick: onAddAContainerClick,
279
287
  CustomAddContainerCard: components === null || components === void 0 ? void 0 : components.AddContainerCard,
280
288
  canCreateContainers: hasPermissionToCreateContainer
281
- }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(container => {
289
+ }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map((container, index) => {
282
290
  const card = /*#__PURE__*/React.createElement(LinkedContainerCardComponent, {
283
291
  key: container.id,
284
292
  containerType: container.type,
@@ -298,7 +306,9 @@ export const TeamContainers = ({
298
306
  });
299
307
  return /*#__PURE__*/React.createElement(Box, {
300
308
  key: container.id,
301
- role: "listitem"
309
+ role: "listitem",
310
+ ref: index === 0 ? firstShowMoreItemRef : undefined,
311
+ tabIndex: index === 0 && fg('teams_a11y_20261005') ? -1 : undefined
302
312
  }, card);
303
313
  }));
304
314
  })(), filteredTeamLinks.length > maxNumberOfContainersToShow && /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Button, {
package/dist/esm/next/ui/team-containers/add-container-card/index.js CHANGED
@@ -13,8 +13,10 @@ var styles = {
13
13
  var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
14
14
  var children = _ref.children,
15
15
  onClick = _ref.onClick,
16
- isDisabled = _ref.isDisabled;
16
+ isDisabled = _ref.isDisabled,
17
+ buttonRef = _ref.buttonRef;
17
18
  return /*#__PURE__*/React.createElement(Pressable, {
19
+ ref: buttonRef,
18
20
  xcss: styles.container,
19
21
  isDisabled: isDisabled,
20
22
  onClick: onClick
@@ -26,7 +28,8 @@ export var AddContainerCard = function AddContainerCard(_ref2) {
26
28
  _ref2$isLoading = _ref2.isLoading,
27
29
  isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
28
30
  _ref2$isDisabled = _ref2.isDisabled,
29
- isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled;
31
+ isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
32
+ buttonRef = _ref2.buttonRef;
30
33
  var _getContainerProperti = getContainerProperties({
31
34
  containerType: containerType,
32
35
  isEmptyContainer: true
@@ -40,7 +43,8 @@ export var AddContainerCard = function AddContainerCard(_ref2) {
40
43
  }
41
44
  return /*#__PURE__*/React.createElement(AddContainerCardWrapper, {
42
45
  onClick: onAddAContainerClick,
43
- isDisabled: isDisabled
46
+ isDisabled: isDisabled,
47
+ buttonRef: buttonRef
44
48
  }, /*#__PURE__*/React.createElement(Inline, {
45
49
  space: "space.100",
46
50
  xcss: styles.card
package/dist/esm/ui/team-containers/main.js CHANGED
@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
4
  import "./main.compiled.css";
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import _regeneratorRuntime from "@babel/runtime/regenerator";
7
- import React, { useCallback, useEffect, useMemo, useState } from 'react';
7
+ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
8
8
  import { defineMessages, FormattedMessage } from 'react-intl';
9
9
  import Button from '@atlaskit/button/default/button';
10
10
  import ModalTransition from '@atlaskit/modal-dialog/modal-transition';
@@ -62,6 +62,7 @@ export var TeamContainers = function TeamContainers(_ref) {
62
62
  _useState2 = _slicedToArray(_useState, 2),
63
63
  showMore = _useState2[0],
64
64
  setShowMore = _useState2[1];
65
+ var firstShowMoreItemRef = useRef(null);
65
66
  var _useState3 = useState(false),
66
67
  _useState4 = _slicedToArray(_useState3, 2),
67
68
  isDisconnectDialogOpen = _useState4[0],
@@ -170,6 +171,13 @@ export var TeamContainers = function TeamContainers(_ref) {
170
171
  }
171
172
  }
172
173
  }, [hasError, unlinkError, onError]);
174
+ useEffect(function () {
175
+ if (fg('teams_a11y_20261005') && showMore && firstShowMoreItemRef.current) {
176
+ firstShowMoreItemRef.current.focus({
177
+ preventScroll: false
178
+ });
179
+ }
180
+ }, [showMore]);
173
181
  var handleShowMore = function handleShowMore() {
174
182
  setShowMore(!showMore);
175
183
  };
@@ -330,7 +338,7 @@ export var TeamContainers = function TeamContainers(_ref) {
330
338
  onAddAContainerClick: onAddAContainerClick,
331
339
  CustomAddContainerCard: components === null || components === void 0 ? void 0 : components.AddContainerCard,
332
340
  canCreateContainers: hasPermissionToCreateContainer
333
- }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container) {
341
+ }), showMore && filteredTeamLinks.slice(maxNumberOfContainersToShow).map(function (container, index) {
334
342
  var card = /*#__PURE__*/React.createElement(LinkedContainerCardComponent, {
335
343
  key: container.id,
336
344
  containerType: container.type,
@@ -354,7 +362,9 @@ export var TeamContainers = function TeamContainers(_ref) {
354
362
  });
355
363
  return /*#__PURE__*/React.createElement(Box, {
356
364
  key: container.id,
357
- role: "listitem"
365
+ role: "listitem",
366
+ ref: index === 0 ? firstShowMoreItemRef : undefined,
367
+ tabIndex: index === 0 && fg('teams_a11y_20261005') ? -1 : undefined
358
368
  }, card);
359
369
  }));
360
370
  }(), filteredTeamLinks.length > maxNumberOfContainersToShow && /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Button, {
package/dist/types/next/ui/team-containers/add-container-card/index.d.ts CHANGED
@@ -5,6 +5,8 @@ interface AddContainerCardProps {
5
5
  onAddAContainerClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
6
6
  isLoading?: boolean;
7
7
  isDisabled?: boolean;
8
+ /** Ref to the card's button, e.g. to return focus to it after an overlay it opened closes. */
9
+ buttonRef?: React.Ref<HTMLButtonElement>;
8
10
  }
9
- export declare const AddContainerCard: ({ containerType, onAddAContainerClick, isLoading, isDisabled, }: AddContainerCardProps) => React.JSX.Element;
11
+ export declare const AddContainerCard: ({ containerType, onAddAContainerClick, isLoading, isDisabled, buttonRef, }: AddContainerCardProps) => React.JSX.Element;
10
12
  export {};
package/package.json CHANGED
@@ -24,7 +24,7 @@
24
24
  "atlaskit:src": "src/index.ts",
25
25
  "dependencies": {
26
26
  "@atlaskit/afm-i18n-platform-people-and-teams-teams-public": "2.263.0",
27
- "@atlaskit/analytics-next": "^12.5.0",
27
+ "@atlaskit/analytics-next": "^12.6.0",
28
28
  "@atlaskit/avatar": "^30.0.0",
29
29
  "@atlaskit/button": "^25.4.0",
30
30
  "@atlaskit/css": "^1.1.0",
@@ -45,7 +45,7 @@
45
45
  "@atlaskit/teams-app-internal-product-permissions": "^2.2.0",
46
46
  "@atlaskit/teams-client": "^6.1.0",
47
47
  "@atlaskit/tile": "^5.0.0",
48
- "@atlaskit/tokens": "^20.1.0",
48
+ "@atlaskit/tokens": "^20.3.0",
49
49
  "@atlaskit/tooltip": "^24.4.0",
50
50
  "@babel/runtime": "^7.0.0",
51
51
  "@compiled/react": "^1.0.2",
@@ -53,7 +53,7 @@
53
53
  "graphql": "^15.8.0",
54
54
  "graphql-tag": "^2.10.1",
55
55
  "react-loosely-lazy": "^1.0.0",
56
- "react-router-dom": "^6.28.0",
56
+ "react-router-dom": "^6.30.6",
57
57
  "react-sweet-state": "^2.6.5",
58
58
  "string-hash": "1.1.3"
59
59
  },
@@ -67,7 +67,7 @@
67
67
  "@atlaskit/ssr": "workspace:^",
68
68
  "@atlassian/a11y-jest-testing": "^0.17.0",
69
69
  "@atlassian/feature-flags-test-utils": "^1.3.0",
70
- "@atlassian/ptc-test-utils": "^0.15.0",
70
+ "@atlassian/ptc-test-utils": "^0.16.0",
71
71
  "@atlassian/teams-app-internal-playground": "^2.10.0",
72
72
  "@atlassian/testing-library": "^0.11.0",
73
73
  "@atlassian/workbench": "workspace:^",
@@ -78,7 +78,7 @@
78
78
  "react-intl": "^7.0.0"
79
79
  },
80
80
  "name": "@atlaskit/teams-public",
81
- "version": "3.1.3",
81
+ "version": "3.2.0",
82
82
  "description": "Public components related to teams",
83
83
  "author": "Atlassian Pty Ltd",
84
84
  "license": "Apache-2.0",
@@ -87,7 +87,7 @@
87
87
  },
88
88
  "scripts": {
89
89
  "ak-postbuild": "ls -d dist/* | xargs -n 1 copyfiles -u 1 -V 'src/**/*.svg'",
90
- "test:coverage": "(cd ../../.. && yarn test 'packages/people-and-teams/teams-public/src' --coverage --coverageProvider=v8 --collectCoverageFrom='[\"packages/people-and-teams/teams-public/src/**\", \"!packages/people-and-teams/teams-public/src/**/**/types.ts\", \"!packages/people-and-teams/teams-public/src/ui/**/styled.tsx\"]')"
90
+ "test:coverage": "(cd ../../.. && afm run test -- 'packages/people-and-teams/teams-public/src' --coverage --coverageProvider=v8 --collectCoverageFrom='[\"packages/people-and-teams/teams-public/src/**\", \"!packages/people-and-teams/teams-public/src/**/**/types.ts\", \"!packages/people-and-teams/teams-public/src/ui/**/styled.tsx\"]')"
91
91
  },
92
92
  "platform-feature-flags": {
93
93
  "migrate-product-permissions": {
@@ -104,6 +104,9 @@
104
104
  },
105
105
  "enable_teams_t26_design_drop_core_experiences": {
106
106
  "type": "boolean"
107
+ },
108
+ "teams_a11y_20261005": {
109
+ "type": "boolean"
107
110
  }
108
111
  }
109
112
  }