npm - @atlaskit/inline-edit - Versions diffs - 12.4.2 → 13.0.0 - Mend

@atlaskit/inline-edit 12.4.2 → 13.0.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 (17) hide show

package/CHANGELOG.md +60 -44
package/codemods/migrates/utils.ts +7 -2
package/dist/cjs/inline-edit.js +55 -61
package/dist/cjs/inline-editable-textfield.js +1 -2
package/dist/cjs/internal/buttons.js +16 -37
package/dist/cjs/internal/constants.js +2 -4
package/dist/cjs/internal/hooks/use-button-focus-hook.js +1 -2
package/dist/cjs/internal/read-view.js +11 -6
package/dist/es2019/inline-edit.js +15 -19
package/dist/es2019/internal/buttons.js +15 -35
package/dist/es2019/internal/read-view.js +10 -5
package/dist/esm/inline-edit.js +54 -59
package/dist/esm/internal/buttons.js +16 -36
package/dist/esm/internal/read-view.js +10 -5
package/dist/types/internal/buttons.d.ts +1 -3
package/dist/types-ts4.5/internal/buttons.d.ts +1 -3
package/package.json +10 -9

package/CHANGELOG.md CHANGED Viewed

@@ -1,23 +1,39 @@
 # @atlaskit/inline-edit
+## 13.0.0
+### Major Changes
+- [#41791](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41791) [`ec7c2a38247`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ec7c2a38247) - Removed all remaining legacy theming logic from the Calendar, Form, InlineDialog, InlineEdit and InlineMessage components.
+### Patch Changes
+- Updated dependencies
+## 12.4.3
+### Patch Changes
+- [#39805](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/39805) [`b59892e4807`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b59892e4807) - "Clean up some small accessibility issues"
 ## 12.4.2
 ### 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
 ## 12.4.1
 ### Patch Changes
-- [`4f5a3b9d776`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f5a3b9d776) - Improvement to last regression bugfix where internal form state persisted across blur and cancel incorrectly
+- [#37708](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37708) [`4f5a3b9d776`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f5a3b9d776) - Improvement to last regression bugfix where internal form state persisted across blur and cancel incorrectly
 ## 12.4.0
 ### Minor Changes
-- [`2f2e72c5189`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2f2e72c5189) - Remove unintentionally exposed types: `ref` and `createAnalyticsEvent` from the component props interface.
+- [#38197](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38197) [`2f2e72c5189`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2f2e72c5189) - Remove unintentionally exposed types: `ref` and `createAnalyticsEvent` from the component props interface.
   This could result in a change with TypeScript validate in theory, but these were never used and should not have been passed to this component for several major versions.
@@ -25,37 +41,37 @@
 ### Patch Changes
-- [`7257459df07`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7257459df07) - Fixed a regression: onCancel in InlinedEditableTextfield now resets the editable input to the defaultValue
+- [#37213](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37213) [`7257459df07`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7257459df07) - Fixed a regression: onCancel in InlinedEditableTextfield now resets the editable input to the defaultValue
 ## 12.3.4
 ### Patch Changes
-- [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
+- [#35441](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35441) [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
 ## 12.3.3
 ### Patch Changes
-- [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+- [#34051](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34051) [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
 ## 12.3.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
 ## 12.3.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`
 ## 12.3.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
@@ -65,13 +81,13 @@
 ### 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.
 ## 12.2.11
 ### 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
 ## 12.2.10
@@ -84,7 +100,7 @@
 ### Patch Changes
-- [`63c2f0b3f96`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63c2f0b3f96) - Internal changes to use spacing tokens. There is no expected behaviour or visual change.
+- [#29725](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29725) [`63c2f0b3f96`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63c2f0b3f96) - Internal changes to use spacing tokens. There is no expected behaviour or visual change.
 ## 12.2.8
@@ -96,7 +112,7 @@
 ### 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.
 ## 12.2.6
@@ -120,25 +136,25 @@
 ### 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.
 ## 12.2.2
 ### 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`
 ## 12.2.1
 ### Patch Changes
-- [`be93a207731`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be93a207731) - Action buttons now use interactive elevation design tokens. There is no change to their appearance when design tokens are not enabled.
+- [#25238](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/25238) [`be93a207731`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be93a207731) - Action buttons now use interactive elevation design tokens. There is no change to their appearance when design tokens are not enabled.
 ## 12.2.0
 ### Minor Changes
-- [`b52ffa29d19`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b52ffa29d19) - 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) [`b52ffa29d19`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b52ffa29d19) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
 ### Patch Changes
@@ -148,7 +164,7 @@
 ### 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`.
 ## 12.1.13
@@ -160,7 +176,7 @@
 ### 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
 - Updated dependencies
 ## 12.1.11
@@ -185,14 +201,14 @@
 ### Patch Changes
-- [`f65c4ec35c9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f65c4ec35c9) - Rewrite dynamic styles to be static to aid compiled migration.
+- [#18526](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18526) [`f65c4ec35c9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f65c4ec35c9) - Rewrite dynamic styles to be static to aid compiled migration.
 - Updated dependencies
 ## 12.1.7
 ### Patch Changes
-- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
+- [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752) [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
 - Updated dependencies
 ## 12.1.6
@@ -205,14 +221,14 @@
 ### Patch Changes
-- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998) [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
 - Updated dependencies
 ## 12.1.4
 ### Patch Changes
-- [`d9d76592b37`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9d76592b37) - This change bumps the @atlaskit/inline-dialog dependency to the latest version 13.1.8. This fixes a bug where the inline dialog opens incorrectly.
+- [#16578](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16578) [`d9d76592b37`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9d76592b37) - This change bumps the @atlaskit/inline-dialog dependency to the latest version 13.1.8. This fixes a bug where the inline dialog opens incorrectly.
 ## 12.1.3
@@ -236,7 +252,7 @@
 ### Minor Changes
-- [`5c29b7f70ff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c29b7f70ff) - Instrumented Inline-edit with the new theming package, `@atlaskit/tokens`.
+- [#13302](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13302) [`5c29b7f70ff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c29b7f70ff) - Instrumented Inline-edit with the new theming package, `@atlaskit/tokens`.
   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.
@@ -255,19 +271,19 @@
 ### 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`.
 ## 12.0.8
 ### Patch Changes
-- [`f9783cebfe6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9783cebfe6) - Added action button wrapper back to fix transparent background color issue
+- [#11649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11649) [`f9783cebfe6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9783cebfe6) - Added action button wrapper back to fix transparent background color issue
 ## 12.0.7
 ### Patch Changes
-- [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
+- [#12167](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12167) [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
 ## 12.0.6
@@ -279,7 +295,7 @@
 ### Patch Changes
-- [`d65547e28ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d65547e28ba) - Fixed a few UI defects:
+- [#9749](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/9749) [`d65547e28ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d65547e28ba) - Fixed a few UI defects:
   - reset line-height to 1 for inline edit container
   - fixed action buttons background color issue
@@ -288,13 +304,13 @@
 ### Patch Changes
-- [`ca0546ece25`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca0546ece25) - Fixed InlineEditableTextfield entry point config issue, it should have its own entry point as default export.
+- [#8811](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8811) [`ca0546ece25`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ca0546ece25) - Fixed InlineEditableTextfield entry point config issue, it should have its own entry point as default export.
 ## 12.0.3
 ### 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.
 - [`c50a63f9f72`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c50a63f9f72) - Upgrade `@types/react-select` to `v3.1.2` and fix type breaks
 - Updated dependencies
@@ -302,7 +318,7 @@
 ### Patch Changes
-- [`0e9764f7384`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0e9764f7384) - Added codemod-utils as a package dependency, also fixed a few codemod functions
+- [#8728](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8728) [`0e9764f7384`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0e9764f7384) - Added codemod-utils as a package dependency, also fixed a few codemod functions
   - elevate `InlineEditStateless` as default component as we have merged stateful and stateless
   - make sure named import works for `InlineEditableTextfield`
@@ -311,13 +327,13 @@
 ### Patch Changes
-- [`bfb4fe65750`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bfb4fe65750) - Added missed codemod (handling editView function defined outside) case for migration
+- [#8612](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8612) [`bfb4fe65750`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bfb4fe65750) - Added missed codemod (handling editView function defined outside) case for migration
 ## 12.0.0
 ### Major Changes
-- [`b9987e84f3f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9987e84f3f) - In this version we bring significant performance improvements as well as improving the experience of using `inline-edit`.
+- [#8178](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8178) [`b9987e84f3f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9987e84f3f) - In this version we bring significant performance improvements as well as improving the experience of using `inline-edit`.
   - removed dynamic loading of inline dialog allowing consumers to compose their own experiences
   - merged controlled & uncontrolled inline edit components
@@ -365,7 +381,7 @@
   The CLI will show a list of components and versions so select `@atlaskit/inline-edit@^12.0.0` and you will automatically be upgraded. If your usage of PACKAGE cannot be upgraded a comment will be left that a manual change is required.
   Run `npx @atlaskit/codemod-cli -h` for more details on usage.
-  For Atlassians, refer to [this doc](https://developer.atlassian.com/cloud/framework/atlassian-frontend/codemods/01-atlassian-codemods/) for more details on the codemod CLI.
+  For Atlassians, refer to [this doc](https://hello.atlassian.net/wiki/spaces/AF/pages/2627171992/Codemods) for more details on the codemod CLI.
 ### Patch Changes
@@ -375,13 +391,13 @@
 ### Patch Changes
-- [`a4c112b2ad7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a4c112b2ad7) - Fixed inline edit not submitting automatically when blurred
+- [#7774](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/7774) [`a4c112b2ad7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a4c112b2ad7) - Fixed inline edit not submitting automatically when blurred
 ## 11.0.10
 ### Patch Changes
-- [`f5cf9fc9e9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f5cf9fc9e9) - ### General conversion for inline-edit
+- [#7425](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/7425) [`f5cf9fc9e9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f5cf9fc9e9) - ### General conversion for inline-edit
   There is no breaking change in this conversion, only some mechanical changes applied:
@@ -402,20 +418,20 @@
 ### Patch Changes
-- [`9da1032552`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9da1032552) - Adds the onCancel prop as an optional event handler called when a user clicks close, or presses escape. This has no behaviour change but allows users more granularity in how they handle the component's lifecycle.
+- [#6930](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/6930) [`9da1032552`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9da1032552) - Adds the onCancel prop as an optional event handler called when a user clicks close, or presses escape. This has no behaviour change but allows users more granularity in how they handle the component's lifecycle.
 - Updated dependencies
 ## 11.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
 ## 11.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.
@@ -435,13 +451,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
 ## 11.0.2
 ### 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.
@@ -450,14 +466,14 @@
 ### Patch Changes
-- [`db053b24d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db053b24d8) - Update all the theme imports to be tree-shakable
+- [#3428](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3428) [`db053b24d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db053b24d8) - Update all the theme imports to be tree-shakable
 - Updated dependencies
 ## 11.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
@@ -468,7 +484,7 @@
 ### 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
 ## 10.0.32

package/codemods/migrates/utils.ts CHANGED Viewed

@@ -1,4 +1,9 @@
-import core, { ASTPath, ImportDeclaration, Program } from 'jscodeshift';
+import core, {
+  ASTPath,
+  ImportDeclaration,
+  JSXAttribute,
+  Program,
+} from 'jscodeshift';
 import { Collection } from 'jscodeshift/src/Collection';
 function addCommentBefore({
@@ -50,7 +55,7 @@ function getJSXAttributesByName(
   j: core.JSCodeshift,
   element: ASTPath<any>,
   attributeName: string,
-) {
+): Collection<JSXAttribute> {
   return j(element)
     .find(j.JSXOpeningElement)
     .find(j.JSXAttribute)

package/dist/cjs/inline-edit.js CHANGED Viewed

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -14,25 +13,21 @@ var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _Field = _interopRequireDefault(require("@atlaskit/form/Field"));
 var _Form = _interopRequireDefault(require("@atlaskit/form/Form"));
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 var _buttons = _interopRequireDefault(require("./internal/buttons"));
 var _useButtonFocusHook2 = _interopRequireDefault(require("./internal/hooks/use-button-focus-hook"));
 var _readView = _interopRequireDefault(require("./internal/read-view"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var fieldStyles = (0, _react2.css)({
   maxWidth: '100%',
   position: 'relative'
 });
-var buttonStyles = (0, _react2.css)({
-  display: 'none'
-});
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.4.2"
+  packageVersion: "13.0.0"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {
@@ -63,8 +58,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     _props$onCancel = props.onCancel,
     providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
     _props$onEdit = props.onEdit,
-    providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit,
-    mode = props.mode;
+    providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit;
   var wasFocusReceivedSinceLastBlurRef = (0, _react.useRef)(false);
   var isControlled = typeof isEditing === 'undefined';
   var _useState = (0, _react.useState)(startWithEditViewOpen),
@@ -168,50 +162,56 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         _onKeyDown = _ref$formProps.onKeyDown,
         onSubmit = _ref$formProps.onSubmit,
         formRef = _ref$formProps.ref;
-      return (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-        (0, _react2.jsx)("form", {
-          onKeyDown: function onKeyDown(e) {
-            _onKeyDown(e);
-            if (e.key === 'Esc' || e.key === 'Escape') {
-              onCancel();
-            }
+      return (0, _react2.jsx)("form", {
+        /**
+         * It is not normally acceptable to add key handlers to non-interactive elements
+         * as this is an accessibility anti-pattern. However, because this instance is
+         * to add support for keyboard functionality instead of creating an inaccessible
+         * custom element, we can add role="presentation" so that there is no negative
+         * impacts to assistive technologies.
+         */
+        role: "presentation",
+        onKeyDown: function onKeyDown(e) {
+          _onKeyDown(e);
+          if (e.key === 'Esc' || e.key === 'Escape') {
+            onCancel();
+          }
+        },
+        onSubmit: onSubmit,
+        ref: formRef
+      }, (0, _react2.jsx)(_Field.default, {
+        name: "inlineEdit",
+        label: label,
+        defaultValue: defaultValue,
+        validate: validate,
+        isRequired: isRequired,
+        key: "edit-view" // used for reset to default value
+      }, function (_ref2) {
+        var fieldProps = _ref2.fieldProps,
+          error = _ref2.error;
+        return (0, _react2.jsx)("div", {
+          css: fieldStyles,
+          onBlur: function onBlur() {
+            onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
+          },
+          onFocus: onEditViewWrapperFocus
+        }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
+          errorMessage: error
+        }), editViewRef), !hideActionButtons ? (0, _react2.jsx)(_buttons.default, {
+          cancelButtonLabel: cancelButtonLabel,
+          confirmButtonLabel: confirmButtonLabel,
+          onMouseDown: function onMouseDown() {
+            /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
+            doNotFocusOnEditButton();
           },
-          onSubmit: onSubmit,
-          ref: formRef
-        }, (0, _react2.jsx)(_Field.default, {
-          name: "inlineEdit",
-          label: label,
-          defaultValue: defaultValue,
-          validate: validate,
-          isRequired: isRequired,
-          key: "edit-view" // used for reset to default value
-        }, function (_ref2) {
-          var fieldProps = _ref2.fieldProps,
-            error = _ref2.error;
-          return (0, _react2.jsx)("div", {
-            css: fieldStyles,
-            onBlur: function onBlur() {
-              onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
-            },
-            onFocus: onEditViewWrapperFocus
-          }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
-            errorMessage: error
-          }), editViewRef), !hideActionButtons ? (0, _react2.jsx)(_buttons.default, {
-            cancelButtonLabel: cancelButtonLabel,
-            confirmButtonLabel: confirmButtonLabel,
-            onMouseDown: function onMouseDown() {
-              /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
-              doNotFocusOnEditButton();
-            },
-            mode: mode,
-            onCancelClick: onCancelClick
-          }) : /** This is to allow Ctrl + Enter to submit without action buttons */
-          (0, _react2.jsx)("button", {
-            css: buttonStyles,
-            type: "submit"
-          }));
-        }))
-      );
+          onCancelClick: onCancelClick
+        }) : /** This is to allow Ctrl + Enter to submit without action buttons */
+        (0, _react2.jsx)("button", {
+          hidden: true,
+          type: "submit",
+          "aria-label": "Submit"
+        }));
+      }));
     });
   }
   return (/** Form, Field are used here only for the label and spacing */
@@ -225,12 +225,6 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
   );
 };
 var InlineEdit = function InlineEdit(props) {
-  return (0, _react2.jsx)(_components.default.Consumer, null, function (tokens) {
-    var mode = tokens.mode;
-    return (0, _react2.jsx)(InnerInlineEdit, (0, _extends2.default)({}, props, {
-      mode: mode
-    }));
-  });
+  return (0, _react2.jsx)(InnerInlineEdit, props);
 };
-var _default = InlineEdit;
-exports.default = _default;
+var _default = exports.default = InlineEdit;

package/dist/cjs/inline-editable-textfield.js CHANGED Viewed

@@ -84,5 +84,4 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
     }
   }));
 };
-var _default = InlineEditableTextfield;
-exports.default = _default;
+var _default = exports.default = InlineEditableTextfield;

package/dist/cjs/internal/buttons.js CHANGED Viewed

@@ -15,32 +15,24 @@ var _constants = require("./constants");
 var buttonsContainerStyles = (0, _react.css)({
   display: 'flex',
-  marginTop: "var(--ds-space-075, 6px)",
+  marginBlockStart: "var(--ds-space-075, 6px)",
   position: 'absolute',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: '100%',
+  insetBlockStart: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  right: 0,
+  insetInlineEnd: 0,
   flexShrink: 0
 });
-var buttonWrapperElevationDarkStyles = (0, _react.css)({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")"),
-  // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '& > button': {
-    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.DN70, ")")
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '& > button:hover': {
-    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.DN60, ")")
+var buttonWrapperBaseStyles = (0, _react.css)({
+  boxSizing: 'border-box',
+  width: "var(--ds-space-400, 32px)",
+  zIndex: 200,
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  fontSize: _constants.fontSize,
+  '&:last-child': {
+    marginInlineStart: "var(--ds-space-050, 4px)"
   },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '& > button:active': {
-    backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(_colors.B75, ")"),
-    color: "var(--ds-text, ".concat(_colors.B400, ")")
-  }
-});
-var buttonWrapperElevationLightStyles = (0, _react.css)({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
   // These buttons are floating, so they need an override to overlay interaction states
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -57,27 +49,15 @@ var buttonWrapperElevationLightStyles = (0, _react.css)({
     color: "var(--ds-text, ".concat(_colors.B400, ")")
   }
 });
-var buttonWrapperBaseStyles = (0, _react.css)({
-  boxSizing: 'border-box',
-  width: "var(--ds-space-400, 32px)",
-  zIndex: 200,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  fontSize: _constants.fontSize,
-  '&:last-child': {
-    marginLeft: "var(--ds-space-050, 4px)"
-  }
-});
 var Buttons = function Buttons(_ref) {
-  var mode = _ref.mode,
-    confirmButtonLabel = _ref.confirmButtonLabel,
+  var confirmButtonLabel = _ref.confirmButtonLabel,
     cancelButtonLabel = _ref.cancelButtonLabel,
     onMouseDown = _ref.onMouseDown,
     onCancelClick = _ref.onCancelClick;
   return (0, _react.jsx)("div", {
     css: buttonsContainerStyles
   }, (0, _react.jsx)("div", {
-    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
+    css: buttonWrapperBaseStyles
   }, (0, _react.jsx)(_standardButton.default, {
     "aria-label": confirmButtonLabel,
     type: "submit",
@@ -88,7 +68,7 @@ var Buttons = function Buttons(_ref) {
     shouldFitContainer: true,
     onMouseDown: onMouseDown
   })), (0, _react.jsx)("div", {
-    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
+    css: buttonWrapperBaseStyles
   }, (0, _react.jsx)(_standardButton.default, {
     "aria-label": cancelButtonLabel,
     iconBefore: (0, _react.jsx)(_cross.default, {
@@ -100,5 +80,4 @@ var Buttons = function Buttons(_ref) {
     onMouseDown: onMouseDown
   })));
 };
-var _default = Buttons;
-exports.default = _default;
+var _default = exports.default = Buttons;

package/dist/cjs/internal/constants.js CHANGED Viewed

@@ -5,7 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.fontSize = exports.borderRadius = void 0;
 var _constants = require("@atlaskit/theme/constants");
-var fontSize = (0, _constants.fontSize)();
-exports.fontSize = fontSize;
-var borderRadius = (0, _constants.borderRadius)();
-exports.borderRadius = borderRadius;
+var fontSize = exports.fontSize = (0, _constants.fontSize)();
+var borderRadius = exports.borderRadius = (0, _constants.borderRadius)();

package/dist/cjs/internal/hooks/use-button-focus-hook.js CHANGED Viewed

@@ -49,5 +49,4 @@ var useButtonFocusHook = function useButtonFocusHook(isEditing, isEditingState)
     doNotFocusOnEditButton: doNotFocusOnEditButton
   };
 };
-var _default = useButtonFocusHook;
-exports.default = _default;
+var _default = exports.default = useButtonFocusHook;

package/dist/cjs/internal/read-view.js CHANGED Viewed

@@ -66,8 +66,6 @@ var ReadView = function ReadView(_ref) {
       postReadViewClick();
     }
   };
-  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
   return (0, _react2.jsx)("div", {
     css: readViewContainerStyles
   }, (0, _react2.jsx)("button", {
@@ -77,7 +75,16 @@ var ReadView = function ReadView(_ref) {
     onClick: onEditRequested,
     ref: editButtonRef
   }), (0, _react2.jsx)("div", {
-    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles],
+    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles]
+    /**
+     * It is not normally acceptable to add click handlers to non-interactive elements
+     * as this is an accessibility anti-pattern. However, because this instance is
+     * account for clicking on links that may be embedded within inline-edit and not
+     * creating an inaccessible custom element, we can add role="presentation" so that
+     * there is no negative impacts to assistive technologies.
+     * (Why links are embeeded in inline-edit is for another day...)
+     */,
+    role: "presentation",
     onClick: onReadViewClick,
     onMouseDown: function onMouseDown(e) {
       startX.current = e.clientX;
@@ -85,7 +92,5 @@ var ReadView = function ReadView(_ref) {
     },
     "data-read-view-fit-container-width": readViewFitContainerWidth
   }, readView()));
-  /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
 };
-var _default = ReadView;
-exports.default = _default;
+var _default = exports.default = ReadView;

package/dist/es2019/inline-edit.js CHANGED Viewed

@@ -1,11 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Field from '@atlaskit/form/Field';
 import Form from '@atlaskit/form/Form';
-import GlobalTheme from '@atlaskit/theme/components';
 import Buttons from './internal/buttons';
 import useButtonFocusHook from './internal/hooks/use-button-focus-hook';
 import ReadView from './internal/read-view';
@@ -13,13 +11,10 @@ const fieldStyles = css({
   maxWidth: '100%',
   position: 'relative'
 });
-const buttonStyles = css({
-  display: 'none'
-});
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.4.2"
+  packageVersion: "13.0.0"
 };
 const noop = () => {};
 const InnerInlineEdit = props => {
@@ -41,8 +36,7 @@ const InnerInlineEdit = props => {
     analyticsContext,
     onConfirm: providedOnConfirm,
     onCancel: providedOnCancel = noop,
-    onEdit: providedOnEdit = noop,
-    mode
+    onEdit: providedOnEdit = noop
   } = props;
   const wasFocusReceivedSinceLastBlurRef = useRef(false);
   const isControlled = typeof isEditing === 'undefined';
@@ -143,8 +137,15 @@ const InnerInlineEdit = props => {
         onSubmit,
         ref: formRef
       }
-    }) => /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-    jsx("form", {
+    }) => jsx("form", {
+      /**
+       * It is not normally acceptable to add key handlers to non-interactive elements
+       * as this is an accessibility anti-pattern. However, because this instance is
+       * to add support for keyboard functionality instead of creating an inaccessible
+       * custom element, we can add role="presentation" so that there is no negative
+       * impacts to assistive technologies.
+       */
+      role: "presentation",
       onKeyDown: e => {
         onKeyDown(e);
         if (e.key === 'Esc' || e.key === 'Escape') {
@@ -179,12 +180,12 @@ const InnerInlineEdit = props => {
         /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
         doNotFocusOnEditButton();
       },
-      mode: mode,
       onCancelClick: onCancelClick
     }) : /** This is to allow Ctrl + Enter to submit without action buttons */
     jsx("button", {
-      css: buttonStyles,
-      type: "submit"
+      hidden: true,
+      type: "submit",
+      "aria-label": "Submit"
     })))));
   }
   return (/** Form, Field are used here only for the label and spacing */
@@ -198,11 +199,6 @@ const InnerInlineEdit = props => {
   );
 };
 const InlineEdit = props => {
-  return jsx(GlobalTheme.Consumer, null, tokens => {
-    const mode = tokens.mode;
-    return jsx(InnerInlineEdit, _extends({}, props, {
-      mode: mode
-    }));
-  });
+  return jsx(InnerInlineEdit, props);
 };
 export default InlineEdit;

package/dist/es2019/internal/buttons.js CHANGED Viewed

@@ -4,36 +4,28 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
-import { B400, B75, DN50A, DN60, DN60A, DN70, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
+import { B400, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
 import { fontSize } from './constants';
 const buttonsContainerStyles = css({
   display: 'flex',
-  marginTop: "var(--ds-space-075, 6px)",
+  marginBlockStart: "var(--ds-space-075, 6px)",
   position: 'absolute',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: '100%',
+  insetBlockStart: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  right: 0,
+  insetInlineEnd: 0,
   flexShrink: 0
 });
-const buttonWrapperElevationDarkStyles = css({
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`,
-  // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '& > button': {
-    backgroundColor: `var(--ds-surface-overlay, ${DN70})`
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '& > button:hover': {
-    backgroundColor: `var(--ds-surface-overlay-hovered, ${DN60})`
+const buttonWrapperBaseStyles = css({
+  boxSizing: 'border-box',
+  width: "var(--ds-space-400, 32px)",
+  zIndex: 200,
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  borderRadius: "var(--ds-border-radius, 3px)",
+  fontSize: fontSize,
+  '&:last-child': {
+    marginInlineStart: "var(--ds-space-050, 4px)"
   },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '& > button:active': {
-    backgroundColor: `var(--ds-surface-overlay-pressed, ${B75})`,
-    color: `var(--ds-text, ${B400})`
-  }
-});
-const buttonWrapperElevationLightStyles = css({
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
   // These buttons are floating, so they need an override to overlay interaction states
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -50,19 +42,7 @@ const buttonWrapperElevationLightStyles = css({
     color: `var(--ds-text, ${B400})`
   }
 });
-const buttonWrapperBaseStyles = css({
-  boxSizing: 'border-box',
-  width: "var(--ds-space-400, 32px)",
-  zIndex: 200,
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  fontSize: fontSize,
-  '&:last-child': {
-    marginLeft: "var(--ds-space-050, 4px)"
-  }
-});
 const Buttons = ({
-  mode,
   confirmButtonLabel,
   cancelButtonLabel,
   onMouseDown,
@@ -71,7 +51,7 @@ const Buttons = ({
   return jsx("div", {
     css: buttonsContainerStyles
   }, jsx("div", {
-    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
+    css: buttonWrapperBaseStyles
   }, jsx(Button, {
     "aria-label": confirmButtonLabel,
     type: "submit",
@@ -82,7 +62,7 @@ const Buttons = ({
     shouldFitContainer: true,
     onMouseDown: onMouseDown
   })), jsx("div", {
-    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
+    css: buttonWrapperBaseStyles
   }, jsx(Button, {
     "aria-label": cancelButtonLabel,
     iconBefore: jsx(CancelIcon, {

package/dist/es2019/internal/read-view.js CHANGED Viewed

@@ -57,8 +57,6 @@ const ReadView = ({
       postReadViewClick();
     }
   };
-  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
   return jsx("div", {
     css: readViewContainerStyles
   }, jsx("button", {
@@ -68,7 +66,16 @@ const ReadView = ({
     onClick: onEditRequested,
     ref: editButtonRef
   }), jsx("div", {
-    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles],
+    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles]
+    /**
+     * It is not normally acceptable to add click handlers to non-interactive elements
+     * as this is an accessibility anti-pattern. However, because this instance is
+     * account for clicking on links that may be embedded within inline-edit and not
+     * creating an inaccessible custom element, we can add role="presentation" so that
+     * there is no negative impacts to assistive technologies.
+     * (Why links are embeeded in inline-edit is for another day...)
+     */,
+    role: "presentation",
     onClick: onReadViewClick,
     onMouseDown: e => {
       startX.current = e.clientX;
@@ -76,7 +83,5 @@ const ReadView = ({
     },
     "data-read-view-fit-container-width": readViewFitContainerWidth
   }, readView()));
-  /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
 };
 export default ReadView;

package/dist/esm/inline-edit.js CHANGED Viewed

@@ -1,15 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import React, { useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Field from '@atlaskit/form/Field';
 import Form from '@atlaskit/form/Form';
-import GlobalTheme from '@atlaskit/theme/components';
 import Buttons from './internal/buttons';
 import useButtonFocusHook from './internal/hooks/use-button-focus-hook';
 import ReadView from './internal/read-view';
@@ -17,13 +15,10 @@ var fieldStyles = css({
   maxWidth: '100%',
   position: 'relative'
 });
-var buttonStyles = css({
-  display: 'none'
-});
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.4.2"
+  packageVersion: "13.0.0"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {
@@ -54,8 +49,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     _props$onCancel = props.onCancel,
     providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
     _props$onEdit = props.onEdit,
-    providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit,
-    mode = props.mode;
+    providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit;
   var wasFocusReceivedSinceLastBlurRef = useRef(false);
   var isControlled = typeof isEditing === 'undefined';
   var _useState = useState(startWithEditViewOpen),
@@ -159,50 +153,56 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         _onKeyDown = _ref$formProps.onKeyDown,
         onSubmit = _ref$formProps.onSubmit,
         formRef = _ref$formProps.ref;
-      return (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-        jsx("form", {
-          onKeyDown: function onKeyDown(e) {
-            _onKeyDown(e);
-            if (e.key === 'Esc' || e.key === 'Escape') {
-              onCancel();
-            }
+      return jsx("form", {
+        /**
+         * It is not normally acceptable to add key handlers to non-interactive elements
+         * as this is an accessibility anti-pattern. However, because this instance is
+         * to add support for keyboard functionality instead of creating an inaccessible
+         * custom element, we can add role="presentation" so that there is no negative
+         * impacts to assistive technologies.
+         */
+        role: "presentation",
+        onKeyDown: function onKeyDown(e) {
+          _onKeyDown(e);
+          if (e.key === 'Esc' || e.key === 'Escape') {
+            onCancel();
+          }
+        },
+        onSubmit: onSubmit,
+        ref: formRef
+      }, jsx(Field, {
+        name: "inlineEdit",
+        label: label,
+        defaultValue: defaultValue,
+        validate: validate,
+        isRequired: isRequired,
+        key: "edit-view" // used for reset to default value
+      }, function (_ref2) {
+        var fieldProps = _ref2.fieldProps,
+          error = _ref2.error;
+        return jsx("div", {
+          css: fieldStyles,
+          onBlur: function onBlur() {
+            onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
+          },
+          onFocus: onEditViewWrapperFocus
+        }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
+          errorMessage: error
+        }), editViewRef), !hideActionButtons ? jsx(Buttons, {
+          cancelButtonLabel: cancelButtonLabel,
+          confirmButtonLabel: confirmButtonLabel,
+          onMouseDown: function onMouseDown() {
+            /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
+            doNotFocusOnEditButton();
           },
-          onSubmit: onSubmit,
-          ref: formRef
-        }, jsx(Field, {
-          name: "inlineEdit",
-          label: label,
-          defaultValue: defaultValue,
-          validate: validate,
-          isRequired: isRequired,
-          key: "edit-view" // used for reset to default value
-        }, function (_ref2) {
-          var fieldProps = _ref2.fieldProps,
-            error = _ref2.error;
-          return jsx("div", {
-            css: fieldStyles,
-            onBlur: function onBlur() {
-              onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
-            },
-            onFocus: onEditViewWrapperFocus
-          }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
-            errorMessage: error
-          }), editViewRef), !hideActionButtons ? jsx(Buttons, {
-            cancelButtonLabel: cancelButtonLabel,
-            confirmButtonLabel: confirmButtonLabel,
-            onMouseDown: function onMouseDown() {
-              /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
-              doNotFocusOnEditButton();
-            },
-            mode: mode,
-            onCancelClick: onCancelClick
-          }) : /** This is to allow Ctrl + Enter to submit without action buttons */
-          jsx("button", {
-            css: buttonStyles,
-            type: "submit"
-          }));
-        }))
-      );
+          onCancelClick: onCancelClick
+        }) : /** This is to allow Ctrl + Enter to submit without action buttons */
+        jsx("button", {
+          hidden: true,
+          type: "submit",
+          "aria-label": "Submit"
+        }));
+      }));
     });
   }
   return (/** Form, Field are used here only for the label and spacing */
@@ -216,11 +216,6 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
   );
 };
 var InlineEdit = function InlineEdit(props) {
-  return jsx(GlobalTheme.Consumer, null, function (tokens) {
-    var mode = tokens.mode;
-    return jsx(InnerInlineEdit, _extends({}, props, {
-      mode: mode
-    }));
-  });
+  return jsx(InnerInlineEdit, props);
 };
 export default InlineEdit;

package/dist/esm/internal/buttons.js CHANGED Viewed

@@ -4,36 +4,28 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
-import { B400, B75, DN50A, DN60, DN60A, DN70, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
+import { B400, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
 import { fontSize } from './constants';
 var buttonsContainerStyles = css({
   display: 'flex',
-  marginTop: "var(--ds-space-075, 6px)",
+  marginBlockStart: "var(--ds-space-075, 6px)",
   position: 'absolute',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: '100%',
+  insetBlockStart: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  right: 0,
+  insetInlineEnd: 0,
   flexShrink: 0
 });
-var buttonWrapperElevationDarkStyles = css({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")"),
-  // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '& > button': {
-    backgroundColor: "var(--ds-surface-overlay, ".concat(DN70, ")")
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '& > button:hover': {
-    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(DN60, ")")
+var buttonWrapperBaseStyles = css({
+  boxSizing: 'border-box',
+  width: "var(--ds-space-400, 32px)",
+  zIndex: 200,
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  fontSize: fontSize,
+  '&:last-child': {
+    marginInlineStart: "var(--ds-space-050, 4px)"
   },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '& > button:active': {
-    backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(B75, ")"),
-    color: "var(--ds-text, ".concat(B400, ")")
-  }
-});
-var buttonWrapperElevationLightStyles = css({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
   // These buttons are floating, so they need an override to overlay interaction states
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -50,27 +42,15 @@ var buttonWrapperElevationLightStyles = css({
     color: "var(--ds-text, ".concat(B400, ")")
   }
 });
-var buttonWrapperBaseStyles = css({
-  boxSizing: 'border-box',
-  width: "var(--ds-space-400, 32px)",
-  zIndex: 200,
-  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  fontSize: fontSize,
-  '&:last-child': {
-    marginLeft: "var(--ds-space-050, 4px)"
-  }
-});
 var Buttons = function Buttons(_ref) {
-  var mode = _ref.mode,
-    confirmButtonLabel = _ref.confirmButtonLabel,
+  var confirmButtonLabel = _ref.confirmButtonLabel,
     cancelButtonLabel = _ref.cancelButtonLabel,
     onMouseDown = _ref.onMouseDown,
     onCancelClick = _ref.onCancelClick;
   return jsx("div", {
     css: buttonsContainerStyles
   }, jsx("div", {
-    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
+    css: buttonWrapperBaseStyles
   }, jsx(Button, {
     "aria-label": confirmButtonLabel,
     type: "submit",
@@ -81,7 +61,7 @@ var Buttons = function Buttons(_ref) {
     shouldFitContainer: true,
     onMouseDown: onMouseDown
   })), jsx("div", {
-    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
+    css: buttonWrapperBaseStyles
   }, jsx(Button, {
     "aria-label": cancelButtonLabel,
     iconBefore: jsx(CancelIcon, {

package/dist/esm/internal/read-view.js CHANGED Viewed

@@ -56,8 +56,6 @@ var ReadView = function ReadView(_ref) {
       postReadViewClick();
     }
   };
-  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
   return jsx("div", {
     css: readViewContainerStyles
   }, jsx("button", {
@@ -67,7 +65,16 @@ var ReadView = function ReadView(_ref) {
     onClick: onEditRequested,
     ref: editButtonRef
   }), jsx("div", {
-    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles],
+    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles]
+    /**
+     * It is not normally acceptable to add click handlers to non-interactive elements
+     * as this is an accessibility anti-pattern. However, because this instance is
+     * account for clicking on links that may be embedded within inline-edit and not
+     * creating an inaccessible custom element, we can add role="presentation" so that
+     * there is no negative impacts to assistive technologies.
+     * (Why links are embeeded in inline-edit is for another day...)
+     */,
+    role: "presentation",
     onClick: onReadViewClick,
     onMouseDown: function onMouseDown(e) {
       startX.current = e.clientX;
@@ -75,7 +82,5 @@ var ReadView = function ReadView(_ref) {
     },
     "data-read-view-fit-container-width": readViewFitContainerWidth
   }, readView()));
-  /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
 };
 export default ReadView;

package/dist/types/internal/buttons.d.ts CHANGED Viewed

@@ -1,13 +1,11 @@
 /** @jsx jsx */
 /// <reference types="react" />
 import { jsx } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
 interface ButtonsProp {
-    mode: ThemeModes;
     confirmButtonLabel: string;
     cancelButtonLabel: string;
     onMouseDown: () => void;
     onCancelClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
-declare const Buttons: ({ mode, confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, }: ButtonsProp) => jsx.JSX.Element;
+declare const Buttons: ({ confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, }: ButtonsProp) => jsx.JSX.Element;
 export default Buttons;

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

@@ -1,13 +1,11 @@
 /// <reference types="react" />
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
 interface ButtonsProp {
-    mode: ThemeModes;
     confirmButtonLabel: string;
     cancelButtonLabel: string;
     onMouseDown: () => void;
     onCancelClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
-declare const Buttons: ({ mode, confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, }: ButtonsProp) => jsx.JSX.Element;
+declare const Buttons: ({ confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, }: ButtonsProp) => jsx.JSX.Element;
 export default Buttons;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.4.2",
+  "version": "13.0.0",
   "description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,14 +33,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.9.0",
+    "@atlaskit/button": "^16.13.0",
     "@atlaskit/codemod-utils": "^4.2.0",
-    "@atlaskit/form": "^8.11.0",
+    "@atlaskit/form": "^9.0.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/inline-dialog": "^13.6.0",
+    "@atlaskit/inline-dialog": "^14.0.0",
     "@atlaskit/textfield": "^5.6.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.15.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -49,12 +49,13 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/datetime-picker": "^12.7.0",
+    "@af/integration-testing": "*",
+    "@atlaskit/datetime-picker": "^12.10.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.5.0",
+    "@atlaskit/select": "^16.7.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tag": "^11.5.0",
+    "@atlaskit/tag": "^11.6.0",
     "@atlaskit/tag-group": "^10.2.0",
     "@atlaskit/textarea": "^4.7.0",
     "@atlaskit/visual-regression": "*",