Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@atlaskit/dropdown-menu

atlassian178.6kApache-2.016.3.14TypeScript support: included

A dropdown menu displays a list of actions or options to a user.

atlaskit, react, ui

readme

Dropdown menu

A dropdown menu displays a list of actions or options to a user.

Installation

yarn add @atlaskit/dropdown-menu

Usage

Detailed docs and example usage can be found here.

changelog

@atlaskit/dropdown-menu

16.3.14

Patch Changes

  • Updated dependencies

16.3.13

Patch Changes

  • 39e543109ec09 - add type info to forwardRef components
  • Updated dependencies

16.3.12

Patch Changes

  • 6d3595e270d09 - Minor fixes to Tooltip's component prop and DropdownMenu types to be more compatible with React 18.3.1
  • Updated dependencies

16.3.11

Patch Changes

  • Updated dependencies

16.3.10

Patch Changes

  • Updated dependencies

16.3.9

Patch Changes

  • Updated dependencies

16.3.8

Patch Changes

  • cdb2b90aee75b - Fixes accessibility violation of submenus not being either a role='group' or a role='menuitem' when opened

16.3.7

Patch Changes

  • de6195f7484ce - Update prop descriptions to reduce confusion
  • Updated dependencies

16.3.6

Patch Changes

16.3.5

Patch Changes

  • Updated dependencies

16.3.4

Patch Changes

  • Updated dependencies

16.3.3

Patch Changes

  • Updated dependencies

16.3.2

Patch Changes

  • Updated dependencies

16.3.1

Patch Changes

  • Updated dependencies

16.3.0

Minor Changes

  • #187451 c40feaf938dc1 - This cleans up the feature flag references for focus improvements when interactive elements are clicked outside of the menu, making them fully available to all people.

Patch Changes

  • Updated dependencies

16.2.1

Patch Changes

16.2.0

Minor Changes

  • #187681 64c917433bf89 - Cleans up platform_dst_dropdown_radio_default_selected_fix feature gate. Default selected items for radio group dropdowns are now correctly persisted.

16.1.4

Patch Changes

  • Updated dependencies

16.1.3

Patch Changes

  • Updated dependencies

16.1.2

Patch Changes

16.1.1

Patch Changes

  • Updated dependencies

16.1.0

Minor Changes

  • #161732 a3b57a07e1158 - Fixes persistence of radio item defaultSelected state. This change is behind the platform_dst_dropdown_radio_default_selected_fix feature gate.

16.0.7

Patch Changes

  • Updated dependencies

16.0.6

Patch Changes

16.0.5

Patch Changes

16.0.4

Patch Changes

  • Updated dependencies

16.0.3

Patch Changes

  • Updated dependencies

16.0.2

Patch Changes

  • #164146 cb9fe0058ed87 - Updates package.json direct dependencies to align with actual usage.
  • Updated dependencies

16.0.1

Patch Changes

16.0.0

Major Changes

  • #158490 71137cb330a17 - Migrated from @emotion/react to @compiled/react in order to improve performance, align with the rest of the Atlaskit techstack, and support React 18 Streaming SSR.

Patch Changes

  • Updated dependencies

15.2.1

Patch Changes

  • Updated dependencies

15.2.0

Minor Changes

  • #157071 a149a0b1559ec - We are testing the migration to the ADS Link component behind a feature flag. If this fix is successful it will be available in a later release.

Patch Changes

  • Updated dependencies

15.1.0

Minor Changes

Patch Changes

  • Updated dependencies

15.0.1

Patch Changes

  • Updated dependencies

15.0.0

Major Changes

Patch Changes

  • Updated dependencies

14.2.0

Minor Changes

  • #154745 7618d9837e247 - Tidy up design-system-closed-all-when-click-outside and sibling-dropdown-close-issue to provide better keyboard navigation.

Patch Changes

  • Updated dependencies

14.1.4

Patch Changes

  • Updated dependencies

14.1.3

Patch Changes

  • #148964 a07dc3da50fa9 - "We are testing keyboard focus improvement behind a feature flag. This change does not force focus to return to the Dropdown trigger if another interactive element is clicked outside of the menu. If this fix is successful it will be available in a later release."
  • Updated dependencies

14.1.2

Patch Changes

  • Updated dependencies

14.1.1

Patch Changes

  • Updated dependencies

14.1.0

Minor Changes

Patch Changes

  • Updated dependencies

14.0.3

Patch Changes

14.0.2

Patch Changes

  • Updated dependencies

14.0.1

Patch Changes

  • Updated dependencies

14.0.0

