Menu

d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

f0bf5f838abd5, (opens new window) - Apply Volt entry-point and barrel-removal standards across these packages. Public exports now resolve directly to ./src/* implementations instead of intermediate ./src/entry-points/* re-exports.

Prefer published subpaths over the package root or internal entry-point paths:

If you imported through internal entry-point modules, switch to the public subpath:

cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

Types are now exclusively via the "types": "dist/types/index.d.ts" property.

e2485470e4078, (opens new window) - ButtonItem will convey its selected state to screen readers when isSelected. This is done through the aria-current attribute.

This change was previously behind a feature flag, which has been removed.

#200326, (opens new window) f520c88226d22, (opens new window) - Reimplementing these changes due to a revert.

ButtonItem will convey its selected state to screen readers when isSelected. This is done through the aria-current attribute.

This change is behind a feature flag, which will be removed in a future release.

#200012, (opens new window) 3b577f51b24b1, (opens new window) - ButtonItem will convey its selected state to screen readers when isSelected. This is done through the aria-current attribute.

This change is behind a feature flag, which will be removed in a future release.

#157531, (opens new window) dd1068010784d, (opens new window) - Migrated SkeletonItem and SkeletonHeadingItem components from @emotion/react to @compiled/react in order toimprove performance, align with the rest of the Atlaskit techstack, and support React 18 StreamingSSR.

Removed the cssFn prop from the SkeletonItem and SkeletonHeadingItem components. Customization can now be applied via the new xcss prop. This allows for safe/bounded style overrides.

Removed the following types related to the cssFn prop: CSSFn, StatelessCSSFn, ItemState.

#156707, (opens new window) 84d702274b2dd, (opens new window) - Migrated HeadingItem and Section components 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.

Removed the deprecated cssFn prop from the HeadingItem component, as this is not supported with @compiled/react.

#141631, (opens new window) 064a20b174719, (opens new window) - - Migrated ButtonItem, LinkItem and CustomItem components 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.

• Removed the deprecated cssFn prop from ButtonItem, LinkItem and CustomItem components.

Please note, in order to use this version of @atlaskit/menu, you will need to ensure that your bundler is configured to handle .css imports correctly.

Most bundlers come with built-in support for .css imports, so you may not need to do anything. If you are using a different bundler, please refer to the documentation for that bundler to understand how to handle .css imports. For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS, (opens new window).

#117363, (opens new window) 10a0f7f6c2027, (opens new window) - 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, (opens new window)

#127511, (opens new window) db30e29344013, (opens new window) - 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.

#41355, (opens new window) cd1c813da18, (opens new window) - 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.

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.

#30362, (opens new window) 93d761786d6, (opens new window) - [ux] Default spacing for all menu items has been changed from 20px inline padding to 16px.

Adds a new spacing prop to on MenuGroup. The prop can be used to control the content density of the component and its children.

Adds a new internal export SpacingContext. This should not be used directly.

#14777, (opens new window) 213bfd77e61, (opens new window) - The DOM structure of menu item components has been flattened. If you used CSS hacks (via className or cssFn) that targetted specific DOM nodes you may be broken.

Previously the structure looked like:

Now it looks like:

63888b03b49, (opens new window) - Internal refactor to align style declarations to common techstack.

#13864, (opens new window) 224028babd3, (opens new window) - Menu now uses the design system and emotion styling techstacks.

506282a89f2, (opens new window) - [ux] Menu items now have their text color set using currentColor instead of using colors directly off the palette.

58832848c98, (opens new window) - Instrumented menu with the new theming package, @atlaskit/tokens.

New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.

#3885, (opens new window) 6c525a8229, (opens new window) - 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.

[patch]1e7e54c20e, (opens new window):

Change imports to comply with Atlassian conventions- Updated dependencies 6b8e60827e, (opens new window):

Updated dependencies 449ef134b3, (opens new window):

Updated dependencies 167a55fd7a, (opens new window):

Updated dependencies 57c0487a02, (opens new window):

• @atlaskit/button@13.3.11
• @atlaskit/icon@20.1.1
• @atlaskit/avatar@17.1.10

[minor]7e408e4037, (opens new window):

BREAKING - renames elemBefore and elemAfter props to iconBefore and iconAfter on all item components.- [minor]41760ea4a6, (opens new window):

BREAKING: modifies custom item component to take only valid HTML attributes. This means wrapperClass is now known as className.- [minor]fb3ca3a3b2, (opens new window):

BREAKING - removes cssFn from section component, introduces overrides on section component to override heading css.

[patch]6453c8de48, (opens new window):

Exposes typescript types alongside components.- [patch]e4dde0ad13, (opens new window):

Fixes custom item not passing selected and disabled props to the customized component.- [patch]971e294b1e, (opens new window):

Corrects background color for disabled item to transparent.- [patch]684ee794d6, (opens new window):

Improves type safety with custom item by using TypeScript generics to pass on the custom component types to the parent.- [patch]286770886d, (opens new window):

Fixes item skeleton icon size to be slightly smaller than the real icon.- [patch]2c1b78027c, (opens new window):

Fixes skeleton heading and item ui.- Updated dependencies 168b5f90e5, (opens new window):

Updated dependencies 0c270847cb, (opens new window):

Updated dependencies 109004a98e, (opens new window):

Updated dependencies b9903e773a, (opens new window):

Updated dependencies aff1210e19, (opens new window):

• @atlaskit/docs@8.5.1
• @atlaskit/theme@9.5.3
• @atlaskit/button@13.3.10
• @atlaskit/icon-file-type@5.0.4

[patch]ed8d8dea65, (opens new window):

Clean-up import statements- [patch]db2f869556, (opens new window):

Corrects separator color.- [patch]81ea791176, (opens new window):

Adds overrides for title component.- [patch]e57c4aa96d, (opens new window):

Fixes vertical alignment for menu items in IE11.- [patch]89d35b919a, (opens new window):

Adds css function to skeleton components.- [patch]083cfbaeb4, (opens new window):

Improvement: Section now contains an optional title prop, which will be passed into an internal HeadingItem if provided. See the Section documentation for more details- [patch]46d95777ef, (opens new window):

Fixes width override in item skeleton component not being applied correctly.- [patch]9b264df34d, (opens new window):

Fixes users being able to select text and drag both the link and custom item components.- Updated dependencies 8c9e4f1ec6, (opens new window):

• @atlaskit/docs@8.5.0

[minor]7a6e5f6e3d, (opens new window):

Support forward ref on ButtonItem and LinkItem

• @atlaskit/docs@8.4.0
• @atlaskit/icon-file-type@5.0.3
• @atlaskit/icon-object@5.0.3
• @atlaskit/icon@20.1.0
• @atlaskit/avatar@17.1.9
• @atlaskit/button@13.3.9

[patch]1f9c4f974a, (opens new window):

Updates to @atlaskit/menu to support better custom components

• The description prop on items has been updated to take either string or JSX.Element allowing custom components such as links to be rendered
• A stateless CSSFn type has been exported to override styles in static components (such as <HeadingItem />)- Updated dependencies 0603860c07, (opens new window):
• @atlaskit/icon@20.0.2

[patch]6548261c9a, (opens new window):

Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a, (opens new window):

• @atlaskit/docs@8.3.2
• @atlaskit/visual-regression@0.1.9
• @atlaskit/avatar@17.1.7
• @atlaskit/button@13.3.7
• @atlaskit/icon-file-type@5.0.2
• @atlaskit/icon-object@5.0.2
• @atlaskit/icon@20.0.1
• @atlaskit/theme@9.5.1

[patch]77ffd08ea0, (opens new window):

Adds onClick prop to menu group component.- [patch]0ae6ce5d46, (opens new window):

Forwards ref of the button item component.

[patch]4ed951b8d8, (opens new window):

Fixes on click being fired when items were disabled.- [patch]e0e91e02a6, (opens new window):

Adds support for a cssFn prop that allows consumers to override the styles of ButtonItem and LinkItem.- Updated dependencies c0102a3ea2, (opens new window):

Updated dependencies b9dc265bc9, (opens new window):

• @atlaskit/icon@20.0.0
• @atlaskit/avatar@17.1.6
• @atlaskit/docs@8.3.1
• @atlaskit/button@13.3.6

[patch]ab0e00f203, (opens new window):

Fixes width being 100% on link and custom item. Adds export types to the main package.

• Fixes spacing between sections and items
• Introduces new props on MenuGroup to control min/max width and height.
• Introduces new PopupMenuGroup component which is variant of MenuGroup with sensible defaults.

[patch]4a223473c5, (opens new window):

Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 28f8f0e089, (opens new window):

Updated dependencies 82747f2922, (opens new window):

Updated dependencies 4a223473c5, (opens new window):

• @atlaskit/icon@19.1.0
• @atlaskit/theme@9.5.0
• @atlaskit/button@13.3.5

[minor]795a9503da, (opens new window):

Menu has had few styling fixes:

• BREAKING: Height for all Item components when there is no description defined now equals 40px.
• BREAKING: SkeletonHeadingItem & SkeletonItem now match the real components dimensions, this means they will no longer move things around when swapping them in & out.
• SkeletonHeadingItem has had its width slightly increased.
• Skeleton items now have a shimmer effect that you can opt into with the isShimmering prop.
• HeadingItem now has the correct font-weight.
• Item components description now has the correct font-size.

[patch]b7b0ead295, (opens new window):

Adds testId to all components - useful when wanting to do any automated tests that want to target these specific elements.- Updated dependencies 429925f854, (opens new window):

• @atlaskit/theme@9.4.0

[patch]9af7977678, (opens new window):

Fixing visual tweaks for top nav and menu spacing

[patch]3b785fa323, (opens new window):

Various UI fixes

[patch]ac6ba9b837, (opens new window):

Fix bug where Skeleton width wasn't being picked up. Allow skeleton heading width to be configurable to make API consistent with skeleton item

[minor]d85f0206b0, (opens new window):

added isSelected prop to Items

[patch]eaca633b3d, (opens new window):

Style ItemSkeletons and ItemHeadings. Add the ability to add icon or avatar and configure skeleton width.

[patch]ba4eed96dc, (opens new window):

Create Menu package and expose Item and LinkItem components