npm - @atlaskit/drawer - Versions diffs - 7.5.5 → 7.6.1 - Mend

@atlaskit/drawer 7.5.5 → 7.6.1

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 (30) hide show

package/CHANGELOG.md +55 -43
package/dist/cjs/components/blanket.js +1 -2
package/dist/cjs/components/index.js +9 -7
package/dist/cjs/components/primitives/content.js +2 -3
package/dist/cjs/components/primitives/drawer-wrapper.js +15 -7
package/dist/cjs/components/primitives/focus-lock.js +1 -2
package/dist/cjs/components/primitives/icon-button.js +1 -2
package/dist/cjs/components/primitives/index.js +9 -6
package/dist/cjs/components/primitives/sidebar.js +2 -3
package/dist/cjs/components/utils.js +2 -3
package/dist/cjs/constants.js +9 -14
package/dist/es2019/components/index.js +6 -2
package/dist/es2019/components/primitives/drawer-wrapper.js +13 -4
package/dist/es2019/components/primitives/index.js +6 -2
package/dist/es2019/constants.js +2 -1
package/dist/esm/components/index.js +6 -2
package/dist/esm/components/primitives/drawer-wrapper.js +13 -4
package/dist/esm/components/primitives/index.js +8 -4
package/dist/esm/constants.js +2 -1
package/dist/types/components/index.d.ts +2 -2
package/dist/types/components/primitives/drawer-wrapper.d.ts +1 -1
package/dist/types/components/primitives/index.d.ts +1 -1
package/dist/types/components/types.d.ts +17 -5
package/dist/types-ts4.5/components/index.d.ts +2 -2
package/dist/types-ts4.5/components/primitives/drawer-wrapper.d.ts +1 -1
package/dist/types-ts4.5/components/primitives/index.d.ts +1 -1
package/dist/types-ts4.5/components/types.d.ts +17 -5
package/package.json +14 -6
package/report.api.md +14 -2
package/tmp/api-report-tmp.d.ts +10 -4

package/CHANGELOG.md CHANGED Viewed

@@ -1,42 +1,54 @@
 # @atlaskit/drawer
+## 7.6.1
+### Patch Changes
+- [#40647](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40647) [`0de92f17021`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0de92f17021) - Bump react-focus-lock to latest version
+## 7.6.0
+### Minor Changes
+- [#38517](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38517) [`288b53175c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/288b53175c0) - [ux] We are testing focus trap behavior for drawer in screen reader mode behind a feature flag. Now focus is set to first element and does not go beyond the content of the modal dialog. If this fix is successful, it will be available in a later release.
 ## 7.5.5
 ### Patch Changes
-- [`ddb06fae577`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ddb06fae577) - Adds support for surface detection when using design tokens. Enabling children to be styled with the surface color of the drawer when using the `utility.elevation.surface.current` design token.
+- [#39278](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39278) [`ddb06fae577`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ddb06fae577) - Adds support for surface detection when using design tokens. Enabling children to be styled with the surface color of the drawer when using the `utility.elevation.surface.current` design token.
 - Updated dependencies
 ## 7.5.4
 ### Patch Changes
-- [`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete version.json
+- [#38162](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38162) [`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete version.json
 - Updated dependencies
 ## 7.5.3
 ### Patch Changes
-- [`779727e307a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/779727e307a) - Internal change only. Replace all instances of Box with stable @atlaskit/primitives version.
+- [#34922](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34922) [`779727e307a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/779727e307a) - Internal change only. Replace all instances of Box with stable @atlaskit/primitives version.
 ## 7.5.2
 ### Patch Changes
-- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
 ## 7.5.1
 ### Patch Changes
-- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
 ## 7.5.0
 ### Minor Changes
-- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
 ### Patch Changes
@@ -46,26 +58,26 @@
 ### Patch Changes
-- [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
+- [#32211](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32211) [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
 ## 7.4.13
 ### Patch Changes
-- [`e0460d5d989`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0460d5d989) - Usages of `process` are now guarded by a `typeof` check.
+- [#32294](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32294) [`e0460d5d989`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0460d5d989) - Usages of `process` are now guarded by a `typeof` check.
 ## 7.4.12
 ### Patch Changes
-- [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
+- [#31206](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31206) [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
 - Updated dependencies
 ## 7.4.11
 ### Patch Changes
-- [`74c1b81a476`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74c1b81a476) - Replaces use of `gridSize` with space tokens. There is no expected visual change.
+- [#31338](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31338) [`74c1b81a476`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74c1b81a476) - Replaces use of `gridSize` with space tokens. There is no expected visual change.
 ## 7.4.10
@@ -83,13 +95,13 @@
 ### Patch Changes
-- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+- [#29390](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29390) [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
 ## 7.4.7
 ### Patch Changes
-- [`4ee60bafc6d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ee60bafc6d) - ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add `allowedSideEffects` when loading the page.
+- [#29227](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29227) [`4ee60bafc6d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ee60bafc6d) - ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add `allowedSideEffects` when loading the page.
 ## 7.4.6
@@ -101,7 +113,7 @@
 ### Patch Changes
-- [`021eea6cdc6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/021eea6cdc6) - Remove unnecessary styles. There is no expected behaviour change for consumers.
+- [#28575](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28575) [`021eea6cdc6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/021eea6cdc6) - Remove unnecessary styles. There is no expected behaviour change for consumers.
 ## 7.4.4
@@ -119,7 +131,7 @@
 ### Patch Changes
-- [`5bd499c254f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5bd499c254f) - Fix zIndex stacking of internal Blanket component during css transition
+- [#26712](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26712) [`5bd499c254f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5bd499c254f) - Fix zIndex stacking of internal Blanket component during css transition
 ## 7.4.1
@@ -131,7 +143,7 @@
 ### Minor Changes
-- [`3d5675d420e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d5675d420e) - [ux] Prevents the background from being scrollable while a drawer is open.
+- [#25860](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/25860) [`3d5675d420e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d5675d420e) - [ux] Prevents the background from being scrollable while a drawer is open.
 ### Patch Changes
@@ -141,19 +153,19 @@
 ### Patch Changes
-- [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
+- [#26488](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26488) [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
 ## 7.3.1
 ### Patch Changes
-- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
+- [#26408](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26408) [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
 ## 7.3.0
 ### Minor Changes
-- [`b975291711b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b975291711b) - Add zindex as prop to drawer
+- [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710) [`b975291711b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b975291711b) - Add zindex as prop to drawer
 ### Patch Changes
@@ -164,13 +176,13 @@
 ### Patch Changes
-- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
 ## 7.2.0
 ### Minor Changes
-- [`cc4fe7bdf0c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc4fe7bdf0c) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+- [#24004](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24004) [`cc4fe7bdf0c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc4fe7bdf0c) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
 ### Patch Changes
@@ -181,13 +193,13 @@
 ### Patch Changes
-- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
 ## 7.1.11
 ### Patch Changes
-- [`fd86b8e4c63`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd86b8e4c63) - Internal code change turning on new linting rules.
+- [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381) [`fd86b8e4c63`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd86b8e4c63) - Internal code change turning on new linting rules.
 ## 7.1.10
@@ -199,13 +211,13 @@
 ### Patch Changes
-- [`45e0af67ad3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45e0af67ad3) - Internal change to make styles statically analyzable
+- [#20721](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20721) [`45e0af67ad3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45e0af67ad3) - Internal change to make styles statically analyzable
 ## 7.1.8
 ### Patch Changes
-- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
 ## 7.1.7
@@ -217,7 +229,7 @@
 ### Patch Changes
-- [`ac9343c3ed4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac9343c3ed4) - Replaces usage of deprecated design tokens. No visual or functional changes
+- [#19618](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/19618) [`ac9343c3ed4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac9343c3ed4) - Replaces usage of deprecated design tokens. No visual or functional changes
 - Updated dependencies
 ## 7.1.5
@@ -230,13 +242,13 @@
 ### Patch Changes
-- [`e9210b8a098`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e9210b8a098) - Updates Drawer with deprecated status for `cssFn`/`overrides APIs.
+- [#18526](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18526) [`e9210b8a098`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e9210b8a098) - Updates Drawer with deprecated status for `cssFn`/`overrides APIs.
 ## 7.1.3
 ### Patch Changes
-- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump dependency tiny-invariant to latest"
+- [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752) [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump dependency tiny-invariant to latest"
 - Updated dependencies
 ## 7.1.2
@@ -249,13 +261,13 @@
 ### Patch Changes
-- [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
+- [#17475](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/17475) [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
 ## 7.1.0
 ### Minor Changes
-- [`d19fa028010`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d19fa028010) - Instrumented `@atlaskit/drawer` with the new theming package, `@atlaskit/tokens`.
+- [#16753](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16753) [`d19fa028010`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d19fa028010) - Instrumented `@atlaskit/drawer` with the new theming package, `@atlaskit/tokens`.
   New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
@@ -263,13 +275,13 @@
 ### Patch Changes
-- [`3fced6aa641`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fced6aa641) - Bumped `react-focus-lock` to version `^2.2.1`.
+- [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998) [`3fced6aa641`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fced6aa641) - Bumped `react-focus-lock` to version `^2.2.1`.
 ## 7.0.0
 ### Major Changes
-- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Breaking changes:
+- [#14319](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/14319) [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Breaking changes:
   The following components have been removed from `@atlaskit/drawer`:
@@ -300,7 +312,7 @@
 ### Patch Changes
-- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+- [#12880](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12880) [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
 ## 6.0.9
@@ -312,20 +324,20 @@
 ### Patch Changes
-- [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
+- [#8644](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8644) [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
 - Updated dependencies
 ## 6.0.7
 ### Patch Changes
-- [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
+- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857) [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
 ## 6.0.6
 ### Patch Changes
-- [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
+- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
   This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
   Also add `typescript` to `devDependencies` to denote version that the package was built with.
@@ -339,13 +351,13 @@
 ### Patch Changes
-- [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
+- [#4707](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4707) [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
 ## 6.0.3
 ### Patch Changes
-- [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
+- [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
   Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
   to prevent duplicates of tslib being bundled.
@@ -354,20 +366,20 @@
 ### Patch Changes
-- [`6262f382de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6262f382de) - Use the 'lodash' package instead of single-function 'lodash.\*' packages
+- [#3823](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3823) [`6262f382de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6262f382de) - Use the 'lodash' package instead of single-function 'lodash.\*' packages
 ## 6.0.1
 ### Patch Changes
-- [`60dd4ecc69`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60dd4ecc69) - Changed export all to export individual components in index
+- [#3428](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3428) [`60dd4ecc69`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60dd4ecc69) - Changed export all to export individual components in index
 - Updated dependencies
 ## 6.0.0
 ### Major Changes
-- [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
+- [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
   For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
 ### Patch Changes
@@ -378,19 +390,19 @@
 ### Patch Changes
-- [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
+- [#2866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2866) [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
 ## 5.3.9
 ### Patch Changes
-- [`4560b65a4f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4560b65a4f) - upgrade react-transition-group to latest
+- [#2677](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2677) [`4560b65a4f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4560b65a4f) - upgrade react-transition-group to latest
 ## 5.3.8
 ### Patch Changes
-- [`54d82b49f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54d82b49f0) - Remove unused dependencies
+- [#2137](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2137) [`54d82b49f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54d82b49f0) - Remove unused dependencies
 - [`baaad91b65`](https://bitbucket.org/atlassian/atlassian-frontend/commits/baaad91b65) - Updated to use the latest and more performant version of `@atlaskit/avatar`
 - Updated dependencies

package/dist/cjs/components/blanket.js CHANGED Viewed

@@ -52,5 +52,4 @@ var Blanket = function Blanket(_ref) {
     }));
   }));
 };
-var _default = Blanket;
-exports.default = _default;
+var _default = exports.default = Blanket;

package/dist/cjs/components/index.js CHANGED Viewed

@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.5.5";
+var packageVersion = "7.6.1";
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -41,7 +41,7 @@ var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, t
     }
   })(createAnalyticsEvent);
 };
-var DrawerBase = /*#__PURE__*/function (_Component) {
+var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(DrawerBase, _Component);
   var _super = _createSuper(DrawerBase);
   function DrawerBase() {
@@ -128,7 +128,9 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
         shouldReturnFocus = _this$props3.shouldReturnFocus,
         overrides = _this$props3.overrides,
         _this$props3$zIndex = _this$props3.zIndex,
-        zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex;
+        zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex,
+        label = _this$props3.label,
+        titleId = _this$props3.titleId;
       return /*#__PURE__*/_react.default.createElement(_portal.default, {
         zIndex: zIndex
       }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
@@ -143,6 +145,8 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
         onCloseComplete: onCloseComplete,
         onOpenComplete: onOpenComplete,
         width: width,
+        label: label,
+        titleId: titleId,
         shouldUnmountOnExit: shouldUnmountOnExit
         // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
         ,
@@ -155,13 +159,11 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
   }]);
   return DrawerBase;
 }(_react.Component);
-exports.DrawerBase = DrawerBase;
 (0, _defineProperty2.default)(DrawerBase, "defaultProps", _objectSpread({
   width: 'narrow'
 }, _constants.defaultFocusLockSettings));
-var _default = (0, _analyticsNext.withAnalyticsContext)({
+var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'drawer',
   packageName: packageName,
   packageVersion: packageVersion
-})((0, _analyticsNext.withAnalyticsEvents)()(DrawerBase));
-exports.default = _default;
+})((0, _analyticsNext.withAnalyticsEvents)()(DrawerBase));

package/dist/cjs/components/primitives/content.js CHANGED Viewed

@@ -35,8 +35,7 @@ var Content = function Content(_ref) {
     }, props))
   );
 };
-var _default = {
+var _default = exports.default = {
   component: Content,
   cssFn: contentCSS
-};
-exports.default = _default;
+};

package/dist/cjs/components/primitives/drawer-wrapper.js CHANGED Viewed

@@ -5,16 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapperWidth = exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _useCallbackRef = require("use-callback-ref");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 var _usePreventProgrammaticScroll = _interopRequireDefault(require("./hooks/use-prevent-programmatic-scroll"));
 var _css;
 /** @jsx jsx */
-var wrapperWidth = {
+var wrapperWidth = exports.wrapperWidth = {
   full: {
     width: '100vw'
   },
@@ -31,7 +33,6 @@ var wrapperWidth = {
     width: 600
   }
 };
-exports.wrapperWidth = wrapperWidth;
 var wrapperStyles = (0, _react2.css)((_css = {
   display: 'flex',
   height: '100vh',
@@ -50,7 +51,9 @@ var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRe
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'narrow' : _ref$width,
     testId = _ref.testId,
-    drawerRef = _ref.drawerRef;
+    drawerRef = _ref.drawerRef,
+    label = _ref.label,
+    titleId = _ref.titleId;
   /**
    * We use a callback ref to assign the `<Content />` component to the forwarded `scrollRef`.
    * This ref comes from `react-scrolllock` to allow touch scrolling, eg.: `<ScrollLock><TouchScrollable>{children}</TouchScrollable><ScrollLock>`
@@ -67,13 +70,18 @@ var DrawerWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, scrollRe
   }, [scrollRef]);
   var ref = (0, _useCallbackRef.useMergeRefs)([drawerRef, assignSecondChildRef]);
   (0, _usePreventProgrammaticScroll.default)();
-  return (0, _react2.jsx)("div", {
+  var modalDialogAttributes = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') && {
+    'aria-modal': true,
+    role: 'dialog',
+    'aria-label': label,
+    'aria-labelledby': titleId
+  };
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: wrapperStyles,
     style: wrapperWidth[width],
     className: className,
     "data-testid": testId,
     ref: ref
-  }, children);
+  }, modalDialogAttributes), children);
 });
-var _default = DrawerWrapper;
-exports.default = _default;
+var _default = exports.default = DrawerWrapper;

package/dist/cjs/components/primitives/focus-lock.js CHANGED Viewed

@@ -25,7 +25,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 // Thin wrapper over react-focus-lock. This wrapper only exists to ensure API compatibility.
 // This component should be deleted during https://ecosystem.atlassian.net/browse/AK-5658
-var FocusLock = /*#__PURE__*/function (_Component) {
+var FocusLock = exports.default = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(FocusLock, _Component);
   var _super = _createSuper(FocusLock);
   function FocusLock() {
@@ -65,5 +65,4 @@ var FocusLock = /*#__PURE__*/function (_Component) {
   }]);
   return FocusLock;
 }(_react.Component);
-exports.default = FocusLock;
 (0, _defineProperty2.default)(FocusLock, "defaultProps", _objectSpread({}, _constants.defaultFocusLockSettings));

package/dist/cjs/components/primitives/icon-button.js CHANGED Viewed

@@ -36,5 +36,4 @@ var IconButton = function IconButton(_ref) {
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = IconButton;
-exports.default = _default;
+var _default = exports.default = IconButton;

package/dist/cjs/components/primitives/index.js CHANGED Viewed

@@ -63,7 +63,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
     shouldReturnFocus = _ref2.shouldReturnFocus,
     autoFocusFirstElem = _ref2.autoFocusFirstElem,
     isFocusLockEnabled = _ref2.isFocusLockEnabled,
-    width = _ref2.width;
+    width = _ref2.width,
+    label = _ref2.label,
+    titleId = _ref2.titleId;
   var getOverrides = (0, _utils.createExtender)(defaults, overrides);
   var _getOverrides = getOverrides('Sidebar'),
     Sidebar = _getOverrides.component,
@@ -78,9 +80,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
   var drawerRef = (0, _react.useRef)(null);
   var onFinish = (0, _react.useCallback)(function (state) {
     if (state === 'entering') {
-      onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete(drawerRef.current);
+      onOpenComplete === null || onOpenComplete === void 0 || onOpenComplete(drawerRef.current);
     } else if (state === 'exiting') {
-      onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete(drawerRef.current);
+      onCloseComplete === null || onCloseComplete === void 0 || onCloseComplete(drawerRef.current);
     }
   }, [onCloseComplete, onOpenComplete]);
   return (0, _react2.jsx)(_motion.ExitingPersistence, {
@@ -97,7 +99,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       className: className,
       width: width,
       testId: testId,
-      drawerRef: drawerRef
+      drawerRef: drawerRef,
+      label: label,
+      titleId: titleId
     }, (0, _react2.jsx)(Sidebar, sideBarOverrides, (0, _react2.jsx)(_iconButton.default, {
       onClick: onClose,
       testId: testId && 'DrawerPrimitiveSidebarCloseButton'
@@ -110,5 +114,4 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var _default = DrawerPrimitive;
-exports.default = _default;
+var _default = exports.default = DrawerPrimitive;

package/dist/cjs/components/primitives/sidebar.js CHANGED Viewed

@@ -34,8 +34,7 @@ var Sidebar = function Sidebar(_ref) {
     css: (0, _react.css)(cssFn(defaultStyle))
   }, props));
 };
-var _default = {
+var _default = exports.default = {
   component: Sidebar,
   cssFn: sidebarCSS
-};
-exports.default = _default;
+};

package/dist/cjs/components/utils.js CHANGED Viewed

@@ -9,7 +9,7 @@ exports.createExtender = void 0;
 /**
  * @deprecated Please avoid using this function as we intend to remote it in a future release. See DSP-2673 for more information.
  */
-var createExtender = function createExtender(defaults) {
+var createExtender = exports.createExtender = function createExtender(defaults) {
   var overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Object.create(Object.prototype);
   if (!defaults) {
     throw new Error('a default set of overrides *must* be passed in as the first argument');
@@ -35,5 +35,4 @@ var createExtender = function createExtender(defaults) {
       component: customComponent || defaultComponent
     };
   };
-};
-exports.createExtender = createExtender;
+};

package/dist/cjs/constants.js CHANGED Viewed

@@ -5,21 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = exports.defaultFocusLockSettings = exports.animationTimingFunction = void 0;
 var _curves = require("@atlaskit/motion/curves");
-var transitionDuration = '0.22s';
-exports.transitionDuration = transitionDuration;
-var transitionDurationMs = 220;
-exports.transitionDurationMs = transitionDurationMs;
-var transitionTimingFunction = _curves.easeOut;
-exports.transitionTimingFunction = transitionTimingFunction;
-var widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
-exports.widths = widths;
-var animationTimingFunction = function animationTimingFunction() {
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var transitionDuration = exports.transitionDuration = '0.22s';
+var transitionDurationMs = exports.transitionDurationMs = 220;
+var transitionTimingFunction = exports.transitionTimingFunction = _curves.easeOut;
+var widths = exports.widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
+var animationTimingFunction = exports.animationTimingFunction = function animationTimingFunction() {
   return _curves.easeOut;
 };
-exports.animationTimingFunction = animationTimingFunction;
-var defaultFocusLockSettings = {
+var defaultFocusLockSettings = exports.defaultFocusLockSettings = {
   isFocusLockEnabled: true,
   shouldReturnFocus: true,
-  autoFocusFirstElem: false
-};
-exports.defaultFocusLockSettings = defaultFocusLockSettings;
+  autoFocusFirstElem: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') || false
+};

package/dist/es2019/components/index.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "7.5.5";
+const packageVersion = "7.6.1";
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
   action: 'dismissed',
@@ -96,7 +96,9 @@ export class DrawerBase extends Component {
       isFocusLockEnabled,
       shouldReturnFocus,
       overrides,
-      zIndex = 'unset'
+      zIndex = 'unset',
+      label,
+      titleId
     } = this.props;
     return /*#__PURE__*/React.createElement(Portal, {
       zIndex: zIndex
@@ -112,6 +114,8 @@ export class DrawerBase extends Component {
       onCloseComplete: onCloseComplete,
       onOpenComplete: onOpenComplete,
       width: width,
+      label: label,
+      titleId: titleId,
       shouldUnmountOnExit: shouldUnmountOnExit
       // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
       ,

package/dist/es2019/components/primitives/drawer-wrapper.js CHANGED Viewed

@@ -1,8 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
@@ -42,7 +43,9 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
   className,
   width = 'narrow',
   testId,
-  drawerRef
+  drawerRef,
+  label,
+  titleId
 }, scrollRef) => {
   /**
    * We use a callback ref to assign the `<Content />` component to the forwarded `scrollRef`.
@@ -60,12 +63,18 @@ const DrawerWrapper = /*#__PURE__*/forwardRef(({
   }, [scrollRef]);
   const ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
-  return jsx("div", {
+  const modalDialogAttributes = getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') && {
+    'aria-modal': true,
+    role: 'dialog',
+    'aria-label': label,
+    'aria-labelledby': titleId
+  };
+  return jsx("div", _extends({
     css: wrapperStyles,
     style: wrapperWidth[width],
     className: className,
     "data-testid": testId,
     ref: ref
-  }, children);
+  }, modalDialogAttributes), children);
 });
 export default DrawerWrapper;

package/dist/es2019/components/primitives/index.js CHANGED Viewed

@@ -58,7 +58,9 @@ const DrawerPrimitive = ({
   shouldReturnFocus,
   autoFocusFirstElem,
   isFocusLockEnabled,
-  width
+  width,
+  label,
+  titleId
 }) => {
   const getOverrides = createExtender(defaults, overrides);
   const {
@@ -95,7 +97,9 @@ const DrawerPrimitive = ({
     className: className,
     width: width,
     testId: testId,
-    drawerRef: drawerRef
+    drawerRef: drawerRef,
+    label: label,
+    titleId: titleId
   }, jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
     onClick: onClose,
     testId: testId && 'DrawerPrimitiveSidebarCloseButton'

package/dist/es2019/constants.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { easeOut } from '@atlaskit/motion/curves';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const transitionDuration = '0.22s';
 export const transitionDurationMs = 220;
 export const transitionTimingFunction = easeOut;
@@ -7,5 +8,5 @@ export const animationTimingFunction = () => easeOut;
 export const defaultFocusLockSettings = {
   isFocusLockEnabled: true,
   shouldReturnFocus: true,
-  autoFocusFirstElem: false
+  autoFocusFirstElem: getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') || false
 };

package/dist/esm/components/index.js CHANGED Viewed

@@ -18,7 +18,7 @@ import { defaultFocusLockSettings } from '../constants';
 import Blanket from './blanket';
 import DrawerPrimitive from './primitives';
 var packageName = "@atlaskit/drawer";
-var packageVersion = "7.5.5";
+var packageVersion = "7.6.1";
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
   return createAndFireEventOnAtlaskit({
@@ -119,7 +119,9 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         shouldReturnFocus = _this$props3.shouldReturnFocus,
         overrides = _this$props3.overrides,
         _this$props3$zIndex = _this$props3.zIndex,
-        zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex;
+        zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex,
+        label = _this$props3.label,
+        titleId = _this$props3.titleId;
       return /*#__PURE__*/React.createElement(Portal, {
         zIndex: zIndex
       }, /*#__PURE__*/React.createElement(Blanket, {
@@ -134,6 +136,8 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
         onCloseComplete: onCloseComplete,
         onOpenComplete: onOpenComplete,
         width: width,
+        label: label,
+        titleId: titleId,
         shouldUnmountOnExit: shouldUnmountOnExit
         // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
         ,

package/dist/esm/components/primitives/drawer-wrapper.js CHANGED Viewed

@@ -1,10 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _css;
 /** @jsx jsx */
 import { forwardRef, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useMergeRefs } from 'use-callback-ref';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import usePreventProgrammaticScroll from './hooks/use-prevent-programmatic-scroll';
@@ -43,7 +44,9 @@ var DrawerWrapper = /*#__PURE__*/forwardRef(function (_ref, scrollRef) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'narrow' : _ref$width,
     testId = _ref.testId,
-    drawerRef = _ref.drawerRef;
+    drawerRef = _ref.drawerRef,
+    label = _ref.label,
+    titleId = _ref.titleId;
   /**
    * We use a callback ref to assign the `<Content />` component to the forwarded `scrollRef`.
    * This ref comes from `react-scrolllock` to allow touch scrolling, eg.: `<ScrollLock><TouchScrollable>{children}</TouchScrollable><ScrollLock>`
@@ -60,12 +63,18 @@ var DrawerWrapper = /*#__PURE__*/forwardRef(function (_ref, scrollRef) {
   }, [scrollRef]);
   var ref = useMergeRefs([drawerRef, assignSecondChildRef]);
   usePreventProgrammaticScroll();
-  return jsx("div", {
+  var modalDialogAttributes = getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') && {
+    'aria-modal': true,
+    role: 'dialog',
+    'aria-label': label,
+    'aria-labelledby': titleId
+  };
+  return jsx("div", _extends({
     css: wrapperStyles,
     style: wrapperWidth[width],
     className: className,
     "data-testid": testId,
     ref: ref
-  }, children);
+  }, modalDialogAttributes), children);
 });
 export default DrawerWrapper;

package/dist/esm/components/primitives/index.js CHANGED Viewed

@@ -59,7 +59,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
     shouldReturnFocus = _ref2.shouldReturnFocus,
     autoFocusFirstElem = _ref2.autoFocusFirstElem,
     isFocusLockEnabled = _ref2.isFocusLockEnabled,
-    width = _ref2.width;
+    width = _ref2.width,
+    label = _ref2.label,
+    titleId = _ref2.titleId;
   var getOverrides = createExtender(defaults, overrides);
   var _getOverrides = getOverrides('Sidebar'),
     Sidebar = _getOverrides.component,
@@ -74,9 +76,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
   var drawerRef = useRef(null);
   var onFinish = useCallback(function (state) {
     if (state === 'entering') {
-      onOpenComplete === null || onOpenComplete === void 0 ? void 0 : onOpenComplete(drawerRef.current);
+      onOpenComplete === null || onOpenComplete === void 0 || onOpenComplete(drawerRef.current);
     } else if (state === 'exiting') {
-      onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete(drawerRef.current);
+      onCloseComplete === null || onCloseComplete === void 0 || onCloseComplete(drawerRef.current);
     }
   }, [onCloseComplete, onOpenComplete]);
   return jsx(ExitingPersistence, {
@@ -93,7 +95,9 @@ var DrawerPrimitive = function DrawerPrimitive(_ref2) {
       className: className,
       width: width,
       testId: testId,
-      drawerRef: drawerRef
+      drawerRef: drawerRef,
+      label: label,
+      titleId: titleId
     }, jsx(Sidebar, sideBarOverrides, jsx(IconButton, {
       onClick: onClose,
       testId: testId && 'DrawerPrimitiveSidebarCloseButton'

package/dist/esm/constants.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { easeOut } from '@atlaskit/motion/curves';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var transitionDuration = '0.22s';
 export var transitionDurationMs = 220;
 export var transitionTimingFunction = easeOut;
@@ -9,5 +10,5 @@ export var animationTimingFunction = function animationTimingFunction() {
 export var defaultFocusLockSettings = {
   isFocusLockEnabled: true,
   shouldReturnFocus: true,
-  autoFocusFirstElem: false
+  autoFocusFirstElem: getBooleanFF('platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc') || false
 };

package/dist/types/components/index.d.ts CHANGED Viewed

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | undefined;
     width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/primitives/drawer-wrapper.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@
 import { ReactElement, Ref } from 'react';
 import { DrawerPrimitiveProps, Widths } from '../types';
 export declare const wrapperWidth: Widths;
-interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId'> {
+interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId' | 'label' | 'titleId'> {
     /**
      * This must have two children explicitly as we target the second child as the Content.
      */

package/dist/types/components/primitives/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { DrawerPrimitiveProps } from '../types';
-declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, }: DrawerPrimitiveProps) => jsx.JSX.Element;
+declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, }: DrawerPrimitiveProps) => jsx.JSX.Element;
 export default DrawerPrimitive;

package/dist/types/components/types.d.ts CHANGED Viewed

@@ -54,6 +54,18 @@ export interface BaseProps {
      */
     overrides?: OverridesType;
 }
+export interface DrawerLabel {
+    /**
+     * Refers to an aria-label attribute. Sets an accessible name for drawer wrapper to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the drawer wrapper's aria-labelledby attribute. This id should be assigned to the drawer title element.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
+}
 export type DefaultsType = {
     Sidebar: {
         component: React.ComponentType<SidebarProps>;
@@ -96,11 +108,11 @@ export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
     cssFn: (defaultStyles: CSSObject) => CSSObject;
 }
 export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
-export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
+export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, DrawerLabel {
     in: boolean;
     onClose: (event: SyntheticEvent<HTMLElement>) => void;
 }
-export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & {
+export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & DrawerLabel & {
     /**
      * Callback function called while the drawer is displayed and `keydown` event is triggered.
      */
@@ -122,7 +134,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
 };
 export interface FocusLockSettings {
     /**
-     * Controls whether to focus the first tabbable element inside the focus lock.
+     * Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.
      */
     autoFocusFirstElem?: boolean | (() => HTMLElement | null);
     /**
@@ -130,14 +142,14 @@ export interface FocusLockSettings {
      */
     isFocusLockEnabled?: boolean;
     /**
-     * Whether to return the focus to the previous active element on closing the drawer.
+     * Controls whether to return the focus to the previous active element on closing the drawer. Set to `true` by default.
      */
     shouldReturnFocus?: boolean;
 }
 export interface FocusLockProps extends FocusLockSettings {
     /**
      * Content inside the focus lock.
-     * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrolllock` to enable Touch Scrolling.
+     * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrollock` to enable Touch Scrolling.
      */
     children?: ReactElement;
 }

package/dist/types-ts4.5/components/index.d.ts CHANGED Viewed

@@ -22,10 +22,10 @@ export declare class DrawerBase extends Component<DrawerProps, {
     handleKeyDown: (event: KeyboardEvent) => void;
     render(): JSX.Element | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen"> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "children" | "onKeyDown" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | keyof import("./types").DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "width" | keyof import("./types").FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: boolean | (() => HTMLElement | null) | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | undefined;
     width: DrawerWidth;
-}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings> & React.RefAttributes<any>>;
+}, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "width" | "children" | "onKeyDown" | "key" | "onClose" | "testId" | "icon" | "onOpenComplete" | "onCloseComplete" | "shouldUnmountOnExit" | "overrides" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/primitives/drawer-wrapper.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@
 import { ReactElement, Ref } from 'react';
 import { DrawerPrimitiveProps, Widths } from '../types';
 export declare const wrapperWidth: Widths;
-interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId'> {
+interface FocusLockRefTargetProps extends Pick<DrawerPrimitiveProps, 'width' | 'testId' | 'label' | 'titleId'> {
     /**
      * This must have two children explicitly as we target the second child as the Content.
      */

package/dist/types-ts4.5/components/primitives/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { DrawerPrimitiveProps } from '../types';
-declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, }: DrawerPrimitiveProps) => jsx.JSX.Element;
+declare const DrawerPrimitive: ({ children, icon: Icon, onClose, onCloseComplete, onOpenComplete, overrides, testId, in: isOpen, shouldReturnFocus, autoFocusFirstElem, isFocusLockEnabled, width, label, titleId, }: DrawerPrimitiveProps) => jsx.JSX.Element;
 export default DrawerPrimitive;

package/dist/types-ts4.5/components/types.d.ts CHANGED Viewed

@@ -54,6 +54,18 @@ export interface BaseProps {
      */
     overrides?: OverridesType;
 }
+export interface DrawerLabel {
+    /**
+     * Refers to an aria-label attribute. Sets an accessible name for drawer wrapper to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the drawer wrapper's aria-labelledby attribute. This id should be assigned to the drawer title element.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
+}
 export type DefaultsType = {
     Sidebar: {
         component: React.ComponentType<SidebarProps>;
@@ -96,11 +108,11 @@ export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
     cssFn: (defaultStyles: CSSObject) => CSSObject;
 }
 export type ContentCSSProps = Omit<ContentProps, 'cssFn'>;
-export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
+export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, DrawerLabel {
     in: boolean;
     onClose: (event: SyntheticEvent<HTMLElement>) => void;
 }
-export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & {
+export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & DrawerLabel & {
     /**
      * Callback function called while the drawer is displayed and `keydown` event is triggered.
      */
@@ -122,7 +134,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
 };
 export interface FocusLockSettings {
     /**
-     * Controls whether to focus the first tabbable element inside the focus lock.
+     * Controls whether to focus the first tabbable element inside the focus lock. Set to `true` by default.
      */
     autoFocusFirstElem?: boolean | (() => HTMLElement | null);
     /**
@@ -130,14 +142,14 @@ export interface FocusLockSettings {
      */
     isFocusLockEnabled?: boolean;
     /**
-     * Whether to return the focus to the previous active element on closing the drawer.
+     * Controls whether to return the focus to the previous active element on closing the drawer. Set to `true` by default.
      */
     shouldReturnFocus?: boolean;
 }
 export interface FocusLockProps extends FocusLockSettings {
     /**
      * Content inside the focus lock.
-     * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrolllock` to enable Touch Scrolling.
+     * Must strictly be a ReactElement and it *must* be implemented to take a `ref` passed from `react-scrollock` to enable Touch Scrolling.
      */
     children?: ReactElement;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/drawer",
-  "version": "7.5.5",
+  "version": "7.6.1",
   "description": "A drawer is a panel that slides in from the left side of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,15 +36,16 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/blanket": "^12.4.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/motion": "^1.4.0",
+    "@atlaskit/motion": "^1.5.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/portal": "^4.3.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.18.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
     "exenv": "^1.2.2",
-    "react-focus-lock": "^2.5.2",
+    "react-focus-lock": "^2.9.5",
     "react-scrolllock": "^5.0.1",
     "tiny-invariant": "^1.2.0",
     "use-callback-ref": "^1.2.3"
@@ -54,12 +55,14 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "lodash": "^4.17.21",
@@ -90,5 +93,10 @@
       ]
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.design-system-team.drawer-screen-reader-focus-trap-refactor_hfuxc": {
+      "type": "boolean"
+    }
+  }
 }

package/report.api.md CHANGED Viewed

@@ -65,6 +65,7 @@ const _default: React_2.ForwardRefExoticComponent<
       | 'shouldUnmountOnExit'
       | 'testId'
       | 'zIndex'
+      | keyof DrawerLabel
     > &
       Partial<
         Pick<
@@ -102,6 +103,7 @@ const _default: React_2.ForwardRefExoticComponent<
     | 'testId'
     | 'width'
     | 'zIndex'
+    | keyof DrawerLabel
     | keyof FocusLockSettings
   > &
     React_2.RefAttributes<any>
@@ -120,6 +122,12 @@ export type DefaultsType = {
   };
 };
+// @public (undocumented)
+interface DrawerLabel {
+  label?: string;
+  titleId?: string;
+}
 // @public (undocumented)
 export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Content' | 'Sidebar'>;
@@ -130,7 +138,10 @@ export type DrawerPrimitiveOverrides = Pick<
 >;
 // @public (undocumented)
-export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
+export interface DrawerPrimitiveProps
+  extends BaseProps,
+    FocusLockSettings,
+    DrawerLabel {
   // (undocumented)
   in: boolean;
   // (undocumented)
@@ -140,7 +151,8 @@ export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
 // @public (undocumented)
 export type DrawerProps = BaseProps &
   FocusLockSettings &
-  WithAnalyticsEventsProps & {
+  WithAnalyticsEventsProps &
+  DrawerLabel & {
     onKeyDown?: (event: SyntheticEvent) => void;
     onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
     isOpen: boolean;

package/tmp/api-report-tmp.d.ts CHANGED Viewed

@@ -39,12 +39,12 @@ export interface ContentProps extends React.HTMLProps<HTMLDivElement> {
 }
 // @public (undocumented)
-const _default: React_2.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof WithAnalyticsEventsProps>, "children" | "icon" | "isOpen" | "onClose" | "onCloseComplete" | "onKeyDown" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit" | "testId" | "zIndex"> & Partial<Pick<Omit<DrawerProps, keyof WithAnalyticsEventsProps>, "width" | keyof FocusLockSettings>> & Partial<Pick<{
+const _default: React_2.ForwardRefExoticComponent<Pick<Pick<Omit<DrawerProps, keyof WithAnalyticsEventsProps>, "children" | "icon" | "isOpen" | "onClose" | "onCloseComplete" | "onKeyDown" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit" | "testId" | "zIndex" | keyof DrawerLabel> & Partial<Pick<Omit<DrawerProps, keyof WithAnalyticsEventsProps>, "width" | keyof FocusLockSettings>> & Partial<Pick<{
     autoFocusFirstElem?: (() => HTMLElement | null) | boolean | undefined;
     isFocusLockEnabled?: boolean | undefined;
     shouldReturnFocus?: boolean | undefined;
     width: DrawerWidth;
-}, never>> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "children" | "icon" | "isOpen" | "key" | "onClose" | "onCloseComplete" | "onKeyDown" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit" | "testId" | "width" | "zIndex" | keyof FocusLockSettings> & React_2.RefAttributes<any>>;
+}, never>> & React_2.RefAttributes<any> & WithContextProps, "analyticsContext" | "children" | "icon" | "isOpen" | "key" | "onClose" | "onCloseComplete" | "onKeyDown" | "onOpenComplete" | "overrides" | "shouldUnmountOnExit" | "testId" | "width" | "zIndex" | keyof DrawerLabel| keyof FocusLockSettings > & React_2.RefAttributes<any>>;
 export default _default;
 // @public (undocumented)
@@ -59,6 +59,12 @@ export type DefaultsType = {
     };
 };
+// @public (undocumented)
+interface DrawerLabel {
+    label?: string;
+    titleId?: string;
+}
 // @public (undocumented)
 export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Content' | 'Sidebar'>;
@@ -66,7 +72,7 @@ export type DrawerPrimitiveDefaults = Pick<DefaultsType, 'Content' | 'Sidebar'>;
 export type DrawerPrimitiveOverrides = Pick<OverridesType, 'Content' | 'Sidebar'>;
 // @public (undocumented)
-export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
+export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, DrawerLabel {
     // (undocumented)
     in: boolean;
     // (undocumented)
@@ -74,7 +80,7 @@ export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings {
 }
 // @public (undocumented)
-export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & {
+export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & DrawerLabel & {
     onKeyDown?: (event: SyntheticEvent) => void;
     onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
     isOpen: boolean;