Major Changes

  • #134856 948a950e395ad - The onOpenChange prop type has been updated, to make the event parameter nullable. This property is for the corresponding event that led to the callback being called.

    This is to support programatically closing the dropdown menu.

    We are also adding the native Event type in the type union, to better align with the underlying Popup component that DropdownMenu is built on top of.

    Previously, the type of onOpenChange was:

    onOpenChange?: (args: {
  isOpen: boolean;
  event: React.MouseEvent | React.KeyboardEvent;
}) => void;

    It is now:

    onOpenChange?: (args: {
  isOpen: boolean;
  event: Event | React.MouseEvent | React.KeyboardEvent | null;
}) => void;

    When the dropdown is closed programatically, the event parameter will be null.

Patch Changes

  • Updated dependencies

13.1.0

Minor Changes

  • #134128 8255a77865aac - Added support for an optional role attribute on dropdown items to allow customization of ARIA roles. Defaults to menuitem.

13.0.6

Patch Changes

  • Updated dependencies

13.0.5

Patch Changes

  • Updated dependencies

13.0.4

Patch Changes

  • Updated dependencies

13.0.3

Patch Changes

13.0.2

Patch Changes

13.0.1

Patch Changes

  • Updated dependencies

13.0.0

Major Changes

Patch Changes

  • Updated dependencies

12.26.5

Patch Changes

12.26.4

Patch Changes

  • Updated dependencies

12.26.3

Patch Changes

12.26.2

Patch Changes

  • Updated dependencies

12.26.1

Patch Changes

  • Updated dependencies

12.26.0

Minor Changes

Patch Changes

  • Updated dependencies

12.25.2

Patch Changes

12.25.1

Patch Changes

  • Updated dependencies

12.25.0

Minor Changes

  • #105222 f62a0d9ada12e - 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.

Patch Changes

  • Updated dependencies

12.24.1

Patch Changes

  • Updated dependencies

12.24.0

Minor Changes

  • #101351 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.

12.23.4

Patch Changes

  • #181817 6876e5688ed14 - Dropdown open in iframe should be closed when clicking outside of the iframe

12.23.3

Patch Changes

  • #179984 08accf7fa1041 - Fix keyboard navigation not working when using dropdown menu item as the nested trigger

12.23.2

Patch Changes

  • Updated dependencies

12.23.1

Patch Changes

  • Updated dependencies

12.23.0

Minor Changes

Patch Changes

  • Updated dependencies

12.22.3

Patch Changes

  • #166087 3ab7d7da348ab - Adds side-effect config to support Compiled css extraction in third-party apps

12.22.2

Patch Changes

  • Updated dependencies

12.22.1

Patch Changes

12.22.0

Minor Changes

  • cfef14b7ec2bc - 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.

Patch Changes

  • Updated dependencies

12.21.1

Patch Changes

12.21.0

Minor Changes

Patch Changes

  • Updated dependencies

12.20.4

Patch Changes

  • Updated dependencies

12.20.3

Patch Changes

  • Updated dependencies

12.20.2

Patch Changes

12.20.1

Patch Changes

  • Updated dependencies

12.20.0

Minor Changes

  • #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:

    • When using the 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.
    • The 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.
    • This feature addresses the need for more adaptable positioning strategies, allowing for better integration into varied UI designs and improving user experience by maintaining dropdown visibility and accessibility.

12.19.0

Minor Changes

12.18.7

Patch Changes

  • Updated dependencies

12.18.6

Patch Changes

  • 5ceb889d493ab - Fix issue with Async loading of Dropdown Menu Items
  • #148281 3c4de48168ffe - Update the import path of useId* from @atlaskit/ds-lib
  • Updated dependencies

12.18.5

Patch Changes

12.18.4

Patch Changes

  • Updated dependencies

12.18.3

Patch Changes

  • Updated dependencies

12.18.2

Patch Changes

  • #139091 142645f92833a - 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.

12.18.1

Patch Changes

  • #138585 b72c2c7f9a2fd - Support to close sibling dropdown menu under feature flag
  • Updated dependencies

12.18.0

Minor Changes

12.17.3

Patch Changes

  • #133182 063ecc7968c68 - 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.

12.17.2

Patch Changes

  • Updated dependencies

12.17.1

Patch Changes

  • Updated dependencies

12.17.0

Minor Changes

  • #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.3as well as to have a consistent peer dependency range forreactandreact-domfor/platform` packages.

Patch Changes

  • Updated dependencies

12.16.1

Patch Changes

  • Updated dependencies

12.16.0

Minor Changes

  • 8b8090800a35d - Bump peer dependency for react-dom to include version 17 and 18.

Patch Changes

  • Updated dependencies

12.15.0

Minor Changes

  • #126129 75d153a575b4d - Accessibility changes. Add a new optional prop returnFocusRef for cases when we need to focus an interactive element after closing DropdownMenu.

Patch Changes

  • Updated dependencies

12.14.2

Patch Changes

  • Updated dependencies

12.14.1

Patch Changes

  • Updated dependencies

12.14.0

Minor Changes

  • #116502 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.

12.13.4

Patch Changes

  • Updated dependencies

12.13.3

