A wrapper for React Popper for situations which require a bespoke popup where other ADS components are deemed unsuitable
yarn add @atlaskit/popper#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
57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party apps961d97994618c -
Adds shouldFitViewport prop which will apply max-width and max-height to contain the
popper/popup within the viewport.#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.
a8bd419fd70b9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.5a358ae041de -
Removing @atlaskit/in-product-testing and its usages. Entry point removals require a major bump.56507598609 - Skip
minor dependency bump7888ba61c3b - Add
platform feature flag registration and dynamic type generation for platform feature flag client03a51e8100d -
Introduces a hidden, dummy html element to validate that our new deployment pipeline is working
end-to-end.cd2800156bd - Updates
to in-product testing interface. The change switches popperRendersWithPositionFixedTestCase to
popperRendersTestCase.#27294
dc53dc3201b - Add
'productPushConsumption' as a new optional field in package.json.
Note: We want to track the information if the package was moved from the pull into the push
model in the product. Hence, we extended the package.json file by adding a new field e.g.:
"atlassian.productPushConsumption": ["jira"] This field is optional.
9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.45ebe7af434 - Moved to
using declarative entrypoints internally. Public API is unchanged.b3e5a62a9e3 - Adds
static techstack to package, enforcing stricter style linting. In this case the package already
satisfied this requirement so there have been no changes to styles.cd34d8ca8ea - Internal
wiring up to the tokens techstack, no code changes.f6b951a51f2 - Removes
usage of styled-components in favour of standardising on emotion81f4f9f7562 - Update
core @popperjs/core dependency to ^2.9.1, fixing some positioning bugs, such as in parents
with will-change CSS properties set. For more information on the specific changes, see the
popper docs.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
044869b067 - This major
release of Popper upgrades from react-popper v.1.3.6 to 2.2.3, which includes version 2 of Popper
JS (@popperjs/core). This is a complete re-write of popper.js which comes with bundle-size and
performance improvements, as well as a number of bug fixes and longer-term support.
There are a number of major changes for consumers are listed below; ⚙️ indicates the change has codemod support:
offset is no longer a string, but an array of two integers (i.e. '0px 8px' is now [0, 8])outOfBoundaries has been replaced with isReferenceHidden, and is now true when the
popper is hidden (i.e. by a scroll container)scheduleUpdate, for async updates, has been renamed to update, and now returns a
Promise.hasPopperEscaped tracks when the reference element is fully clipped or hiddenforceUpdate is exposed to perform synchronous updates@popperjs/core (Placement)
and react-popper (ManagerProps, ReferenceProps, PopperProps, PopperArrowProps,
PopperChildrenProps, StrictModifier, Modifier).modifiers
prop:modifiers prop has been significantly updated:name key:value pair. Previously the
prop was an object where each property was the modifier name.options objectpreventOverflow and flip; to restore
original padding, set padding: 5boundariesElement option now have two options in its place:
boundary, which takes clippingParents (similar to scrollParent)rootBoundary which takes viewport or document (replacing viewport and
windowrespectively)Each modifier has more internal changes not listed here: see the Popper JS docs for more information, as well as the Popper migration guide for an example of the new list structure.
Due to the highly specific nature of these modifiers, codemod support is not provided for this change
Note: due to a bug in react-popper, a console.error message relating to React act() may be
raised on some tests. It should not cause test failures. This issue has been raised in
the React Popper issue tracker
Running the codemod cli
To run the codemod: You first need to have the latest version of popper installed before you can run the codemod
yarn upgrade @atlaskit/popper@^5.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/3953454a9514fcf - Build and
supporting files will no longer be published to npm[patch]cf8577f5d6:
Change imports to comply with Atlassian conventions- Updated dependencies 6b8e60827e:
Updated dependencies 57c0487a02:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
[patch]542080be8a:
Bumped react-popper and resolved infinite looping refs issue, and fixed close-on-outside-click for @atlaskit/popup
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]abee1a5f4f:
Bumping internal dependency (memoize-one) to latest version (5.1.0). memoize-one@5.1.0 has full typescript support so it is recommended that typescript consumers use it also.
[major]ebfeb03eb7:
popper has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioral changes.
[major]7c17b35107:
[major]8b5f052003:
[minor]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import and export declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.
[patch]efc35d1:
[patch]82fc5f5:
[patch]0a297ba: