A dropdown menu displays a list of actions or options to a user.
yarn add @atlaskit/dropdown-menu1a5daeece05cf -
Fixes bugs with keyboard navigation in dropdown menu1a5daeece05cf -
Fixes bugs with keyboard navigation in dropdown menu#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
4660ec858a305 -
Update React from v16 to v18f62a0d9ada12e -
Fixes a bug with the Dropdown Menu not returning focus to the returnFocusRef element, when
rendered in a portal. This change is no longer behind a feature flag.53e2c361fad77 -
Fixes a bug with the Dropdown Menu not returning focus to the returnFocusRef element, when
rendered in a portal. This fix is behind a feature flag.6876e5688ed14 -
Dropdown open in iframe should be closed when clicking outside of the iframe08accf7fa1041 -
Fix keyboard navigation not working when using dropdown menu item as the nested trigger9b3927dbda348 -
Update checkbox and radio to match new icon styles behind feature flag.3ab7d7da348ab -
Adds side-effect config to support Compiled css extraction in third-party appscfef14b7ec2bc -
Update Dropdown Menu internals so that menuItemRefs are always stored in order. In the case of a
DropDownItem with async content then the ref may only be populated once the content has loaded.ca0824645f3a5 -
Remove the use of Math.random for the generation of IDs5e7c49fc3d545 -
Updated group title styles to use modernized typography.#151581
ce972f75db165 - ##
New Feature: Configurable Popper Strategy
Feature Overview: The @atlaskit/dropdown-menu component now includes a new strategy prop,
providing developers with the ability to customize the positioning strategy of dropdowns. This
enhancement offers more control over how dropdown menus are rendered and positioned, accommodating
various layout needs.
Usage: The strategy prop can be set to either 'absolute' or 'fixed', with the default
being 'fixed'.
'fixed': Positions the dropdown relative to the browser's viewport. This ensures that the
dropdown remains in the same position regardless of page scrolling, making it ideal for
dropdowns that need to maintain a consistent position on the screen.
'absolute': Positions the dropdown relative to its closest positioned ancestor, which
allows the dropdown to move with the content as the page is scrolled or resized. This is useful
in scenarios where the dropdown should remain contextually attached to an element within a
scrollable area.
Example Usage:
import DropdownMenu from '@atlaskit/dropdown-menu';
const MyDropdown = () => (
<DropdownMenu
trigger="Options"
strategy="absolute" // Options are 'absolute' or 'fixed'
>
<DropdownMenu.Item>First option</DropdownMenu.Item>
<DropdownMenu.Item>Second option</DropdownMenu.Item>
</DropdownMenu>
);
Important Considerations:
shouldFitContainer prop, the strategy cannot be set to 'fixed'. In such
cases, the dropdown defaults to the 'absolute' strategy to ensure proper rendering within the
container.strategy prop provides additional flexibility, especially in complex layouts where precise
control over dropdown positioning is required. It allows the dropdown to adapt based on the
surrounding context or constraints, enhancing the component's versatility.5ceb889d493ab -
Fix issue with Async loading of Dropdown Menu Items3c4de48168ffe -
Update the import path of useId* from @atlaskit/ds-libfcf151627c8de -
Added interactionName to components in menu and dropdownmenu142645f92833a -
Fix a bug that caused the launch button to lose the ability to focus after closing a popup window
by pressing the Tab key that opened from a dropdown menu. This problem was reproduced only when
the platform_dst_popup-disable-focuslock feature flag was enabled.b72c2c7f9a2fd -
Support to close sibling dropdown menu under feature flag063ecc7968c68 -
We are testing an internal change to use an ID generator compatible with both React 16 and
React 18. If these changes are successful, it will be rolled out in a later release.#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.75d153a575b4d -
Accessibility changes. Add a new optional prop returnFocusRef for cases when we need to focus an
interactive element after closing DropdownMenu.9796cf77195b6 -
Adds a new optional UNSAFE_shouldDisableRouterLink prop to the DropdownItem component, which
when set to true, will opt out of using a router link and instead use a regular anchor element
when used alongside the href prop.8e9045b0b4ce2 -
Update DropdownMenu's default generic type for triggerRef from HTMLElement to any.223959ef57c80 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.7b4ccf810b526 -
Adds a new optional shouldFitContainer prop, which when set to true, will fit the dropdown
menu width to its parent's width.1e40876a2c40 -
Accessibility improvements. Fix incorrect role for title when prop title passed for
DropdownItemGroup, DropdownItemCheckboxGroup and DropdownItemRadioGroup.1e7e09d75d5c -
Support to close popup corrrectly when clicking iframe using layering under feature flag5d9e1dccacca -
[ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #73849635fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.085525725cb0d -
Migrated to the new button component06ed35f020fb -
Add support for React 18 in non-strict mode.ad0e069e2829 -
This removes the platform.design-system-team.disable-focus-lock-in-popup_7kb4d feature flag. The
dropdown menu can be closed by pressing Tab or Shift + Tab if shouldRenderToParent is true.427c2dd9e0d6 -
[ux] Update input border width from 2px to 1px with darker color to meet 3:1 color contrastb633dc3ea927 -
Fixes an issue with an incorrect dependency version (@atlaskit/ds-lib).ee7c6dd6b8b2 -
[ux] Accessibility changes. We are testing the ability to close the dropdown menu by pressing the
Tab key when shouldRenderToParent is true behind a feature flag. If this fix is successful it
will be available in a later release.8e66f751df96 -
Use feature flag to roll out border width update from 2px to 1pxb037e5451037 -
Update new button text color fallback for default theme (non-token) to match that of old button
current text color7e4f1a341224 -
[ux] Updated dropdown-menu trigger to consume the new button. The new default button trigger
(text + arrow icon) would be narrower than before. The fallback color on button trigger is now
darker when no theme is applied.776e5ba8fc41 -
Enable layering in popup and dropdown to support nested navigationd18ec4d7ce20 -
[ux] Tidy up of the platform.design-system-team.icon-button-spacing-fix_o1zc5 Platform Feature
Flag which applies a small adjustment to icon spacing for buttons using iconBefore and
iconAfter props. Small visual adjustment is to be expected — keep this in mind when reviewing
any VR tests breaking. The spacing around the icons will be reduced.e710d215f768 -
Add label prop to render aria-label on dropdown menu trigger.d100ca42f46 - Push
model consumption configuration done for these packagesb3c84e42159 - Fix loss
of autofocus when opening with Enter and Space keys.e0bc1e5b8bb - fix:
adds spread prop support back to DropdownMenu and sub-components after their removal in version
11.14.5. These spread props will be removed instead in a future major version.Warning: This version is deprecated due to breaking behavioural change from removal of spread props in 11.14.5. Please upgrade to version 12.1.2 or later
#41611
876d7943287 - Fix
keyboard arrow controls for dropdown item custom component.
Warning: This version is deprecated due to breaking behavioural change from removal of spread props in 11.14.5. Please upgrade to version 12.1.2 or later
#41586
ef0466f92d9 - We are
removing previously added feature flag and unsafe entry point usage of the new Button inside
DropdownMenu.
Warning: This version is deprecated due to breaking behavioural change from removal of spread props in 11.14.5. Please upgrade to version 12.1.2 or later
#41355
cd1c813da18 - Menu
items now have a secondary selected state (border or notch), this was previously feature flagged
for Atlassian experiences and is now available for everyone.
This change makes all menu items are now relatively positioned, if you had any child elements that leaned on this behaviour your experiences will now be broken!
For example the below code code previously the div would be positioned relatively to the menu
group element. Now, it is positioned relatively to the button item element.
<MenuGroup>
<ButtonItem>
<div style={{ position: 'absolute', top: '100%' }} />
</ButtonItem>
</MenuGroup>
As a path forward you should not be leaning on this behaviour. If you need a popup experience use
@atlaskit/dropdown-menu or @atlaskit/popup.
Warning: This version is deprecated due to breaking behavioural change from the removal of spread props. Please downgrade to 11.14.4, or upgrade to 12.1.2 or later
#41067
5a9ed67f8f5 - Expand
rest props for more explicit function data flow.
a54578d2ea9 - This
removes the feature flag for the shouldRenderToParent prop. The prop is available for use.9623c04c020 - [ux]
Adds context to loading state for assistive technologies.f355884a4aa - [ux]
Support to press escape key and only close the top layer4f211dbe626 - [ux] We
are adopting a new Button component behind a feature flag. This is necessary for the
implementation of the SplitButton component. If this adoption is successful, it will be available
in a later release.b66fdec7fd1 - Add a
new prop shouldRenderToParent to allow render content into a DOM node within the parent DOM
hierarchy instead of React portal.d420deeebe5 - Fix
checkbox and radio item color contrast issue under feature flag9e84eaacfbe - Nested
dropdown menus are now accessible using arrow key navigation.1af7a3c5ab9 - fix:
support to skip disabled elements when autoFocus is on3920dcfd848 - This
removes the feature flag made for upgrading the focus-trap dependency and keeps focus-trap at
it's original version.4b99836860e - Using
arrow keys to move between items will no longer cause scrolling when at the top/bottom of the
list.2e2ebbe71fc - Fix
keyboard arrow controls for dropdown item custom component.4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.a07c7d8af4f - Apply
box-sizing: border-box to menu wrapper when loading spinner is visible.6794b446742 - [ux] We
are testing a new selected state for radio and checkbox items under a feature flag. If successful
this will be released in a later version.296683f5adc - Update
DropdownItemCheckbox and DropdownItemRadio icon color and add a border to these icons to be
consistent within our design system.e7ea6832ad2 - Bans the
use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration
work. The change is internal only and should not introduce any changes for the component
consumers.d518f0e34b9 - [ux] We
are testing a selected indicator change to menu, dropdown-menu, and side-navigation packages
behind an internal feature flag. If successful this will be released in a later minor release.56507598609 - Skip
minor dependency bump2e01c9c74b5 - DUMMY
remove before merging to master; dupe adf-schema via adf-utils261420360ec - Upgrades
component types to support React 18.cfe48bb7ece - Internal
change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives.7d3e5393e87 - Enable
forwardRef on DropdownItem842bb999a85 - Internal
change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives.814e6ed4e14 - [ux]
Adds a new spacing prop on the DropdownMenu component to support information density.
<DropdownMenu spacing="compact" /><DropdownMenu spacing="cozy" />22b754d311f - Updates
usage of removed design token utilities.UNSAFE_util.transparent in favour of its replacement
utilities.UNSAFE.transparent18aeca8c199 - Internal
change to update token references. There is no expected behaviour or visual change.716af1d3387 - Bump
@atlaskit/heading from 1.0.0 to 1.0.1 to avoid resolving to poison dependency versionc9b09094bfe - Wrap
DropdownMenu > MenuWrapper setInitialFocusRef call in useEffect to resolve React console error6ae8910147b - [ux]
Allow users to navigate past disabled menu items with arrow keysab6ea02a97e - Align
internal implementation with current linting rules. There should be no change for consumers.625585b8db6 - Bug fix
to re-position the menu after change in loading state.bc989043572 - Internal
changes to apply spacing tokens. This should be a no-op change.7f7e4a0709b - Fixes
the types of the CustomTrigger to be generic rather than set as HTMLElement. This allows improved
type inference for custom triggers.00fc216bd94 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.61d8af6f398 - Adjusted
the fallback placements for dropdown-menu to reduce how frequently the menu jumps while scrolling01d80d395bc - pass
event to onOpenChange consistently8a5bdb3c844 -
Upgrading internal dependency (bind-event-listener) for improved internal types347fd703ce0 -
Internally shifting to using bind-event-listener for events added in effectsce9438bddd0 - Internal
TypeScript authoring improvement9a186cda60b - Adds
component prop to DropdownItem which allows overriding the item with a custom component.484bf3e9b12 - [ux]
DSP-4539 Update wrongly used tokens for radio/checkbox iconsdbf652b5183 - Fixes an
accessibility issue where menu items had the ARIA role of menuitem but were not contained by a
parent with the correct role. The MenuWrapper component now has role="menu".bb8a0f713e8 - Add
zIndex prop to pass custom z-index for the menu if it clashes with other components on the screen58884c2f6c1 - Internal
code change turning on a new linting rule.94886036118 - Internal
refactor to properly use render props to avoid unwanted re-mounts and improve test coverage19d72473dfb - Updates
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
visual changes19d72473dfb - Bump
dependency tiny-invariant to latest"c2dd770a743 - Add new
prop which controls is outside click should be bound using capture#15998
d65d8a545af - [ux] In
this version, we have significantly reduced the bundle size, improved the runtime performance and
simplified the API for dropdown menu. We've also removed deprecated dependencies, which bring
consistency to the spacing and padding of dropdown menu items, which may require updating VR
snapshots. We've also provided codemods to help you upgrade to the latest API.
To run the codemod: You first need to have the latest version installed
yarn upgrade @atlaskit/dropdown-menu@^11.0.0
Once upgraded, use @atlaskit/codemod-cli:
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/dropdown-menu@11.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 for more details on the codemod CLI.
8ec43d970dd - Removed
'aria-controls' and unused id's from the Dropdown componentbc6de0e2e19 - Internal
change to use declarative entrypoints instead of the hardcoded ones.79c23df6340 - Use
injected package name and version for analytics instead of version.json.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.50c2ca9269 - Export
WithToggleInteractionProps type to prevent it from being referenced via deep import path in
dependent declaration files2ac834240e - Undo
analytics-next file restructure to allow external ts definitions to continue working#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.
954cc87b62 - The readme
and package information has been updated to point to the new design system website.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/39534a8d5ae5d98 - Fix
analytics when dropdown menu gets closed. Now passing dropdown-menu analytics instead of droplist.54a9514fcf - Build and
supporting files will no longer be published to npm[patch]7a2540821c:
Change imports to comply with Atlassian conventions- Updated dependencies 3940bd71f1:
Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 167a55fd7a:
Updated dependencies 57c0487a02:
Updated dependencies a4acc95793:
Updated dependencies a4d063330a:
Updated dependencies fd41d77c29:
[major]9e87af4685:
@atlaskit/dropdown-menu has been converted to TypeScript to provide static typing. Flow types are no longer provided. No API or behavioral changes.
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[minor]0e2241e904:
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.
[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
[minor]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
[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]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]d905cbc0ac:
Adding a condition to check if the component are referenced in tests running in CI. It reduces the noise and help reading the CI log.
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]6fe990954c:
Adjusted the offset prop for Popper to not use the deprecated format
[patch]ee788e6434:
[major]7c17b35107:
[patch]6fd20256f3:
[patch]dc114c4ce6:
[major]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]1fb2c2a:
[patch][fe943bb](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/fe943bb" d):