Patch Changes

  • #114987 8e9045b0b4ce2 - Update DropdownMenu's default generic type for triggerRef from HTMLElement to any.
  • Updated dependencies

12.13.2

Patch Changes

  • Updated dependencies

12.13.1

Patch Changes

  • Updated dependencies

12.13.0

Minor Changes

  • #111878 223959ef57c80 - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

Patch Changes

  • Updated dependencies

12.12.0

Minor Changes

  • #111282 7b4ccf810b526 - Adds a new optional shouldFitContainer prop, which when set to true, will fit the dropdown menu width to its parent's width.

12.11.1

Patch Changes

  • Updated dependencies

12.11.0

Minor Changes

  • #99829 1e40876a2c40 - Accessibility improvements. Fix incorrect role for title when prop title passed for DropdownItemGroup, DropdownItemCheckboxGroup and DropdownItemRadioGroup.

Patch Changes

  • Updated dependencies

12.10.2

Patch Changes

  • #99952 1e7e09d75d5c - Support to close popup corrrectly when clicking iframe using layering under feature flag
  • Updated dependencies

12.10.1

Patch Changes

  • Updated dependencies

12.10.0

Minor Changes

  • #94675 5d9e1dccacca - [ux] Update input border color token to meet 3:1 color contrast ratioLight theme: color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496

Patch Changes

  • Updated dependencies

12.9.3

Patch Changes

  • Updated dependencies

12.9.2

Patch Changes

12.9.1

Patch Changes

12.9.0

Minor Changes

Patch Changes

  • Updated dependencies

12.8.5

Patch Changes

  • #84970 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.

12.8.4

Patch Changes

12.8.3

Patch Changes

  • Updated dependencies

12.8.2

Patch Changes

12.8.1

Patch Changes

12.8.0

Minor Changes

  • #80805 427c2dd9e0d6 - [ux] Update input border width from 2px to 1px with darker color to meet 3:1 color contrast

Patch Changes

  • Updated dependencies

12.7.0

Minor Changes

  • #78803 b633dc3ea927 - Fixes an issue with an incorrect dependency version (@atlaskit/ds-lib).

12.6.1

Patch Changes

  • Updated dependencies

12.6.0

Minor Changes

  • #70573 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.

Patch Changes

  • Updated dependencies

12.5.3

Patch Changes

  • Updated dependencies

12.5.2

Patch Changes

12.5.1

Patch Changes

  • #72130 b037e5451037 - Update new button text color fallback for default theme (non-token) to match that of old button current text color
  • Updated dependencies

12.5.0

Minor Changes

  • #65862 7e4f1a341224 - [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.

12.4.0

Minor Changes

  • #70664 776e5ba8fc41 - Enable layering in popup and dropdown to support nested navigation

Patch Changes

  • Updated dependencies

12.3.0

Minor Changes

  • #70040 d18ec4d7ce20 - [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.

Patch Changes

  • Updated dependencies

12.2.0

Minor Changes

Patch Changes

  • Updated dependencies

12.1.10

Patch Changes

  • Updated dependencies

12.1.9

Patch Changes

12.1.8

Patch Changes

12.1.7

Patch Changes

  • Updated dependencies

12.1.6

Patch Changes

  • Updated dependencies

12.1.5

Patch Changes

12.1.4

Patch Changes

12.1.3

Patch Changes

12.1.2

Patch Changes

  • #41673 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.

12.1.1

Patch Changes

  • 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.

12.1.0

Minor Changes

  • 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.

12.0.0

Major Changes

  • 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.

Patch Changes

  • Updated dependencies

11.14.5

Patch Changes

  • 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.

11.14.4

Patch Changes

11.14.3

Patch Changes

  • #40515 a54578d2ea9 - This removes the feature flag for the shouldRenderToParent prop. The prop is available for use.

11.14.2

Patch Changes

  • #40393 9623c04c020 - [ux] Adds context to loading state for assistive technologies.
  • Updated dependencies

11.14.1

Patch Changes

11.14.0

Minor Changes

Patch Changes

  • Updated dependencies

11.13.0

Minor Changes

  • #39579 4f211dbe626 - [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.

11.12.0

Minor Changes

  • #39236 b66fdec7fd1 - Add a new prop shouldRenderToParent to allow render content into a DOM node within the parent DOM hierarchy instead of React portal.

11.11.6

Patch Changes

  • #38177 d420deeebe5 - Fix checkbox and radio item color contrast issue under feature flag

11.11.5

Patch Changes

  • #37765 9e84eaacfbe - Nested dropdown menus are now accessible using arrow key navigation.

11.11.4

Patch Changes

11.11.3

Patch Changes

11.11.2

Patch Changes

11.11.1

Patch Changes

11.11.0

Minor Changes

  • #34797 3920dcfd848 - This removes the feature flag made for upgrading the focus-trap dependency and keeps focus-trap at it's original version.

Patch Changes

  • Updated dependencies

