@atlaskit/modal-dialog
Version:
A modal dialog displays content that requires user interaction, in a layer above the page.
1,466 lines (959 loc) • 85.1 kB
Markdown
# @atlaskit/modal-dialog
## 12.4.12
### Patch Changes
- [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
## 12.4.11
### Patch Changes
- [`7f5f23dcb68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f5f23dcb68) - Introduce shape tokens to some packages.
## 12.4.10
### Patch Changes
- Updated dependencies
## 12.4.9
### 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.
## 12.4.8
### Patch Changes
- Updated dependencies
## 12.4.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.
## 12.4.6
### 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.
## 12.4.5
### Patch Changes
- [`b0f6dd0bc35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b0f6dd0bc35) - Updated to use typography tokens. There is no expected behaviour or visual change.
## 12.4.4
### Patch Changes
- Updated dependencies
## 12.4.3
### Patch Changes
- Updated dependencies
## 12.4.2
### Patch Changes
- Updated dependencies
## 12.4.1
### Patch Changes
- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
## 12.4.0
### Minor Changes
- [`f3ffcf1a783`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f3ffcf1a783) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
### Patch Changes
- Updated dependencies
## 12.3.1
### Patch Changes
- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
## 12.3.0
### Minor Changes
- [`c44f3f5f973`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c44f3f5f973) - Modal Dialog’s focus lock now allows focus to reach elements outside the modal if they contain the data-atlas-extension attribute, such as a browser extension that renders in-browser.
### Patch Changes
- Updated dependencies
## 12.2.15
### Patch Changes
- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
## 12.2.14
### Patch Changes
- [`454ec1bbf07`](https://bitbucket.org/atlassian/atlassian-frontend/commits/454ec1bbf07) - Internal code change turning on new linting rules.
- Updated dependencies
## 12.2.13
### Patch Changes
- [`1c3948738f9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c3948738f9) - Adjust the styles for an internal positioning element to constrain the height for ModalBody and restore support for custom scrolling regions"
## 12.2.12
### Patch Changes
- [`b72e12b97ac`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b72e12b97ac) - [ux] Fixed a regression which prevented clicks on the blanket from closing modal dialogs with `shouldScrollInViewport`.
## 12.2.11
### Patch Changes
- [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
## 12.2.10
### Patch Changes
- [`e4b612d1c48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4b612d1c48) - Internal migration to bind-event-listener for safer DOM Event cleanup
- [`347fd703ce0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/347fd703ce0) - Internally shifting to using bind-event-listener for events added in effects
- [`07ab2748b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07ab2748b62) - [ux] - Changes the position of icon in ModalTitle having an appearance prop to be top aligned instead of center. This only affects titles that where the title wraps into multiple lines.
- Updated dependencies
## 12.2.9
### Patch Changes
- Updated dependencies
## 12.2.8
### Patch Changes
- [`0d1c80fe00d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d1c80fe00d) - [ux] The width of the modal dialog now respect the custom value of the `width` prop.
## 12.2.7
### Patch Changes
- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
## 12.2.6
### Patch Changes
- Updated dependencies
## 12.2.5
### Patch Changes
- [`dcd92130cc4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dcd92130cc4) - Migrate deleted background accent tokens to replacements
- Updated dependencies
## 12.2.4
### Patch Changes
- Updated dependencies
## 12.2.3
### Patch Changes
- Updated dependencies
## 12.2.2
### Patch Changes
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump raf-schd to latest (4.0.3), including better TS typings.
- Updated dependencies
## 12.2.1
### Patch Changes
- Updated dependencies
## 12.2.0
### Minor Changes
- [`2d60dd3116d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d60dd3116d) - [ux] Modal dialogs which contain no focusable children will now lock focus to the modal container. The container will have a focus ring, so some VR tests may need to be regenerated.
### Patch Changes
- [`3fced6aa641`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fced6aa641) - Bumped `react-focus-lock` to version `^2.2.1`.
- [`a8c55e479e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a8c55e479e8) - Removes unused dependency on emotion-styled
- [`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.1
### Patch Changes
- [`2b2290121eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b2290121eb) - Raised the minimum version carat range of focus ring to latest.
## 12.1.0
### Minor Changes
- [`993eb469fcb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/993eb469fcb) - Instrumented `@atlaskit/modal-dialog` 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.
### Patch Changes
- Updated dependencies
## 12.0.3
### Patch Changes
- Updated dependencies
## 12.0.2
### Patch Changes
- Updated dependencies
## 12.0.1
### Patch Changes
- Updated dependencies
## 12.0.0
### Major Changes
- [`07ad26948a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07ad26948a1) - In this version we made modal dialog dramatically faster and lighter with a new composable API.
This is a large change and we have provided a codemod to help you upgrade.
Once you have run the codemod there may be manual change required so read below for all the changes in
this release.
**Running the codemod cli**
To run the codemod: **You first need to have the latest version installed**
```bash
yarn upgrade @atlaskit/modal-dialog@^12.0.0
```
Once upgraded, use `@atlaskit/codemod-cli`:
```bash
npx @atlaskit/codemod-cli --parser {tsx|babylon} --extensions ts,tsx,js [relativePath]
```
The CLI will show a list of components and versions so select `@atlaskit/modal-dialog@^12.0.0` and you will automatically be upgraded.
If your usage of `@atlaskit/modal-dialog` 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 the [documentation](https://developer.atlassian.com/cloud/framework/atlassian-frontend/codemods/01-atlassian-codemods/) for more details on the codemod CLI.
### Visual changes
The primary button in the footer is now on the right. This has changed from being on the left
to match the [design documentation](https://atlassian.design/components/modal-dialog/usage).
The codemod will automatically reverse the order of your actions for this to happen.
You could previously achieve this behaviour by adding an `appearance` key to your actions. The
codemod will detect this and not reverse the array in this case.
### Composable API
The old version of modal dialog had three props that mapped into components.
- `heading` was the text for the header.
- `children` was the React node that ended up in the modal body.
- `actions` was an array of objects that mapped into buttons in the footer.
The new composable API exposes these components so that you can use them directly as
a child of modal dialog. This creates a clear parallel between what is given as children and what
the modal dialog renders. It also allows you to use any valid React node as a child of modal
dialog.
```
// Before
import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
...
<ModalTransition>
{isOpen && (
<Modal
onClose={close}
heading="Modal Title"
actions={[
{ text: 'Secondary Action', onClick: secondaryAction },
{ text: 'Close', onClick: close },
]}
>
<Lorem count={2} />
</Modal>
)}
</ModalTransition>
// After
import Modal, {
ModalBody,
ModalFooter,
ModalHeader,
ModalTitle,
ModalTransition,
} from '@atlaskit/modal-dialog';
import Button from '@atlaskit/button/standard-button';
...
<ModalTransition>
{isOpen && (
<Modal onClose={close}>
<ModalHeader>
<ModalTitle>Modal Title</ModalTitle>
</ModalHeader>
<ModalBody>
<Lorem count={2} />
</ModalBody>
<ModalFooter>
<Button appearance="subtle" onClick={secondaryAction}>
Secondary Action
</Button>
<Button appearance="primary" autoFocus onClick={close}>
Close
</Button>
</ModalFooter>
</Modal>
)}
</ModalTransition>
```
#### Children
The original children need to be wrapped in a `ModalBody`.
```
// Before
<Modal>
<Lorem count={2} />
</Modal>
// After
<Modal>
<ModalBody>
<Lorem count={2} />
</ModalBody>
</Modal>
```
#### Heading
The `heading` prop turns into a `ModalHeader` and `ModalTitle`.
```
// Before
<Modal heading="Modal Title">
<Lorem count={2} />
</Modal>
// After
<Modal>
<ModalHeader>
<ModalTitle>Modal Title</ModalTitle>
</ModalHeader>
<ModalBody>
<Lorem count={2} />
</ModalBody>
</Modal>
```
#### Actions
The `actions` prop turns into `Button`'s in a `ModalFooter`.
```
// Before
<Modal
actions={[
{ text: 'Secondary Action', onClick: secondaryAction },
{ text: 'Close', onClick: close },
]}
heading="Modal Title"
>
<Lorem count={2} />
</Modal>
// After
<Modal>
<ModalHeader>
<ModalTitle>Modal Title</ModalTitle>
</ModalHeader>
<ModalBody>
<Lorem count={2} />
</ModalBody>
<ModalFooter>
<Button appearance="subtle" onClick={secondaryAction}>
Secondary Action
</Button>
<Button appearance="primary" autoFocus onClick={close}>
Close
</Button>
</ModalFooter>
</Modal>
```
Previously in the examples the primary button was on the left, we’ve updated the
documentation to match our design documentation so that the primary button is on the right.
You could previously achieve this behaviour by adding an `appearance` key to your actions.
The codemod will reverse the order of your actions if you have not set the `appearance` in the actions.
### Components prop
The `components` prop has been entirely replaced with the composable API.
The philosophy of creating a custom component that receive modal's props has been replaced with
custom components where the user can define their own props.
#### Container
To replace using the `Container` prop you can wrap `Modal`'s children in the container component.
Note that unless you are using a `form` you will need to add the style `all: inherit;` to ensure scrolling
works.
```
// Before
<Modal
components={{
Container: (props) => (
<form {...props} onSubmit={onSubmit}>
{props.children}
</form>
),
}}
>
{children}
</Modal>
// After
<Modal>
<form onSubmit={onSubmit}>
{children}
</form>
</Modal>
```
#### Header
To replace using the `Header` prop you can use your custom header as the first child.
```
// Before
<Modal
components={{
Header: CustomHeader,
}}
>
{children}
</Modal>
// After
<Modal>
<CustomHeader />
{children}
</Modal>
```
If you are creating a custom header you should call the new hook `useModal` to get the
title id so the content and the title can be linked. You can also access the `onClose`
function this way.
```
import { useModal } from '@atlaskit/modal-dialog';
const CustomHeader = () => {
const { onClose, titleId } = useModal();
return (
<div css={headerStyles}>
<h1 css={headingStyles} id={titleId}>
Custom modal header
</h1>
<Button onClick={onClose}>
Close
</Button>
</div>
);
};
```
If you are doing something simple like adding a button you can continue to use `ModalHeader`.
```
<ModalHeader>
<ModalTitle>Custom modal header</ModalTitle>
<Button appearance="link" onClick={closeModal}>
Close
</Button>
</ModalHeader>
```
#### Footer and body
Similar to `Header`, if you were using the `Footer` or `Body` prop,
you can replace `ModalFooter` and `ModalBody` with any valid React node.
`ModalFooter` and `ModalBody` also accept any valid React node as children.
`useModal` works in any of `Modal`'s children if you wish to use it.
### Scroll behaviour
The `scrollBehavior` prop has changed from strings 'inside', 'inside-wide' and 'outside'
to a boolean `shouldScrollInViewport`. 'inside' and 'inside-wide' have consolidated to
be `shouldScrollInViewport={false}` and 'outside' is `shouldScrollInViewport={true}`.
### Appearance
The `appearance` prop has been removed from `Modal` and is now set on `ModalTitle` and
the primary `Button`.
```
// Before
<ModalTransition>
{isOpen && (
<Modal
appearance="danger"
onClose={close}
heading="Modal Title"
actions={[
{ text: 'Secondary Action', onClick: secondaryAction },
{ text: 'Close', onClick: close },
]}
>
<Lorem count={2} />
</Modal>
)}
</ModalTransition>
// After
<ModalTransition>
{isOpen && (
<Modal onClose={close}>
<ModalHeader>
<ModalTitle appearance="danger">Modal Title</ModalTitle>
</ModalHeader>
<ModalBody>
<Lorem count={2} />
</ModalBody>
<ModalFooter>
<Button appearance="subtle" onClick={secondaryAction}>
Secondary Action
</Button>
<Button appearance="danger" autoFocus onClick={close}>
Close
</Button>
</ModalFooter>
</Modal>
)}
</ModalTransition>;
```
### isChromeless
The `isChromeless` is no longer supported as you can any valid React node in `Modal`
and choose not to use `ModalHeader`, `ModalBody` and `ModalFooter`. The only change to
this behaviour is that there is no way to turn off the box shadow and border radius,
which used to happen when `isChromeless={true}`. You only need to change your usage if
`Modal`'s children set their own background and don’t have a border radius of 3 px.
In this case set the border radius to 3px.
### Test IDs
The mapping for test IDs have changed.
Modal: `{testId}` -> `{testId}`
Modal content: `{testId}-dialog-content` -> DOM node removed
Modal header: `{testId}-dialog-content--header` -> `{testId}--header`
Modal title: `{testId}-dialog-content--heading` -> `{testId}--title`
Modal body: `{testId}-dialog-content--body` -> `{testId}--body`
Modal footer: `{testId}-dialog-content--footer` -> `{testId}--footer`
Scrollable body content: `{testId}-dialog-content--scrollable` -> `{testId}--scrollable`
Blanket: `{testId}--blanket` -> `{testId}--blanket`
Modal actions: `{testId}-dialog-content--action-{index}` -> Removed, can set on Button
### Miscallaneous changes
- `ModalFooter` now uses `flex-end` instead of `space-between` to justify its contents.
- Inner components `ModalFooter`, `ModalHeader` and `ModalBody` no longer accepts style prop.
If you wish to modify the styles, you have to build your own component.
- `ContainerComponentProps` and `ScrollBehavior` types are now removed with no replacements.
- `(Header|Body|Footer|Title)ComponentProps` types are now aliased to
`Modal(Header|Body|Footer|Title)Props`, however most props are not used anymore as state is
shared via the `useModal` hook.
### Patch Changes
- [`1efbaebfbf3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1efbaebfbf3) - Fixes a bug in the appearance of the modal focus state which is now consistent with other elements in the Design System.
- Updated dependencies
## 11.7.4
### Patch Changes
- [`adad0d75402`](https://bitbucket.org/atlassian/atlassian-frontend/commits/adad0d75402) - Internal test fix.
- Updated dependencies
## 11.7.3
### Patch Changes
- [`f75544b8b57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f75544b8b57) - [ux] As a part of DSP-895, a 0px margin was applied to button to fix a regression in Safari. This has been reverted as the 0px margin will be moved to css-reset instead. As a part of that same ticket, the specificity of the footer buttons in modal dialog was updated. This has also been reverted now that the 0px margin is being moved to css-reset.
- Updated dependencies
## 11.7.2
### Patch Changes
- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
## 11.7.1
### Patch Changes
- Updated dependencies
## 11.7.0
### Minor Changes
- [`6679c172f59`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6679c172f59) - Trap the virtual cursor within the modal for screen reader
### Patch Changes
- [`0f7fd3e7c0d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0f7fd3e7c0d) - FIX: content focus and keylines only applied when the target DOM node exists
- Updated dependencies
## 11.6.3
### Patch Changes
- [`95f500da676`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95f500da676) - [ux] Fixes a bug introduced in 11.4.0 – CSS property `left` is put back to the styles of modal dialog container so it doesn't push out floated elements in the background.
## 11.6.2
### Patch Changes
- [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
## 11.6.1
### Patch Changes
- [`e3a6469c8e5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3a6469c8e5) - [ux] FIX: fixes a bug introduced in 11.5.0 – now modal dialog is correctly positioned when relative sizing is used as width
## 11.6.0
### Minor Changes
- [`e1dc82f2825`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e1dc82f2825) - Fix Modal header and footer tags
### Patch Changes
- Updated dependencies
## 11.5.0
### Minor Changes
- [`c9cca93180b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c9cca93180b) - [ux] Removes unnecessary dom nodes and refactors styles in modal dialog.
### Patch Changes
- [`e48c323dd75`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e48c323dd75) - [ux] Fixed `outside` scrolling offset positioning when multiple modals are open.
- [`78803694b8c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78803694b8c) - [ux] Fixes display of focus ring on modal dialog content – now only shown when triggered by keyboard.
## 11.4.1
### Patch Changes
- Updated dependencies
## 11.4.0
### Minor Changes
- [`c0dbb6425f7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c0dbb6425f7) - [ux] Changed ModalDialog html tag from "div" to "section", changed ModalDialog heading from "h4" to "h1"
- [`7e3e3e16b55`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e3e3e16b55) - Entry points are now defined using the declarative format.
- [`441b1eded91`](https://bitbucket.org/atlassian/atlassian-frontend/commits/441b1eded91) - [ux] Modal dialog no longer attaches keylines in its header/footer – it now shows and hides keylines in its body during scroll when the content overflows.
- [`96f56104518`](https://bitbucket.org/atlassian/atlassian-frontend/commits/96f56104518) - Adds ability to pass a element ref to the `autoFocus` prop to specifically focus on an element during initial mount.
- [`6ebee3d941d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ebee3d941d) - Internal refactor converting to hooks.
- [`e100d801223`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e100d801223) - [ux] Modal dialog now uses @atlaskit/motion for its entering/exiting animations.
- [`8a22ca5357b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a22ca5357b) - Event handler types are now exposed in the primary and types entrypoints.
### Patch Changes
- [`8db8f3a22cb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8db8f3a22cb) - Modal dialog now uses css props for styling.
- [`022ec2307a9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/022ec2307a9) - The `onClose` callback now correctly has its second argument types as an analytic event.
- [`d7d64aac39d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7d64aac39d) - Fixed `onStackChange` from firing on inital mount. It will now only fire after the initial mount and its stack position has changed.
- [`1195a2abbbf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1195a2abbbf) - Modal dialog now uses new utility from ds-lib to merge refs.
- Updated dependencies
## 11.3.0
### Minor Changes
- [`0e0b2148d48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0e0b2148d48) - Modal dialog now attaches data-testid to its header and footer.
### Patch Changes
- [`a9dc147612a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a9dc147612a) - [litemode] Internal nested modal components have been re-written as hooks.
- [`910c7744256`](https://bitbucket.org/atlassian/atlassian-frontend/commits/910c7744256) - Internal restructure of files and folders.
- Updated dependencies
## 11.2.9
### Patch Changes
- [`624d33651cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/624d33651cf) - Fix content remounts in version >= 11.1.3
- Updated dependencies
## 11.2.8
### Patch Changes
- [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
- Updated dependencies
## 11.2.7
### Patch Changes
- [`5af85edf960`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5af85edf960) - Internal code style change of default exports
## 11.2.6
### Patch Changes
- [`7490717bdd4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7490717bdd4) - Fix overflow issue present in Safari 14.0.3
## 11.2.5
### Patch Changes
- [`d94d90714b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d94d90714b) - Modal will retain full-width at viewports < 320px. This makes it consistent with < 480px beahviour.
## 11.2.4
### Patch Changes
- [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
## 11.2.3
### 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.
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.
## 11.2.2
### Patch Changes
- Updated dependencies
## 11.2.1
### Patch Changes
- [`2ac834240e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ac834240e) - Undo analytics-next file restructure to allow external ts definitions to continue working
## 11.2.0
### Minor Changes
- [`9d5d1ab37f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d5d1ab37f) - Allow for non tinted blanket background
### Patch Changes
- [`c48024293c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c48024293c) - Fixed an issue when using `scrollBehavior="outside"` would cause Firefox to not allow scrolling of modal
- Updated dependencies
## 11.1.6
### Patch Changes
- [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
## 11.1.5
### Patch Changes
- [`8598d0bd13`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8598d0bd13) - Remove unnecessary code and tests for IE11.
- [`6ac737558f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ac737558f) - Remove non-standard CSS property [-ms-high-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast). The `-ms-high-contrast` CSS media feature is a Microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.
- Updated dependencies
## 11.1.4
### Patch Changes
- [`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.
## 11.1.3
### Patch Changes
- [`c1b8d0e897`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c1b8d0e897) - You can now scroll using a touchscreen in the body of `modal-dialog` content
## 11.1.2
### Patch Changes
- [`954cc87b62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/954cc87b62) - The readme and package information has been updated to point to the new design system website.
## 11.1.1
### Patch Changes
- [`810f11aaab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/810f11aaab) - Custom body styles have been added back. They will be removed in the next major version - if you're customizing the body of the modal dialog please make sure to spread props onto your custom component.
## 11.1.0
### Minor Changes
- [`727776fa32`](https://bitbucket.org/atlassian/atlassian-frontend/commits/727776fa32) - Missing types for component overrides are now exposed - you can access them through the root entrypoint.
```js
import {
BodyComponentProps,
TitleComponentProps,
ContainerComponentProps,
FooterComponentProps,
HeaderComponentProps,
ScrollBehavior,
} from '@atlaskit/modal-dialog';
```
## 11.0.3
### Patch Changes
- [`5b5e7b6323`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b5e7b6323) - The previous hotfix (https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3781) didn't fix the appearance override issue.
This change will be re-introduced in a future major version, please follow this ticket for updates https://product-fabric.atlassian.net/browse/DST-660.
## 11.0.2
### Patch Changes
- [`9796654bab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9796654bab) - The button sequence correction has been reverted as it was causing unintended regressions for some use cases. Affected versions include: @atlaskit/modal-dialog@11.0.1.
This change will be re-introduced in a future major version, please follow this ticket for updates https://product-fabric.atlassian.net/browse/DST-660.
## 11.0.1
### Patch Changes
- [`95261cf7b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95261cf7b0) - Fixed modal dialog focus issue
- [`3414523d6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3414523d6f) - Rearange buttons order to align with design guidelines
- [`30f8909177`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30f8909177) - fixed the layering between header, content, and footer
- [`db053b24d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db053b24d8) - Update all the theme imports to be tree-shakable
## 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.
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
- Updated dependencies
## 10.6.4
### Patch Changes
- [`5be257c6f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5be257c6f6) - Fix issue with the way that tabIndex was applied to dialog content. Now the check looks at whether the container is scrollable, rather than the shouldScroll prop.
- [`057d870973`](https://bitbucket.org/atlassian/atlassian-frontend/commits/057d870973) - Fix keyboard scrolling of modal dialog content
## 10.6.3
### Patch Changes
- [`fddc283495`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fddc283495) - Added aria-labelledby to dialog and point it to the real heading
- [`b2b0b94079`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2b0b94079) - Reverts breaking test id change.
## 10.6.2
### Patch Changes
- [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
## 10.6.1
### Patch Changes
- [`4560b65a4f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4560b65a4f) - upgrade react-transition-group to latest
## 10.6.0
### Minor Changes
- [`98e93d93ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/98e93d93ec) - ActionProps.text now accepts React.ReactNode instead of just string
### Patch Changes
- [`16ccd817d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/16ccd817d8) - Export types
- Updated dependencies
## 10.5.9
### Patch Changes
- Updated dependencies
## 10.5.8
### Patch Changes
- [`53d09bdb5d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/53d09bdb5d) - Reverts scrolling fix which introduced a layering regression.
## 10.5.7
### Patch Changes
- [patch][9a534d6a74](https://bitbucket.org/atlassian/atlassian-frontend/commits/9a534d6a74):
Change imports to comply with Atlassian conventions- Updated dependencies [6b8e60827e](https://bitbucket.org/atlassian/atlassian-frontend/commits/6b8e60827e):
- Updated dependencies [449ef134b3](https://bitbucket.org/atlassian/atlassian-frontend/commits/449ef134b3):
- Updated dependencies [167a55fd7a](https://bitbucket.org/atlassian/atlassian-frontend/commits/167a55fd7a):
- Updated dependencies [3a09573b4e](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a09573b4e):
- Updated dependencies [57c0487a02](https://bitbucket.org/atlassian/atlassian-frontend/commits/57c0487a02):
- Updated dependencies [68ff159118](https://bitbucket.org/atlassian/atlassian-frontend/commits/68ff159118):
- Updated dependencies [6efb12e06d](https://bitbucket.org/atlassian/atlassian-frontend/commits/6efb12e06d):
- Updated dependencies [6d744d3ff1](https://bitbucket.org/atlassian/atlassian-frontend/commits/6d744d3ff1):
- Updated dependencies [0059d26429](https://bitbucket.org/atlassian/atlassian-frontend/commits/0059d26429):
- Updated dependencies [fd41d77c29](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd41d77c29):
- @atlaskit/button@13.3.11
- @atlaskit/icon@20.1.1
- @atlaskit/select@11.0.10
- @atlaskit/avatar@17.1.10
- @atlaskit/inline-dialog@12.1.12
- @atlaskit/checkbox@10.1.11
- @atlaskit/blanket@10.0.18
- @atlaskit/form@7.2.1
- @atlaskit/webdriver-runner@0.3.4
## 10.5.6
### Patch Changes
- [patch][f5b654c328](https://bitbucket.org/atlassian/atlassian-frontend/commits/f5b654c328):
Added a new `ScrollBehavior` value `inside-wide` to support showing modals on pages with body wider than viewport width.- [patch][89bf723567](https://bitbucket.org/atlassian/atlassian-frontend/commits/89bf723567):
FIX: `scrollBehavior: outside` Firefox scroll issue- Updated dependencies [603413f530](https://bitbucket.org/atlassian/atlassian-frontend/commits/603413f530):
- Updated dependencies [168b5f90e5](https://bitbucket.org/atlassian/atlassian-frontend/commits/168b5f90e5):
- Updated dependencies [0c270847cb](https://bitbucket.org/atlassian/atlassian-frontend/commits/0c270847cb):
- Updated dependencies [109004a98e](https://bitbucket.org/atlassian/atlassian-frontend/commits/109004a98e):
- Updated dependencies [b9903e773a](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9903e773a):
- @atlaskit/portal@3.1.7
- @atlaskit/docs@8.5.1
- @atlaskit/theme@9.5.3
- @atlaskit/analytics-next@6.3.6
- @atlaskit/button@13.3.10
## 10.5.5
### Patch Changes
- [patch][4d3749c9e6](https://bitbucket.org/atlassian/atlassian-frontend/commits/4d3749c9e6):
Upgraded react-scrolllock package- Updated dependencies [294c05bcdf](https://bitbucket.org/atlassian/atlassian-frontend/commits/294c05bcdf):
- Updated dependencies [dae900bf82](https://bitbucket.org/atlassian/atlassian-frontend/commits/dae900bf82):
- Updated dependencies [8c9e4f1ec6](https://bitbucket.org/atlassian/atlassian-frontend/commits/8c9e4f1ec6):
- @atlaskit/form@7.2.0
- @atlaskit/build-utils@2.6.4
- @atlaskit/docs@8.5.0
## 10.5.4
### Patch Changes
- Updated dependencies [66dcced7a0](https://bitbucket.org/atlassian/atlassian-frontend/commits/66dcced7a0):
- Updated dependencies [fd5292fd5a](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd5292fd5a):
- Updated dependencies [64fb94fb1e](https://bitbucket.org/atlassian/atlassian-frontend/commits/64fb94fb1e):
- Updated dependencies [fd5292fd5a](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd5292fd5a):
- Updated dependencies [eea5e9bd8c](https://bitbucket.org/atlassian/atlassian-frontend/commits/eea5e9bd8c):
- Updated dependencies [fd5292fd5a](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd5292fd5a):
- Updated dependencies [109c1a2c0a](https://bitbucket.org/atlassian/atlassian-frontend/commits/109c1a2c0a):
- Updated dependencies [c57bb32f6d](https://bitbucket.org/atlassian/atlassian-frontend/commits/c57bb32f6d):
- @atlaskit/docs@8.4.0
- @atlaskit/icon@20.1.0
- @atlaskit/webdriver-runner@0.3.0
- @atlaskit/field-radio-group@7.0.2
- @atlaskit/avatar@17.1.9
- @atlaskit/button@13.3.9
- @atlaskit/checkbox@10.1.10
- @atlaskit/form@7.1.5
- @atlaskit/inline-dialog@12.1.11
- @atlaskit/select@11.0.9
- @atlaskit/textfield@3.1.9
## 10.5.3
### Patch Changes
- Updated dependencies [e3f01787dd](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3f01787dd):
- @atlaskit/webdriver-runner@0.2.0
- @atlaskit/avatar@17.1.8
- @atlaskit/button@13.3.8
- @atlaskit/checkbox@10.1.9
- @atlaskit/form@7.1.4
- @atlaskit/inline-dialog@12.1.10
- @atlaskit/select@11.0.8
- @atlaskit/textfield@3.1.8
## 10.5.2
### Patch Changes
- [patch][6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies [6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
- @atlaskit/docs@8.3.2
- @atlaskit/visual-regression@0.1.9
- @atlaskit/analytics-next@6.3.5
- @atlaskit/avatar@17.1.7
- @atlaskit/blanket@10.0.17
- @atlaskit/button@13.3.7
- @atlaskit/checkbox@10.1.7
- @atlaskit/field-radio-group@7.0.1
- @atlaskit/form@7.1.2
- @atlaskit/icon@20.0.1
- @atlaskit/inline-dialog@12.1.9
- @atlaskit/portal@3.1.6
- @atlaskit/select@11.0.7
- @atlaskit/textfield@3.1.6
- @atlaskit/theme@9.5.1
## 10.5.1
### Patch Changes
- Updated dependencies [c0102a3ea2](https://bitbucket.org/atlassian/atlassian-frontend/commits/c0102a3ea2):
- Updated dependencies [b9dc265bc9](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9dc265bc9):
- @atlaskit/field-radio-group@7.0.0
- @atlaskit/icon@20.0.0
- @atlaskit/avatar@17.1.6
- @atlaskit/form@7.1.1
- @atlaskit/docs@8.3.1
- @atlaskit/button@13.3.6
- @atlaskit/checkbox@10.1.6
- @atlaskit/inline-dialog@12.1.8
- @atlaskit/portal@3.1.5
- @atlaskit/select@11.0.6
- @atlaskit/textfield@3.1.5
## 10.5.0
### Minor Changes
- [minor][24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
Allowing support for using with new react-beautiful-dnd 12.x API
### Patch Changes
- [patch][24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
Form has been converted to Typescript. TypeScript consumers will now get static type safety. Flow types are no longer provided. No API changes.- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
- @atlaskit/analytics-next@6.3.3
- @atlaskit/select@11.0.3
- @atlaskit/form@7.0.0
- @atlaskit/checkbox@10.1.4
- @atlaskit/field-text@9.0.14
- @atlaskit/textfield@3.1.4
- @atlaskit/avatar@17.1.5
- @atlaskit/inline-dialog@12.1.6
## 10.4.0
### Minor Changes
- [minor][1ed27f5f85](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1ed27f5f85):
Adds prop types for Header / Footer render props.
## 10.3.6
- Updated dependencies [30acc30979](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/30acc30979):
- @atlaskit/form@6.3.2
- @atlaskit/inline-dialog@12.1.5
- @atlaskit/select@11.0.0
- @atlaskit/button@13.3.4
## 10.3.5
### Patch Changes
- [patch][b39742b616](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b39742b616):
fixed type for the actions props
## 10.3.4
### Patch Changes
- [patch][f86839ca4e](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f86839ca4e):
@atlaskit/portal had an issue in IE11 and this is fixed in 3.1.2
## 10.3.3
### Patch Changes
- [patch][35d2229b2a](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/35d2229b2a):
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
## 10.3.2
### Patch Changes
- [patch][a2d0043716](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/a2d0043716):
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
## 10.3.1
- Updated dependencies [97bab7fd28](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/97bab7fd28):
- @atlaskit/button@13.3.1
- @atlaskit/form@6.2.3
- @atlaskit/select@10.1.1
- @atlaskit/checkbox@10.0.0
- @atlaskit/docs@8.1.7
## 10.3.0
### Minor Changes
- [minor][66e147e6a1](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/66e147e6a1):
Adding an optional prop `testId` that will set the attribute value `data-testid`. It will help products to write better integration and end to end tests.
## 10.2.1
- Updated dependencies [8d0f37c23e](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/8d0f37c23e):
- @atlaskit/textfield@3.0.6
- @atlaskit/avatar@17.0.0
- @atlaskit/theme@9.2.2
## 10.2.0
### Minor Changes
- [minor][c6efb2f5b6](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/c6efb2f5b6):
Prefix the legacy lifecycle methods with UNSAFE\_\* to avoid warning in React 16.9+
More information about the deprecation of lifecycles methods can be found here:
https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes
## 10.1.9
### Patch Changes
- [patch][097b696613](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/097b696613):
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
## 10.1.8
### Patch Changes
- [patch][0d7d459f1a](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/0d7d459f1a):
Fixes type errors which were incompatible with TS 3.6
## 10.1.7
### Patch Changes
- [patch][f4ba40109f](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f4ba40109f):
Refactors modal-dialog's styled component props
## 10.1.6
### Patch Changes
- [patch][ecca4d1dbb](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/ecca4d1dbb):
Upgraded Typescript to 3.3.x
## 10.1.5
### Patch Changes
- [patch][708028db86](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/708028db86):
Change all the imports to theme in Core to use multi entry points
## 10.1.4
### Patch Changes
- [patch][de35ce8c67](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/de35ce8c67):
Updates component maintainers
## 10.1.3
### Patch Changes
- [patch][926b43142b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/926b43142b):
Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.
**Breaking changes**
- `withAnalyticsForSumTypeProps` alias has been removed, please use `withAnalyticsEvents`
- `AnalyticsContextWrappedComp` alias has been removed, please use `withAnalyticsContext`
**Breaking changes to TypeScript annotations**
- `withAnalyticsEvents` now infers proptypes automatically, consumers no longer need to provide props as a generic type.
- `withAnalyticsContext` now infers proptypes automatically, consumers no longer need to provide props as a generic type.
- Type `WithAnalyticsEventProps` has been renamed to `WithAnalyticsEventsProps` to match source code
- Type `CreateUIAnalyticsEventSignature` has been renamed to `CreateUIAnalyticsEvent` to match source code
- Type `UIAnalyticsEventHandlerSignature` has been renamed to `UIAnalyticsEventHandler` to match source code
- Type `AnalyticsEventsPayload` has been renamed to `AnalyticsEventPayload`
- Type `ObjectType` has been removed, please use `Record<string, any>` or `[key: string]: any`
- Type `UIAnalyticsEventInterface` has been removed, please use `UIAnalyticsEvent`
- Type `AnalyticsEventInterface` has been removed, please use `AnalyticsEvent`
- Type `CreateAndFireEventFunction` removed and should now be inferred by TypeScript
- Type `AnalyticsEventUpdater` removed and should now be inferred by TypeScript
## 10.1.2
- Updated dependencies [84887b940c](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/84887b940c):
- @atlaskit/form@6.1.7
- @atlaskit/icon@19.0.2
- @atlaskit/textfield@3.0.0
## 10.1.1
### Patch Changes
- [patch][688f2957ca](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/688f2957ca):
Fixes various TypeScript errors which were previously failing silently
## 10.1.0
### Minor Changes
- [minor][eb7b748d59](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/eb7b748d59):
Modal-dialog padding now matches AGD and GUI pack
## 10.0.14
### Patch Changes
- [patch][9f8ab1084b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/9f8ab1084b):
Consume analytics-next ts type definitions as an ambient declaration.
## 10.0.13
### Patch Changes
- [patch][bbff8a7d87](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bbff8a7d87):
Fixes bug, missing version.json file
## 10.0.12
### Patch Changes
- [patch][18dfac7332](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/18dfac7332):
In this PR, we are:
- Re-introducing dist build folders
- Adding back cjs
- Replacing es5 by cjs and es2015 by esm
- Creating folders at the root for entry-points
- Removing the generation of the entry-points at the root
Please see this [ticket](https://product-fabric.atlassian.net/browse/BUILDTOOLS-118) or this [page](https://hello.atlassian.net/wiki/spaces/FED/pages/452325500/Finishing+Atlaskit+multiple+entry+points) for further details
## 10.0.11
### Patch Changes
- [patch][d0db01b410](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d0db01b410):
TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.
Before:
```typescript
withAnalyticsEvents()(Button) as ComponentClass<Props>;
```
After:
```typescript
withAnalyticsEvents<Props>()(Button);
```
## 10.0.10
- Updated dependencies [790e66bece](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/790e66bece):
- @atlaskit/button@13.0.11
- @atlaskit/form@6.1.4
- @atlaskit/inline-dialog@12.0.5
- @atlaskit/select@10.0.0
## 10.0.9
### Patch Changes
- [patch][0342746c45](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/0342746c45):
Closing a dialog in IE11 specific event key
## 10.0.8
- Updated dependencies [87a2638655](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/87a2638655):
- @atlaskit/button@13.0.10
- @atlaskit/form@6.1.2
- @atlaskit/select@9.1.10
- @atlaskit/checkbox@9.0.0
## 10.0.7
- Updated dependencies [06326ef3f7](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/06326ef3f7):
- @atlaskit/docs@8.1.3
- @atlaskit/avatar@16.0.6
- @atlaskit/button@13.0.9
- @atlaskit/checkbox@8.0.5
- @atlaskit/field-radio-group@6.0.4
- @atlaskit/form@6.1.1
- @atlaskit/inline-dialog@12.0.3
- @atlaskit/portal@3.0.7
- @atlaskit/select@9.1.8
- @atlaskit/textfield@2.0.3
- @atlaskit/icon@19.0.0
## 10.0.6
### Patch Changes
- [patch][4615439434](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/4615439434):
index.ts will now be ignored when publishing to npm
## 10.0.5
### Patch Changes
- [patch][02f1f73671](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/02f1f73671):
`heading` prop type changed from string to React.ReactNode. This provides more flexibility for consumers to provide i18n components like FormattedMessage.
## 10.0.4
- Updated dependencies [cfc3c8adb3](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/cfc3c8adb3):
- @atlaskit/docs@8.1.2
- @atlaskit/avatar@16.0.3
- @atlaskit/button@13.0.8
- @atlaskit/checkbox@8.0.2
- @atlaskit/field-radio-group@6.0.2
- @atlaskit/form@6.0.5
- @atlaskit/inline-dialog@12.0.1
- @atlaskit/portal@3.0.3
- @atlaskit/select@9.1.5
- @atlaskit/textfield@2.0.1
- @atlaskit/icon@18.0.0
## 10.0.3
- Updated dependencies [181209d135](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/181209d135):
- @atlaskit/portal@3.0.2
- @atlaskit/inline-dialog@12.0.0
## 10.0.2
- Updated dependencies [70862830d6](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/70862830d6):
- @atlaskit/button@13.0.6
- @atlaskit/form@6.0.4
- @atlaskit/select@9.1.4
- @atlaskit/checkbox@8.0.0
- @atlaskit/icon@17.2.0
- @atlaskit/theme@9.1.0
## 10.0.1
- [patch][b0ef06c685](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b0ef06c685):
- This is just a safety release in case anything strange happened in in the previous one. See Pull Request #5942 for details
## 10.0.0
- [major][06c5cccf9d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/06c5cccf9d):
- modal-dialog has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
- [patch][c3ab82ed42](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/c3ab82ed42):
- Bump react-focus-lock to latest 1.19.1, it will fix a bug with document.activeElement
- Updated dependencies [dacfb81ca1](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/dacfb81ca1):
- @atlaskit/portal@3.0.0
## 9.0.0
- [major][7c17b35107](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/7c17b35107):
- Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To