A popup displays brief content in an overlay.
yarn add @atlaskit/popupb26d53ac2517a -
Prevent onClick handler gets called when popup is open on Firefoxd2e804df6bf9c -
Update dependencies and remove old codemod and unused internal exports.#117363
10a0f7f6c2027 -
This package's peerDependencies have been adjusted for react and/or react-dom to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
b50c5d5d65ae2 -
Bump to the latest version of @compiled/react4660ec858a305 -
Update React from v16 to v187b1a8574e9c29 -
Fix or temporarily ignore TypeScript errors that occur in internal React 18 suites.6876e5688ed14 -
Dropdown open in iframe should be closed when clicking outside of the iframe397ca651978da -
Adds shouldDisableGpuAcceleration prop to composable PopupContent API. This prop will
configure popper.js to position the popup using only position properties, without any transform
usage. This should not be used in most cases, but is needed for some layering issues.57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party apps20db78434becd -
Bump to the latest version of @compiled/*f737df437eb7a -
Support close type in popup to not close all layers3c4de48168ffe -
Update the import path of useId* from @atlaskit/ds-libf3fc0c5bb919d -
Adds usage of the useNotifyLayerObserver hook from the layering package. The hook is behind a
feature flag.16cce78563062 -
Fixes a bug that caused the trigger to lose the ability to have focus after closing a dropdown
menu using the Escape key inside the popup content.4fdf6347eb506 -
Popup and compositional popup now take an xcss prop that can adjust the popup contents padding and
width.4fdf6347eb506 -
Popup and compositional popup now have a new appearance prop. Pass it "modal" to enable the popup
to appear as a modal on small viewports.3979d0196514a -
[ux] We are testing focus ring for popup wrapper onKeyDown. Changes are implemented behind
feature flag. If this fix is successful, it will be available in a later release.961d97994618c -
Adds shouldFitViewport prop which will apply max-width and max-height to contain the
popper/popup within the viewport.b72c2c7f9a2fd -
Support to close all layers when clicking outside under feature flag2e4f70b9a71fa -
Fix to set ref for trigger in React 18 Strict mode behind feature flag56e1c0d98f0c2 -
Fixed unnecessary closing of modal dialogs that opened from a popup.462353527b0db -
Expose shouldReturnFocus on Popup component to allow consumers to prevent trigger refocusing on
popup close1495b8f9c9253 -
[ux] We are testing new focus behavior in non-dialog popup instances behind a feature flag. With
that in place, all popup instances that don't have role="dialog" applied will have focus traps
disabled by default. If this fix is successful, it will be available in a later release.49e0363439f7c -
[ux] Content inside of a Popup will now always have it's text color reset to color.text.
Previously, the text color of Popup content would be color.text if rendering into a
portal shouldRenderToParent={true} or
shouldFitContainer={true}, but otherwise would inherit the text color of the parent element. We
have made this change to improve consistency and avoid surprises when working with Popup.#127511
db30e29344013 -
Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of react@18.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
8b8090800a35d -
Bump peer dependency for react-dom to include version 17 and 18.d6c9799d09e87 -
Updates compositional popup to take an optional prop for the popup content to expand to the full
width of the parent containerff0815316ab38 -
Removes usage of custom theme button in places where its API is not being used and the default
button is able to be used instead. This should give a slight performance (runtime) improvement.a8bd419fd70b9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.2f3d71601a7c2 -
[ux] Adds a new optional shouldFitContainer prop, which when set to true, will fit the popup
width to its parent's width.4f26610d9fbc -
Adds auto-generated ID to popup and popup triggers for better coverage of assistive technologies
and aria-controls..e757c83a22ee -
Add new props for improving accessibility: role, label and titleId.039491355ada -
Adds new entry points for an alternate experimental Popup API using composable components. The new
exports are prefixed with UNSAFE should only be used after agreement with the Design System team.35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.09d5dc8f7de85 -
Adds a new strategy prop to control the positioning strategy to use other than the default
'fixed' position.c8fa9cdd08e4 -
Accessibility changes. Add a new optional prop shouldDisableFocusLock. We are testing the
ability to close the popup by pressing the Tab key when shouldDisableFocusLock is true and
shouldRenderToParent is true behind a feature flag. This is necessary for the dropdown menu to
work correctly. If this fix is successful it will be available in a later release.776e5ba8fc41 -
Enable layering in popup and dropdown to support nested navigation7949bd7f5cb6 -
Support to disable pointer-events on iframe when popup is open to fix issue of clicking on iframe
won't close popupc6b7d977655 - Memoize
the Popup Trigger's ref to avoid unnecessary renders.07781d6d786 - Removes
feature flag implemented in 1.11.0. Does not implement proposed functionality behind the feature
flag.f54519b315c - This
removes the error in console when passing shouldRenderToParent prop.b0a2a8d78c6 - [ux] We
are testing removing the focus-trap package for a smaller sharper implementation of focus
management behind a feature flag. If this fix is successful it will be available in a later
release.d621fe3e4f8 - fix
ReferenceError where frameId is used before it is initialiseda54578d2ea9 - This
removes the feature flag for the shouldRenderToParent prop. The prop is available for use.f355884a4aa - [ux]
Support to press escape key and only close the top layer84442a93613 - Adds
support for surface detection when using design tokens. Enabling children to be styled with the
surface color of the popup when using the utility.elevation.surface.current design token.065da872439 - Css
changes for testing the feature flag platform.design-system-team.render-popup-in-parent_f73ij.6a0a3c059ba - Remove
unused argument from internal focus management function.3920dcfd848 - This
removes the feature flag made for upgrading the focus-trap dependency and keeps focus-trap at
it's original version.4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.472a62ce219 - [ux]
Fixes autoFocus functionality on upgrade of focus-trap to v7.599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.ac5a05f5929 - We are
testing an upgrade to the focus-trap dependency behind a feature flag. If this fix is successful
it will be available in a later release.eca89633804 - Add a
new prop shouldRenderToParent to allow render popup into a DOM node within the parent DOM
hierarchy instead of React portal.e2a6337bb05 - Reverts
changes 1.6.3 in @atlaskit/popup, reverts disabling pointer events on iframes when popup is open.c394dbc632f -
Addresses the problem where the popup fails to close upon clicking on the iframe56507598609 - Skip
minor dependency bump9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.c520e306869 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.01d80d395bc - pass
event to onOpenChange consistently8202e37941b - Internal
code change turning on new linting rules.8a5bdb3c844 -
Upgrading internal dependency (bind-event-listener) for improved internal typesdcf8150c49c - Allow
trigger props to be applied to any HTML element tag without causing type errors for the ref
type2e7bbdfd813 -
Upgrading internal dependency 'bind-event-listener' to 2.1.0 for improved types19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.#17576
2e42aa0d900 -
Note: It is a re-release of the wrongly patched version 1.1.6 that should have been a
minor release.
Expose fallbackPlacement modifier from to specify a list of fallback options to try incase there
isn't enough space
c2dd770a743 - Add new
prop which controls is outside click should be bound using captureWRONG RELEASE TYPE - DON'T USE
f142150a3e8 - Expose
fallbackPlacement modifier from to specify a list of fallback options to try incase there isn't
enough spacef460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.04cf9c3d28c - [ux]
Colors now sourced from tokens.d6f7ff383cf - Updates
to development dependency storybook-addon-performance1858f20ac3 - Optimised
popup performance as part of the lite-mode project. Changes are internal and have no implications
for component API or usage.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.#3885
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.
#3823
740e011f8d - This first
major release of popup brings in major changes from @atlaskit/popper. These changes come with
performance, maintainability and behavioral improvements.
As popup wraps popper's functionality, these changes result in a breaking change for popup as well.
These changes have ⚙️ codemod support:
⚙️ offset is no longer a string, but an array of two integers (i.e. '0px 8px' is now [0, 8])
⚙️ boundariesElement has been replaced with two props: boundary and rootBoundary. The
three supported values from the boundariesElement prop have been split between the two as
follows:
boundariesElement = "scrollParents" has been renamed: use boundary = "clippingParents".boundariesElement = "window" has been renamed: use rootBoundary = "document", and acts in
a similar fashion.boundariesElement = "viewport" has been moved: use rootBoundary = "document".boundary prop now supports custom elements.Components passed into the content have a change to render props:
scheduleUpdate, for async updates, has been renamed to update, and now returns a
Promise.For more information on the change, see the popper.js docs
Running the codemod cli
To run the codemod: You first need to have the latest version of popup installed before you can run the codemod
yarn upgrade @atlaskit/popup@^1.0.0
Once upgraded, use the Atlaskit codemod-cli;
npx @atlaskit/codemod-cli --parser [PARSER] --extensions [FILE_EXTENSIONS] [TARGET_PATH]
Or run npx @atlaskit/codemod-cli -h for more details on usage. For Atlassians, refer to
this doc for more details
on the codemod CLI.
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/39534ebcb467688 - Add a new
prop autoFocus to allow consumers to control whether the Popup takes focus when opened54a9514fcf - Build and
supporting files will no longer be published to npm649f69b6d7 - Patch all
packages that are used by confluence that have a broken es2019 distf4d4de67e4 - Prevent
closing of popup when clicked element (which is inside content) is removed from the DOMead13374cf -
BREAKING: Removes tag prop and unneeded wrapping element around the trigger.[patch]a12ea387f1:
Change imports to comply with Atlassian conventions- Updated dependencies cf8577f5d6:
Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 57c0487a02:
Updated dependencies 1e7e54c20e:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]afc9384399:
Adds tag prop, use this for changing (or removing with a Fragment) the wrapping element around
the trigger.- Updated dependencies
671de2d063:
Updated dependencies 77ffd08ea0:
Updated dependencies 0ae6ce5d46:
[minor]0946fdd319:
content prop to expect render props instead of a component. This is
primarily to stop your components remounting when not having a stable reference.[patch]eb1ecc219a:
Fix issue where stopping event propagation would still close a popup
[patch]f534973bd4:
Fix a bug causing the page to scroll to top when a popup is opened- Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
[patch]24865cfaff:
Updates react-popper dependency to a safe version.- Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
[patch]542080be8a:
Bumped react-popper and resolved infinite looping refs issue, and fixed close-on-outside-click for @atlaskit/popup- [patch]995c1f6fd6:
Popup close on outside click no longer fires when clicking on content within the popup that re-renders
[patch]3cad6b0118:
Exposed offset prop for popper allowing positioning of popups relative to the trigger. Added example for double pop-up pattern
[patch]f86839ca4e:
@atlaskit/portal had an issue in IE11 and this is fixed in 3.1.2
[minor]6e0bcc75ac:
[patch]28e9c65acd:
[minor]f1a3548732:
Introduce new package for the lightweight inline-dialog to be used in @atlaskit/app-navigation. The package will stay internal for now until more hardening is done, but releasing first minor to unblock navigation work.