11.10.7

Patch Changes

  • #37265 4b99836860e - Using arrow keys to move between items will no longer cause scrolling when at the top/bottom of the list.

11.10.6

Patch Changes

  • #36646 2e2ebbe71fc - Fix keyboard arrow controls for dropdown item custom component.

11.10.5

Patch Changes

  • #36754 4ae083a7e66 - Use @af/accessibility-testing for default jest-axe config and jest-axe import in accessibility testing.

11.10.4

Patch Changes

  • Updated dependencies

11.10.3

Patch Changes

  • Updated dependencies

11.10.2

Patch Changes

  • Updated dependencies

11.10.1

Patch Changes

  • #35947 a07c7d8af4f - Apply box-sizing: border-box to menu wrapper when loading spinner is visible.

11.10.0

Minor Changes

  • #35038 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.

Patch Changes

  • Updated dependencies

11.9.5

Patch Changes

11.9.4

Patch Changes

  • #34831 296683f5adc - Update DropdownItemCheckbox and DropdownItemRadio icon color and add a border to these icons to be consistent within our design system.

11.9.3

Patch Changes

11.9.2

Patch Changes

  • #33652 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.

11.9.1

Patch Changes

11.9.0

Minor Changes

  • #33349 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.

Patch Changes

  • Updated dependencies

11.8.1

Patch Changes

11.8.0

Minor Changes

Patch Changes

  • Updated dependencies

11.7.3

Patch Changes

  • #32424 2e01c9c74b5 - DUMMY remove before merging to master; dupe adf-schema via adf-utils

11.7.2

Patch Changes

  • #31206 261420360ec - Upgrades component types to support React 18.
  • Updated dependencies

11.7.1

Patch Changes

  • #31242 cfe48bb7ece - Internal change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives.

11.7.0

Minor Changes

Patch Changes

  • Updated dependencies

11.6.1

Patch Changes

  • #31041 842bb999a85 - Internal change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives.

11.6.0

Minor Changes

  • #30362 814e6ed4e14 - [ux] Adds a new spacing prop on the DropdownMenu component to support information density.
    • New usage <DropdownMenu spacing="compact" />
    • The current default (can also be omitted) <DropdownMenu spacing="cozy" />

Patch Changes

  • Updated dependencies

11.5.12

Patch Changes

  • #27634 22b754d311f - Updates usage of removed design token utilities.UNSAFE_util.transparent in favour of its replacement utilities.UNSAFE.transparent
  • Updated dependencies

11.5.11

Patch Changes

  • #29390 18aeca8c199 - Internal change to update token references. There is no expected behaviour or visual change.

11.5.10

Patch Changes

  • #28159 716af1d3387 - Bump @atlaskit/heading from 1.0.0 to 1.0.1 to avoid resolving to poison dependency version

11.5.9

Patch Changes

  • #28090 c9b09094bfe - Wrap DropdownMenu > MenuWrapper setInitialFocusRef call in useEffect to resolve React console error

11.5.8

Patch Changes

  • Updated dependencies

11.5.7

Patch Changes

  • Updated dependencies

11.5.6

Patch Changes

  • #27898 6ae8910147b - [ux] Allow users to navigate past disabled menu items with arrow keys

11.5.5

Patch Changes

  • Updated dependencies

11.5.4

Patch Changes

  • #26958 ab6ea02a97e - Align internal implementation with current linting rules. There should be no change for consumers.

11.5.4

Patch Changes

11.5.3

Patch Changes

  • #25860 625585b8db6 - Bug fix to re-position the menu after change in loading state.
  • Updated dependencies

11.5.2

Patch Changes

  • #26488 bc989043572 - Internal changes to apply spacing tokens. This should be a no-op change.

11.5.1

Patch Changes

11.5.0

Minor Changes

  • #24733 7f7e4a0709b - Fixes the types of the CustomTrigger to be generic rather than set as HTMLElement. This allows improved type inference for custom triggers.

11.4.0

Minor Changes

  • #24004 00fc216bd94 - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

Patch Changes

  • Updated dependencies

11.3.2

Patch Changes

11.3.1

Patch Changes

  • #24292 61d8af6f398 - Adjusted the fallback placements for dropdown-menu to reduce how frequently the menu jumps while scrolling

11.3.0

Minor Changes

Patch Changes

  • Updated dependencies

11.2.2

Patch Changes

  • #22614 8a5bdb3c844 - Upgrading internal dependency (bind-event-listener) for improved internal types

11.2.1

Patch Changes

  • #22029 347fd703ce0 - Internally shifting to using bind-event-listener for events added in effects
  • ce9438bddd0 - Internal TypeScript authoring improvement
  • Updated dependencies

11.2.0

Minor Changes

  • #21570 9a186cda60b - Adds component prop to DropdownItem which allows overriding the item with a custom component.

Patch Changes

  • 484bf3e9b12 - [ux] DSP-4539 Update wrongly used tokens for radio/checkbox icons
  • Updated dependencies

11.1.5

Patch Changes

  • Updated dependencies

11.1.4

Patch Changes

11.1.3

Patch Changes

  • Updated dependencies

11.1.2

Patch Changes

  • Updated dependencies

11.1.1

Patch Changes

  • #19019 dbf652b5183 - 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".
  • Updated dependencies

11.1.0

Minor Changes

  • #18526 bb8a0f713e8 - Add zIndex prop to pass custom z-index for the menu if it clashes with other components on the screen

Patch Changes

  • #16752 58884c2f6c1 - 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 coverage
  • Updated dependencies

11.0.3

Patch Changes

  • 19d72473dfb - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
  • 19d72473dfb - Bump dependency tiny-invariant to latest"
  • Updated dependencies

11.0.2

Patch Changes

  • Updated dependencies

11.0.1

Patch Changes

  • #16960 c2dd770a743 - Add new prop which controls is outside click should be bound using capture
  • Updated dependencies

11.0.0

Major Changes

  • #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.

    Running the codemod cli

    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.

    Behaviour changes

    • Portaling – The dropdown menu is now rendered in a React Portal and is appended at the bottom of the <body>. In most cases, this shouldn't make much of a difference. But if you have any tests that assert on DOM/React tree like snapshot tests, those will need to be updated.

    • Focus lock – As the menu is not rendered next to the trigger, the focus is trapped within the menu when the menu is open.

    • Layering – Another sideeffect of poratling the menu is that it is now part of the global stacking context, rather than a local stacking context. We've provided a new zIndex prop incase the layering is off.

    • Title and description wrapping behaviour – Menu items which have a long title and description now wrap into multiple line by default, instead of cutting it off and showing ellipsis. You can override the default behaviour by setting shouldTitleWrap and shouldDescriptionWrap to false.

    Visual changes

    • Menu item padding – Dropdown menu items have 16px more padding horizontally.
    • Removed elemAfter in group title – Icon after the group title has been removed.

    API Changes

    Dropdown menu items no longer @atlaskit/item as the underlying component, they use @atlaskit/menu instead. This mean that some of the props that used to be spread over an Item are no longer supported. In addition to that, the following API changes have been made:

    • shouldFitContainer – Deprecated. This prop has been deprecated and the codemod will remove it.
    • shouldAllowMultiline – This prop has been split up into two: shouldTitleWrap and shouldDescriptionWrap. The codemod replaces its occurance with the two new ones.
    • onItemActivated – The prop has been deprecated and the codemod will remove it. Use onClick instead.
    • onPositionEnd – The prop has been deprecated and the codemod will remove it. Use onOpenChange instead.
    • boundariesElement – The prop has been deprecated and the codemod will remove it. It is not relevant anymore as the Menu is portaled.
    • isMenuFixed – The prop has been deprecated and the codemod will remove it. It is not relevant anymore as the Menu is portaled.
    • position – The placement values are now consistent with Popup. They have a 1:1 mapping with the old values. The codemod maps the old values to the new.
    • zIndex – The zIndex prop will need to be applied as an escape hatch in case the menu runs into any layering clashes with other elements on the screen.
    • items – This prop has been deprecated because it is poor bad for performance. Pass MenuItems as children instead. The codemod removes the item prop. You’ll need to manually change it to children.
    • trigger, triggerProps and triggerType – This API has been simplified the most. triggerType and triggerProps have been deprecated. trigger now accepts either a string or custom react element. If a string is passed, it is rendered as an @atlaskit/button. If a react component is passed, it is used as a trigger. Make sure to spread the provided props onto the component, they are used to position the component and provide accessibility attributes. The codemod handles the simplest case where the the triggerType is a string. For every other case, the codemod leaves a comment. Look at the section below on how it can be fixed in most cases.
    • isCompact on MenuItem – The prop has been deprecated and the codemod will remove it.
    • isHidden on MenuItem – The prop has been deprecated and the codemod will remove it.
    • autoFocus on MenuItem – The prop has been deprecated and the codemod will remove it. Focus is directly applied to the first menu item.

    Entrypoint changes

    • DropdownMenuStateless – DropdownMenuStateless has been deprecated. The default export DropdownMenu handles both stateless and stateful logic. The API for DropdownMenuStateless has been retained and works as expected with DropdownMenu.The codemod converts the named import into a default import.
    • DropdownItemGroupCheckbox – Renamed to DropdownItemCheckboxGroup. Codemod updates the import declaration.
    • DropdownItemGroupRadio – Renamed to DropdownItemRadioGroup. Codemod updates the import declaration.

    Updating the trigger prop

    Before

    const DropdownMenuCustomTriggerButtonExample = () => {
  return (
    <DropdownMenu
      triggerButtonProps={{ iconBefore: <MoreIcon label="more" /> }}
      triggerType="button"
      trigger="Click to open"
    >
      <DropdownItemGroup>
        <DropdownItem>Edit</DropdownItem>
        <DropdownItem>Share</DropdownItem>
        <DropdownItem>Move</DropdownItem>
        <DropdownItem>Clone</DropdownItem>
        <DropdownItem>Delete</DropdownItem>
        <DropdownItem>Report</DropdownItem>
      </DropdownItemGroup>
    </DropdownMenu>
  );
};

    After

    const DropdownMenuCustomTriggerButtonExample = () => {
  return (
    <DropdownMenu
      trigger={({ triggerRef, ...props }) => (
        // 1. use `@atlaskit/button` or any other custom component
        <Button
          // 2. Spread the provided props
          {...props}
          // 3. Apply `triggerButtonProps` directly to button
          iconBefore={<MoreIcon label="more" />}
          // 4. Make sure to pass the ref
          ref={triggerRef}
        >
          // 5. Move trigger label to be children
          Click to open
        </Button>
      )}
    >
      <DropdownItemGroup>
        <DropdownItem>Edit</DropdownItem>
        <DropdownItem>Share</DropdownItem>
        <DropdownItem>Move</DropdownItem>
        <DropdownItem>Clone</DropdownItem>
        <DropdownItem>Delete</DropdownItem>
        <DropdownItem>Report</DropdownItem>
      </DropdownItemGroup>
    </DropdownMenu>
  );
};

Minor Changes

  • 36322cbce4d - Export CustomTriggerProps type from dropdown-menu

Patch Changes

  • 7df1c79ae46 - Enables DS linting rules and updates the code to adhere to the new conventions
  • bc17a568ae8 - Update types to include rel attribute
  • e3a3d13a0b8 - Added a performance test for use with storybook-addon-performance.
  • Updated dependencies

10.1.9

Patch Changes

  • Updated dependencies

10.1.8

Patch Changes

  • Updated dependencies

10.1.7

Patch Changes

10.1.6

Patch Changes

10.1.5

Patch Changes

  • #10230 8ec43d970dd - Removed 'aria-controls' and unused id's from the Dropdown component
  • Updated dependencies

10.1.4

Patch Changes

  • #9510 bc6de0e2e19 - Internal change to use declarative entrypoints instead of the hardcoded ones.

10.1.3

Patch Changes

  • #8644 79c23df6340 - Use injected package name and version for analytics instead of version.json.
  • Updated dependencies

10.1.2

Patch Changes

10.1.1

Patch Changes

  • #5497 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.

10.1.0

Minor Changes

  • #5344 50c2ca9269 - Export WithToggleInteractionProps type to prevent it from being referenced via deep import path in dependent declaration files

Patch Changes

  • Updated dependencies

10.0.6

Patch Changes

  • #5164 2ac834240e - Undo analytics-next file restructure to allow external ts definitions to continue working

10.0.5

Patch Changes

  • Updated dependencies

10.0.4

Patch Changes

10.0.3

Patch Changes

  • #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.

10.0.2

Patch Changes

  • #3293 954cc87b62 - The readme and package information has been updated to point to the new design system website.

10.0.1

Patch Changes

10.0.0

Major Changes

Patch Changes

  • Updated dependencies

9.0.6

Patch Changes

  • #2763 a8d5ae5d98 - Fix analytics when dropdown menu gets closed. Now passing dropdown-menu analytics instead of droplist.

9.0.5

Patch Changes

  • #2866 54a9514fcf - Build and supporting files will no longer be published to npm

9.0.4

Patch Changes

  • Updated dependencies

9.0.3

Patch Changes

9.0.2

Patch Changes

9.0.1

Patch Changes

9.0.0

Major Changes

  • [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 Changes

8.2.4

Patch Changes

8.2.3

Patch Changes

8.2.2

Patch Changes

8.2.1

Patch Changes

8.2.0

Minor Changes

  • [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.

8.1.4

Patch Changes

  • [patch]35d2229b2a:

    Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

8.1.3

8.1.2

Patch Changes

  • [patch]a2d0043716:

    Updated version of analytics-next to fix potential incompatibilities with TS 3.6

8.1.1

8.1.0

Minor Changes

8.0.17

Patch 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

8.0.16

Patch Changes

8.0.15

Patch Changes

  • [patch]708028db86:

    Change all the imports to theme in Core to use multi entry points

8.0.14

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

8.0.13

8.0.12

Patch Changes

  • [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.

8.0.11

Patch Changes

  • [patch]9f8ab1084b:

    Consume analytics-next ts type definitions as an ambient declaration.

8.0.10

Patch Changes

  • [patch]bbff8a7d87:

    Fixes bug, missing version.json file

8.0.9

8.0.8

8.0.7

Patch Changes

  • [patch]6fe990954c:

    Adjusted the offset prop for Popper to not use the deprecated format

8.0.6

Patch Changes

  • [patch]4615439434:

    index.ts will now be ignored when publishing to npm

8.0.5

8.0.4

8.0.3

8.0.2

8.0.1

  • [patch]ee788e6434:

    • Fix analytics for the toggle dropdownMenu event

8.0.0

  • [major]7c17b35107:

    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

7.0.7

7.0.6

7.0.5

  • [patch]6fd20256f3:

    • Add positionFixed property to Popper

7.0.4

7.0.3

7.0.2

  • [patch]dc114c4ce6:

    • Internal changes only. DropdownMenu is now compatible with SSR.

7.0.1

7.0.0

  • [major]76299208e6:

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    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.

6.1.26

6.1.25

6.1.24

6.1.23

6.1.22

6.1.21

  • [patch]1fb2c2a:

    • Fixed issue where tooltips and modals would initially render in the wrong location

6.1.20

6.1.19

  • [patch] Adds missing implicit @babel/runtime dependency b71751b

6.1.18

  • [patch] Fix the dropdown menu height exceeding viewport height when appearance prop is set to ‘tall’ 0deec63

6.1.17

6.1.16

  • [patch] Fixing dropdown-menu analytics c4098d0

6.1.15

6.1.14

6.1.13

6.1.12

  • [patch] Adds sideEffects: false to allow proper tree shaking b5d6d04

6.1.11

  • [patch] Fix initial position glitch when opening dropdown menu d79e361

6.1.9

  • [patch] Fix dropdown menu calls onOpenChange unnecessarily 2868a72
  • [patch] Updated dependencies 2868a72

6.1.8

6.1.7

6.1.6

  • [patch] Fix scroll to top of container issue when menu is opened via keydown 0a09918
  • [patch] Updated dependencies 0a09918

6.1.5

6.1.4

6.1.3

6.1.2

6.1.1

6.1.0

6.0.0

5.2.3

5.2.2

5.2.1

5.2.0

  • [minor] Add optional onPositioned prop to inform when the menu has been positioned by the underlying Layer component. 95a4592
  • [minor] Updated dependencies 95a4592

5.1.0

5.0.4

5.0.3

5.0.2

5.0.0

4.1.1

4.1.0

  • [minor] Add isMenuFixed prop to force menu to render with position fixed to allow it to break out of non-visible overflow containers at the cost of detachment from the trigger on scroll. e710cfa
  • [none] Updated dependencies e710cfa

4.0.5

4.0.4

4.0.3

4.0.1

  • [patch] Fix clipping of dropdown item content due to line height issues a0392ec

4.0.0

  • [major] Bump to React 16.3. 4251858

3.12.3

  • [patch] Update flow typing bef13c9

3.12.2

  • [patch] Makes packages Flow types compatible with version 0.67 25daac0

3.12.1

  • [patch] Re-releasing due to potentially broken babel release 9ed0bba

3.12.0

  • [minor] Update styled-components dependency to support versions 1.4.6 - 3 ceccf30

3.11.10

3.11.8

  • [patch] Packages Flow types for elements components 3111e74

3.11.7

  • [patch] added logic to close dropdown menu when tabbing out of the component 8279a46

3.11.6

  • [patch] updated item dependency version 23771b9

3.11.5

  • [patch] migrate from ak to mk-2 34a9cbb

3.11.4 (2017-11-30)

  • bug fix; fix dropdown menu opening on disabled button click (issues closed: ak-3644) (4d8c35d)

3.11.3 (2017-11-23)

  • bug fix; update checkbox/radio dropdown items to work with default item spacing bug fix (7ac0582)

3.11.2 (2017-11-16)

  • bug fix; bumping internal dependencies to latest major version (7b22368)

3.11.1 (2017-11-02)

  • bug fix; added missing dependencies (issues closed: ak-3782) (4dbc3ef)

3.11.0 (2017-10-27)

  • feature; use shared HOC from item (f966d9c)

3.10.5 (2017-10-26)

  • bug fix; fix to rebuild stories (793b2a7)

3.10.4 (2017-10-22)

  • bug fix; update dependencies for react-16 (077d1ad)

3.10.3 (2017-10-06)

  • bug fix; replace React.PropTypes imports with prop-types (8c17947)

3.10.2 (2017-09-21)

  • bug fix; update item dependency (issues closed: ak-3418) (4f64804)

3.10.1 (2017-09-06)

  • bug fix; Dropdown menu now closes when a non-link item is clicked (issues closed: ak-3288) (3bdf62d)

3.10.0 (2017-09-01)

  • feature; exposing isOpen and defaultOpen from dropdown (f89ac1c)

3.9.0 (2017-08-31)

  • bug fix; dropdown-menu depenencies bumped to latest (issues closed: ak-3392) (faea6d3)
  • feature; adding the ability to pass a boundariesElement to the Layer component (issues closed: ak-3416) (f6a215e)

3.8.0 (2017-08-25)

  • feature; added defaultSelected and isSelected props for DropdownItemRadio and DropdownItemCheckbox (issues closed: ak-3357) (00080f1)

3.7.3 (2017-08-24)

  • bug fix; dropdownItemRadio and DropdownItemCheckbox now work when custom onClick handler is s (issues closed: ak-3358) (16bee1b)

3.7.2 (2017-08-22)

  • bug fix; dropdownItem and DropdownItemGroup now get correct a11y role (issues closed: ak-3325) (2dbfe85)
  • bug fix; dropdown now only focuses on first item when opened via keyboard (issues closed: ak-3311) (4381e96)

3.7.1 (2017-08-21)

  • bug fix; fix PropTypes warning (040d579)

3.7.0 (2017-08-11)

  • bug fix; fix the theme-dependency (db90333)
  • feature; implement darkmode for droplist (35f9281)

3.6.0 (2017-08-11)

  • feature; implement darkmode for droplist (35f9281)

3.5.1 (2017-08-10)

  • bug fix; handle missing context in dropdown items gracefully (issues closed: ak-2590) (5a36eea)

3.4.2 (2017-07-27)

  • fix; rename jsnext:main to jsnext:experimental:main temporarily (c7508e0)
  • feature; convert dropdown-menu and droplist to declarative API (f6e0292)

3.4.1 (2017-07-25)

  • fix; use class transform in loose mode in babel to improve load performance in apps (fde719a)

3.1.0 (2017-07-17)

  • fix; rerelease, failed prepublish scripts (5fd82f8)
  • feature; added ES module builds to dist and add jsnext:main to most ADG packages (ea76507)

3.0.2 (2017-07-17)

  • fix; replace "*" with last version of tooltip "1.2.0" (89ba989)

3.0.1 (2017-06-14)

  • fix; update internal components to latest dropdown-menu (ad63284)

2.0.0 (2017-05-30)

  • refactored to meet new component conventions (64510d9)
  • removed TypeScript (d78988e)
  • breaking; Public API change: named export "StatelessDropdownMenu" is now "DropdownMenuStateless"
  • breaking; removed TypeScript ISSUES CLOSED: AK-2384

1.10.1 (2017-05-26)

  • fix; add missing prop types to dropdown-menu (79d9570)

1.10.0 (2017-05-26)

  • fix; add prop-types as a dependency to avoid React 15.x warnings (92598eb)
  • feature; add isLoading to DropdownMenu and StatelessMenu (88326a1)

1.9.0 (2017-05-24)

  • feature; dropdown-menu onItemActivated callback to accept event arg and update unit tests (2ebec38)

1.8.0 (2017-05-23)

  • feature; support setting elemAfter on DropdownMenu's groups (7471f2d)

1.7.0 (2017-05-10)

  • feature; add support for tooltips. (545cd7e)

1.6.0 (2017-05-10)

  • feature; bumping icons in dropdown-menu (b29bcdd)

1.5.0 (2017-05-02)

  • feature; bump droplist version + shouldAllowMultilineItems property (6990b4e)

1.4.0 (2017-04-20)

  • fix; upgrade droplist dependency version (0dd084d)
  • feature; removed explicit style! imports, set style-loader in webpack config (891fc3c)
  • temporarily revert changes (8d22c2d)

1.2.0 (2017-04-18)

  • feature; updated avatar dependency versions for comment, dropdown-menu, droplist, and page (e4d2ae7)

1.1.13 (2017-04-13)

  • fix; dropdown remove max-width limit in fit container mode (308a5a3)
  • fix; update dropdown menu readme story with new readme component (2e29f3b)
  • feature; add shouldFitContainer option to dropdown-menu (26dd7ec)

1.1.11 (2017-03-23)

  • fix; Empty commit to release the component (49c08ee)

1.1.9 (2017-03-21)

  • fix; fixed the dropdown's width restriction. Added a story for the dropdown with very lon (954c04c)
  • fix; maintainers for all the packages were added (261d00a)

1.1.8 (2017-03-21)

  • fix; get rid of the unnecessary dependencies (b14e5e9)

1.1.7 (2017-03-20)

  • fix; add missing dropdown menu typings (5d90718)
  • fix; add missing dropdown menu typings (26def3f)

1.1.6 (2017-03-08)

  • fix; dummy commit to force release (d45a0c9)

1.1.5 (2017-03-08)

  • fix; update menu to the latest version of droplist component and fix relevant issues afte (0e0a17a)

1.1.3 (2017-02-14)

  • fix; update ak-icon to @atlaskit/icon and fix dependencies (5589fbd)
  • fix; refactor stories to use // rather than http:// (a0826cf)
  • update item dependency (7609c1e)

1.1.2 (2017-02-09)

  • fix; avoiding binding render to this (40c9951)

1.1.1 (2017-02-07)

  • fix; updates package to use ak scoped packages (0bf5e14)